From b656df7d7273fabcb2b1f056dbc351e67f54eeb3 Mon Sep 17 00:00:00 2001
From: Fernando Terra <79578735+fterra-encora@users.noreply.github.com>
Date: Mon, 28 Oct 2024 23:38:41 -0300
Subject: [PATCH] feat(fe:FSADT1-1523): Apply design styling to Search screen
 (#1282)

* feat: add slot for custom item component on the Auto Complete

* feat: customize predictive search result items

* feat: allow custom size for Auto Complete

* feat: display no results message

* feat: update search-line paddings

* feat: update placeholder color

* fix: update function toTitleCase

* test: display no results message

* fix: prevent reading from undefined

* chore: update stubs

* fix: remove unnecessary css code

---------

Co-authored-by: Maria Martinez <77364706+mamartinezmejia@users.noreply.github.com>
---
 frontend/cypress/e2e/pages/SearchPage.cy.ts   |  34 ++-
 frontend/src/assets/styles/global.scss        |  30 ++-
 .../forms/AutoCompleteInputComponent.vue      |  19 +-
 frontend/src/dto/CommonTypesDto.ts            |   4 +
 frontend/src/pages/SearchPage.vue             |  54 +++--
 frontend/src/services/ForestClientService.ts  |  17 +-
 .../__files/response-client-search-page0.json |   4 +-
 .../services/ForestClientService.spec.ts      | 197 ++++++++++--------
 8 files changed, 239 insertions(+), 120 deletions(-)

diff --git a/frontend/cypress/e2e/pages/SearchPage.cy.ts b/frontend/cypress/e2e/pages/SearchPage.cy.ts
index cfe6e589b5..a715a9b1b5 100644
--- a/frontend/cypress/e2e/pages/SearchPage.cy.ts
+++ b/frontend/cypress/e2e/pages/SearchPage.cy.ts
@@ -157,7 +157,7 @@ describe("Search Page", () => {
           .should("have.length.greaterThan", 0)
           .should("be.visible");
 
-        cy.get("#search-box").find(`cds-combo-box-item[data-value^="${clientNumber}"]`).click();
+        cy.get("#search-box").find(`cds-combo-box-item[data-id="${clientNumber}"]`).click();
       });
       it("navigates to the client details", () => {
         const greenDomain = "green-domain.com";
@@ -396,4 +396,36 @@ describe("Search Page", () => {
       });
     });
   });
+
+  describe("when the API finds no matching results", () => {
+    beforeEach(() => {
+      // The "empty" value actually triggers the empty array response
+      cy.fillFormEntry("#search-box", "empty");
+    });
+    describe("and user clicks the Search button", () => {
+      beforeEach(() => {
+        cy.get("#search-button").click();
+      });
+
+      it('displays a "No results" message that includes the submitted search value', () => {
+        cy.wait("@fullSearch");
+
+        cy.contains("No results for “empty”");
+      });
+
+      describe("and the user types something else in the search box but does not re-submit the full search", () => {
+        beforeEach(() => {
+          cy.wait("@fullSearch");
+
+          cy.fillFormEntry("#search-box", "other");
+        });
+
+        it('still displays the "No results" message with the value that was previously submitted', () => {
+          cy.wait(200);
+
+          cy.contains("No results for “empty”");
+        });
+      });
+    });
+  });
 });
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
index 43e8aca81b..50681690d1 100644
--- a/frontend/src/assets/styles/global.scss
+++ b/frontend/src/assets/styles/global.scss
@@ -1641,14 +1641,42 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01 {
 }
 
 #search-line {
+  --lg-size: 3rem;
+  --padding-size: 2.5rem;
+
   display: flex;
-  align-items: flex-end;
+  align-items: flex-start;
+  min-height: calc(var(--lg-size) + var(--padding-size));
+  padding: 0 var(--padding-size);
 
   .grouping-02 {
     flex-grow: 1;
   }
 }
 
+#search-box {
+  --row-height: 2.875rem;
+
+  cds-combo-box-item {
+    block-size: var(--row-height);
+  }
+
+  &::part(cds--combo-box), &::part(input) {
+    border-bottom-width: 0;
+  }
+
+  &::part(input)::placeholder {
+    color: var(--light-theme-text-text-primary);
+  }
+}
+
+.search-result-item {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin: -0.0625rem 0;
+}
+
 #search-button {
   width: 7.875rem;
 }
