ORV2-3259 - FE: Bridge Calc Tool (#1792)

Co-authored-by: GlenAOT <[email protected]>
Co-authored-by: zgong-gov <[email protected]>

Author: glen-aot

database/mssql/scripts/sampledata/dbo.ORBC_FEATURE_FLAG.Table.sql

@@ -301,6 +301,28 @@ VALUES
     N'dbo',
     GETUTCDATE()
   );
+INSERT INTO
+  [dbo].[ORBC_FEATURE_FLAG] (
+    [FEATURE_ID],
+    [FEATURE_KEY],
+    [FEATURE_VALUE],
+    [CONCURRENCY_CONTROL_NUMBER],
+    [DB_CREATE_USERID],
+    [DB_CREATE_TIMESTAMP],
+    [DB_LAST_UPDATE_USERID],
+    [DB_LAST_UPDATE_TIMESTAMP]
+  )
+VALUES
+  (
+    '14',
+    'BRIDGE-FORMULA-CALCULATION-TOOL',
+    'ENABLED',
+    NULL,
+    N'dbo',
+    GETUTCDATE(),
+    N'dbo',
+    GETUTCDATE()
+  );
 
 SET
   IDENTITY_INSERT [dbo].[ORBC_FEATURE_FLAG] OFF

frontend/package-lock.json

@@ -21,7 +21,7 @@
     "material-react-table": "^2.13.3",
     "mui-nested-menu": "^3.4.0",
     "oidc-client-ts": "^3.1.0",
-    "onroute-policy-engine": "^1.4.1",
+    "onroute-policy-engine": "^1.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",

frontend/package.json

@@ -18,8 +18,6 @@ import { Header } from "./common/components/header/Header";
 import { Footer } from "./common/components/footer/Footer";
 import { bcGovTheme } from "./themes/bcGovTheme";
 import { NavIconSideBar } from "./common/components/naviconsidebar/NavIconSideBar";
-import { NavIconHomeButton } from "./common/components/naviconsidebar/NavIconHomeButton";
-import { NavIconReportButton } from "./common/components/naviconsidebar/NavIconReportButton";
 import { Nullable, Optional } from "./common/types/common";
 import { VerifiedClient, UserClaimsType } from "./common/authentication/types";
 import { SuspendSnackBar } from "./common/components/snackbar/SuspendSnackBar";
@@ -168,10 +166,7 @@ const App = () => {
                   <Router>
                     <Header />
                     <SuspendSnackBar />
-                    <NavIconSideBar>
-                      <NavIconHomeButton />
-                      <NavIconReportButton />
-                    </NavIconSideBar>
+                    <NavIconSideBar />
                     <AppRoutes />
                   </Router>
                 </CartContextProvider>

frontend/public/Bridge_Formula_Calculation_Tool_Diagram.png

@@ -433,6 +433,13 @@ const MISCELLANEOUS = {
   STAFF_ACT_AS_COMPANY: {
     allowedIDIRRoles: [PC, SA, FIN, CTPO, HQA],
   },
+
+  /**
+   * Bridge Formula Calculation Tool available from Sidebar
+   */
+  BRIDGE_FORMULA_CALCULATION_TOOL: {
+    allowedIDIRRoles: [HQA, SA, PC, CTPO, EO],
+  },
 } as const;
 
 /**

frontend/src/App.tsx

@@ -9,6 +9,7 @@
   align-items: flex-start;
   width: fit-content;
   width: -moz-fit-content; /* For Firefox, Firefox Android */
+  white-space: pre-wrap;
 
   &#{&}--error {
     background-color: orbcStyles.$bc-messages-red-text;

frontend/src/common/authentication/PermissionMatrix.ts

@@ -1,4 +1,4 @@
-@use "../../../../themes/orbcStyles";
+@use "../../../../themes/orbcStyles.scss";
 
 .number-input {
   & &__label {
@@ -10,7 +10,7 @@
   &#{&}--error &__label {
     color: orbcStyles.$bc-black;
   }
-
+  
   &#{&}--error &__input {
     &:hover {
       fieldset {
@@ -33,5 +33,9 @@
         border: 2px solid orbcStyles.$focus-blue;   
       }
     }
+
+    input:disabled + fieldset {
+      background-color: orbcStyles.$bc-background-light-grey;
+    }
   }
 }

