From 87907d9dcaf612d6ec0d64df22755a204d17a236 Mon Sep 17 00:00:00 2001 From: Fernando Terra Date: Mon, 18 Nov 2024 15:03:04 -0300 Subject: [PATCH 01/19] feat: add client details page skeleton --- frontend/src/assets/styles/global.scss | 119 +++++++++++++++++++++-- frontend/src/pages/ClientDetailPage.vue | 124 ++++++++++++++++++++++++ frontend/src/routes.ts | 26 +++++ 3 files changed, 260 insertions(+), 9 deletions(-) create mode 100644 frontend/src/pages/ClientDetailPage.vue diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss index 1d2847927a..7c4bb45eef 100644 --- a/frontend/src/assets/styles/global.scss +++ b/frontend/src/assets/styles/global.scss @@ -506,12 +506,24 @@ cds-accordion-item::part(title) { letter-spacing: 0.01rem; } +cds-tab > div { + color: var(--light-theme-text-text-primary, #131315); + font-size: var(--heading-compact-02-font-size); + font-style: normal; + letter-spacing: 0.01rem; + + width: 9.75rem; + display: flex; + justify-content: space-between; + align-items: center; +} + .light-theme-text-text-primary { color: var(--light-theme-text-text-primary, #131315) !important; } .light-theme-text-text-secondary { - color: var(--light-theme-text-text-secondary, #606062); + color: var(--light-theme-text-text-secondary, #606062) !important; } /* @@ -1395,7 +1407,9 @@ cds-side-nav-items.lower-side-nav { } .table-list, -.submission-content { +.submission-content, +.client-detail-screen, +.client-detail-content { padding: 2.5rem 0rem 2.5rem 16rem; display: flex; flex-direction: column; @@ -1416,12 +1430,26 @@ cds-side-nav { z-index: 10; } -.submission-content { +.submission-content, .client-detail-screen, .client-detail-content { padding: 2.5rem 2rem; gap: 3rem; flex: 4; } +.client-detail-screen { + padding-left: 0; + padding-right: 0; + gap: 0; +} + +.client-detail-content { + padding-top: 0; + padding-bottom: 0; + flex-grow: 0; + box-sizing: border-box; + width: 100%; +} + cds-accordion-item[open]:not([disabled])::part(content), :host(cds-accordion-item[open]:not([disabled])) .cds-ce--accordion__content--md { @@ -1725,6 +1753,13 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { width: 7.875rem; } +.tab-panel { + display: flex; + padding: 2.5rem; + gap: 2rem; + background: var(--light-theme-layer-layer-01, #f3f3f5); +} + /* Small (up to 671px) */ @media screen and (max-width: 671px) { :root { @@ -1887,10 +1922,20 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { width: 0rem; } - .submission-content { + .submission-content, .client-detail-screen, .client-detail-content { padding: 2.5rem 1rem !important; } + .client-detail-screen { + padding-left: 0; + padding-right: 0; + } + + .client-detail-content { + padding-top: 0; + padding-bottom: 0; + } + .grouping-10 { flex-direction: column; flex-wrap: nowrap; @@ -2021,10 +2066,20 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { padding: 2.5rem 0rem; } - .submission-content { + .submission-content, .client-detail-screen, .client-detail-content { padding: 2.5rem 2rem; } + .client-detail-screen { + padding-left: 0; + padding-right: 0; + } + + .client-detail-content { + padding-top: 0; + padding-bottom: 0; + } + .paginator { width: 100%; } @@ -2089,7 +2144,7 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { div#screen div#title { margin-bottom: 2rem; } - .submission-content { + .submission-content, .client-detail-screen, .client-detail-content { --padding-right: 2rem; --padding-left: 18.5rem; padding: 2.5rem var(--padding-right) 2.5rem var(--padding-left); @@ -2098,6 +2153,16 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { (var(--padding-right) + var(--padding-left) + var(--scroll-bar-width)) ); } + .client-detail-screen { + --padding-right: 0; + --padding-left: 16rem; + } + .client-detail-content { + padding-top: 0; + padding-bottom: 0; + --padding-right: 2.5rem; + --padding-left: 2.5rem; + } div.content:has(div.staff svg.submission-badge) { margin-left: 16rem; @@ -2168,7 +2233,7 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { margin-bottom: 2rem; } - .submission-content { + .submission-content, .client-detail-screen, .client-detail-content { --padding-right: 2rem; --padding-left: 18.5rem; padding: 2.5rem var(--padding-right) 2.5rem var(--padding-left); @@ -2178,6 +2243,18 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { ); } + .client-detail-screen { + --padding-right: 0; + --padding-left: 16rem; + } + + .client-detail-content { + padding-top: 0; + padding-bottom: 0; + --padding-right: 2.5rem; + --padding-left: 2.5rem + } + div.content:has(div.frame-03 svg.submission-badge) { margin-left: 12rem; } @@ -2228,7 +2305,7 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { margin-bottom: 2rem; } - .submission-content { + .submission-content, .client-detail-screen, .client-detail-content { --padding-right: 2rem; --padding-left: 18.5rem; padding: 2.5rem var(--padding-right) 2.5rem var(--padding-left); @@ -2238,6 +2315,18 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { ); } + .client-detail-screen { + --padding-right: 0; + --padding-left: 16rem; + } + + .client-detail-content { + padding-top: 0; + padding-bottom: 0; + --padding-right: 2.5rem; + --padding-left: 2.5rem + } + div.content:has(div.frame-03 svg.submission-badge) { margin-left: 12rem; } @@ -2272,7 +2361,7 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { margin-bottom: 2rem; } - .submission-content { + .submission-content, .client-detail-screen, .client-detail-content { --padding-right: 2.5rem; --padding-left: 18.5rem; padding: 2.5rem var(--padding-right) 2.5rem var(--padding-left); @@ -2282,6 +2371,18 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { ); } + .client-detail-screen { + --padding-right: 0; + --padding-left: 16rem; + } + + .client-detail-content { + padding-top: 0; + padding-bottom: 0; + --padding-right: 2.5rem; + --padding-left: 2.5rem + } + div.content:has(div.frame-03 svg.submission-badge) { margin-left: 12rem; } diff --git a/frontend/src/pages/ClientDetailPage.vue b/frontend/src/pages/ClientDetailPage.vue new file mode 100644 index 0000000000..af3e06f40b --- /dev/null +++ b/frontend/src/pages/ClientDetailPage.vue @@ -0,0 +1,124 @@ + + + diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts index f05362c753..1d7b2725c0 100644 --- a/frontend/src/routes.ts +++ b/frontend/src/routes.ts @@ -18,6 +18,7 @@ import ErrorPage from "@/pages/ErrorPage.vue"; import NotFoundPage from "@/pages/NotFoundPage.vue"; import LogoutPage from "@/pages/LogoutPage.vue"; import SearchPage from "@/pages/SearchPage.vue"; +import ClientDetailPage from "@/pages/ClientDetailPage.vue"; import ForestClientUserSession from "@/helpers/ForestClientUserSession"; @@ -203,6 +204,31 @@ export const routes = [ profile: true, }, }, + { + path: "/clients/:clientId", + name: "client-detail", + component: ClientDetailPage, + props: (route) => ({ + clientId: route.params.clientId, + }), + meta: { + format: "full", + hideHeader: false, + requireAuth: true, + showLoggedIn: true, + visibleTo: ["idir"], + redirectTo: { + bceidbusiness: "form", + bcsc: "form", + idir: "internal", + }, + style: "content-stretched", + headersStyle: "headers-compact", + sideMenu: true, + profile: true, + featureFlagged: "STAFF_CLIENT_DETAIL", + }, + }, { path: "/new-client-staff", name: "staff-form", From 74f89c5ff7a8147980e64d212c2dbeb0d89cdfd8 Mon Sep 17 00:00:00 2001 From: Fernando Terra Date: Mon, 18 Nov 2024 15:04:01 -0300 Subject: [PATCH 02/19] chore: add stub for predictive search error --- frontend/stub/mappings/client_search.json | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/frontend/stub/mappings/client_search.json b/frontend/stub/mappings/client_search.json index 2393861100..234de9b618 100644 --- a/frontend/stub/mappings/client_search.json +++ b/frontend/stub/mappings/client_search.json @@ -61,6 +61,28 @@ "body": "[]" } }, + { + "name": "Autocompete Predictive Search error", + "request": { + "urlPath": "/api/clients/search", + "method": "GET", + "queryParameters": { + "keyword": { + "matches": ".*error.*" + } + } + }, + "response": { + "status": 404, + "headers": { + "x-total-count": "0", + "content-type": "application/json;charset=UTF-8", + "Access-Control-Expose-Headers": "x-total-count" + }, + "body": "Page not found", + "fixedDelayMilliseconds": 500 + } + }, { "name": "Full Search pageable (keyword, page and size)", "request": { From 749303de50b449ad44ee5df7fa15b56620daa014 Mon Sep 17 00:00:00 2001 From: Fernando Terra Date: Mon, 18 Nov 2024 15:17:16 -0300 Subject: [PATCH 03/19] feat: update roles allowed --- frontend/src/routes.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts index 1d7b2725c0..488d3217d5 100644 --- a/frontend/src/routes.ts +++ b/frontend/src/routes.ts @@ -205,18 +205,15 @@ export const routes = [ }, }, { - path: "/clients/:clientId", + path: "/clients/:id", name: "client-detail", component: ClientDetailPage, - props: (route) => ({ - clientId: route.params.clientId, - }), meta: { format: "full", hideHeader: false, requireAuth: true, showLoggedIn: true, - visibleTo: ["idir"], + visibleTo: ["CLIENT_VIEWER", "CLIENT_EDITOR", "CLIENT_SUSPEND", "CLIENT_ADMIN"], redirectTo: { bceidbusiness: "form", bcsc: "form", From 8179e7c0424e41ed6790afde688255814d4d11fa Mon Sep 17 00:00:00 2001 From: Fernando Terra Date: Mon, 18 Nov 2024 15:18:05 -0300 Subject: [PATCH 04/19] feat: update redirect url from client search --- frontend/src/pages/SearchPage.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/SearchPage.vue b/frontend/src/pages/SearchPage.vue index b0972d4f41..4eae7af23b 100644 --- a/frontend/src/pages/SearchPage.vue +++ b/frontend/src/pages/SearchPage.vue @@ -20,7 +20,7 @@ import useSvg from "@/composables/useSvg"; // @ts-ignore import Search16 from "@carbon/icons-vue/es/search/16"; -import { greenDomain } from "@/CoreConstants"; +import { greenDomain, featureFlags } from "@/CoreConstants"; import { isAscii, isMaxSizeMsg, @@ -149,7 +149,9 @@ const searchResultToText = (searchResult: ClientSearchResult): string => { const openClientDetails = (clientCode: string) => { if (clientCode) { - const url = `https://${greenDomain}/int/client/client02MaintenanceAction.do?bean.clientNumber=${clientCode}`; + const url = featureFlags.STAFF_CLIENT_DETAIL + ? `/clients/${clientCode}` + : `https://${greenDomain}/int/client/client02MaintenanceAction.do?bean.clientNumber=${clientCode}`; window.open(url, "_blank", "noopener"); } }; From a3c93e8c7f2e575226b3d11d8b3eed28635864db Mon Sep 17 00:00:00 2001 From: Fernando Terra Date: Mon, 18 Nov 2024 17:22:22 -0300 Subject: [PATCH 05/19] test: redirect on click according to feature flag value --- frontend/cypress/e2e/pages/SearchPage.cy.ts | 28 ++++++++++++++++++--- frontend/package.json | 5 ++-- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/frontend/cypress/e2e/pages/SearchPage.cy.ts b/frontend/cypress/e2e/pages/SearchPage.cy.ts index 082d4bb125..5c01d766ba 100644 --- a/frontend/cypress/e2e/pages/SearchPage.cy.ts +++ b/frontend/cypress/e2e/pages/SearchPage.cy.ts @@ -160,14 +160,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", ); }); + if (Cypress.env("STAFF_CLIENT_DETAIL") === false) { + it.only("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 +217,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", ); }); + if (Cypress.env("STAFF_CLIENT_DETAIL") === false) { + it.only("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", () => { diff --git a/frontend/package.json b/frontend/package.json index 748ed3e9da..bcb851feeb 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -30,14 +30,15 @@ "lint": "eslint . --fix --ignore-path .gitignore", "stub": "wiremock --enable-stub-cors --global-response-templating --port 8080 --https-port 8081 --root-dir ./stub --verbose", "precoverage": "npm run test:report:clean", - "coverage": "npm run test:unit && npm run test:component && npm run test:e2e", + "coverage": "npm run test:unit && npm run test:component && npm run test:e2e && test:e2e:clientDetail:off", "postcoverage": "npm run test:report:merge", "test:component": "VITE_MODE=test cypress run --component --headless", "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", + "test:e2e:clientDetail:off": "cross-env VITE_NODE_ENV=test VITE_GREEN_DOMAIN=green-domain.com VITE_FEATURE_FLAGS={\\\"STAFF_CLIENT_DETAIL\\\":false} CYPRESS_STAFF_CLIENT_DETAIL=false start-server-and-test preview http://127.0.0.1:3000 'cypress run --headless --spec cypress/e2e/pages/SearchPage.cy.ts'", "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", "test:report:clean": "rm -rf reports && mkdir -p reports/.nyc_output/processinfo && mkdir -p coverage", From 08de1cbefb0fa0628cf303c24e14771087e12aaa Mon Sep 17 00:00:00 2001 From: Fernando Terra Date: Mon, 18 Nov 2024 17:52:46 -0300 Subject: [PATCH 06/19] chore: set the feature flag on environments dev and test --- frontend/openshift.configmap.dev.yml | 2 +- frontend/openshift.configmap.test.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/openshift.configmap.dev.yml b/frontend/openshift.configmap.dev.yml index edd1423759..ba7b485b09 100644 --- a/frontend/openshift.configmap.dev.yml +++ b/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}'); diff --git a/frontend/openshift.configmap.test.yml b/frontend/openshift.configmap.test.yml index edd1423759..ba7b485b09 100644 --- a/frontend/openshift.configmap.test.yml +++ b/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}'); From ae8e378ea1f9b30b1579f27e58c72cdb6527c45e Mon Sep 17 00:00:00 2001 From: Fernando Terra Date: Mon, 18 Nov 2024 18:38:57 -0300 Subject: [PATCH 07/19] chore: fix script coverage command --- frontend/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index bcb851feeb..7f7d11a008 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -30,7 +30,7 @@ "lint": "eslint . --fix --ignore-path .gitignore", "stub": "wiremock --enable-stub-cors --global-response-templating --port 8080 --https-port 8081 --root-dir ./stub --verbose", "precoverage": "npm run test:report:clean", - "coverage": "npm run test:unit && npm run test:component && npm run test:e2e && test:e2e:clientDetail:off", + "coverage": "npm run test:unit && npm run test:component && npm run test:e2e && npm run test:e2e:clientDetail:off", "postcoverage": "npm run test:report:merge", "test:component": "VITE_MODE=test cypress run --component --headless", "posttest:component": "mv reports/.nyc_report reports/component", From 52d1b4543c4347454cae92f3465e104d21528e3f Mon Sep 17 00:00:00 2001 From: Fernando Terra Date: Tue, 19 Nov 2024 11:10:26 -0300 Subject: [PATCH 08/19] chore: set feature flag value on test setup --- frontend/cypress/e2e/pages/SearchPage.cy.ts | 27 +++++++++++++++------ frontend/package.json | 3 +-- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/frontend/cypress/e2e/pages/SearchPage.cy.ts b/frontend/cypress/e2e/pages/SearchPage.cy.ts index 5c01d766ba..60218aaeda 100644 --- a/frontend/cypress/e2e/pages/SearchPage.cy.ts +++ b/frontend/cypress/e2e/pages/SearchPage.cy.ts @@ -41,7 +41,7 @@ describe("Search Page", () => { }); }; - beforeEach(() => { + beforeEach(function () { // reset counters predictiveSearchCounter.count = 0; fullSearchCounter.count = 0; @@ -74,6 +74,19 @@ describe("Search Page", () => { }, ).as("fullSearch"); + const titlePath = this.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 })); + } + cy.viewport(1920, 1080); cy.visit("/"); @@ -167,8 +180,8 @@ describe("Search Page", () => { "noopener", ); }); - if (Cypress.env("STAFF_CLIENT_DETAIL") === false) { - it.only("navigates to the client details in the legacy application", () => { + 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", @@ -177,7 +190,7 @@ describe("Search Page", () => { "noopener", ); }); - } + }); }); describe("and clicks the Search button", () => { @@ -224,8 +237,8 @@ describe("Search Page", () => { "noopener", ); }); - if (Cypress.env("STAFF_CLIENT_DETAIL") === false) { - it.only("navigates to the client details in the legacy application", () => { + 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", @@ -234,7 +247,7 @@ describe("Search Page", () => { "noopener", ); }); - } + }); }); describe("and clicks the Next page button on the table footer", () => { diff --git a/frontend/package.json b/frontend/package.json index 7f7d11a008..f5950a3687 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -30,7 +30,7 @@ "lint": "eslint . --fix --ignore-path .gitignore", "stub": "wiremock --enable-stub-cors --global-response-templating --port 8080 --https-port 8081 --root-dir ./stub --verbose", "precoverage": "npm run test:report:clean", - "coverage": "npm run test:unit && npm run test:component && npm run test:e2e && npm run test:e2e:clientDetail:off", + "coverage": "npm run test:unit && npm run test:component && npm run test:e2e", "postcoverage": "npm run test:report:merge", "test:component": "VITE_MODE=test cypress run --component --headless", "posttest:component": "mv reports/.nyc_report reports/component", @@ -38,7 +38,6 @@ "posttest:unit": "mv reports/.vite_report reports/unit", "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", - "test:e2e:clientDetail:off": "cross-env VITE_NODE_ENV=test VITE_GREEN_DOMAIN=green-domain.com VITE_FEATURE_FLAGS={\\\"STAFF_CLIENT_DETAIL\\\":false} CYPRESS_STAFF_CLIENT_DETAIL=false start-server-and-test preview http://127.0.0.1:3000 'cypress run --headless --spec cypress/e2e/pages/SearchPage.cy.ts'", "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", "test:report:clean": "rm -rf reports && mkdir -p reports/.nyc_output/processinfo && mkdir -p coverage", From a23939cef91eccd52301e19ab57e16e2fef5323e Mon Sep 17 00:00:00 2001 From: Fernando Terra Date: Tue, 19 Nov 2024 11:11:33 -0300 Subject: [PATCH 09/19] chore: add stub for non-individual client creation --- frontend/stub/mappings/staff_submission.json | 23 ++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/frontend/stub/mappings/staff_submission.json b/frontend/stub/mappings/staff_submission.json index 1931c6fa04..1c490da008 100644 --- a/frontend/stub/mappings/staff_submission.json +++ b/frontend/stub/mappings/staff_submission.json @@ -78,6 +78,29 @@ }, "fixedDelayMilliseconds": 750 } + }, + + { + "name": "Submission Success for Staff - Non-individual", + "request": { + "url": "/api/clients/submissions/staff", + "method": "POST", + "bodyPatterns": [ + { + "matchesJsonPath": "$.businessInformation[?(@.clientType != 'I')]" + } + ] + }, + "response": { + "status": 201, + "headers": { + "Content-Type": "application/json", + "Access-Control-Expose-Headers": "x-client-id, Location", + "Location": "/api/clients/details/00123456", + "x-client-id": "00123456" + }, + "fixedDelayMilliseconds": 750 + } } ] From 5f8a627d96e6b26f2baa289533d911b9944876cd Mon Sep 17 00:00:00 2001 From: Fernando Terra Date: Tue, 19 Nov 2024 11:15:42 -0300 Subject: [PATCH 10/19] refactor: setup feature flag value for tests --- frontend/cypress/e2e/pages/SearchPage.cy.ts | 28 ++++++++++++--------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/frontend/cypress/e2e/pages/SearchPage.cy.ts b/frontend/cypress/e2e/pages/SearchPage.cy.ts index 60218aaeda..991b2bff6b 100644 --- a/frontend/cypress/e2e/pages/SearchPage.cy.ts +++ b/frontend/cypress/e2e/pages/SearchPage.cy.ts @@ -41,6 +41,21 @@ describe("Search Page", () => { }); }; + 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 })); + } + }; + beforeEach(function () { // reset counters predictiveSearchCounter.count = 0; @@ -74,18 +89,7 @@ describe("Search Page", () => { }, ).as("fullSearch"); - const titlePath = this.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 })); - } + setupFeatureFlag(this); cy.viewport(1920, 1080); cy.visit("/"); From 4e11538f4bf55009e69201eb2ca5bc7416e79828 Mon Sep 17 00:00:00 2001 From: Fernando Terra Date: Tue, 19 Nov 2024 11:21:59 -0300 Subject: [PATCH 11/19] docs: comment code --- frontend/cypress/e2e/pages/SearchPage.cy.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/cypress/e2e/pages/SearchPage.cy.ts b/frontend/cypress/e2e/pages/SearchPage.cy.ts index 991b2bff6b..115fb9fc8d 100644 --- a/frontend/cypress/e2e/pages/SearchPage.cy.ts +++ b/frontend/cypress/e2e/pages/SearchPage.cy.ts @@ -53,6 +53,9 @@ describe("Search Page", () => { 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; } }; From ee600a2f88e2b0c549126acffa154859edc26d03 Mon Sep 17 00:00:00 2001 From: Fernando Terra Date: Tue, 19 Nov 2024 12:12:03 -0300 Subject: [PATCH 12/19] docs: replace "detail" with "details" --- frontend/src/assets/styles/global.scss | 46 +++++++++---------- ...ntDetailPage.vue => ClientDetailsPage.vue} | 4 +- frontend/src/routes.ts | 6 +-- 3 files changed, 28 insertions(+), 28 deletions(-) rename frontend/src/pages/{ClientDetailPage.vue => ClientDetailsPage.vue} (97%) diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss index 7c4bb45eef..e0ad32667d 100644 --- a/frontend/src/assets/styles/global.scss +++ b/frontend/src/assets/styles/global.scss @@ -1408,8 +1408,8 @@ cds-side-nav-items.lower-side-nav { .table-list, .submission-content, -.client-detail-screen, -.client-detail-content { +.client-details-screen, +.client-details-content { padding: 2.5rem 0rem 2.5rem 16rem; display: flex; flex-direction: column; @@ -1430,19 +1430,19 @@ cds-side-nav { z-index: 10; } -.submission-content, .client-detail-screen, .client-detail-content { +.submission-content, .client-details-screen, .client-details-content { padding: 2.5rem 2rem; gap: 3rem; flex: 4; } -.client-detail-screen { +.client-details-screen { padding-left: 0; padding-right: 0; gap: 0; } -.client-detail-content { +.client-details-content { padding-top: 0; padding-bottom: 0; flex-grow: 0; @@ -1922,16 +1922,16 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { width: 0rem; } - .submission-content, .client-detail-screen, .client-detail-content { + .submission-content, .client-details-screen, .client-details-content { padding: 2.5rem 1rem !important; } - .client-detail-screen { + .client-details-screen { padding-left: 0; padding-right: 0; } - .client-detail-content { + .client-details-content { padding-top: 0; padding-bottom: 0; } @@ -2066,16 +2066,16 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { padding: 2.5rem 0rem; } - .submission-content, .client-detail-screen, .client-detail-content { + .submission-content, .client-details-screen, .client-details-content { padding: 2.5rem 2rem; } - .client-detail-screen { + .client-details-screen { padding-left: 0; padding-right: 0; } - .client-detail-content { + .client-details-content { padding-top: 0; padding-bottom: 0; } @@ -2144,7 +2144,7 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { div#screen div#title { margin-bottom: 2rem; } - .submission-content, .client-detail-screen, .client-detail-content { + .submission-content, .client-details-screen, .client-details-content { --padding-right: 2rem; --padding-left: 18.5rem; padding: 2.5rem var(--padding-right) 2.5rem var(--padding-left); @@ -2153,11 +2153,11 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { (var(--padding-right) + var(--padding-left) + var(--scroll-bar-width)) ); } - .client-detail-screen { + .client-details-screen { --padding-right: 0; --padding-left: 16rem; } - .client-detail-content { + .client-details-content { padding-top: 0; padding-bottom: 0; --padding-right: 2.5rem; @@ -2233,7 +2233,7 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { margin-bottom: 2rem; } - .submission-content, .client-detail-screen, .client-detail-content { + .submission-content, .client-details-screen, .client-details-content { --padding-right: 2rem; --padding-left: 18.5rem; padding: 2.5rem var(--padding-right) 2.5rem var(--padding-left); @@ -2243,12 +2243,12 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { ); } - .client-detail-screen { + .client-details-screen { --padding-right: 0; --padding-left: 16rem; } - .client-detail-content { + .client-details-content { padding-top: 0; padding-bottom: 0; --padding-right: 2.5rem; @@ -2305,7 +2305,7 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { margin-bottom: 2rem; } - .submission-content, .client-detail-screen, .client-detail-content { + .submission-content, .client-details-screen, .client-details-content { --padding-right: 2rem; --padding-left: 18.5rem; padding: 2.5rem var(--padding-right) 2.5rem var(--padding-left); @@ -2315,12 +2315,12 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { ); } - .client-detail-screen { + .client-details-screen { --padding-right: 0; --padding-left: 16rem; } - .client-detail-content { + .client-details-content { padding-top: 0; padding-bottom: 0; --padding-right: 2.5rem; @@ -2361,7 +2361,7 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { margin-bottom: 2rem; } - .submission-content, .client-detail-screen, .client-detail-content { + .submission-content, .client-details-screen, .client-details-content { --padding-right: 2.5rem; --padding-left: 18.5rem; padding: 2.5rem var(--padding-right) 2.5rem var(--padding-left); @@ -2371,12 +2371,12 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 { ); } - .client-detail-screen { + .client-details-screen { --padding-right: 0; --padding-left: 16rem; } - .client-detail-content { + .client-details-content { padding-top: 0; padding-bottom: 0; --padding-right: 2.5rem; diff --git a/frontend/src/pages/ClientDetailPage.vue b/frontend/src/pages/ClientDetailsPage.vue similarity index 97% rename from frontend/src/pages/ClientDetailPage.vue rename to frontend/src/pages/ClientDetailsPage.vue index af3e06f40b..b1ead3e7fb 100644 --- a/frontend/src/pages/ClientDetailPage.vue +++ b/frontend/src/pages/ClientDetailsPage.vue @@ -48,8 +48,8 @@ const goodStanding = (goodStanding: string): string => {