feat(fe:FSADT1-1573): create client detail skeleton (#1324)

* feat: add client details page skeleton

* chore: add stub for predictive search error

* feat: update roles allowed

* feat: update redirect url from client search

* test: redirect on click according to feature flag value

* chore: set the feature flag on environments dev and test

* chore: fix script coverage command

* chore: set feature flag value on test setup

* chore: add stub for non-individual client creation

* refactor: setup feature flag value for tests

* docs: comment code

* docs: replace "detail" with "details"

* test: render client details page skeleton

* chore: remove unused code

* chore: remove more unused code

* test: render without crashing

* chore: skip sonar scanning on code block

* test: remove tests where FF is off

* Revert "test: remove tests where FF is off"

This reverts commit 05a91c5.

frontend/cypress/e2e/pages/ClientDetailsPage.cy.ts

@@ -0,0 +1,22 @@
+describe("Client Details Page", () => {
+  beforeEach(() => {
+    cy.visit("/");
+
+    cy.login("[email protected]", "Uat Test", "idir", {
+      given_name: "James",
+      family_name: "Baxter",
+      "cognito:groups": ["CLIENT_VIEWER"],
+    });
+
+    cy.visit("/clients/0");
+  });
+
+  it("renders the page skeleton", () => {
+    cy.get("cds-breadcrumb").should("contain", "Client search");
+    cy.contains("h2", "Client summary");
+    cy.contains("cds-tab", "Client locations");
+    cy.contains("cds-tab", "Client contacts");
+    cy.contains("cds-tab", "Related clients");
+    cy.contains("cds-tab", "Activity log");
+  });
+});

frontend/cypress/e2e/pages/SearchPage.cy.ts

@@ -41,7 +41,25 @@ describe("Search Page", () => {
     });
   };
 
