From 01f8e8d7c72b48ec929ab0885464c1558f921c20 Mon Sep 17 00:00:00 2001
From: Matt Gibson <mgibson@bitwarden.com>
Date: Fri, 11 Feb 2022 10:30:55 -0600
Subject: [PATCH] Display separator between ngFor components (#2359)

We currently remove the separator element when a `box-content-row`
is the last child. However, when we create these rows from ng templates
each row gets a separate template element wrapping it.
This PR tells the cipher-row component whether it is the last child

(cherry picked from commit b9fb223dea0c6e4b6528fa3af8a754343c60026a)
---
 src/popup/components/cipher-row.component.html | 1 +
 src/popup/components/cipher-row.component.ts   | 1 +
 src/popup/scss/box.scss                        | 7 +++++++
 src/popup/vault/ciphers.component.html         | 3 ++-
 4 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/popup/components/cipher-row.component.html b/src/popup/components/cipher-row.component.html
index ea0af83d86..fbf9f1dab4 100644
--- a/src/popup/components/cipher-row.component.html
+++ b/src/popup/components/cipher-row.component.html
@@ -5,6 +5,7 @@
   appStopClick
   title="{{ title }} - {{ cipher.name }}"
   class="box-content-row box-content-row-flex virtual-scroll-item"
+  [ngClass]="{ 'override-last': !last }"
 >
   <div class="row-main">
     <app-vault-icon [cipher]="cipher"></app-vault-icon>
diff --git a/src/popup/components/cipher-row.component.ts b/src/popup/components/cipher-row.component.ts
index 484ccdea2d..fa2b66c1b1 100644
--- a/src/popup/components/cipher-row.component.ts
+++ b/src/popup/components/cipher-row.component.ts
@@ -11,6 +11,7 @@ export class CipherRowComponent {
   @Output() launchEvent = new EventEmitter<CipherView>();
   @Output() onView = new EventEmitter<CipherView>();
   @Input() cipher: CipherView;
+  @Input() last: boolean;
   @Input() showView = false;
   @Input() title: string;
 
diff --git a/src/popup/scss/box.scss b/src/popup/scss/box.scss
index 0a43da8e56..c61167fac6 100644
--- a/src/popup/scss/box.scss
+++ b/src/popup/scss/box.scss
@@ -211,6 +211,13 @@
     }
   }
 
+  &.override-last:last-child:before {
+    border-bottom: 1px solid #000000;
+    @include themify($themes) {
+      border-bottom-color: themed("boxBorderColor");
+    }
+  }
+
   &.last:last-child:before {
     border-bottom: 1px solid #000000;
     @include themify($themes) {
diff --git a/src/popup/vault/ciphers.component.html b/src/popup/vault/ciphers.component.html
index 8b27666522..1608c8f028 100644
--- a/src/popup/vault/ciphers.component.html
+++ b/src/popup/vault/ciphers.component.html
@@ -97,8 +97,9 @@
         </h2>
         <div class="box-content">
           <app-cipher-row
-            *cdkVirtualFor="let c of ciphers"
+            *cdkVirtualFor="let c of ciphers; let last = last"
             [cipher]="c"
+            [last]="last"
             title="{{ 'viewItem' | i18n }}"
             (onSelected)="selectCipher($event)"
             (launchEvent)="launchCipher($event)"