From cb82eaefdc5a6754ca425b266418ea23e8e6b54e Mon Sep 17 00:00:00 2001
From: Lee Wilson <lee.wilson@coolestbananas.co.uk>
Date: Mon, 19 Aug 2019 14:02:52 +0100
Subject: [PATCH] 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       |   2 +-
 src/entity-search/EntitySearch.jsx            |  19 +-
 src/entity-search/EntitySearch.stories.jsx    |  30 +-
 src/entity-search/EntitySearch.test.jsx       |  61 ++-
 src/entity-search/PreviouslySelected.jsx      |  30 ++
 .../__snapshots__/EntitySearch.test.jsx.snap  | 357 ++++++++++++++++--
 6 files changed, 456 insertions(+), 43 deletions(-)
 create mode 100644 src/entity-search/PreviouslySelected.jsx

diff --git a/src/entity-search/CannotFindDetails.jsx b/src/entity-search/CannotFindDetails.jsx
index 0cca6c58..ffc0e1a8 100644
--- a/src/entity-search/CannotFindDetails.jsx
+++ b/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}
diff --git a/src/entity-search/EntitySearch.jsx b/src/entity-search/EntitySearch.jsx
index 19f0a1fa..0428dbee 100644
--- a/src/entity-search/EntitySearch.jsx
+++ b/src/entity-search/EntitySearch.jsx
@@ -7,6 +7,7 @@ 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)`
@@ -14,10 +15,18 @@ const StyledButton = styled(Button)`
 `
 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
diff --git a/src/entity-search/EntitySearch.stories.jsx b/src/entity-search/EntitySearch.stories.jsx
index 70e72827..0fa94635 100644
--- a/src/entity-search/EntitySearch.stories.jsx
+++ b/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>
+    )
+  })
diff --git a/src/entity-search/EntitySearch.test.jsx b/src/entity-search/EntitySearch.test.jsx
index 2b9be77e..9039d101 100644
--- a/src/entity-search/EntitySearch.test.jsx
+++ b/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)
+    })
+  })
 })
diff --git a/src/entity-search/PreviouslySelected.jsx b/src/entity-search/PreviouslySelected.jsx
new file mode 100644
index 00000000..b5d7338c
--- /dev/null
+++ b/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
diff --git a/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap b/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap
index e7f44004..a7efa540 100644
--- a/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap
+++ b/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EntitySearch when initially loading the entity search component should render the component without entities 1`] = `
-"<EntitySearchWithDataProvider getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
-  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
     <EntityFilters entityFilters={{...}} setFilter={[Function: setFilter]}>
       <styled.div>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
@@ -113,10 +113,10 @@ exports[`EntitySearch when initially loading the entity search component should
     </EntityFilters>
     <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
       <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
-        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\">
-          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\">
-            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\" forwardedComponent={{...}} forwardedRef={{...}}>
-              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-iujRgT bnRApC sc-VigVT krXvSZ\\">
+        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-GMQeP azytY sc-VigVT krXvSZ\\">
                 Search
               </button>
             </StyledComponent>
