feat: Add previously selected with "Change" link

If previously selected is specified then the value
will be displayed with a "Change" link. This is
ideal for a multi step process when a user may
select a country before using entity search. If
they decide the country is wrong then they can
jump back to the step to change it.

src/entity-search/CannotFindDetails.jsx

@@ -17,7 +17,7 @@ const CannotFindDetails = ({ summary, actions, link }) => {
           {actions.map(text => <li key={uniqueId()}>{text}</li>)}
         </ul>
         <Link
-          href={link.url ? link.url : '#'}
+          href={link.url ? link.url : '#cannot-find'}
           onClick={link.onClick ? onLinkClick : null}
         >
           {link.text}

src/entity-search/EntitySearch.jsx

@@ -7,17 +7,26 @@ import { SPACING } from '@govuk-react/constants'
 import CannotFindDetails from './CannotFindDetails'
 import EntityList from './EntityList'
 import EntityFilters from './EntityFilters'
+import PreviouslySelected from './PreviouslySelected'
 import useFilter from './useFilter'
 
 const StyledButton = styled(Button)`
   margin-top: ${SPACING.SCALE_2};
 `
 StyledButton.displayName = 'Search'
 
-const EntitySearch = ({ onEntitySearch, entities, entityFilters, cannotFind }) => {
+const EntitySearch = ({
+  previouslySelected,
+  entityFilters,
+  onEntitySearch,
+  entities,
+  cannotFind,
+}) => {
   const { filters, setFilter } = useFilter()
   return (
     <>
+      {previouslySelected && <PreviouslySelected {...previouslySelected} />}
+
       <EntityFilters entityFilters={entityFilters} setFilter={setFilter} />
 
       {entities && entities.length ? (
@@ -48,6 +57,14 @@ EntitySearch.propTypes = {
       onClick: PropTypes.func,
     }).isRequired,
   }).isRequired,
+  previouslySelected: PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    onChangeClick: PropTypes.func.isRequired,
+  }),
+}
+
+EntitySearch.defaultProps = {
+  previouslySelected: null,
 }
 
 export default EntitySearch

src/entity-search/EntitySearch.stories.jsx

@@ -17,10 +17,11 @@ const apiEndpointWithParameters = new RegExp(`${apiEndpoint}.+`)
 mock.onPost(apiEndpoint).reply(200, companySearchFixture)
 mock.onPost(apiEndpointWithParameters).reply(200, companySearchFixture)
 