-  beforeEach(() => {
+  const setupFeatureFlag = (ctx: Mocha.Context) => {
+    const titlePath = ctx.currentTest.titlePath();
+    for (const title of titlePath.reverse()) {
+      const ffName = "STAFF_CLIENT_DETAIL";
+
+      if (!title.includes(ffName)) continue;
+
+      const suffix = title.split(ffName)[1];
+      const words = suffix.split(" ");
+      const value = !!words.find((cur) => ["on", "true"].includes(cur));
+
+      cy.addToLocalStorage("VITE_FEATURE_FLAGS", JSON.stringify({ [ffName]: value }));
+
+      // No need to continue looking up in the titlePath
+      break;
+    }
+  };
+
+  beforeEach(function () {
     // reset counters
     predictiveSearchCounter.count = 0;
     fullSearchCounter.count = 0;
@@ -74,6 +92,8 @@ describe("Search Page", () => {
       },
     ).as("fullSearch");
 
+    setupFeatureFlag(this);
+
     cy.viewport(1920, 1080);
     cy.visit("/");
 
@@ -160,14 +180,24 @@ describe("Search Page", () => {
         cy.get("#search-box").find(`cds-combo-box-item[data-id="${clientNumber}"]`).click();
       });
       it("navigates to the client details", () => {
-        const greenDomain = "green-domain.com";
         cy.get("@windowOpen").should(
           "be.calledWith",
-          `https://${greenDomain}/int/client/client02MaintenanceAction.do?bean.clientNumber=${clientNumber}`,
+          `/clients/${clientNumber}`,
           "_blank",
           "noopener",
         );
       });
+      describe("and STAFF_CLIENT_DETAIL is turned off", () => {
+        it("navigates to the client details in the legacy application", () => {
+          const greenDomain = "green-domain.com";
+          cy.get("@windowOpen").should(
+            "be.calledWith",
+            `https://${greenDomain}/int/client/client02MaintenanceAction.do?bean.clientNumber=${clientNumber}`,
+            "_blank",
+            "noopener",
+          );
+        });
+      });
     });
 
     describe("and clicks the Search button", () => {
@@ -207,14 +237,24 @@ describe("Search Page", () => {
           cy.get("cds-table").contains("cds-table-row", clientNumber).click();
         });
         it("navigates to the client details", () => {
-          const greenDomain = "green-domain.com";
           cy.get("@windowOpen").should(
             "be.calledWith",
-            `https://${greenDomain}/int/client/client02MaintenanceAction.do?bean.clientNumber=${clientNumber}`,
+            `/clients/${clientNumber}`,
             "_blank",
             "noopener",
           );
         });
+        describe("and STAFF_CLIENT_DETAIL is turned off", () => {
+          it("navigates to the client details in the legacy application", () => {
+            const greenDomain = "green-domain.com";
+            cy.get("@windowOpen").should(
+              "be.calledWith",
+              `https://${greenDomain}/int/client/client02MaintenanceAction.do?bean.clientNumber=${clientNumber}`,
+              "_blank",
+              "noopener",
+            );
+          });
+        });
       });
 
       describe("and clicks the Next page button on the table footer", () => {

frontend/cypress/support/cypress.d.ts

@@ -6,25 +6,20 @@ declare namespace Cypress {
     addToSessionStorage(key: string, value: any): Chainable<void>;
     expireSessionStorage(key: string): Chainable<void>;
     expireCookie(name: string): Chainable<void>;
-    login(email: string, name: string, provider: string, extras: any = "{}"): Chainable<void>;
+    login(email: string, name: string, provider: string, extras?: any): Chainable<void>;
     logout(): Chainable<void>;
     getMany(names: string[]): Chainable<any[]>;
-    fillFormEntry(
-      field: string,
-      value: string,
-      delayMS: number = 10,
-      area: boolean = false,
-    ): Chainable<void>;
+    fillFormEntry(field: string, value: string, delayMS?: number, area?: boolean): Chainable<void>;
     fillFormEntry(field: string, value: string, options: FillFormEntryOptions): Chainable<void>;
-    clearFormEntry(field: string, area: boolean = false): Chainable<void>;
+    clearFormEntry(field: string, area?: boolean): Chainable<void>;
     selectFormEntry(field: string, value: string, box: boolean): Chainable<void>;
     markCheckbox(field: string): Chainable<void>;
     unmarkCheckbox(field: string): Chainable<void>;
     selectAutocompleteEntry(
       field: string,
       value: string,
       dataid: string,
-      delayTarget: string = "",
+      delayTarget?: string,
     ): Chainable<void>;
     checkInputErrorMessage(field: string, message: string): Chainable<void>;
     checkAutoCompleteErrorMessage(field: string, message: string): Chainable<void>;

frontend/openshift.configmap.dev.yml

@@ -22,4 +22,4 @@ objects:
       name: ${NAME}-${ZONE}-${COMPONENT}-config
     data:
       params.js: |
-        window.localStorage.setItem('VITE_FEATURE_FLAGS','{}');
+        window.localStorage.setItem('VITE_FEATURE_FLAGS','{"STAFF_CLIENT_DETAIL":true}');

frontend/openshift.configmap.test.yml

@@ -22,4 +22,4 @@ objects:
       name: ${NAME}-${ZONE}-${COMPONENT}-config
     data:
       params.js: |
-        window.localStorage.setItem('VITE_FEATURE_FLAGS','{}');
+        window.localStorage.setItem('VITE_FEATURE_FLAGS','{"STAFF_CLIENT_DETAIL":true}');

frontend/package.json

@@ -36,7 +36,7 @@
     "posttest:component": "mv reports/.nyc_report reports/component",
     "test:unit": "cross-env VITE_NODE_ENV=test NODE_ENV=test vitest run --coverage",
     "posttest:unit": "mv reports/.vite_report reports/unit",
-    "test:e2e": "cross-env VITE_NODE_ENV=test VITE_GREEN_DOMAIN=green-domain.com start-server-and-test preview http://127.0.0.1:3000 'cypress run --headless'",
+    "test:e2e": "cross-env VITE_NODE_ENV=test VITE_GREEN_DOMAIN=green-domain.com VITE_FEATURE_FLAGS={\\\"STAFF_CLIENT_DETAIL\\\":true} start-server-and-test preview http://127.0.0.1:3000 'cypress run --headless'",
     "posttest:e2e": "mv reports/.nyc_report reports/e2e",
     "pretest:report:merge": "rm -rf reports-merge && mkdir -p reports-merge && for name in component e2e unit; do cp reports/$name/coverage-final.json reports-merge/$name.json; done",
     "test:report:merge": "mkdir -p .nyc_output && rm -rf coverage && nyc --config nyc.config.json merge reports-merge &&  mv coverage.json .nyc_output/out.json && nyc --config nyc.config.json report --reporter lcov --reporter text-summary --report-dir coverage --temp-dir .nyc_output",