@@ -129,8 +129,8 @@ exports[`EntitySearch when initially loading the entity search component should
 `;
 
 exports[`EntitySearch when the "Search" button has been clicked should render the component with entities 1`] = `
-"<EntitySearchWithDataProvider getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
-  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
     <EntityFilters entityFilters={{...}} setFilter={[Function: setFilter]}>
       <styled.div>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
@@ -392,10 +392,10 @@ exports[`EntitySearch when the "Search" button has been clicked should render th
     </CannotFindDetails>
     <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
       <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
-        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\">
-          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\">
-            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\" forwardedComponent={{...}} forwardedRef={{...}}>
-              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-iujRgT bnRApC sc-VigVT krXvSZ\\">
+        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-GMQeP azytY sc-VigVT krXvSZ\\">
                 Search
               </button>
             </StyledComponent>
@@ -408,8 +408,8 @@ exports[`EntitySearch when the "Search" button has been clicked should render th
 `;
 
 exports[`EntitySearch when the company name filter is applied should render the component with filtered entities 1`] = `
-"<EntitySearchWithDataProvider getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
-  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
     <EntityFilters entityFilters={{...}} setFilter={[Function: setFilter]}>
       <styled.div>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
@@ -631,10 +631,10 @@ exports[`EntitySearch when the company name filter is applied should render the
     </CannotFindDetails>
     <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
       <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
-        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\">
-          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\">
-            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\" forwardedComponent={{...}} forwardedRef={{...}}>
-              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-iujRgT bnRApC sc-VigVT krXvSZ\\">
+        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-GMQeP azytY sc-VigVT krXvSZ\\">
                 Search
               </button>
             </StyledComponent>
@@ -647,8 +647,8 @@ exports[`EntitySearch when the company name filter is applied should render the
 `;
 
 exports[`EntitySearch when the company postcode filter is applied should render the component with filtered entities 1`] = `
-"<EntitySearchWithDataProvider getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
-  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
     <EntityFilters entityFilters={{...}} setFilter={[Function: setFilter]}>
       <styled.div>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
@@ -870,10 +870,10 @@ exports[`EntitySearch when the company postcode filter is applied should render
     </CannotFindDetails>
     <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
       <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
-        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\">
-          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\">
-            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\" forwardedComponent={{...}} forwardedRef={{...}}>
-              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-iujRgT bnRApC sc-VigVT krXvSZ\\">
+        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-GMQeP azytY sc-VigVT krXvSZ\\">
                 Search
               </button>
             </StyledComponent>
@@ -886,8 +886,8 @@ exports[`EntitySearch when the company postcode filter is applied should render
 `;
 
 exports[`EntitySearch when the the cannot find link has a callback should render the component 1`] = `
-"<EntitySearchWithDataProvider getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
-  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
     <EntityFilters entityFilters={{...}} setFilter={[Function: setFilter]}>
       <styled.div>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
@@ -1131,9 +1131,9 @@ exports[`EntitySearch when the the cannot find link has a callback should render
                           action 2
                         </li>
                       </ul>
-                      <styled.a href=\\"#\\" onClick={[Function: onLinkClick]} muted={false} textColour={false} noVisitedState={false}>
-                        <StyledComponent href=\\"#\\" onClick={[Function: onLinkClick]} muted={false} textColour={false} noVisitedState={false} forwardedComponent={{...}} forwardedRef={{...}}>
-                          <a href=\\"#\\" onClick={[Function: onLinkClick]} muted={false} className=\\"sc-bwzfXH VXMCV\\">
+                      <styled.a href=\\"#cannot-find\\" onClick={[Function: onLinkClick]} muted={false} textColour={false} noVisitedState={false}>
+                        <StyledComponent href=\\"#cannot-find\\" onClick={[Function: onLinkClick]} muted={false} textColour={false} noVisitedState={false} forwardedComponent={{...}} forwardedRef={{...}}>
+                          <a href=\\"#cannot-find\\" onClick={[Function: onLinkClick]} muted={false} className=\\"sc-bwzfXH VXMCV\\">
                             still cannot find
                           </a>
                         </StyledComponent>
@@ -1149,10 +1149,301 @@ exports[`EntitySearch when the the cannot find link has a callback should render
     </CannotFindDetails>
     <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
       <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
-        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\">
-          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\">
-            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-iujRgT bnRApC\\" forwardedComponent={{...}} forwardedRef={{...}}>
-              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-iujRgT bnRApC sc-VigVT krXvSZ\\">
+        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-GMQeP azytY sc-VigVT krXvSZ\\">
+                Search
+              </button>
+            </StyledComponent>
+          </styled.button>
+        </ForwardRef>
+      </StyledComponent>
+    </Search>
+  </EntitySearch>
+</EntitySearchWithDataProvider>"
+`;
+
+exports[`EntitySearch when there is a previously selected "Change" link which is clicked should render the component 1`] = `
+"<EntitySearchWithDataProvider previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+    <PreviouslySelected onChangeClick={[Function: mockConstructor]} text=\\"previously selected\\">
+      <p>
+        previously selected
+        <Styled(styled.a) href=\\"#previously-selected\\" onClick={[Function: onClick]} muted={false} textColour={false} noVisitedState={false}>
+          <StyledComponent href=\\"#previously-selected\\" onClick={[Function: onClick]} muted={false} textColour={false} noVisitedState={false} forwardedComponent={{...}} forwardedRef={{...}}>
+            <a href=\\"#previously-selected\\" onClick={[Function: onClick]} muted={false} className=\\"sc-bwzfXH sc-iujRgT ftaqoV\\">
+              Change
+            </a>
+          </StyledComponent>
+        </Styled(styled.a)>
+      </p>
+    </PreviouslySelected>
+    <EntityFilters entityFilters={{...}} setFilter={[Function: setFilter]}>
+      <styled.div>
+        <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+          <div className=\\"sc-bAeIUo fWSbPZ\\">
+            <EntityFilterRow filterRow={{...}} setFilter={[Function: setFilter]}>
+              <Styled(GridRow)>
+                <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                  <GridRow className=\\"sc-bMVAic AOkMI\\">
+                    <styled.div className=\\"sc-bMVAic AOkMI\\">
+                      <StyledComponent className=\\"sc-bMVAic AOkMI\\" forwardedComponent={{...}} forwardedRef={{...}}>
+                        <div className=\\"sc-bMVAic AOkMI sc-hzDkRC hNOsPM\\">
+                          <GridCol setWidth={[undefined]} columnOneQuarter={false} columnOneThird={false} columnOneHalf={false} columnTwoThirds={false} columnThreeQuarters={false} columnFull={false} setDesktopWidth={[undefined]}>
+                            <styled.div setWidth={[undefined]} columnOneQuarter={false} columnOneThird={false} columnOneHalf={false} columnTwoThirds={false} columnThreeQuarters={false} columnFull={false} setDesktopWidth={[undefined]}>
+                              <StyledComponent setWidth={[undefined]} columnOneQuarter={false} columnOneThird={false} columnOneHalf={false} columnTwoThirds={false} columnThreeQuarters={false} columnFull={false} setDesktopWidth={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+                                <div className=\\"sc-bRBYWo cfvpGy\\">
+                                  <EntityFilter filter={{...}} setFilter={[Function: setFilter]}>
+                                    <InputField onChange={[Function: onChange]} input={{...}} hint={[undefined]} meta={{...}}>
+                                      <Label onChange={[Function: onChange]} error={false}>
+                                        <styled.label onChange={[Function: onChange]} error={false}>
+                                          <StyledComponent onChange={[Function: onChange]} error={false} forwardedComponent={{...}} forwardedRef={{...}}>
+                                            <label onChange={[Function: onChange]} className=\\"sc-ckVGcZ jNBPWj\\">
+                                              <LabelText>
+                                                <styled.span>
+                                                  <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                                                    <span className=\\"sc-kGXeez fmtdbL\\">
+                                                      Company name
+                                                    </span>
+                                                  </StyledComponent>
+                                                </styled.span>
+                                              </LabelText>
+                                              <Input error={[undefined]} name=\\"search_term\\" type=\\"text\\">
+                                                <styled.input type=\\"text\\" error={[undefined]} name=\\"search_term\\">
+                                                  <StyledComponent type=\\"text\\" error={[undefined]} name=\\"search_term\\" forwardedComponent={{...}} forwardedRef={{...}}>
+                                                    <input type=\\"text\\" name=\\"search_term\\" className=\\"sc-dxgOiQ KJcFQ\\" />
+                                                  </StyledComponent>
+                                                </styled.input>
+                                              </Input>
+                                            </label>
+                                          </StyledComponent>
+                                        </styled.label>
+                                      </Label>
+                                    </InputField>
+                                  </EntityFilter>
+                                </div>
+                              </StyledComponent>
+                            </styled.div>
+                          </GridCol>
+                        </div>
+                      </StyledComponent>
+                    </styled.div>
+                  </GridRow>
+                </StyledComponent>
+              </Styled(GridRow)>
+            </EntityFilterRow>
+            <EntityFilterRow filterRow={{...}} setFilter={[Function: setFilter]}>
+              <Styled(GridRow)>
+                <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                  <GridRow className=\\"sc-bMVAic AOkMI\\">
+                    <styled.div className=\\"sc-bMVAic AOkMI\\">
+                      <StyledComponent className=\\"sc-bMVAic AOkMI\\" forwardedComponent={{...}} forwardedRef={{...}}>
+                        <div className=\\"sc-bMVAic AOkMI sc-hzDkRC hNOsPM\\">
+                          <GridCol setWidth=\\"one-half\\" columnOneQuarter={false} columnOneThird={false} columnOneHalf={false} columnTwoThirds={false} columnThreeQuarters={false} columnFull={false} setDesktopWidth={[undefined]}>
+                            <styled.div setWidth=\\"one-half\\" columnOneQuarter={false} columnOneThird={false} columnOneHalf={false} columnTwoThirds={false} columnThreeQuarters={false} columnFull={false} setDesktopWidth={[undefined]}>
+                              <StyledComponent setWidth=\\"one-half\\" columnOneQuarter={false} columnOneThird={false} columnOneHalf={false} columnTwoThirds={false} columnThreeQuarters={false} columnFull={false} setDesktopWidth={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+                                <div className=\\"sc-bRBYWo cROHUG\\">
+                                  <EntityFilter filter={{...}} setFilter={[Function: setFilter]}>
+                                    <InputField onChange={[Function: onChange]} input={{...}} hint={[undefined]} meta={{...}}>
+                                      <Label onChange={[Function: onChange]} error={false}>
+                                        <styled.label onChange={[Function: onChange]} error={false}>
+                                          <StyledComponent onChange={[Function: onChange]} error={false} forwardedComponent={{...}} forwardedRef={{...}}>
+                                            <label onChange={[Function: onChange]} className=\\"sc-ckVGcZ jNBPWj\\">
+                                              <LabelText>
+                                                <styled.span>
+                                                  <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                                                    <span className=\\"sc-kGXeez fmtdbL\\">
+                                                      Company postcode
+                                                    </span>
+                                                  </StyledComponent>
+                                                </styled.span>
+                                              </LabelText>
+                                              <Input error={[undefined]} name=\\"address_postcode\\" type=\\"text\\">
+                                                <styled.input type=\\"text\\" error={[undefined]} name=\\"address_postcode\\">
+                                                  <StyledComponent type=\\"text\\" error={[undefined]} name=\\"address_postcode\\" forwardedComponent={{...}} forwardedRef={{...}}>
+                                                    <input type=\\"text\\" name=\\"address_postcode\\" className=\\"sc-dxgOiQ KJcFQ\\" />
+                                                  </StyledComponent>
+                                                </styled.input>
+                                              </Input>
+                                            </label>
+                                          </StyledComponent>
+                                        </styled.label>
+                                      </Label>
+                                    </InputField>
+                                  </EntityFilter>
+                                </div>
+                              </StyledComponent>
+                            </styled.div>
+                          </GridCol>
+                        </div>
+                      </StyledComponent>
+                    </styled.div>
+                  </GridRow>
+                </StyledComponent>
+              </Styled(GridRow)>
+            </EntityFilterRow>
+          </div>
+        </StyledComponent>
+      </styled.div>
+    </EntityFilters>
+    <EntityList entities={{...}}>
+      <styled.ol>
+        <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+          <ol className=\\"sc-cmthru byZYSx\\">
+            <styled.li>
+              <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                <li className=\\"sc-hMFtBS hNLTdh\\">
+                  <styled.div>
+                    <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                      <div className=\\"sc-cLQEGU kGDauh\\">
+                        <Styled(H3)>
+                          <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                            <H3 className=\\"sc-gqPbQI gHietI\\">
+                              <Heading as=\\"h3\\" size=\\"MEDIUM\\" className=\\"sc-gqPbQI gHietI\\" level={[undefined]}>
+                                <styled.h1 as=\\"h3\\" size=\\"MEDIUM\\" className=\\"sc-gqPbQI gHietI\\">
+                                  <StyledComponent as=\\"h3\\" size=\\"MEDIUM\\" className=\\"sc-gqPbQI gHietI\\" forwardedComponent={{...}} forwardedRef={{...}}>
+                                    <h3 size=\\"MEDIUM\\" className=\\"sc-gqPbQI gHietI sc-cMljjf kCLKvB\\">
+                                      Some company name
+                                    </h3>
+                                  </StyledComponent>
+                                </styled.h1>
+                              </Heading>
+                            </H3>
+                          </StyledComponent>
+                        </Styled(H3)>
+                        <styled.div>
+                          <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                            <div className=\\"sc-hORach kZtTta\\">
+                              <span>
+                                Address
+                                : 
+                              </span>
+                              <span>
+                                123 Fake Street, Brighton, BN1 4SE
+                              </span>
+                            </div>
+                          </StyledComponent>
+                        </styled.div>
+                      </div>
+                    </StyledComponent>
+                  </styled.div>
+                </li>
+              </StyledComponent>
+            </styled.li>
+            <styled.li>
+              <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                <li className=\\"sc-hMFtBS hNLTdh\\">
+                  <styled.div>
+                    <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                      <div className=\\"sc-cLQEGU kGDauh\\">
+                        <Styled(H3)>
+                          <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                            <H3 className=\\"sc-gqPbQI gHietI\\">
+                              <Heading as=\\"h3\\" size=\\"MEDIUM\\" className=\\"sc-gqPbQI gHietI\\" level={[undefined]}>
+                                <styled.h1 as=\\"h3\\" size=\\"MEDIUM\\" className=\\"sc-gqPbQI gHietI\\">
+                                  <StyledComponent as=\\"h3\\" size=\\"MEDIUM\\" className=\\"sc-gqPbQI gHietI\\" forwardedComponent={{...}} forwardedRef={{...}}>
+                                    <h3 size=\\"MEDIUM\\" className=\\"sc-gqPbQI gHietI sc-cMljjf kCLKvB\\">
+                                      Some other company
+                                    </h3>
+                                  </StyledComponent>
+                                </styled.h1>
+                              </Heading>
+                            </H3>
+                          </StyledComponent>
+                        </Styled(H3)>
+                        <styled.div>
+                          <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                            <div className=\\"sc-hORach kZtTta\\">
+                              <span>
+                                Address
+                                : 
+                              </span>
+                              <span>
+                                123 ABC Road, Brighton, BN2 9QB
+                              </span>
+                            </div>
+                          </StyledComponent>
+                        </styled.div>
+                      </div>
+                    </StyledComponent>
+                  </styled.div>
+                </li>
+              </StyledComponent>
+            </styled.li>
+          </ol>
+        </StyledComponent>
+      </styled.ol>
+    </EntityList>
+    <CannotFindDetails summary=\\"cannot find summary\\" actions={{...}} link={{...}}>
+      <Details summary=\\"cannot find summary\\" open={false}>
+        <styled.details open={false}>
+          <StyledComponent open={false} forwardedComponent={{...}} forwardedRef={{...}}>
+            <details open={false} className=\\"sc-kEYyzF ihcnje\\">
+              <styled.summary>
+                <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                  <summary className=\\"sc-kkGfuU cCdZFh\\">
+                    <styled.span>
+                      <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                        <span className=\\"sc-iAyFgw jRkIxn\\">
+                          cannot find summary
+                        </span>
+                      </StyledComponent>
+                    </styled.span>
+                  </summary>
+                </StyledComponent>
+              </styled.summary>
+              <styled.div>
+                <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                  <div className=\\"sc-hSdWYo dfimje\\">
+                    <div>
+                      <Paragraph supportingText={false} linkRenderer={[Function: linkRenderer]}>
+                        <Styled(ReactMarkdown) source=\\"Try refining your search by taking the following actions:\\" escapeHtml={false} skipHtml={true} allowedTypes={{...}} renderers={{...}} supportingText={false} linkRenderer={[Function: linkRenderer]}>
+                          <StyledComponent source=\\"Try refining your search by taking the following actions:\\" escapeHtml={false} skipHtml={true} allowedTypes={{...}} renderers={{...}} supportingText={false} linkRenderer={[Function: linkRenderer]} forwardedComponent={{...}} forwardedRef={{...}}>
+                            <ReactMarkdown source=\\"Try refining your search by taking the following actions:\\" escapeHtml={false} skipHtml={true} allowedTypes={{...}} renderers={{...}} supportingText={false} linkRenderer={[Function: linkRenderer]} className=\\"sc-jAaTju fBEFVB\\" sourcePos={false} rawSourcePos={false} transformLinkUri={[Function: uriTransformer]} astPlugins={{...}} plugins={{...}} parserOptions={{...}}>
+                              <Root className=\\"sc-jAaTju fBEFVB\\">
+                                <div className=\\"sc-jAaTju fBEFVB\\">
+                                  <p>
+                                    <TextRenderer nodeKey=\\"text-1-1\\" value=\\"Try refining your search by taking the following actions:\\">
+                                      Try refining your search by taking the following actions:
+                                    </TextRenderer>
+                                  </p>
+                                </div>
+                              </Root>
+                            </ReactMarkdown>
+                          </StyledComponent>
+                        </Styled(ReactMarkdown)>
+                      </Paragraph>
+                      <ul>
+                        <li>
+                          action 1
+                        </li>
+                        <li>
+                          action 2
+                        </li>
+                      </ul>
+                      <styled.a href=\\"http://stillcannotfind.com\\" onClick={{...}} muted={false} textColour={false} noVisitedState={false}>
+                        <StyledComponent href=\\"http://stillcannotfind.com\\" onClick={{...}} muted={false} textColour={false} noVisitedState={false} forwardedComponent={{...}} forwardedRef={{...}}>
+                          <a href=\\"http://stillcannotfind.com\\" onClick={{...}} muted={false} className=\\"sc-bwzfXH VXMCV\\">
+                            still cannot find
+                          </a>
+                        </StyledComponent>
+                      </styled.a>
+                    </div>
+                  </div>
+                </StyledComponent>
+              </styled.div>
+            </details>
+          </StyledComponent>
+        </styled.details>
+      </Details>
+    </CannotFindDetails>
+    <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
+      <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-GMQeP azytY\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-GMQeP azytY sc-VigVT krXvSZ\\">
                 Search
               </button>
             </StyledComponent>