frontend/src/common/components/banners/BcGovAlertBanner.scss

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   OutlinedInput,
   OutlinedInputProps,
@@ -8,12 +8,14 @@ import {
 } from "@mui/material";
 
 import "./NumberInput.scss";
-import { applyWhenNotNullable, getDefaultRequiredVal } from "../../../helpers/util";
+import {
+  applyWhenNotNullable,
+  getDefaultRequiredVal,
+} from "../../../helpers/util";
 import { convertToNumberIfValid } from "../../../helpers/numeric/convertToNumberIfValid";
 import { isNull, RequiredOrNull } from "../../../types/common";
 
-type NumberInputClassKey =
-  "root" | "label";
+type NumberInputClassKey = "root" | "label";
 
 export interface NumberInputProps {
   classes?: Partial<Record<NumberInputClassKey, string>>;
@@ -35,34 +37,56 @@ export const NumberInput = (props: NumberInputProps) => {
   const helperMessages = getDefaultRequiredVal([], props.helperText?.messages);
   const errorMessages = getDefaultRequiredVal([], props.helperText?.errors);
   const helperTexts = [
-    ...helperMessages.map(message => ({
+    ...helperMessages.map((message) => ({
       type: "message",
       message,
     })),
-    ...errorMessages.map(message => ({
+    ...errorMessages.map((message) => ({
       type: "error",
       message,
     })),
   ];
 
-  const { maskFn, onChange, onBlur, ...inputProps} = props.inputProps;
+  const { maskFn, onChange, onBlur, ...inputProps } = props.inputProps;
   const inputSlotProps = inputProps.slotProps?.input;
+  const inputValue = inputProps.value;
   const initialValueDisplay = applyWhenNotNullable(
-    (num) => maskFn ? maskFn(num) : `${num}`,
-    inputProps.value,
+    (num) => (maskFn ? maskFn(num) : `${num}`),
+    inputValue,
     "",
   );
 
   const [valueDisplay, setValueDisplay] = useState<string>(initialValueDisplay);
 
+  useEffect(() => {
+    setValueDisplay(
+      applyWhenNotNullable(
+        (num) => (maskFn ? maskFn(num) : `${num}`),
+        inputValue,
+        "",
+      ),
+    );
+  }, [inputValue]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const updatedVal = e.target.value;
+
+    // Allow clearing the input
+    if (updatedVal === "") {
+      setValueDisplay(updatedVal);
+      onChange?.(e);
+      return;
+    }
+
     const numericVal = convertToNumberIfValid(updatedVal, null);
 
     // If an invalid numeric string was inputted, do nothing
-    if (isNull(numericVal)) return;
+    if (isNull(numericVal)) {
+      return;
+    }
 
     // Otherwise display it without formatting it immediately (as that affects user's ability to input)
+
     setValueDisplay(updatedVal);
     onChange?.(e);
   };
@@ -81,9 +105,7 @@ export const NumberInput = (props: NumberInputProps) => {
     <FormControl
       margin="normal"
       className={`
-        number-input ${
-          props.classes?.root ? props.classes.root : ""
-        } ${
+        number-input ${props.classes?.root ? props.classes.root : ""} ${
           errorMessages.length > 0 ? "number-input--error" : ""
         }
       `}
@@ -102,20 +124,18 @@ export const NumberInput = (props: NumberInputProps) => {
 
       <OutlinedInput
         {...inputProps}
-        className={
-          `number-input__input ${
-            inputProps.className ? inputProps.className : ""
-          }`
-        }
-        type="number"
+        className={`number-input__input ${
+          inputProps.className ? inputProps.className : ""
+        }`}
+        type="text"
         value={valueDisplay}
         onChange={handleChange}
         onBlur={handleBlur}
         slotProps={{
           ...inputProps.slotProps,
           input: {
             ...inputSlotProps,
-            type: "number",
+            type: "text",
           },
         }}
       />

frontend/src/common/components/form/subFormComponents/NumberInput.scss

@@ -0,0 +1,28 @@
+import { useLocation, useNavigate } from "react-router-dom";
+
+import { useContext } from "react";
+import { IDIR_ROUTES } from "../../../routes/constants";
+import OnRouteBCContext from "../../authentication/OnRouteBCContext";
+import { NavButton } from "./NavButton";
+import { NAV_BUTTON_TYPES } from "./types/NavButtonType";
+
+/**
+ * Displays the navigation icon for the Bridge Formula Calculation Tool on the NavIconSideBar
+ */
+export const NavIconBFCTButton = () => {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const isActive = pathname === IDIR_ROUTES.WELCOME;
+  const { clearCompanyContext } = useContext(OnRouteBCContext);
+
+  return (
+    <NavButton
+      type={NAV_BUTTON_TYPES.BFCT}
+      onClick={() => {
+        clearCompanyContext?.();
+        navigate(IDIR_ROUTES.BRIDGE_FORMULA_CALCULATION_TOOL);
+      }}
+      isActive={isActive}
+    />
+  );
+};

frontend/src/common/components/form/subFormComponents/NumberInput.tsx

@@ -5,16 +5,15 @@ import { IDPS } from "../../types/idp";
 import "./NavIconSideBar.scss";
 import OnRouteBCContext from "../../../common/authentication/OnRouteBCContext";
 import { USER_ROLE } from "../../../common/authentication/types";
-
-interface NavIconSideBarProps {
-  children?: React.ReactNode;
-}
+import { NavIconHomeButton } from "./NavIconHomeButton";
+import { NavIconReportButton } from "./NavIconReportButton";
+import { NavIconBFCTButton } from "./NavIconBFCTButton";
+import { useFeatureFlagsQuery } from "../../hooks/hooks";
 
 /**
  * Displays a sidebar with NavIcon buttons as children
  */
-export const NavIconSideBar = (props: NavIconSideBarProps) => {
-  const { children } = props;
+export const NavIconSideBar = () => {
   const { isAuthenticated, user } = useAuth();
   const { idirUserDetails } = useContext(OnRouteBCContext);
   const isIdir = user?.profile?.identity_provider === IDPS.IDIR;
@@ -24,7 +23,16 @@ export const NavIconSideBar = (props: NavIconSideBarProps) => {
   const shouldShowSideBar =
     isAuthenticated && isIdir && idirUserDetails?.userName && !isEofficer;
 
+  // Determine when to hide the BridgeFormulaCalculationTool button based on its corresponding feature flag
+  const { data: featureFlags } = useFeatureFlagsQuery();
+  const enableBFCT =
+    featureFlags?.["BRIDGE-FORMULA-CALCULATION-TOOL"] === "ENABLED";
+
   return shouldShowSideBar ? (
-    <div className="nav-icon-side-bar">{children}</div>
+    <div className="nav-icon-side-bar">
+      <NavIconHomeButton />
+      <NavIconReportButton />
+      {enableBFCT && <NavIconBFCTButton />}
+    </div>
   ) : null;
 };

frontend/src/common/components/naviconsidebar/NavIconBFCTButton.tsx

@@ -1,9 +1,14 @@
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { faFileLines, faHome } from "@fortawesome/free-solid-svg-icons";
+import {
+  faFileLines,
+  faHome,
+  faTruckMoving,
+} from "@fortawesome/free-solid-svg-icons";
 
 export const NAV_BUTTON_TYPES = {
   HOME: "home",
   REPORT: "report",
+  BFCT: "bfct",
 } as const;
 
 export type NavButtonType =
@@ -14,13 +19,21 @@ export const getNavButtonTitle = (type: NavButtonType): string => {
     return "Home";
   }
 
-  return "Report";
+  if (type === NAV_BUTTON_TYPES.REPORT) {
+    return "Report";
+  }
+
+  return "Bridge Formula Calculation Tool";
 };
 
 export const getIcon = (type: NavButtonType): IconDefinition => {
   if (type === NAV_BUTTON_TYPES.HOME) {
     return faHome;
   }
 
-  return faFileLines;
+  if (type === NAV_BUTTON_TYPES.REPORT) {
+    return faFileLines;
+  }
+
+  return faTruckMoving;
 };