From 3e9fb2009ebb252182af08b369e4828cb441bf59 Mon Sep 17 00:00:00 2001
From: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Date: Wed, 4 Sep 2024 10:50:34 -0500
Subject: [PATCH] [PM-10934] Remove last form-field bottom border (#10751)

* match API of new CL FormField component

* remove readonly border for additional options component

* remove readonly border for last autofill option

* remove readonly border for last custom-field form field

* remove readonly border for when collection,org or folder is available

* add `ReadOnlyCipherCardComponent` to handle readonly border

* remove readonly border for the last identity form field

* remove readonly border for the last card form field

* remove readonly border for the last login form field

* remove unneeded true value
---
 .../src/form-field/form-field.component.ts    |  8 ++++++
 .../additional-options.component.html         |  2 +-
 .../autofill-options-view.component.html      |  6 ++++-
 .../card-details-view.component.html          |  4 +--
 .../card-details-view.component.ts            |  3 +++
 .../custom-fields-v2.component.html           |  6 ++---
 .../item-details-v2.component.html            |  3 +++
 .../login-credentials-view.component.html     |  4 +--
 .../login-credentials-view.component.ts       |  2 ++
 .../read-only-cipher-card.component.html      |  3 +++
 .../read-only-cipher-card.component.ts        | 26 +++++++++++++++++++
 .../view-identity-sections.component.html     | 12 ++++-----
 .../view-identity-sections.component.ts       |  3 +++
 13 files changed, 67 insertions(+), 15 deletions(-)
 create mode 100644 libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.html
 create mode 100644 libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.ts

diff --git a/libs/components/src/form-field/form-field.component.ts b/libs/components/src/form-field/form-field.component.ts
index 6fcb4090dd..1e364115a6 100644
--- a/libs/components/src/form-field/form-field.component.ts
+++ b/libs/components/src/form-field/form-field.component.ts
@@ -1,6 +1,7 @@
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import {
   AfterContentChecked,
+  booleanAttribute,
   Component,
   ContentChild,
   ContentChildren,
@@ -38,6 +39,13 @@ export class BitFormFieldComponent implements AfterContentChecked {
     return this._disableMargin;
   }
 
+  /**
+   * NOTE: Placeholder to match the API of the form-field component in the `ps/extension` branch,
+   * no functionality is implemented as of now.
+   */
+  @Input({ transform: booleanAttribute })
+  disableReadOnlyBorder = false;
+
   @HostBinding("class")
   get classList() {
     return ["tw-block"].concat(this.disableMargin ? [] : ["tw-mb-6"]);
diff --git a/libs/vault/src/cipher-view/additional-options/additional-options.component.html b/libs/vault/src/cipher-view/additional-options/additional-options.component.html
index 6f254b8c72..0913629ad9 100644
--- a/libs/vault/src/cipher-view/additional-options/additional-options.component.html
+++ b/libs/vault/src/cipher-view/additional-options/additional-options.component.html
@@ -3,7 +3,7 @@
     <h2 bitTypography="h6">{{ "additionalOptions" | i18n }}</h2>
   </bit-section-header>
   <bit-card class="[&_bit-form-field:last-of-type]:tw-mb-0">
-    <bit-form-field>
+    <bit-form-field disableReadOnlyBorder>
       <bit-label>{{ "note" | i18n }}</bit-label>
       <textarea readonly bitInput aria-readonly="true">{{ notes }}</textarea>
       <button
diff --git a/libs/vault/src/cipher-view/autofill-options/autofill-options-view.component.html b/libs/vault/src/cipher-view/autofill-options/autofill-options-view.component.html
index e17c6a93aa..6d4669dd43 100644
--- a/libs/vault/src/cipher-view/autofill-options/autofill-options-view.component.html
+++ b/libs/vault/src/cipher-view/autofill-options/autofill-options-view.component.html
@@ -4,7 +4,11 @@
   </bit-section-header>
   <bit-card>
     <ng-container *ngFor="let login of loginUris; let last = last">
-      <bit-form-field [disableMargin]="last" data-testid="autofill-view-list">
+      <bit-form-field
+        [disableMargin]="last"
+        [disableReadOnlyBorder]="last"
+        data-testid="autofill-view-list"
+      >
         <bit-label>
           {{ "website" | i18n }}
         </bit-label>
diff --git a/libs/vault/src/cipher-view/card-details/card-details-view.component.html b/libs/vault/src/cipher-view/card-details/card-details-view.component.html
index c446ba4f31..8503be6905 100644
--- a/libs/vault/src/cipher-view/card-details/card-details-view.component.html
+++ b/libs/vault/src/cipher-view/card-details/card-details-view.component.html
@@ -2,7 +2,7 @@
   <bit-section-header>
     <h2 bitTypography="h6">{{ setSectionTitle }}</h2>
   </bit-section-header>
-  <bit-card class="[&_bit-form-field:last-of-type]:tw-mb-0">
+  <read-only-cipher-card>
     <bit-form-field *ngIf="card.cardholderName">
       <bit-label>{{ "cardholderName" | i18n }}</bit-label>
       <input
@@ -81,5 +81,5 @@
         data-testid="copy-code"
       ></button>
     </bit-form-field>
-  </bit-card>
+  </read-only-cipher-card>
 </bit-section>
diff --git a/libs/vault/src/cipher-view/card-details/card-details-view.component.ts b/libs/vault/src/cipher-view/card-details/card-details-view.component.ts
index 028417faf1..6ab2795afd 100644
--- a/libs/vault/src/cipher-view/card-details/card-details-view.component.ts
+++ b/libs/vault/src/cipher-view/card-details/card-details-view.component.ts
@@ -13,6 +13,8 @@ import {
   IconButtonModule,
 } from "@bitwarden/components";
 
+import { ReadOnlyCipherCardComponent } from "../read-only-cipher-card/read-only-cipher-card.component";
+
 @Component({
   selector: "app-card-details-view",
   templateUrl: "card-details-view.component.html",
@@ -26,6 +28,7 @@ import {
     TypographyModule,
     FormFieldModule,
     IconButtonModule,
+    ReadOnlyCipherCardComponent,
   ],
 })
 export class CardDetailsComponent {
diff --git a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
index d4c29cf262..96cb63fe39 100644
--- a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
+++ b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
@@ -8,7 +8,7 @@
       *ngFor="let field of fields; let last = last"
       [ngClass]="{ 'tw-mb-4': !last }"
     >
-      <bit-form-field *ngIf="field.type === fieldType.Text">
+      <bit-form-field *ngIf="field.type === fieldType.Text" [disableReadOnlyBorder]="last">
         <bit-label>{{ field.name }}</bit-label>
         <input readonly bitInput type="text" [value]="field.value" aria-readonly="true" />
         <button
@@ -21,7 +21,7 @@
           [appA11yTitle]="'copyValue' | i18n"
         ></button>
       </bit-form-field>
-      <bit-form-field *ngIf="field.type === fieldType.Hidden">
+      <bit-form-field *ngIf="field.type === fieldType.Hidden" [disableReadOnlyBorder]="last">
         <bit-label>{{ field.name }}</bit-label>
         <input readonly bitInput type="password" [value]="field.value" aria-readonly="true" />
         <button bitSuffix type="button" bitIconButton bitPasswordInputToggle></button>
@@ -45,7 +45,7 @@
         />
         <bit-label> {{ field.name }} </bit-label>
       </bit-form-control>
-      <bit-form-field *ngIf="field.type === fieldType.Linked">
+      <bit-form-field *ngIf="field.type === fieldType.Linked" [disableReadOnlyBorder]="last">
         <bit-label> {{ "linked" | i18n }}: {{ field.name }} </bit-label>
         <input
           readonly
diff --git a/libs/vault/src/cipher-view/item-details/item-details-v2.component.html b/libs/vault/src/cipher-view/item-details/item-details-v2.component.html
index 5250a3f4dd..f8a46e18b5 100644
--- a/libs/vault/src/cipher-view/item-details/item-details-v2.component.html
+++ b/libs/vault/src/cipher-view/item-details/item-details-v2.component.html
@@ -5,6 +5,9 @@
   <bit-card>
     <bit-form-field
       [disableMargin]="!cipher.collectionIds?.length && !cipher.organizationId && !cipher.folderId"
+      [disableReadOnlyBorder]="
+        !cipher.collectionIds?.length && !cipher.organizationId && !cipher.folderId
+      "
     >
       <bit-label>
         {{ "itemName" | i18n }}
diff --git a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
index 6913c34ee5..17d02658c4 100644
--- a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
+++ b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
@@ -2,7 +2,7 @@
   <bit-section-header>
     <h2 bitTypography="h6">{{ "loginCredentials" | i18n }}</h2>
   </bit-section-header>
-  <bit-card class="[&_bit-form-field:last-of-type]:tw-mb-0">
+  <read-only-cipher-card>
     <bit-form-field *ngIf="cipher.login.username">
       <bit-label>
         {{ "username" | i18n }}
@@ -132,5 +132,5 @@
         class="disabled:tw-cursor-default"
       ></button>
     </bit-form-field>
-  </bit-card>
+  </read-only-cipher-card>
 </bit-section>
diff --git a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
index 3973a66684..6f572f31e8 100644
--- a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
+++ b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
@@ -19,6 +19,7 @@ import {
 } from "@bitwarden/components";
 
 import { BitTotpCountdownComponent } from "../../components/totp-countdown/totp-countdown.component";
+import { ReadOnlyCipherCardComponent } from "../read-only-cipher-card/read-only-cipher-card.component";
 
 type TotpCodeValues = {
   totpCode: string;
@@ -41,6 +42,7 @@ type TotpCodeValues = {
     BadgeModule,
     ColorPasswordModule,
     BitTotpCountdownComponent,
+    ReadOnlyCipherCardComponent,
   ],
 })
 export class LoginCredentialsViewComponent {
diff --git a/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.html b/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.html
new file mode 100644
index 0000000000..65061e818c
--- /dev/null
+++ b/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.html
@@ -0,0 +1,3 @@
+<bit-card class="[&_bit-form-field:last-of-type]:tw-mb-0">
+  <ng-content></ng-content>
+</bit-card>
diff --git a/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.ts b/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.ts
new file mode 100644
index 0000000000..ed16f3a7cc
--- /dev/null
+++ b/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.ts
@@ -0,0 +1,26 @@
+import { AfterViewInit, Component, ContentChildren, QueryList } from "@angular/core";
+
+import { CardComponent, BitFormFieldComponent } from "@bitwarden/components";
+
+@Component({
+  selector: "read-only-cipher-card",
+  templateUrl: "./read-only-cipher-card.component.html",
+  standalone: true,
+  imports: [CardComponent],
+})
+/**
+ * A thin wrapper around the `bit-card` component that disables the bottom border for the last form field.
+ */
+export class ReadOnlyCipherCardComponent implements AfterViewInit {
+  @ContentChildren(BitFormFieldComponent) formFields: QueryList<BitFormFieldComponent>;
+
+  ngAfterViewInit(): void {
+    // Disable the bottom border for the last form field
+    if (this.formFields.last) {
+      // Delay model update until next change detection cycle
+      setTimeout(() => {
+        this.formFields.last.disableReadOnlyBorder = true;
+      });
+    }
+  }
+}
diff --git a/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.html b/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.html
index d12a729f99..29ccd5daa6 100644
--- a/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.html
+++ b/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.html
@@ -3,7 +3,7 @@
     <h2 bitTypography="h6">{{ "personalDetails" | i18n }}</h2>
   </bit-section-header>
 
-  <bit-card class="[&_bit-form-field:last-of-type]:tw-mb-0">
+  <read-only-cipher-card>
     <bit-form-field *ngIf="cipher.identity.fullName">
       <bit-label>{{ "name" | i18n }}</bit-label>
       <input bitInput [value]="cipher.identity.fullName" readonly data-testid="name" />
@@ -43,7 +43,7 @@
         [valueLabel]="'company' | i18n"
       ></button>
     </bit-form-field>
-  </bit-card>
+  </read-only-cipher-card>
 </bit-section>
 
 <bit-section *ngIf="showIdentificationDetails">
@@ -51,7 +51,7 @@
     <h2 bitTypography="h6">{{ "identification" | i18n }}</h2>
   </bit-section-header>
 
-  <bit-card class="[&_bit-form-field:last-of-type]:tw-mb-0">
+  <read-only-cipher-card>
     <bit-form-field *ngIf="cipher.identity.ssn">
       <bit-label>{{ "ssn" | i18n }}</bit-label>
       <input bitInput type="password" [value]="cipher.identity.ssn" readonly data-testid="ssn" />
@@ -111,7 +111,7 @@
         [valueLabel]="'licenseNumber' | i18n"
       ></button>
     </bit-form-field>
-  </bit-card>
+  </read-only-cipher-card>
 </bit-section>
 
 <bit-section *ngIf="showContactDetails">
@@ -119,7 +119,7 @@
     <h2 bitTypography="h6">{{ "contactInfo" | i18n }}</h2>
   </bit-section-header>
 
-  <bit-card class="[&_bit-form-field:last-of-type]:tw-mb-0">
+  <read-only-cipher-card>
     <bit-form-field *ngIf="cipher.identity.email">
       <bit-label>{{ "email" | i18n }}</bit-label>
       <input bitInput [value]="cipher.identity.email" readonly data-testid="email" />
@@ -166,5 +166,5 @@
         [valueLabel]="'address' | i18n"
       ></button>
     </bit-form-field>
-  </bit-card>
+  </read-only-cipher-card>
 </bit-section>
diff --git a/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.ts b/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.ts
index 0fd2c29295..0f3a9f8971 100644
--- a/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.ts
+++ b/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.ts
@@ -12,6 +12,8 @@ import {
   TypographyModule,
 } from "@bitwarden/components";
 
+import { ReadOnlyCipherCardComponent } from "../read-only-cipher-card/read-only-cipher-card.component";
+
 @Component({
   standalone: true,
   selector: "app-view-identity-sections",
@@ -25,6 +27,7 @@ import {
     TypographyModule,
     FormFieldModule,
     IconButtonModule,
+    ReadOnlyCipherCardComponent,
   ],
 })
 export class ViewIdentitySectionsComponent implements OnInit {