feat(fe:FSADT1-1610): add the Edit client button

frontend/src/assets/styles/global.scss

@@ -1653,6 +1653,10 @@ cds-header-panel[expanded] {
   color: unset;
 }
 
+.width-unset {
+  width: unset;
+}
+
 cds-accordion-item[open] .hide-open {
   display: none;
 }

frontend/src/pages/ClientDetailsPage.vue

@@ -217,7 +217,7 @@ const toolsSvg = useSvg(tools);
             <h2 class="mg-tl-2 heading-05">Client summary</h2>
 
             <div class="grouping-10">
-              <summary-view :data="data" />
+              <summary-view :data="data" :can-edit="userHasAuthority" />
             </div>
           </div>
         </div>

frontend/src/pages/client-details/SummaryView.vue

@@ -7,13 +7,17 @@ import {
   goodStanding,
 } from "@/services/ForestClientService";
 
-// @ts-ignore
 import Check20 from "@carbon/icons-vue/es/checkmark--filled/20";
-// @ts-ignore
 import Warning20 from "@carbon/icons-vue/es/warning--filled/20";
+import Edit16 from "@carbon/icons-vue/es/edit/16";
 
 const props = defineProps<{
   data: ClientDetails;
+  canEdit: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "edit"): void;
 }>();
 
 const clientRegistrationNumber = computed(() => {
@@ -113,6 +117,12 @@ const birthdateLabel = computed(() =>
       ></span>
     </read-only-component>
   </div>
+  <div class="grouping-10 no-padding" v-if="props.canEdit">
+    <cds-button id="clientEditBtn" kind="tertiary" size="md" @click="emit('edit')">
+      <span class="width-unset">Edit client information</span>
+      <Edit16 slot="icon" />
+    </cds-button>
+  </div>
 </template>
 
 <style scoped>

frontend/tests/components/pages/client-details/SummaryView.cy.ts

@@ -24,6 +24,7 @@ describe("<summary-view />", () => {
       clientIdTypeDesc: "British Columbia Driver's Licence",
       clientIdentification: "64242646",
     } as ClientDetails,
+    canEdit: false,
   });
 
   let currentProps: ReturnType<typeof getDefaultProps> = null;
@@ -74,8 +75,9 @@ describe("<summary-view />", () => {
   });
 
   it("hides optional fields when they are empty", () => {
-    const data: ClientDetails = {
-      ...getDefaultProps().data,
+    const props = getDefaultProps();
+    props.data = {
+      ...props.data,
       registryCompanyTypeCode: "",
       corpRegnNmbr: "",
       doingBusinessAs: [],
@@ -86,7 +88,7 @@ describe("<summary-view />", () => {
       clientIdTypeDesc: "",
       clientIdentification: "",
     };
-    mount({ data });
+    mount(props);
 
     testFieldHidden("#acronym");
     testFieldHidden("#registrationNumber");
@@ -98,11 +100,12 @@ describe("<summary-view />", () => {
   });
 
   it("displays as many names the client has as Doing business as", () => {
-    const { data } = getDefaultProps();
+    const props = getDefaultProps();
+    const { data } = props;
     data.doingBusinessAs[1] = { doingBusinessAsName: "Name #2" };
     data.doingBusinessAs[2] = { doingBusinessAsName: "Name #3" };
 
-    mount({ data });
+    mount(props);
 
     testField("#doingBusinessAs", data.doingBusinessAs[0].doingBusinessAsName);
     testField("#doingBusinessAs", data.doingBusinessAs[1].doingBusinessAsName);
@@ -116,20 +119,53 @@ describe("<summary-view />", () => {
   });
 
   it("sets the birthdate label to 'Year of birth' when date's month and day are masked", () => {
-    const { data } = getDefaultProps();
+    const props = getDefaultProps();
+    const { data } = props;
     data.birthdate = "1985-**-**";
 
-    mount({ data });
+    mount(props);
 
     cy.get("#dateOfBirth").contains("Year of birth");
   });
 
   it("sets the birthdate label to 'Year of birth' when date has only four digits", () => {
-    const { data } = getDefaultProps();
+    const props = getDefaultProps();
+    const { data } = props;
     data.birthdate = "1985";
 
-    mount({ data });
+    mount(props);
 
     cy.get("#dateOfBirth").contains("Year of birth");
   });
+
+  it("displays the Edit button if canEdit is true", () => {
+    const props = getDefaultProps();
+    props.canEdit = true;
+
+    mount(props);
+
+    cy.get("#clientEditBtn").should("be.visible");
+  });
+
+  it("hides the Edit button if canEdit is false", () => {
+    const props = getDefaultProps();
+    props.canEdit = false;
+
+    mount(props);
+
+    cy.get("#clientEditBtn").should("not.exist");
+  });
+
+  it("emits the 'edit' event when the Edit button is clicked", () => {
+    const props = getDefaultProps();
+    props.canEdit = true;
+
+    mount(props);
+
+    cy.get("#clientEditBtn").click();
+
+    cy.get("@vueWrapper").should((vueWrapper) => {
+      expect(vueWrapper.emitted("edit")).to.have.lengthOf(1);
+    });
+  });
 });