diff --git a/frontend/src/components/forms/AutoCompleteInputComponent.vue b/frontend/src/components/forms/AutoCompleteInputComponent.vue
index a6a3833b83..c71f634a46 100644
--- a/frontend/src/components/forms/AutoCompleteInputComponent.vue
+++ b/frontend/src/components/forms/AutoCompleteInputComponent.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T">
 import { ref, computed, watch, nextTick } from "vue";
 // Carbon
 import "@carbon/web-components/es/components/combo-box/index";
@@ -7,8 +7,9 @@ import type { CDSComboBox } from "@carbon/web-components";
 // Composables
 import { useEventBus } from "@vueuse/core";
 // Types
-import type { BusinessSearchResult, CodeNameType } from "@/dto/CommonTypesDto";
+import type { BusinessSearchResult, CodeNameType, CodeNameValue } from "@/dto/CommonTypesDto";
 import { isEmpty, type ValidationMessageType } from "@/dto/CommonTypesDto";
+import type { DROPDOWN_SIZE } from "@carbon/web-components/es/components/dropdown/defs";
 
 //Define the input properties for this component
 const props = withDefaults(
@@ -18,8 +19,9 @@ const props = withDefaults(
     ariaLabel?: string;
     tip?: string;
     placeholder?: string;
+    size?: `${DROPDOWN_SIZE}`;
     modelValue: string;
-    contents: Array<BusinessSearchResult>;
+    contents: Array<CodeNameValue<T>>;
     validations: Array<Function>;
     errorMessage?: string;
     loading?: boolean;
@@ -82,15 +84,15 @@ watch(
 );
 
 // This is to make the input list contains the selected value to show when component render
-const inputList = computed<Array<BusinessSearchResult>>(() => {
+const inputList = computed<Array<CodeNameValue<T>>>(() => {
   if (props.contents?.length > 0) {
     return props.contents.filter((entry) => entry.name);
   } else if (props.modelValue !== userValue.value) {
     // Needed when the component mounts with a pre-filled value.
-    return [{ name: props.modelValue, code: "", status: "", legalType: "" }];
+    return [{ name: props.modelValue, code: "", value: undefined }];
   } else if (props.modelValue && showLoading.value) {
     // Just to give a "loading" feedback.
-    return [{ name: loadingName, code: "", status: "", legalType: "" }];
+    return [{ name: loadingName, code: "", value: undefined }];
   }
   return [];
 });
@@ -313,6 +315,7 @@ const safeHelperText = computed(() => props.tip || " ");
       <cds-combo-box
         ref="cdsComboBoxRef"
         :id="id"
+        :size="size"
         :class="warning ? 'warning' : ''"
         :autocomplete="autocomplete"
         :title-text="label"
@@ -359,7 +362,9 @@ const safeHelperText = computed(() => props.tip || " ");
             <cds-inline-loading />
           </template>
           <template v-else>
-            {{ item.name }}
+            <slot :value="item.value">
+              {{ item.name }}
+            </slot>
           </template>
         </cds-combo-box-item>
       </cds-combo-box>
diff --git a/frontend/src/dto/CommonTypesDto.ts b/frontend/src/dto/CommonTypesDto.ts
index cabbbb14fd..8a97d6ed03 100644
--- a/frontend/src/dto/CommonTypesDto.ts
+++ b/frontend/src/dto/CommonTypesDto.ts
@@ -11,6 +11,10 @@ export interface CodeNameType {
   name: string;
 }
 
+export interface CodeNameValue<T> extends CodeNameType {
+  value: T;
+}
+
 export interface BusinessSearchResult {
   code: string;
   name: string;
diff --git a/frontend/src/pages/SearchPage.vue b/frontend/src/pages/SearchPage.vue
index 43d1e5baea..9b136c4a38 100644
--- a/frontend/src/pages/SearchPage.vue
+++ b/frontend/src/pages/SearchPage.vue
@@ -12,9 +12,10 @@ import "@carbon/web-components/es/components/tag/index";
 import { useFetchTo } from "@/composables/useFetch";
 import { useEventBus } from "@vueuse/core";
 
-import type { ClientSearchResult, CodeNameType } from "@/dto/CommonTypesDto";
+import type { ClientSearchResult, CodeNameValue } from "@/dto/CommonTypesDto";
 import { adminEmail, getObfuscatedEmailLink, toTitleCase } from "@/services/ForestClientService";
 import summit from "@carbon/pictograms/es/summit";
+import userSearch from "@carbon/pictograms/es/user--search";
 import useSvg from "@/composables/useSvg";
 
 // @ts-ignore
@@ -30,6 +31,7 @@ import {
 const revalidateBus = useEventBus<string[] | undefined>("revalidate-bus");
 
 const summitSvg = useSvg(summit);
+const userSearchSvg = useSvg(userSearch);
 
 const userhasAuthority = ["CLIENT_VIEWER", "CLIENT_EDITOR", "CLIENT_ADMIN", "CLIENT_SUSPEND"].some(authority => ForestClientUserSession.authorities.includes(authority));
 
@@ -42,6 +44,7 @@ const totalItems = ref(0);
 const pageSize = ref(10);
 
 const searchKeyword = ref("");
+const lastSearchKeyword = ref("");
 
 // empty is valid
 const valid = ref(true);
@@ -75,6 +78,8 @@ const search = (skipResetPage = false) => {
   if (!skipResetPage) {
     pageNumber.value = 1;
   }
+
+  lastSearchKeyword.value = searchKeyword.value;
   fetchSearch();
 };
 
@@ -116,18 +121,29 @@ const paginate = (event: any) => {
 };
 
 /**
- * Converts a client search result to a code/name representation.
+ * Converts a client search result to a code/name/value representation.
  * @param searchResult The client search result
  */
-const searchResultToCodeName = (searchResult: ClientSearchResult): CodeNameType => {
-  const { clientNumber, clientFullName, clientType, city, clientStatus } = searchResult;
+const searchResultToCodeNameValue = (
+  searchResult: ClientSearchResult,
+): CodeNameValue<ClientSearchResult> => {
+  const { clientNumber, clientFullName } = searchResult;
   const result = {
     code: clientNumber,
-    name: `${toTitleCase(`${clientNumber}, ${clientFullName}, ${clientType}, ${city}`)} (${clientStatus})`,
+    name: clientFullName,
+    value: searchResult,
   };
   return result;
 };
 
+const searchResultToCodeNameValueList = (list: ClientSearchResult[]) => list.map(searchResultToCodeNameValue);
+
+const searchResultToText = (searchResult: ClientSearchResult): string => {
+  const { clientNumber, clientFullName, clientType, city } = searchResult;
+  const result = toTitleCase(`${clientNumber}, ${clientFullName}, ${clientType}, ${city}`);
+  return result;
+};
+
 const openClientDetails = (clientCode: string) => {
   if (clientCode) {
     const url = `https://${greenDomain}/int/client/client02MaintenanceAction.do?bean.clientNumber=${clientCode}`;
@@ -160,7 +176,6 @@ onMounted(() => {
 
 <template>
   <div id="screen" class="table-list">
-
     <div id="title" v-if="userhasAuthority">
       <div>
         <div class="form-header-title mg-sd-25">
@@ -202,8 +217,9 @@ onMounted(() => {
           autocomplete="off"
           tip=""
           placeholder="Search by client number, name or acronym"
+          size="lg"
           v-model="searchKeyword"
-          :contents="content?.map(searchResultToCodeName)"
+          :contents="searchResultToCodeNameValueList(content)"
           :validations="validations"
           :validations-on-change="validationsOnChange"
           :loading="loading"
@@ -212,7 +228,15 @@ onMounted(() => {
           @update:model-value="valid = false"
           @error="valid = !$event"
           @press:enter="search()"
-        />
+          #="{ value }"
+        >
+          <div class="search-result-item" v-if="value">
+            {{ searchResultToText(value) }}
+            <cds-tag :type="tagColor(value.clientStatus)" title="">
+              <span>{{ value.clientStatus }}</span>
+            </cds-tag>
+          </div>
+        </AutoCompleteInputComponent>
       </data-fetcher>
       <cds-button kind="primary" @click.prevent="search()" id="search-button">
         <span>Search</span>
@@ -265,16 +289,22 @@ onMounted(() => {
       />
     </div>
 
-    <div
-      class="empty-table-list"
-      v-if="(!tableData || totalItems == 0) && userhasAuthority && !loadingSearch"
-    >
+    <div class="empty-table-list" v-if="!tableData && userhasAuthority && !loadingSearch">
       <summit-svg alt="Summit pictogram" class="standard-svg" />
       <p class="heading-02">Nothing to show yet!</p>
       <p class="body-compact-01">Enter at least one criteria to start the search.</p>
       <p class="body-compact-01">The list will display here.</p>
     </div>
 
+    <div
+      class="empty-table-list"
+      v-if="tableData && totalItems == 0 && userhasAuthority && !loadingSearch"
+    >
+      <user-search-svg alt="User search pictogram" class="standard-svg" />
+      <p class="heading-02">No results for “{{ lastSearchKeyword }}”</p>
+      <p class="body-compact-01">Consider adjusting your search term(s) and try again.</p>
+    </div>
+
     <div class="paginator" v-if="totalItems && userhasAuthority">
       <cds-pagination
         items-per-page-text="Clients per page"
diff --git a/frontend/src/services/ForestClientService.ts b/frontend/src/services/ForestClientService.ts
index e470ff9c74..7eaf55ed5e 100644
--- a/frontend/src/services/ForestClientService.ts
+++ b/frontend/src/services/ForestClientService.ts
@@ -45,11 +45,18 @@ export const getContactDescription = (contact: Contact, index: number): string =
 
 export const toTitleCase = (inputString: string): string => {
   if (inputString === undefined) return "";
-  return inputString
-    .toLowerCase()
-    .split(" ")
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(" ");
+
+  const splitMapJoin = (currentString: string, separator: string) =>
+    currentString
+      .split(separator)
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(separator);
+
+  let result = inputString.toLowerCase();
+  result = splitMapJoin(result, " ");
+  result = splitMapJoin(result, "(");
+  result = splitMapJoin(result, ".");
+  return result;
 };
 
 export const toSentenceCase = (inputString: string): string => {
diff --git a/frontend/stub/__files/response-client-search-page0.json b/frontend/stub/__files/response-client-search-page0.json
index 983d75bf3b..2520139dbd 100644
--- a/frontend/stub/__files/response-client-search-page0.json
+++ b/frontend/stub/__files/response-client-search-page0.json
@@ -65,7 +65,7 @@
   {
     "clientNumber": "00191081",
     "clientAcronym": null,
-    "clientFullName": "DFGDGDFG",
+    "clientFullName": "D.F.G. DGDFG",
     "clientType": "Ministry of Forests and Range",
     "city": "CALGARY",
     "clientStatus": "Active",
@@ -74,7 +74,7 @@
   {
     "clientNumber": "00191080",
     "clientAcronym": null,
-    "clientFullName": "EDMOND KAAUA",
+    "clientFullName": "EDMOND KAAUA (EDMOND'S PAINTING)",
     "clientType": "Individual",
     "city": "VICTORIA",
     "clientStatus": "Active",
diff --git a/frontend/tests/unittests/services/ForestClientService.spec.ts b/frontend/tests/unittests/services/ForestClientService.spec.ts
index c8c510afb1..61062bfef8 100644
--- a/frontend/tests/unittests/services/ForestClientService.spec.ts
+++ b/frontend/tests/unittests/services/ForestClientService.spec.ts
@@ -4,116 +4,129 @@ import {
   addNewContact,
   getContactDescription,
   getAddressDescription,
+  toTitleCase,
 } from "@/services/ForestClientService";
 import type { Contact, Address } from "@/dto/ApplyClientNumberDto";
 
 describe("ForestClientService.ts", () => {
-  // create an array of Address and an array of Contact to be used during test and set some random values inside beforeEach and clean it up before the next test
+  describe("Address and Contact utils", () => {
+    // create an array of Address and an array of Contact to be used during test and set some random values inside beforeEach and clean it up before the next test
 
-  let addresses: Address[];
-  let contacts: Contact[];
+    let addresses: Address[];
+    let contacts: Contact[];
 
-  const sampleAddress = {
-    streetAddress: "2975 Jutland Rd",
-    country: {
-      value: "CA",
-      text: "Canada",
-    },
-    province: {
-      value: "BC",
-      text: "British Columbia",
-    },
-    city: "Victoria",
-    postalCode: "V8T5J9",
-    locationName: "Mailing address",
-    index: 0,
-  };
-  const sampleContact = {
-    contactType: {
-      value: "P",
-      text: "Person",
-    },
-    firstName: "Jhon",
-    lastName: "Wick",
-    phoneNumber: "(111) 222-3344",
-    email: "babayaga@theguild.ca",
-    locationNames: [
-      {
-        value: "0",
-        text: "Mailing address",
+    const sampleAddress = {
+      streetAddress: "2975 Jutland Rd",
+      country: {
+        value: "CA",
+        text: "Canada",
       },
-    ],
-    index: 0,
-  };
+      province: {
+        value: "BC",
+        text: "British Columbia",
+      },
+      city: "Victoria",
+      postalCode: "V8T5J9",
+      locationName: "Mailing address",
+      index: 0,
+    };
+    const sampleContact = {
+      contactType: {
+        value: "P",
+        text: "Person",
+      },
+      firstName: "Jhon",
+      lastName: "Wick",
+      phoneNumber: "(111) 222-3344",
+      email: "babayaga@theguild.ca",
+      locationNames: [
+        {
+          value: "0",
+          text: "Mailing address",
+        },
+      ],
+      index: 0,
+    };
 
-  beforeEach(() => {
-    addresses = [sampleAddress];
-    contacts = [sampleContact];
-  });
+    beforeEach(() => {
+      addresses = [sampleAddress];
+      contacts = [sampleContact];
+    });
 
-  afterEach(() => {
-    addresses = [];
-    contacts = [];
-  });
+    afterEach(() => {
+      addresses = [];
+      contacts = [];
+    });
 
-  it("add new address and return the result while modifying the original", () => {
-    const result = addNewAddress(addresses);
+    it("add new address and return the result while modifying the original", () => {
+      const result = addNewAddress(addresses);
 
-    expect(result).toEqual(2);
-    expect(addresses).toStrictEqual([
-      sampleAddress,
-      {
-        locationName: "",
-        streetAddress: "",
-        country: { value: "", text: "" },
-        province: { value: "", text: "" },
-        city: "",
-        postalCode: "",
-        index: 1,
-      },
-    ]);
-  });
+      expect(result).toEqual(2);
+      expect(addresses).toStrictEqual([
+        sampleAddress,
+        {
+          locationName: "",
+          streetAddress: "",
+          country: { value: "", text: "" },
+          province: { value: "", text: "" },
+          city: "",
+          postalCode: "",
+          index: 1,
+        },
+      ]);
+    });
 
-  it("add new contact and return the result while modifying the original", () => {
-    const result = addNewContact(contacts);
+    it("add new contact and return the result while modifying the original", () => {
+      const result = addNewContact(contacts);
 
-    expect(result).toEqual(2);
-    expect(contacts).toStrictEqual([
-      sampleContact,
-      {
-        locationNames: [{ value: "", text: "" }],
-        contactType: { value: "", text: "" },
-        firstName: "",
-        lastName: "",
-        phoneNumber: "",
-        email: "",
-        index: 1,
-      },
-    ]);
-  });
+      expect(result).toEqual(2);
+      expect(contacts).toStrictEqual([
+        sampleContact,
+        {
+          locationNames: [{ value: "", text: "" }],
+          contactType: { value: "", text: "" },
+          firstName: "",
+          lastName: "",
+          phoneNumber: "",
+          email: "",
+          index: 1,
+        },
+      ]);
+    });
 
-  it("returns a string containing the contact's first name and last name", () => {
-    const result = getContactDescription({ firstName: "John", lastName: "Wick" } as Contact, 7);
-    expect(result).toEqual("John Wick");
-  });
+    it("returns a string containing the contact's first name and last name", () => {
+      const result = getContactDescription({ firstName: "John", lastName: "Wick" } as Contact, 7);
+      expect(result).toEqual("John Wick");
+    });
 
-  it("returns a string containing the contact's index", () => {
-    const result = getContactDescription({ firstName: "", lastName: "" } as Contact, 7);
-    expect(result).toEqual("Contact #7");
-  });
+    it("returns a string containing the contact's index", () => {
+      const result = getContactDescription({ firstName: "", lastName: "" } as Contact, 7);
+      expect(result).toEqual("Contact #7");
+    });
 
-  it("returns a string containing the address' locationName", () => {
-    const result = getAddressDescription({ locationName: "Nice Place" } as Address, 7);
-    expect(result).toEqual("Nice Place");
-  });
+    it("returns a string containing the address' locationName", () => {
+      const result = getAddressDescription({ locationName: "Nice Place" } as Address, 7);
+      expect(result).toEqual("Nice Place");
+    });
+
+    it("returns a string containing the address' index", () => {
+      const result = getAddressDescription({ locationName: "" } as Address, 7);
+      expect(result).toEqual("Address #7");
+    });
 
-  it("returns a string containing the address' index", () => {
-    const result = getAddressDescription({ locationName: "" } as Address, 7);
-    expect(result).toEqual("Address #7");
+    it("returns a string containing the provided entityName and the address' index", () => {
+      const result = getAddressDescription({ locationName: "" } as Address, 7, "Fancy");
+      expect(result).toEqual("Fancy #7");
+    });
   });
 
-  it("returns a string containing the provided entityName and the address' index", () => {
-    const result = getAddressDescription({ locationName: "" } as Address, 7, "Fancy");
-    expect(result).toEqual("Fancy #7");
+  describe("toTitleCase", () => {
+    it.each([
+      ["TWO WORDS", "Two Words"],
+      ["NAME (DOING)", "Name (Doing)"],
+      ["A.C.R.O.N.", "A.C.R.O.N."],
+    ])("gets the expected result", (input, expectedOutput) => {
+      expect(toTitleCase(input)).toEqual(expectedOutput);
+    });
   });
 });