update search state to show contextual no results view messages

bitwarden · Oct 15, 2024 · 93c8864 · 93c8864
1 parent 32d12b3
commit 93c8864
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 16 deletions.
diff --git a/apps/browser/src/autofill/popup/fido2/fido2.component.html b/apps/browser/src/autofill/popup/fido2/fido2.component.html
@@ -49,17 +49,22 @@ <h2 bitTypography="h6">{{ "chooseCipherForPasskeySave" | i18n }}</h2>
       <!-- Display when no matching ciphers exist -->
       <ng-container *ngIf="!displayedCiphers.length">
         <bit-no-items class="tw-text-main" [icon]="noResultsIcon">
-          <ng-container slot="title">{{ "noMatchingLoginsForSite" | i18n }}</ng-container>
-          <ng-container slot="description">{{ "searchSavePasskeyNewLogin" | i18n }}</ng-container>
+          <ng-container slot="title">{{
+            (hasSearched ? "noItemsMatchSearch" : "noMatchingLoginsForSite") | i18n
+          }}</ng-container>
+          <ng-container slot="description">{{
+            (hasSearched ? "searchSavePasskeyNewLogin" : "clearFiltersOrTryAnother") | i18n
+          }}</ng-container>
+
           <button
             bitButton
             buttonType="primary"
             slot="button"
             type="button"
-            (click)="saveNewLogin()"
+            (click)="hasSearched ? clearSearch() : saveNewLogin()"
             [loading]="loading"
           >
-            {{ "savePasskeyNewLogin" | i18n }}
+            {{ (hasSearched ? "multiSelectClearAll" : "savePasskeyNewLogin") | i18n }}
           </button>
         </bit-no-items>
       </ng-container>
@@ -100,17 +105,22 @@ <h2 bitTypography="h6">{{ "chooseCipherForPasskeySave" | i18n }}</h2>
       <!-- Display when no matching ciphers exist -->
       <ng-container *ngIf="!displayedCiphers.length">
         <bit-no-items class="tw-text-main" [icon]="noResultsIcon">
-          <ng-container slot="title">{{ "noItemsMatchSearch" | i18n }}</ng-container>
-          <ng-container slot="description">{{ "clearFiltersOrTryAnother" | i18n }}</ng-container>
+          <ng-container slot="title">{{
+            (hasSearched ? "noItemsMatchSearch" : "noMatchingLoginsForSite") | i18n
+          }}</ng-container>
+          <ng-container slot="description">{{
+            (hasSearched ? "searchSavePasskeyNewLogin" : "clearFiltersOrTryAnother") | i18n
+          }}</ng-container>
+
           <button
             bitButton
             buttonType="primary"
             slot="button"
             type="button"
-            (click)="saveNewLogin()"
+            (click)="hasSearched ? clearSearch() : saveNewLogin()"
             [loading]="loading"
           >
-            {{ "savePasskeyNewLogin" | i18n }}
+            {{ (hasSearched ? "multiSelectClearAll" : "savePasskeyNewLogin") | i18n }}
           </button>
         </bit-no-items>
       </ng-container>

diff --git a/apps/browser/src/autofill/popup/fido2/fido2.component.ts b/apps/browser/src/autofill/popup/fido2/fido2.component.ts
@@ -91,7 +91,6 @@ interface ViewData {
 export class Fido2Component implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
   private message$ = new BehaviorSubject<BrowserFido2Message>(null);
-  private hasSearched = false;
   protected BrowserFido2MessageTypes = BrowserFido2MessageTypes;
   protected cipher: CipherView;
   protected ciphers?: CipherView[] = [];
@@ -104,7 +103,8 @@ export class Fido2Component implements OnInit, OnDestroy {
   protected noResultsIcon = Icons.NoResults;
   protected passkeyAction: PasskeyActionValue = PasskeyActions.Register;
   protected PasskeyActions = PasskeyActions;
-  protected searchText: string;
+  protected hasSearched = false;
+  protected searchText: string = null;
   protected searchTypeSearch = false;
   protected senderTabId?: string;
   protected sessionId?: string;
@@ -370,19 +370,30 @@ export class Fido2Component implements OnInit, OnDestroy {
     return this.equivalentDomains;
   }
 
+  async clearSearch() {
+    this.searchText = "";
+    await this.setDisplayedCiphersToAllDomainMatch();
+  }
+
+  protected async setDisplayedCiphersToAllDomainMatch() {
+    const equivalentDomains = await this.getEquivalentDomains();
+    this.displayedCiphers = this.ciphers.filter((cipher) =>
+      cipher.login.matchesUri(this.url, equivalentDomains),
+    );
+  }
+
   protected async search() {
-    this.hasSearched = await this.searchService.isSearchable(this.searchText);
-    if (this.hasSearched) {
+    this.hasSearched = true;
+    const isSearchable = await this.searchService.isSearchable(this.searchText);
+
+    if (isSearchable) {
       this.displayedCiphers = await this.searchService.searchCiphers(
         this.searchText,
         null,
         this.ciphers,
       );
     } else {
-      const equivalentDomains = await this.getEquivalentDomains();
-      this.displayedCiphers = this.ciphers.filter((cipher) =>
-        cipher.login.matchesUri(this.url, equivalentDomains),
-      );
+      await this.setDisplayedCiphersToAllDomainMatch();
     }
   }