fix frontend console errors

src/apps/companies/apps/add-company/client/CompanySearchStep.jsx

@@ -88,8 +88,8 @@ function CompanySearchStep({
 }
 
 CompanySearchStep.propTypes = {
-  countryName: PropTypes.string.isRequired,
-  countryIsoCode: PropTypes.string.isRequired,
+  countryName: PropTypes.string,
+  countryIsoCode: PropTypes.string,
   csrfToken: PropTypes.string.isRequired,
 }
 

src/apps/companies/apps/business-details/client/SectionAbout.jsx

@@ -36,7 +36,11 @@ const SectionAbout = ({ company, isDnbCompany, isArchived }) => (
     caption={`About ${company.name}`}
     data-test="aboutDetailsContainer"
     actions={
-      !isArchived && <Link href={urls.companies.edit(company.id)}>Edit</Link>
+      !isArchived && (
+        <Link href={urls.companies.edit(company.id)} key={company.id}>
+          Edit
+        </Link>
+      )
     }
   >
     <SummaryTable.Row heading="VAT number" hideWhenEmpty={true}>

src/apps/companies/apps/business-details/client/SectionAddresses.jsx

@@ -54,7 +54,10 @@ const SectionAddresses = ({ company, isDnbCompany, isArchived }) => {
       actions={
         !isDnbCompany &&
         !isArchived && (
-          <Link href={`${urls.companies.edit(company.id)}#field-address`}>
+          <Link
+            href={`${urls.companies.edit(company.id)}#field-address`}
+            key={company.id}
+          >
             Edit
           </Link>
         )

src/apps/companies/apps/business-details/client/SectionHierarchy.jsx

@@ -210,7 +210,10 @@ const SectionHierarchy = ({
       actions={
         !isArchived &&
         showDataHubHierarchy && (
-          <Link href={`${companies.edit(company.id)}#field-headquarter_type`}>
+          <Link
+            href={`${companies.edit(company.id)}#field-headquarter_type`}
+            key={company.id}
+          >
             Edit
           </Link>
         )

src/apps/companies/apps/business-details/client/SectionOneList.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 import React from 'react'
 import PropTypes from 'prop-types'
 import Link from '@govuk-react/link'
@@ -20,8 +21,8 @@ const getLocation = (manager) => {
   return manager.ditTeam.ukRegion
     ? manager.ditTeam.ukRegion.name
     : manager.ditTeam.country
-      ? manager.ditTeam.country.name
-      : '-'
+    ? manager.ditTeam.country.name
+    : '-'
 }
 
 const SectionOneList = ({ company, isArchived, isDnbCompany }) =>
@@ -33,7 +34,9 @@ const SectionOneList = ({ company, isArchived, isDnbCompany }) =>
         actions={
           !isArchived &&
           !isDnbCompany && (
-            <Link href={urls.companies.edit(company.id)}>Edit</Link>
+            <Link href={urls.companies.edit(company.id)} key={company.id}>
+              Edit
+            </Link>
           )
         }
       >

src/apps/companies/apps/business-details/client/SectionRegion.jsx

@@ -12,7 +12,10 @@ const SectionRegion = ({ company, isArchived }) =>
       data-test="regionDetailsContainer"
       actions={
         !isArchived && (
-          <Link href={`${urls.companies.edit(company.id)}#uk_region`}>
+          <Link
+            href={`${urls.companies.edit(company.id)}#uk_region`}
+            key={company.id}
+          >
             Edit
           </Link>
         )

src/apps/companies/apps/business-details/client/SectionSector.jsx

@@ -11,7 +11,12 @@ const SectionSector = ({ company, isArchived }) => (
     data-test="sectorDetailsContainer"
     actions={
       !isArchived && (
-        <Link href={`${urls.companies.edit(company.id)}#sector`}>Edit</Link>
+        <Link
+          href={`${urls.companies.edit(company.id)}#sector`}
+          key={company.id}
+        >
+          Edit
+        </Link>
       )
     }
   >

src/apps/companies/apps/company-overview/overview-table-cards/AccountManagementCard.jsx

@@ -94,8 +94,8 @@ const AccountManagementCard = ({ company }) => {
         {buildCellContents(
           viewablePrimaryContacts.length > 0,
           <StyledAddressList>
-            {viewablePrimaryContacts.map((contact) => (
-              <li>
+            {viewablePrimaryContacts.map((contact, index) => (
+              <li key={`${contact.id}-${index}`}>
                 <Link
                   data-test={`contact-${contact.id}-link`}
                   href={urls.contacts.details(contact.id)}

src/apps/companies/apps/company-overview/overview-table-cards/ActiveInvestmentProjectsCard.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import { Link, Table } from 'govuk-react'
 import styled from 'styled-components'
 import { FONT_SIZE, FONT_WEIGHTS } from '@govuk-react/constants'
@@ -92,7 +92,7 @@ const LikelihoodToLand = ({ likelihood, investmentId, investmentName }) => (
 
 const ActiveInvestmentList = ({ upcomingActiveInvestments, companyId }) =>
   upcomingActiveInvestments.map((activeInvestment) => (
-    <>
+    <Fragment key={activeInvestment.id}>
       <StyledTableRow>
         <StyledActiveInvestmentHeadingTableCell colSpan={2}>
           <StyledActiveInvestmentSubject>
@@ -175,7 +175,7 @@ const ActiveInvestmentList = ({ upcomingActiveInvestments, companyId }) =>
           )}
         </StyledActiveInvestmentTableBottomCell>
       </StyledActiveInvestmentTableBottomRow>
-    </>
+    </Fragment>
   ))
 
 const ActiveInvestmentProjectsCard = ({

src/apps/companies/apps/company-overview/overview-table-cards/ActivityCard.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import { Link } from 'govuk-react'
 import PropTypes from 'prop-types'
 import camelCase from 'camelcase'
@@ -31,47 +31,43 @@ const ActivityCard = (props) => {
   const feedTypeText = camelCase(feedType, { pascalCase: true })
 
   return (
-    <div>
-      <StyledSummaryTable
-        caption={
-          <>
-            {feedTypeText} activity
-            <ActivityStyledLink
-              href={companies.interactions.create(company.id)}
-            >
-              Add interaction
-            </ActivityStyledLink>
-          </>
-        }
-        data-test={`${feedTypeText} activityCardContainer`}
-      >
-        <StyledTableRow>
-          <StyledTableCell colspan={2}>
-            <ActivityFeedApp
-              actions={!company.archived && CompanyActivityFeed.actions}
-              isGlobalUltimate={company.isGlobalUltimate}
-              dnbHierarchyCount={0}
-              apiEndpoint={companies.activity.data(company.id)}
-              companyIsArchived={company.archived}
-              isOverview={true}
-              numberOfItems={numberOfItems}
-              feedType={feedType}
-              activityType={[FILTER_KEYS.dataHubActivity]}
-            />
-          </StyledTableCell>
-        </StyledTableRow>
-        <StyledTableRow>
-          <StyledLastTableCell colSpan={2}>
-            <Link
-              href={companies.activity.index(company.id)}
-              data-test="activity-page-link"
-            >
-              View all activities
-            </Link>
-          </StyledLastTableCell>
-        </StyledTableRow>
-      </StyledSummaryTable>
-    </div>
+    <StyledSummaryTable
+      caption={
+        <Fragment key={company.id}>
+          {feedTypeText} activity
+          <ActivityStyledLink href={companies.interactions.create(company.id)}>
+            Add interaction
+          </ActivityStyledLink>
+        </Fragment>
+      }
+      data-test={`${feedTypeText} activityCardContainer`}
+    >
+      <StyledTableRow>
+        <StyledTableCell colspan={2}>
+          <ActivityFeedApp
+            actions={!company.archived && CompanyActivityFeed.actions}
+            isGlobalUltimate={company.isGlobalUltimate}
+            dnbHierarchyCount={0}
+            apiEndpoint={companies.activity.data(company.id)}
+            companyIsArchived={company.archived}
+            isOverview={true}
+            numberOfItems={numberOfItems}
+            feedType={feedType}
+            activityType={[FILTER_KEYS.dataHubActivity]}
+          />
+        </StyledTableCell>
+      </StyledTableRow>
+      <StyledTableRow>
+        <StyledLastTableCell colSpan={2}>
+          <Link
+            href={companies.activity.index(company.id)}
+            data-test="activity-page-link"
+          >
+            View all activities
+          </Link>
+        </StyledLastTableCell>
+      </StyledTableRow>
+    </StyledSummaryTable>
   )
 }
 

src/apps/companies/apps/exports/client/ExportsIndex.jsx

@@ -38,7 +38,12 @@ const ExportsIndex = ({ companyId, returnUrl }) => {
             caption="Exports"
             actions={
               !company.archived && (
-                <Link href={urls.companies.exports.edit(companyId)}>Edit</Link>
+                <Link
+                  href={urls.companies.exports.edit(companyId)}
+                  key={companyId}
+                >
+                  Edit
+                </Link>
               )
             }
           >
@@ -87,8 +92,8 @@ const ExportsIndex = ({ companyId, returnUrl }) => {
             repeatedly tested their model against a subset of known-good data to
             improve it. The scores are as follows:
             <ol>
-              {Object.values(exportPotentialLabels).map((category) => (
-                <li key={category.text}>
+              {Object.values(exportPotentialLabels).map((category, index) => (
+                <li key={`${category.text}-${index}`}>
                   <strong>{category.text}</strong> - {category.description}
                 </li>
               ))}
@@ -106,6 +111,7 @@ const ExportsIndex = ({ companyId, returnUrl }) => {
                 <Link
                   href={urls.companies.exports.editCountries(companyId)}
                   data-test-id="edit-export-countries"
+                  key={companyId}
                 >
                   Edit
                 </Link>

src/apps/interactions/apps/details-form/client/InteractionDetailsForm.jsx

@@ -194,7 +194,6 @@ InteractionDetailsForm.propTypes = {
   contactId: PropTypes.string,
   interactionId: PropTypes.string,
   user: PropTypes.object,
-  ...StepInteractionDetails.propTypes,
 }
 
 export default connect(({ values, ...state }) => ({

src/client/components/ActivityFeed/CollectionList/filters.js

@@ -26,7 +26,7 @@ export const buildSelectedFilters = (
     })),
   },
   createdByOthers: {
-    queryParams: 'createdByOthers',
+    queryParam: 'createdByOthers',
     options: buildOptionsFilter({
       options: [
         {

src/client/components/ActivityFeed/activities/card/item-renderers/ActivityOverviewSummary.jsx

@@ -10,7 +10,10 @@ export default class ActivityOverviewSummary extends React.PureComponent {
     date: PropTypes.string,
     kind: PropTypes.string,
     subject: PropTypes.node,
-    summary: PropTypes.string,
+    summary: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.any),
+    ]),
   }
 
   render() {

src/client/components/CollectionList/CollectionItem.jsx

@@ -138,7 +138,7 @@ const CollectionItem = ({
 CollectionItem.propTypes = {
   headingUrl: PropTypes.string,
   headingText: PropTypes.string.isRequired,
-  subheading: PropTypes.string,
+  subheading: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   badges: PropTypes.arrayOf(
     PropTypes.shape({
       text: PropTypes.string,

src/client/components/CollectionList/index.jsx

@@ -142,7 +142,7 @@ CollectionList.propTypes = {
   }),
   maxItemsToPaginate: PropTypes.number,
   maxItemsToDownload: PropTypes.number,
-  onPageClick: PropTypes.func.isRequired,
+  onPageClick: PropTypes.func,
   addItemUrl: PropTypes.string,
   metadataRenderer: PropTypes.func,
   footerRenderer: PropTypes.func,

src/client/components/CompanyTabbedLocalNavigation/CompanyInvestmentTab.jsx

@@ -66,9 +66,9 @@ const investmentNavItems = (companyId, isLCP) => [
   },
 ]
 
-const CompanyInvestmentTab = ({ navItem, index }) =>
+const CompanyInvestmentTab = ({ navItem }) =>
   navItem && (
-    <StyledTabListItem key={`tab-${index}`}>
+    <StyledTabListItem>
       <StyledTabAnchorTag
         selected={navItem.isActive}
         href={navItem.url}
@@ -90,7 +90,7 @@ const CompanyInvestmentSubNavigation = ({ companyId, isLCP }) => (
       >
         <StyledUnorderedList data-test="tabbedLocalNavList">
           {investmentNavItems(companyId, isLCP).map((t, index) => (
-            <CompanyInvestmentTab navItem={t} index={index} />
+            <CompanyInvestmentTab navItem={t} index={index} key={index} />
           ))}
         </StyledUnorderedList>
       </StyledNav>

src/client/components/EntityList/EntityListItem.jsx

@@ -64,8 +64,8 @@ const EntityListItem = ({ id, onEntityClick, data, text, heading, meta }) => {
   return (
     <StyledEntity
       key={`entity_${id}`}
-      tabIndex={isClickable && 0}
-      role={isClickable && 'button'}
+      tabIndex={isClickable ? 0 : undefined}
+      role={isClickable ? 'button' : undefined}
       onClick={() => isClickable && onEntityClick(data)}
       onKeyDown={(e) =>
         isClickable && e.keyCode === KEY_ENTER && onEntityClick(data)

src/client/components/FilteredCollectionList/index.jsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/no-array-index-key */
 // this is because there isn't necessarily a unique id to use as the key
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { Route } from 'react-router-dom'
+import { Route, useHistory, useLocation } from 'react-router-dom'
 import { GridRow, GridCol } from 'govuk-react'
 import { isEmpty } from 'lodash'
 import qs from 'qs'
@@ -93,21 +93,28 @@ const FilteredCollectionList = ({
   useReactRouter = false,
   collectionItemTemplate = collectionItemTemplateDefault,
 }) => {
+  const history = useHistory()
+  const location = useLocation()
+
   const totalPages = Math.ceil(
     Math.min(count, maxItemsToPaginate) / itemsPerPage
   )
+  const qsParams = qs.parse(location.search.slice(1))
+
+  useEffect(() => {
+    if (defaultQueryParams && isEmpty(qsParams)) {
+      history.push({
+        search: qs.stringify({
+          ...defaultQueryParams,
+        }),
+      })
+    }
+  }, [])
+
   return (
     <Route>
-      {({ history, location }) => {
-        const qsParams = qs.parse(location.search.slice(1))
+      {() => {
         const initialPage = getPageNumber(qsParams)
-        if (defaultQueryParams && isEmpty(qsParams)) {
-          history.push({
-            search: qs.stringify({
-              ...defaultQueryParams,
-            }),
-          })
-        }
         return (
           <GridRow data-test="collection-list">
             {children}
@@ -144,8 +151,8 @@ const FilteredCollectionList = ({
                   {() =>
                     isComplete && (
                       <ol aria-live="polite">
-                        {results.map((item) => (
-                          <Analytics>
+                        {results.map((item, index) => (
+                          <Analytics key={`${item.id}-${index}`}>
                             {(pushAnalytics) =>
                               collectionItemTemplate(
                                 item,