Merge branch 'main' into NDT-401-do-work-for-cbc-masterspreadsheet-cu…

…tover
bcgov · Sep 27, 2024 · d11b3e0 · d11b3e0
2 parents efefe52 + ccdc544
commit d11b3e0
Show file tree

Hide file tree

Showing 16 changed files with 131 additions and 108 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+## [1.193.7](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.193.5...v1.193.7) (2024-09-27)
+
+### Bug Fixes
+
+- add a margin to left side nav ([d504b23](https://github.com/bcgov/CONN-CCBC-portal/commit/d504b23b3722e2d793dc47055eee3bd2fe4ef112))
+- cbc edit input focus issue ([ce13c6c](https://github.com/bcgov/CONN-CCBC-portal/commit/ce13c6c0085e7021dfe2ecb2d6b7ceff4567ab4a))
+
+## [1.193.6](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.193.5...v1.193.6) (2024-09-26)
+
+### Bug Fixes
+
+- cbc edit input focus issue ([df5a5eb](https://github.com/bcgov/CONN-CCBC-portal/commit/df5a5ebb8677cf167036632e0dcec93ef0c88db2))
+
 ## [1.193.5](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.193.4...v1.193.5) (2024-09-26)
 
 ## [1.193.4](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.193.3...v1.193.4) (2024-09-26)

diff --git a/app/Dockerfile b/app/Dockerfile
@@ -1,4 +1,4 @@
-FROM registry.access.redhat.com/ubi9/s2i-base@sha256:3655df7d8496fe199de5fc0b37d22f2cc12f06ad82559a61e5c97196063cf580
+FROM registry.access.redhat.com/ubi9/s2i-base@sha256:b360ce593f2bf0008e066b51ce6b7a257473d056ca646451b27fc42833a33831
 
 ENV SUMMARY="An image for the CONN-CCBC-portal app" \
   DESCRIPTION="This image contains the compiled CONN-CCBC-portal node app"

diff --git a/app/components/Analyst/NavigationSidebar.tsx b/app/components/Analyst/NavigationSidebar.tsx
@@ -26,6 +26,10 @@ const StyledUpperSection = styled.section`
   color: ${(props) => props.theme.color.navigationBlue};
 `;
 
+const StyledLowerSection = styled.section`
+  margin-top: 1em;
+`;
+
 const NavigationSidebar = () => {
   const router = useRouter();
   const { asPath } = router;
@@ -47,7 +51,7 @@ const NavigationSidebar = () => {
             label="Dashboard"
           />
         </StyledUpperSection>
-        <section>
+        <StyledLowerSection>
           <NavItem
             currentPath={asPath}
             href={`/analyst/application/${applicationId}/summary`}
@@ -84,7 +88,7 @@ const NavigationSidebar = () => {
             icon={faClockRotateLeft}
             label="History"
           />
-        </section>
+        </StyledLowerSection>
       </StyledNav>
     </StyledAside>
   );

diff --git a/app/components/Analyst/Project/fields/ProjectFieldTemplate.tsx b/app/components/Analyst/Project/fields/ProjectFieldTemplate.tsx
@@ -34,24 +34,33 @@ const StyledContainer = styled.div`
   }
 `;
 
-const ErrorWrapper = styled.div<{ errorColor?: string }>`
-  position: relative;
-  background-color: ${(props) => props.errorColor};
-  padding: 8px;
-  margin-bottom: 8px;
-  max-width: calc(100% - 8px) !important;
+interface StyledInputWrapperProps {
+  errorColor?: string;
+  hasError?: boolean;
+}
 
-  .pg-select-wrapper,
-  .datepicker-widget,
-  .url-widget-wrapper,
-  .ccbcid-widget-wrapper {
-    background-color: white !important;
-    max-width: calc(340px - 8px) !important;
-  }
+const StyledInputWrapper = styled.div<StyledInputWrapperProps>`
+  ${(props) =>
+    props.hasError &&
+    `
+      position: relative;
+      background-color: ${props.errorColor};
+      padding: 8px;
+      margin-bottom: 8px;
+      max-width: calc(100% - 8px) !important;
 
-  [class*='StyledMessage']:empty {
-    display: none;
-  }
+      .pg-select-wrapper,
+      .datepicker-widget,
+      .url-widget-wrapper,
+      .ccbcid-widget-wrapper {
+        background-color: white !important;
+        max-width: calc(340px - 8px) !important;
+      }
+
+      [class*='StyledMessage']:empty {
+        display: none;
+      }
+    `}
 `;
 
 const StyledHelp = styled(Help)`
@@ -80,22 +89,21 @@ const ProjectFieldTemplate: React.FC<FieldTemplateProps> = ({
   const { errorColor, __errors: formContextErrors } =
     formContext?.errors?.[fieldName] || {};
   const hasFormContextError = formContextErrors?.length > 0;
+  const showError = hasFormContextError && showErrorHint;
 
   return (
     <>
       {!hidden && (
         <StyledContainer>
           {uiTitle && <StyledH4>{uiTitle}</StyledH4>}
-          {showErrorHint && hasFormContextError ? (
-            <ErrorWrapper errorColor={errorColor}>
-              <div>{children}</div>
+          <StyledInputWrapper errorColor={errorColor} hasError={showError}>
+            <div>{children}</div>
+            {showError && (
               <Tooltip title={formContextErrors?.join()}>
                 <StyledHelp />
               </Tooltip>
-            </ErrorWrapper>
-          ) : (
-            children
-          )}
+            )}
+          </StyledInputWrapper>
         </StyledContainer>
       )}
     </>

diff --git a/app/components/Review/Components.tsx b/app/components/Review/Components.tsx
@@ -19,22 +19,22 @@ export const StyledColLeft = styled('th')`
   vertical-align: top;
 `;
 
-export const StyledColRight = styled('td')`
+interface StyledColRightProps {
+  errorColor?: string;
+  hasError?: boolean;
+}
+
+export const StyledColRight = styled('td')<StyledColRightProps>`
   width: 50%;
   padding: 16px !important;
   border: 1px solid rgba(0, 0, 0, 0.16);
   border-right: 0;
   font-weight: 400;
   white-space: pre-line;
-`;
-
-interface StyledColErrorProps {
-  errorColor?: string;
-}
-
-export const StyledColError = styled(StyledColRight)<StyledColErrorProps>`
   background-color: ${(props) =>
-    props?.errorColor ? props.errorColor : props.theme.color.errorBackground};
+    props.hasError &&
+    (props?.errorColor ? props.errorColor : props.theme.color.errorBackground)};
+
   .pg-select-wrapper {
     background-color: white !important;
   }

diff --git a/app/components/Review/fields/ArrayBooleanField.tsx b/app/components/Review/fields/ArrayBooleanField.tsx
@@ -1,6 +1,6 @@
 import { FieldProps, RJSFSchema } from '@rjsf/utils';
 import React from 'react';
-import { StyledColLeft, StyledColRight, StyledColError } from '../Components';
+import { StyledColLeft, StyledColRight } from '../Components';
 
 /**
   Field to display a list of yes/no values instead of the enum for array type fields
@@ -23,7 +23,7 @@ const ArrayBooleanField: React.FC<FieldProps> = ({
           <tr key={item}>
             <StyledColLeft id={id}>{item}</StyledColLeft>
             {isError ? (
-              <StyledColError id={`${id}-error`} />
+              <StyledColRight id={`${id}-error`} hasError />
             ) : (
               <StyledColRight id={`${id}-value`}>
                 {isValueTrue ? 'Yes' : 'No'}

diff --git a/app/components/Review/fields/ReviewCheckboxField.tsx b/app/components/Review/fields/ReviewCheckboxField.tsx
@@ -1,10 +1,6 @@
 import React from 'react';
 import { FieldProps } from '@rjsf/utils';
-import {
-  StyledColLeft,
-  StyledColRight,
-  StyledColError,
-} from 'components/Review/Components';
+import { StyledColLeft, StyledColRight } from 'components/Review/Components';
 
 const ReviewCheckboxField: React.FC<FieldProps> = ({
   id,
@@ -22,7 +18,7 @@ const ReviewCheckboxField: React.FC<FieldProps> = ({
           {isChecked ? (
             <StyledColRight id={`${id}-value`}>Yes</StyledColRight>
           ) : (
-            <StyledColError id={`${id}-error`} />
+            <StyledColRight id={`${id}-error`} hasError />
           )}
         </>
       ) : (

diff --git a/app/components/Review/fields/ReviewFieldTemplate.tsx b/app/components/Review/fields/ReviewFieldTemplate.tsx
@@ -1,10 +1,6 @@
 import { FieldTemplateProps } from '@rjsf/utils';
 import React from 'react';
-import {
-  StyledColLeft,
-  StyledColRight,
-  StyledColError,
-} from 'components/Review/Components';
+import { StyledColLeft, StyledColRight } from 'components/Review/Components';
 import { Help } from '@mui/icons-material';
 import styled from 'styled-components';
 import { Tooltip } from '@mui/material';
@@ -58,33 +54,32 @@ const ReviewFieldTemplate: React.FC<FieldTemplateProps> = ({
   const isFieldInRfi = formContext?.rfiList?.some((rfi) =>
     Object.keys(rfi?.jsonData?.rfiAdditionalFiles || []).includes(fieldName)
   );
+  const hasError = isErrors && !isFieldInRfi;
 
   return (
     <>
       {before}
       <tr>
         <StyledColLeft id={`${id}_title`}>{title}</StyledColLeft>
-        {isErrors && !isFieldInRfi ? (
-          <StyledColError data-testid={`${id}-value`} errorColor={errorColor}>
-            {children}
-            {showErrorHint && hasFormContextError && (
-              <Tooltip
-                title={
-                  <span style={{ whiteSpace: 'pre-line' }}>
-                    {formContextErrors.join('\n')}
-                  </span>
-                }
-                placement="top"
-              >
-                <StyledHelp />
-              </Tooltip>
-            )}
-          </StyledColError>
-        ) : (
-          <StyledColRight data-testid={`${id}-value`}>
-            {children}
-          </StyledColRight>
-        )}
+        <StyledColRight
+          data-testid={`${id}-value`}
+          hasError={hasError}
+          errorColor={errorColor}
+        >
+          {children}
+          {hasError && showErrorHint && hasFormContextError && (
+            <Tooltip
+              title={
+                <span style={{ whiteSpace: 'pre-line' }}>
+                  {formContextErrors.join('\n')}
+                </span>
+              }
+              placement="top"
+            >
+              <StyledHelp />
+            </Tooltip>
+          )}
+        </StyledColRight>
       </tr>
       {after}
     </>

diff --git a/app/components/Review/fields/ReviewInlineArrayField.tsx b/app/components/Review/fields/ReviewInlineArrayField.tsx
@@ -1,10 +1,6 @@
 import { FieldProps } from '@rjsf/utils';
 import React from 'react';
-import {
-  StyledColLeft,
-  StyledColRight,
-  StyledColError,
-} from 'components/Review/Components';
+import { StyledColLeft, StyledColRight } from 'components/Review/Components';
 
 const ReviewInlineArrayField: React.FC<FieldProps> = ({
   idSchema,
@@ -16,27 +12,29 @@ const ReviewInlineArrayField: React.FC<FieldProps> = ({
   const fieldName = id?.split('_')?.[2];
   const pageName = id?.split('_')?.[1];
   const formErrorSchema = formContext?.errors ?? formContext.formErrorSchema;
-  const errors = formErrorSchema?.[pageName]?.[fieldName]?.__errors;
+  const hasError =
+    formErrorSchema?.[pageName]?.[fieldName]?.__errors?.length > 0;
   return (
     <tr>
       <StyledColLeft id={id}>{schema.title}</StyledColLeft>
-      {errors ? (
-        <StyledColError id={`${id}-error`} />
-      ) : (
-        <StyledColRight id={`${id}-value`}>
-          {formData?.map((el, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <React.Fragment key={`${id}_${index}`}>
-              {el.toString()}
-              {index < formData.length - 1 && (
-                <>
-                  ,<br />
-                </>
-              )}
-            </React.Fragment>
-          ))}
-        </StyledColRight>
-      )}
+      <StyledColRight
+        id={hasError ? `${id}-error` : `${id}-value`}
+        hasError={hasError}
+      >
+        {hasError
+          ? null
+          : formData?.map((el, index) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <React.Fragment key={`${id}_${index}`}>
+                {el.toString()}
+                {index < formData.length - 1 && (
+                  <>
+                    ,<br />
+                  </>
+                )}
+              </React.Fragment>
+            ))}
+      </StyledColRight>
     </tr>
   );
 };

diff --git a/app/components/Review/index.ts b/app/components/Review/index.ts
@@ -3,7 +3,6 @@ export { default as AlertIcon } from './AlertIcon';
 
 export { default as ReviewField } from './ReviewPageField';
 export {
-  StyledColError,
   StyledColLeft,
   StyledColRight,
   StyledH4,

diff --git a/app/package.json b/app/package.json
@@ -99,7 +99,7 @@
     "postgraphile-plugin-connection-filter": "^2.3.0",
     "postinstall-postinstall": "^2.1.0",
     "react": "^18.3.1",
-    "react-currency-input-field": "^3.6.4",
+    "react-currency-input-field": "^3.8.0",
     "react-relay": "^13.2.0",
     "react-relay-network-modern": "^6.2.1",
     "react-typography": "^0.16.23",
@@ -155,7 +155,7 @@
     "fetch-mock": "9.11.0",
     "fse": "^4.0.1",
     "happo-cypress": "^4.2.0",
-    "happo-e2e": "^2.6.1",
+    "happo-e2e": "^3.0.0",
     "happo.io": "^8.3.3",
     "jest": "^28.1.0",
     "jest-environment-jsdom": "^28.1.0",

diff --git a/app/pages/analyst/cbc/[cbcId]/edit/[section].tsx b/app/pages/analyst/cbc/[cbcId]/edit/[section].tsx
@@ -202,8 +202,16 @@ const EditCbcSection = ({
     return getAllEconomicRegionNames(allCommunitiesSourceData);
   }, [allCommunitiesSourceData]);
 
-  const theme = { ...ProjectTheme };
-  theme.templates.ArrayFieldTemplate = ArrayLocationFieldTemplate;
+  const theme = useMemo(
+    () => ({
+      ...ProjectTheme,
+      templates: {
+        ...ProjectTheme.templates,
+        ArrayFieldTemplate: ArrayLocationFieldTemplate,
+      },
+    }),
+    []
+  );
 
   const handleSubmit = () => {
     const {

diff --git a/app/tests/pages/analyst/cbc/[cbcId]/[section].test.tsx b/app/tests/pages/analyst/cbc/[cbcId]/[section].test.tsx
@@ -277,7 +277,7 @@ describe('EditCbcSection', () => {
       'root_federalProjectNumber'
     );
     const parentElement = projectStatusElement.closest(
-      '[class^="ProjectFieldTemplate__ErrorWrapper"]'
+      '[class^="ProjectFieldTemplate__StyledInputWrapper"]'
     );
 
     expect(parentElement).toHaveStyle({
@@ -299,7 +299,7 @@ describe('EditCbcSection', () => {
       'root_federalProjectNumber'
     );
     const parentElement = projectStatusElement.closest(
-      '[class^="ProjectFieldTemplate__ErrorWrapper"]'
+      '[class^="ProjectFieldTemplate__StyledInputWrapper"]'
     );
 
     expect(parentElement).toHaveStyle({