Merge pull request #3612 from bcgov/NDT-489-Add-heading-and-explanati…

…on-at-top-for-summary-page-for-CCBC

feat: add heading and explanation at top of ccbc summary

CHANGELOG.md

@@ -1,3 +1,9 @@
+# [1.202.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.201.1...v1.202.0) (2024-10-21)
+
+### Features
+
+- add heading and explanation at top of ccbc summary ([2038303](https://github.com/bcgov/CONN-CCBC-portal/commit/20383036a08fd0de29189bd975e05a7155fc3066))
+
 ## [1.201.1](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.201.0...v1.201.1) (2024-10-18)
 
 # [1.201.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.200.0...v1.201.0) (2024-10-18)

app/pages/analyst/application/[applicationId].tsx

@@ -69,10 +69,12 @@ const getApplicationQuery = graphql`
 const Application = ({
   preloadedQuery,
 }: RelayProps<Record<string, unknown>, ApplicationIdQuery>) => {
+  const router = useRouter();
+  const expandAll = router.query.expandAll === 'true';
   const query = usePreloadedQuery(getApplicationQuery, preloadedQuery);
   const [toggleOverride, setToggleExpandOrCollapseAll] = useState<
     boolean | undefined
-  >(undefined);
+  >(expandAll ? true : undefined);
   const { applicationByRowId, session } = query;
   const {
     status,

app/pages/analyst/application/[applicationId]/project.tsx

@@ -133,6 +133,15 @@ const Project = ({
         setIsCommunityProgressExpanded(true);
       }
     }
+    // overwrite logic on expanded for when user
+    // is navigating with a query on the path
+    // from summary page
+    if (toggledSection === 'projectInformation') {
+      setIsProjectInformationExpanded(true);
+    }
+    if (toggledSection === 'conditionalApproval') {
+      setIsConditionalApprovalExpanded(true);
+    }
   }, [conditionalApproval, date, projectInformation]);
 
   return (

app/pages/analyst/application/[applicationId]/summary.tsx

@@ -14,6 +14,8 @@ import { Tooltip } from '@mui/material';
 import { Info } from '@mui/icons-material';
 import { useState } from 'react';
 import generateFormData from 'lib/helpers/ccbcSummaryGenerateFormData';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
 
 const getSummaryQuery = graphql`
   query summaryQuery($rowId: Int!) {
@@ -168,9 +170,19 @@ const RightAlignText = styled('div')`
   padding-bottom: 4px;
 `;
 
+const StyledLink = styled(Link)`
+  color: ${(props) => props.theme.color.links};
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
 const Summary = ({
   preloadedQuery,
 }: RelayProps<Record<string, unknown>, summaryQuery>) => {
+  const router = useRouter();
+  const applicationId = router.query.applicationId as string;
   const query = usePreloadedQuery(getSummaryQuery, preloadedQuery);
   const {
     applicationByRowId,
@@ -194,6 +206,32 @@ const Summary = ({
   return (
     <Layout session={session} title="Connecting Communities BC">
       <AnalystLayout query={query}>
+        <>
+          <h2>Summary</h2>
+          <p>
+            This section provides up-to-date information on the project&apos;s
+            status by pulling from the{' '}
+            <StyledLink
+              href={`/analyst/application/${applicationId}?expandAll=true`}
+            >
+              Application
+            </StyledLink>
+            ,{' '}
+            <StyledLink
+              href={`/analyst/application/${applicationId}/project?section=conditionalApproval`}
+            >
+              Conditional Approval
+            </StyledLink>{' '}
+            accordion, or{' '}
+            <StyledLink
+              href={`/analyst/application/${applicationId}/project?section=projectInformation`}
+            >
+              SOW
+            </StyledLink>{' '}
+            as it progresses through each stage.
+          </p>{' '}
+          <br />
+        </>
         <RightAlignText>
           <>
             <StyledButton

app/tests/pages/analyst/application/[applicationId]/project.test.tsx

@@ -1,4 +1,5 @@
-import { act, fireEvent, screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
+import { act } from 'react';
 import * as moduleApi from '@growthbook/growthbook-react';
 import { FeatureResult, JSONValue } from '@growthbook/growthbook-react';
 import Project from 'pages/analyst/application/[applicationId]/project';
@@ -446,6 +447,34 @@ describe('The Project page', () => {
     });
   });
 
+  it('should expand conditional approval sections if query is set', async () => {
+    pageTestingHelper.setMockRouterValues({
+      query: { applicationId: '1', section: 'conditionalApproval' },
+    });
+
+    await act(async () => {
+      pageTestingHelper.loadQuery(mockJsonDataQueryPayload);
+      pageTestingHelper.renderPage();
+    });
+
+    expect(screen.getByText('Conditional approval')).toBeInTheDocument();
+  });
+
+  it('should expand project information (sow) sections if query is set', async () => {
+    pageTestingHelper.setMockRouterValues({
+      query: { applicationId: '1', section: 'projectInformation' },
+    });
+
+    await act(async () => {
+      pageTestingHelper.loadQuery(mockJsonDataQueryPayload);
+      pageTestingHelper.renderPage();
+    });
+
+    expect(
+      screen.getByText('Funding agreement, statement of work, & map')
+    ).toBeInTheDocument();
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });

db/sqitch.plan

@@ -712,3 +712,4 @@ clean_pre_cut_over_cbc_history 2024-10-15T23:26:47Z ,,, <ryohani89@NH504670> # R
 tables/application_form_template_9_data 2024-09-25T22:50:17Z Rafael Solorzano <[email protected]> # create table for form template 9 data
 @1.201.0 2024-10-18T23:20:23Z CCBC Service Account <[email protected]> # release v1.201.0
 @1.201.1 2024-10-18T23:48:24Z CCBC Service Account <[email protected]> # release v1.201.1
+@1.202.0 2024-10-21T21:32:01Z CCBC Service Account <[email protected]> # release v1.202.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "CONN-CCBC-portal",
-  "version": "1.201.1",
+  "version": "1.202.0",
   "main": "index.js",
   "repository": "https://github.com/bcgov/CONN-CCBC-portal.git",
   "author": "Romer, Meherzad CITZ:EX <[email protected]>",