Merge pull request #6501 from uktrade/feature/TET-597-MigrateInvestme…

…ntAdminPageToReactRouter

migrate investment admin page to react router

src/apps/investments/router-projects.js

@@ -13,7 +13,6 @@ const { shared } = require('./middleware')
 
 const { create, editHistory } = require('./controllers')
 
-const { renderAdminView } = require('./controllers/admin')
 const { renderAddEvidence } = require('./apps/evidence/controllers/create')
 const { postUpload } = require('../documents/middleware/upload')
 
@@ -60,6 +59,4 @@ router.use(
 
 router.use('/:investmentId', setPropositionsReturnUrl, propositionsRouter)
 
-router.get('/:investmentId/admin', renderAdminView)
-
 module.exports = router

src/apps/routers.js

@@ -62,6 +62,7 @@ const reactRoutes = [
   '/investments/projects/:projectId/edit-history',
   '/investments/projects/:projectId/evidence',
   '/investments/projects/:projectId/evidence/:documentId/delete',
+  '/investments/projects/:projectId/admin',
   '/investments',
   '/investments/projects',
   '/investments/profiles',

src/client/index.jsx

@@ -23,7 +23,6 @@ import ManageAdviser from '../apps/companies/apps/advisers/client/ManageAdviser'
 import ReferralDetails from '../apps/companies/apps/referrals/details/client/ReferralDetails'
 import SendReferralForm from '../apps/companies/apps/referrals/send-referral/client/SendReferralForm'
 import InteractionReferralDetails from './modules/Interactions/InteractionDetails/InteractionReferralDetails.jsx'
-import InvestmentProjectAdmin from '../apps/investments/views/admin/client/InvestmentProjectAdmin.jsx'
 import FlashMessages from './components/LocalHeader/FlashMessages.jsx'
 import PersonalisedDashboard from './components/PersonalisedDashboard'
 import InvestmentProjectForm from '../apps/investments/client/projects/create/InvestmentProjectForm'
@@ -190,9 +189,6 @@ function App() {
         <Mount selector="#interaction-referral-details">
           {(props) => <InteractionReferralDetails {...props} />}
         </Mount>
-        <Mount selector="#investment-project-admin">
-          {(props) => <InvestmentProjectAdmin {...props} />}
-        </Mount>
         <Mount selector="#flash-messages">
           {(props) => <FlashMessages {...props} />}
         </Mount>

src/client/modules/Investments/Projects/InvestmentProjectAdmin.jsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import { useParams } from 'react-router-dom'
+
+import { H4, InsetText } from 'govuk-react'
+import styled from 'styled-components'
+import { SPACING } from '@govuk-react/constants'
+
+import urls from '../../../../lib/urls'
+import {
+  InvestmentProjectStageResource,
+  InvestmentResource,
+} from '../../../components/Resource'
+import { buildProjectBreadcrumbs } from '../utils'
+import { transformObjectToOption } from '../../../../apps/transformers'
+import {
+  DefaultLayout,
+  FieldRadios,
+  Form,
+  FormLayout,
+} from '../../../components'
+import { FORM_LAYOUT } from '../../../../common/constants'
+import { TASK_UPDATE_STAGE } from './state'
+
+const StyledP = styled('p')`
+  margin-bottom: ${SPACING.SCALE_2};
+`
+
+const InvestmentName = (props) => (
+  <InvestmentResource.Inline {...props}>
+    {(project) => project.name}
+  </InvestmentResource.Inline>
+)
+
+const InvestmentProjectAdmin = () => {
+  const { projectId } = useParams()
+
+  return (
+    <DefaultLayout
+      heading="Change the project stage"
+      pageTitle={
+        <>
+          Admin - <InvestmentName id={projectId} /> - Projects - Investments
+        </>
+      }
+      breadcrumbs={buildProjectBreadcrumbs([
+        {
+          link: urls.investments.projects.details(projectId),
+          text: <InvestmentName id={projectId} />,
+        },
+        { text: 'Admin' },
+      ])}
+      useReactRouter={false}
+    >
+      <InvestmentResource id={projectId}>
+        {(project) => (
+          <FormLayout setWidth={FORM_LAYOUT.TWO_THIRDS}>
+            <H4 as="h2">Project details</H4>
+            <InsetText>
+              <p>Project name: {project.name}</p>
+              <StyledP>Current stage: {project.stage.name}</StyledP>
+            </InsetText>
+            <Form
+              cancelRedirectTo={() =>
+                urls.investments.projects.details(projectId)
+              }
+              analyticsFormName="investmentProjectAdmin"
+              flashMessage={() => 'Project stage saved'}
+              id="investmentProjectAdmin"
+              redirectTo={() => urls.investments.projects.details(projectId)}
+              submissionTaskName={TASK_UPDATE_STAGE}
+              transformPayload={(values) => ({ values, projectId })}
+            >
+              <InvestmentProjectStageResource>
+                {(stages) => (
+                  <>
+                    <H4 as="h2">Change the stage to</H4>
+                    <FieldRadios
+                      name="projectStageId"
+                      required="Select a new stage"
+                      options={stages
+                        .map((stage) => transformObjectToOption(stage))
+                        .filter((stage) => stage.value !== project.stage.id)}
+                    />
+                  </>
+                )}
+              </InvestmentProjectStageResource>
+            </Form>
+          </FormLayout>
+        )}
+      </InvestmentResource>
+    </DefaultLayout>
+  )
+}
+
+export default InvestmentProjectAdmin

src/client/modules/Investments/Projects/state.js

@@ -15,6 +15,7 @@ export const TASK_EDIT_INVESTMENT_PROJECT_STATUS =
   'TASK_EDIT_INVESTMENT_PROJECT_STATUS'
 export const TASK_UPDATE_INVESTMENT_PROJECT_STAGE =
   'TASK_UPDATE_INVESTMENT_PROJECT_STAGE'
+export const TASK_UPDATE_STAGE = 'TASK_UPDATE_STAGE'
 
 export const INVESTMENT_PROJECTS_ID = 'projectsList'
 export const INVESTMENT_PROJECT_ID = 'investmentProject'

src/client/modules/Investments/Projects/tasks.js

@@ -69,3 +69,8 @@ export const completeInvestmentPropositions = (values) =>
       `v3/investment/${values.investmentProjectId}/proposition/${values.propositionId}/complete`
     )
     .then(({ data }) => data)
+
+export const updateProjectStage = ({ values, projectId }) =>
+  apiProxyAxios.post(`/v3/investment/${projectId}/update-stage`, {
+    stage: { id: values.projectStageId },
+  })

src/client/routes.js

@@ -94,6 +94,7 @@ import CompanyProjectsCollection from './modules/Companies/CompanyInvestments/Co
 import LargeCapitalProfile from './modules/Companies/CompanyInvestments/LargeCapitalProfile'
 import ExportsIndex from './modules/Companies/CompanyExports/ExportsIndex'
 import ExportsHistory from './modules/Companies/CompanyExports/ExportHistory'
+import InvestmentProjectAdmin from './modules/Investments/Projects/InvestmentProjectAdmin'
 
 const routes = {
   companies: [
@@ -583,6 +584,11 @@ const routes = {
       module: 'datahub:investments',
       component: DeleteProjectDocument,
     },
+    {
+      path: '/investments/projects/:projectId/admin',
+      module: 'datahub:investments',
+      component: InvestmentProjectAdmin,
+    },
     {
       path: '/investments/projects',
       module: 'datahub:investments',

src/client/tasks.js

@@ -10,8 +10,6 @@ import * as exportCountriesEditTasks from './modules/Companies/CompanyExports/Ex
 import addCompanyPostcodeToRegionTask, {
   createCompany,
 } from '../apps/companies/apps/add-company/client/tasks'
-import { TASK_UPDATE_STAGE } from '../apps/investments/views/admin/client/state'
-import * as investmentAdminTasks from '../apps/investments/views/admin/client/tasks'
 import { TASK_POSTCODE_TO_REGION } from '../apps/companies/apps/add-company/client/state'
 import {
   TASK_GET_ACTIVE_EVENTS,
@@ -99,6 +97,7 @@ import {
   TASK_EDIT_INVESTMENT_PROJECT_STATUS,
   TASK_UPDATE_INVESTMENT_PROJECT_STAGE,
   TASK_GET_INVESTMENT_PROJECT,
+  TASK_UPDATE_STAGE,
 } from './modules/Investments/Projects/state'
 import * as investmentProjectTasks from './modules/Investments/Projects/tasks'
 
@@ -465,7 +464,7 @@ export const tasks = {
   [TASK_SAVE_INTERACTION]: addInteractionFormTasks.saveInteraction,
   [TASK_GET_INTERACTION_INITIAL_VALUES]:
     addInteractionFormTasks.getInitialFormValues,
-  [TASK_UPDATE_STAGE]: investmentAdminTasks.updateProjectStage,
+  [TASK_UPDATE_STAGE]: investmentProjectTasks.updateProjectStage,
   [TASK_SAVE_OPPORTUNITY_DETAILS]:
     investmentOpportunitiesDetailsTasks.saveOpportunityDetails,
   [TASK_SAVE_OPPORTUNITY_STATUS]: