Merge pull request #6464 from uktrade/chore/company-layout-cleanup

Company layout cleanup

src/apps/company-lists/controllers/add-remove.js

@@ -18,7 +18,6 @@ async function handleAddRemoveCompanyToList(req, res, next) {
       listsToUpdate.push(addOrRemoveCompany(req, listId, id))
     }
     await Promise.all(listsToUpdate)
-    req.flash('success', 'Lists changes for this company have been saved.')
     res.send()
   } catch (error) {
     req.flash('error', 'Could not add or remove to list')

src/client/components/ActivityFeed/CollectionList/index.jsx

@@ -38,7 +38,7 @@ import Activity from '../Activity'
 
 import { CompanyResource } from '../../Resource'
 import DefaultLayoutBase from '../../Layout/DefaultLayoutBase'
-import CompanyLayoutNew from '../../Layout/CompanyLayoutNew'
+import CompanyLayout from '../../Layout/CompanyLayout'
 
 const FiltersCheckboxGroupWithNext = styled(Filters.CheckboxGroup)({
   marginBottom: 0,
@@ -64,8 +64,6 @@ const CompanyActivityCollection = ({
   selectedFilters,
   currentAdviserId,
   dnbHierarchyCount,
-  flashMessages,
-  returnUrl,
   ...props
 }) => {
   const { companyId } = useParams()
@@ -131,11 +129,9 @@ const CompanyActivityCollection = ({
     <DefaultLayoutBase>
       <CompanyResource id={companyId}>
         {(company) => (
-          <CompanyLayoutNew
+          <CompanyLayout
             company={company}
             breadcrumbs={[{ text: 'Activity Feed' }]}
-            flashMessages={flashMessages}
-            returnUrl={returnUrl}
             pageTitle="Activities"
           >
             <FilteredCollectionList
@@ -218,7 +214,7 @@ const CompanyActivityCollection = ({
                 />
               </CollectionFilters>
             </FilteredCollectionList>
-          </CompanyLayoutNew>
+          </CompanyLayout>
         )}
       </CompanyResource>
     </DefaultLayoutBase>

src/client/components/CompanyLists/AddRemoveFromListForm.jsx

@@ -39,6 +39,7 @@ const AddRemoveFromListForm = ({
     list = cleanedList
     return { list, token, companyId }
   }
+
   return (
     <Form
       id="add-remove-from-list"

src/client/components/CompanyLocalHeader/LocalHeaderCompanyLists.jsx

@@ -15,6 +15,7 @@ import Task from '../Task'
 import { COMPANY_LISTS__COMPANY_IN_LOADED } from '../../actions'
 import { ID, TASK_GET_LISTS_COMPANY_IS_IN, state2props } from './state'
 import LocalHeaderCompanyRefer from './LocalHeaderCompanyRefer'
+import urls from '../../../lib/urls'
 
 const StyledCompanyListButton = styled('button')`
   display: inline-table;
@@ -43,18 +44,19 @@ const StyledAddButton = styled(StyledCompanyListButton)`
   border-bottom: 3px solid ${GREY_3_LEGACY};
 `
 
-export const LocalHeaderCompanyLists = ({ results, company, returnUrl }) => {
-  const queryString = returnUrl ? `${returnUrl}` : `/companies/${company.id}`
+export const LocalHeaderCompanyLists = ({ results, companyId }) => {
   const handleClickAddRemove = () => {
-    window.location.href = `/companies/${company.id}/lists/add-remove?returnUrl=${queryString}`
+    window.location.href = `${urls.companies.lists.addRemove(
+      companyId
+    )}?returnUrl=${window.location.pathname}`
   }
   return (
     <Task.Status
       name={TASK_GET_LISTS_COMPANY_IS_IN}
       id={ID}
       progressMessage="Loading my lists"
       startOnRender={{
-        payload: { id: company.id },
+        payload: { id: companyId },
         onSuccessDispatch: COMPANY_LISTS__COMPANY_IN_LOADED,
       }}
     >
@@ -76,7 +78,7 @@ export const LocalHeaderCompanyLists = ({ results, company, returnUrl }) => {
             >
               <span>+</span> Add to list
             </StyledAddButton>
-            <LocalHeaderCompanyRefer companyId={company.id} />
+            <LocalHeaderCompanyRefer companyId={companyId} />
           </>
         )
       }

src/client/components/CompanyLocalHeader/index.jsx

@@ -9,6 +9,7 @@ import Details from '@govuk-react/details'
 import { SPACING, FONT_SIZE, BREAKPOINTS } from '@govuk-react/constants'
 import { Link } from 'govuk-react'
 import { H4 } from '@govuk-react/heading'
+import { connect } from 'react-redux'
 
 import { GREY_3, TEXT_COLOUR } from '../../utils/colours'
 import LocalHeader from '../LocalHeader/LocalHeader'
@@ -24,6 +25,7 @@ import {
   isItaTierDAccount,
 } from '../../modules/Companies/utils'
 import { RelatedCompaniesCountResource } from '../Resource'
+import { companyState2Props } from './state'
 
 const LocalHeaderTradingNames = styled(H4)`
   font-weight: normal;
@@ -121,7 +123,6 @@ const CompanyLocalHeader = ({
   breadcrumbs,
   flashMessages,
   company,
-  returnUrl,
   csrfToken,
 }) =>
   company && (
@@ -191,7 +192,7 @@ const CompanyLocalHeader = ({
           </GridCol>
         </GridRow>
         <StyledList>
-          <LocalHeaderCompanyLists company={company} returnUrl={returnUrl} />
+          <LocalHeaderCompanyLists companyId={company.id} />
         </StyledList>
         {(isUltimate(company) || isGlobalHQ(company)) && (
           <TypeWrapper>
@@ -283,13 +284,11 @@ CompanyLocalHeader.propTypes = {
   }),
   company: PropTypes.object.isRequired,
   dnbRelatedCompaniesCount: PropTypes.number,
-  returnUrl: PropTypes.string,
 }
 
 CompanyLocalHeader.defaultProps = {
   flashMessages: null,
   dnbRelatedCompaniesCount: null,
-  returnUrl: null,
 }
 
-export default CompanyLocalHeader
+export default connect(companyState2Props)(CompanyLocalHeader)

src/client/components/CompanyLocalHeader/state.js

@@ -1,3 +1,7 @@
 export const TASK_GET_LISTS_COMPANY_IS_IN = 'TASK_GET_LISTS_COMPANY_IS_IN'
 export const ID = 'companyListsCompanyIn'
 export const state2props = (state) => state[ID]
+
+export const companyState2Props = (state) => ({
+  csrfToken: state.csrfToken,
+})

src/client/components/Layout/CompanyLayout.jsx

@@ -5,22 +5,29 @@ import GridRow from '@govuk-react/grid-row'
 
 import { CompanyLocalHeader, CompanyTabbedLocalNavigation, Main } from '..'
 import CompanyInvestmentSubNavigation from '../CompanyTabbedLocalNavigation/CompanyInvestmentTab'
+import WatchTextContent from '../WatchTextContent'
 
 const CompanyLayout = ({
   company,
-  flashMessages,
   breadcrumbs,
   children,
-  returnUrl,
+  flashMessages,
+  pageTitle,
   isInvestment = false,
   isLCP = false,
 }) => (
   <>
+    <WatchTextContent
+      onTextContentChange={(text) => {
+        document.title = text
+      }}
+    >
+      {pageTitle} - {company.name} - Companies - DBT Data Hub
+    </WatchTextContent>
     <CompanyLocalHeader
       breadcrumbs={breadcrumbs}
       flashMessages={flashMessages}
       company={company}
-      returnUrl={returnUrl}
     />
     <Main>
       <CompanyTabbedLocalNavigation company={company} />
@@ -31,6 +38,7 @@ const CompanyLayout = ({
         <GridCol>{children}</GridCol>
       </GridRow>
     </Main>
+    <br />
   </>
 )
 

src/client/modules/Companies/AccountManagement/index.jsx

@@ -8,7 +8,7 @@ import { useParams } from 'react-router-dom'
 import { connect } from 'react-redux'
 
 import { Metadata, NewWindowLink } from '../../../components'
-import CompanyLayoutNew from '../../../components/Layout/CompanyLayoutNew'
+import CompanyLayout from '../../../components/Layout/CompanyLayout'
 import {
   CompanyObjectivesCountResource,
   CompanyObjectivesResource,
@@ -249,18 +249,16 @@ const objectiveMetadata = (objective) => {
   return rows
 }
 
-const AccountManagement = ({ flashMessages, csrfToken, permissions }) => {
+const AccountManagement = ({ permissions }) => {
   const { companyId } = useParams()
 
   return (
     <DefaultLayoutBase>
       <CompanyResource id={companyId}>
         {(company) => (
-          <CompanyLayoutNew
+          <CompanyLayout
             company={company}
             breadcrumbs={[{ text: 'Account management' }]}
-            flashMessages={flashMessages}
-            csrfToken={csrfToken}
             pageTitle="Account management"
           >
             <DataWorkspaceAccountPlan company={company} />
@@ -302,7 +300,7 @@ const AccountManagement = ({ flashMessages, csrfToken, permissions }) => {
               or email{' '}
               <Link href={`mailto:${oneListEmail}`}>{oneListEmail}</Link>
             </Details>
-          </CompanyLayoutNew>
+          </CompanyLayout>
         )}
       </CompanyResource>
     </DefaultLayoutBase>

src/client/modules/Companies/AccountManagement/state.js

@@ -16,6 +16,5 @@ export const state2props = (state) => {
 }
 
 export const state2propsMainTab = (state) => ({
-  csrfToken: state.csrfToken,
   permissions: state.userPermissions,
 })

src/client/modules/Companies/CompanyBusinessDetails/CompanyBusinessDetails.jsx

@@ -20,7 +20,7 @@ import {
   CompanyResource,
   RelatedCompaniesCountResource,
 } from '../../../components/Resource'
-import CompanyLayoutNew from '../../../components/Layout/CompanyLayoutNew'
+import CompanyLayout from '../../../components/Layout/CompanyLayout'
 import Task from '../../../components/Task'
 import urls from '../../../../lib/urls'
 import { format } from '../../../utils/date'
@@ -63,19 +63,17 @@ const COMPANY_DISSOLVED_OPTION = 'Company is dissolved'
 const CompanyBusinessDetails = ({
   globalUltimate,
   isDnbPending,
-  flashMessages,
   csrfToken,
   userPermissions,
 }) => {
   const { companyId } = useParams()
   return (
-    <DefaultLayoutBase pageTitle="Business details - Companies">
+    <DefaultLayoutBase>
       <CompanyResource id={companyId}>
         {(company) => (
-          <CompanyLayoutNew
+          <CompanyLayout
             company={company}
             breadcrumbs={[{ text: 'Business details' }]}
-            flashMessages={flashMessages}
             csrfToken={csrfToken}
             pageTitle="Business details"
           >
@@ -224,15 +222,14 @@ const CompanyBusinessDetails = ({
                 ]}
               />
             </StyledRoot>
-          </CompanyLayoutNew>
+          </CompanyLayout>
         )}
       </CompanyResource>
     </DefaultLayoutBase>
   )
 }
 
 CompanyBusinessDetails.propTypes = {
-  flashMessages: PropTypes.object,
   csrfToken: PropTypes.string,
   permissions: PropTypes.array,
 }

src/client/modules/Companies/CompanyExports/ExportHistory/index.jsx

@@ -17,9 +17,10 @@ import {
   CompanyResource,
   CountriesResource,
 } from '../../../../components/Resource'
-import CompanyLayoutNew from '../../../../components/Layout/CompanyLayoutNew'
+import CompanyLayout from '../../../../components/Layout/CompanyLayout'
 import urls from '../../../../../lib/urls'
 import DefaultLayoutBase from '../../../../components/Layout/DefaultLayoutBase'
+import { listSkeletonPlaceholder } from '../../../../components/SkeletonPlaceholder'
 
 const StyledDetails = styled(Details)`
   margin: ${SPACING.SCALE_3} 0 0 0;
@@ -50,14 +51,14 @@ const ExportsHistory = ({
   onPageClick,
   activePage,
   isComplete,
-  returnUrl,
 }) => {
   const { companyId, countryId } = useParams()
 
   const collectionListTask = {
     name: 'Exports history',
     id: 'exportsHistory',
     progressMessage: 'loading Exports History',
+    renderProgress: listSkeletonPlaceholder(),
     startOnRender: {
       payload: { companyId, countryId, activePage },
       onSuccessDispatch: EXPORTS_HISTORY__LOADED,
@@ -72,7 +73,7 @@ const ExportsHistory = ({
     <DefaultLayoutBase>
       <CompanyResource id={companyId}>
         {(company) => (
-          <CompanyLayoutNew
+          <CompanyLayout
             company={company}
             breadcrumbs={[
               {
@@ -81,7 +82,6 @@ const ExportsHistory = ({
               },
               { text: countryName },
             ]}
-            returnUrl={returnUrl}
             pageTitle="Export countries history"
           >
             <InsetText>
@@ -98,7 +98,7 @@ const ExportsHistory = ({
               isComplete={isComplete}
               metadataRenderer={metadataRenderer}
             />
-          </CompanyLayoutNew>
+          </CompanyLayout>
         )}
       </CompanyResource>
     </DefaultLayoutBase>