-const EntitySearchForStorybook = ({ cannotFindLink }) => {
+const EntitySearchForStorybook = ({ previouslySelected, cannotFindLink }) => {
   return (
     <EntitySearchWithDataProvider
       getEntities={dnbCompanySearchDataProvider(apiEndpoint)}
+      previouslySelected={previouslySelected}
       entityFilters={[
         [
           { label: 'Company name', key: 'search_term' },
@@ -43,6 +44,10 @@ const EntitySearchForStorybook = ({ cannotFindLink }) => {
 }
 
 EntitySearchForStorybook.propTypes = {
+  previouslySelected: {
+    text: PropTypes.string.isRequired,
+    onChangeClick: PropTypes.func.isRequired,
+  },
   cannotFindLink: {
     text: PropTypes.string.isRequired,
     url: PropTypes.string,
@@ -51,6 +56,7 @@ EntitySearchForStorybook.propTypes = {
 }
 
 EntitySearchForStorybook.defaultProps = {
+  previouslySelected: null,
   cannotFindLink: {
     text: 'I still cannot find the company',
     url: 'http://stillcannotfind.com',
@@ -99,3 +105,25 @@ storiesOf('EntitySearch', module)
       </Main>
     )
   })
+  .add('Data Hub company search with previously selected value and "Change" link', () => {
+    return (
+      <Main>
+        <GridRow>
+          <GridCol>
+            <img src={dataHubAddCompany} width="960" alt="Data Hub" />
+          </GridCol>
+        </GridRow>
+        <GridRow>
+          <GridCol style={{ margin: SPACING.SCALE_2 }}>
+            <H2 style={{ fontSize: '24px' }}>Find the company</H2>
+            <EntitySearchForStorybook
+              previouslySelected={{
+                text: 'Based in the UK',
+                onChangeClick: () => alert('Change previously selected'),
+              }}
+            />
+          </GridCol>
+        </GridRow>
+      </Main>
+    )
+  })

src/entity-search/EntitySearch.test.jsx

@@ -28,11 +28,15 @@ const flushPromises = () => {
   })
 }
 
-const wrapEntitySearch = (cannotFindLink = {
-  url: 'http://stillcannotfind.com',
-  text: 'still cannot find',
-}) => {
+const wrapEntitySearch = ({
+  previouslySelected,
+  cannotFindLink = {
+    url: 'http://stillcannotfind.com',
+    text: 'still cannot find',
+  },
+} = {}) => {
   return mount(<EntitySearchWithDataProvider
+    previouslySelected={previouslySelected}
     getEntities={getEntities(API_ENDPOINT)}
     entityFilters={[
       [
@@ -127,8 +131,10 @@ describe('EntitySearch', () => {
       preventDefaultMock = jest.fn()
 
       wrappedEntitySearch = wrapEntitySearch({
-        text: 'still cannot find',
-        onClick: onCannotFindLinkClick,
+        cannotFindLink: {
+          text: 'still cannot find',
+          onClick: onCannotFindLinkClick,
+        },
       })
 
       wrappedEntitySearch.find('Search').simulate('click')
@@ -138,7 +144,7 @@ describe('EntitySearch', () => {
       wrappedEntitySearch.update()
 
       wrappedEntitySearch
-        .find('[href="#"]')
+        .find('[href="#cannot-find"]')
         .at(1)
         .simulate('click', { preventDefault: preventDefaultMock })
     })
@@ -155,4 +161,45 @@ describe('EntitySearch', () => {
       expect(onCannotFindLinkClick.mock.calls.length).toEqual(1)
     })
   })
+
+  describe('when there is a previously selected "Change" link which is clicked', () => {
+    let wrappedEntitySearch
+    let onChangeClick
+    let preventDefaultMock
+
+    beforeAll(async () => {
+      onChangeClick = jest.fn()
+      preventDefaultMock = jest.fn()
+
+      wrappedEntitySearch = wrapEntitySearch({
+        previouslySelected: {
+          onChangeClick,
+          text: 'previously selected',
+        },
+      })
+
+      wrappedEntitySearch.find('Search').simulate('click')
+
+      await act(flushPromises)
+
+      wrappedEntitySearch.update()
+
+      wrappedEntitySearch
+        .find('[href="#previously-selected"]')
+        .at(1)
+        .simulate('click', { preventDefault: preventDefaultMock })
+    })
+
+    test('should render the component', async () => {
+      expect(wrappedEntitySearch.debug()).toMatchSnapshot()
+    })
+
+    test('should prevent the default link action', async () => {
+      expect(preventDefaultMock.mock.calls.length).toEqual(1)
+    })
+
+    test('should call the onChangeClick event', async () => {
+      expect(onChangeClick.mock.calls.length).toEqual(1)
+    })
+  })
 })

src/entity-search/PreviouslySelected.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'govuk-react'
+import styled from 'styled-components'
+import { SPACING } from '@govuk-react/constants'
+
+const StyledLink = styled(Link)`
+  margin-left: ${SPACING.SCALE_2};
+`
+
+const PreviouslySelected = ({ text, onChangeClick }) => {
+  const onClick = (e) => {
+    e.preventDefault()
+    onChangeClick()
+  }
+
+  return (
+    <p>
+      {text}
+      <StyledLink href="#previously-selected" onClick={onClick}>Change</StyledLink>
+    </p>
+  )
+}
+
+PreviouslySelected.propTypes = {
+  text: PropTypes.string.isRequired,
+  onChangeClick: PropTypes.func.isRequired,
+}
+
+export default PreviouslySelected