1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-10-22 07:50:04 +02:00

update search state to show contextual no results view messages (#11570)

This commit is contained in:
Jonathan Prusik 2024-10-21 09:47:01 -04:00 committed by GitHub
parent cbb6cf42aa
commit 6335dd6cd7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 15 deletions

View File

@ -49,17 +49,22 @@
<!-- Display when no matching ciphers exist --> <!-- Display when no matching ciphers exist -->
<ng-container *ngIf="!displayedCiphers.length"> <ng-container *ngIf="!displayedCiphers.length">
<bit-no-items class="tw-text-main" [icon]="noResultsIcon"> <bit-no-items class="tw-text-main" [icon]="noResultsIcon">
<ng-container slot="title">{{ "noMatchingLoginsForSite" | i18n }}</ng-container> <ng-container slot="title">{{
<ng-container slot="description">{{ "searchSavePasskeyNewLogin" | i18n }}</ng-container> (hasSearched ? "noItemsMatchSearch" : "noMatchingLoginsForSite") | i18n
}}</ng-container>
<ng-container slot="description">{{
(hasSearched ? "searchSavePasskeyNewLogin" : "clearFiltersOrTryAnother") | i18n
}}</ng-container>
<button <button
bitButton bitButton
buttonType="primary" buttonType="primary"
slot="button" slot="button"
type="button" type="button"
(click)="saveNewLogin()" (click)="hasSearched ? clearSearch() : saveNewLogin()"
[loading]="loading" [loading]="loading"
> >
{{ "savePasskeyNewLogin" | i18n }} {{ (hasSearched ? "multiSelectClearAll" : "savePasskeyNewLogin") | i18n }}
</button> </button>
</bit-no-items> </bit-no-items>
</ng-container> </ng-container>
@ -100,17 +105,22 @@
<!-- Display when no matching ciphers exist --> <!-- Display when no matching ciphers exist -->
<ng-container *ngIf="!displayedCiphers.length"> <ng-container *ngIf="!displayedCiphers.length">
<bit-no-items class="tw-text-main" [icon]="noResultsIcon"> <bit-no-items class="tw-text-main" [icon]="noResultsIcon">
<ng-container slot="title">{{ "noItemsMatchSearch" | i18n }}</ng-container> <ng-container slot="title">{{
<ng-container slot="description">{{ "clearFiltersOrTryAnother" | i18n }}</ng-container> (hasSearched ? "noItemsMatchSearch" : "noMatchingLoginsForSite") | i18n
}}</ng-container>
<ng-container slot="description">{{
(hasSearched ? "searchSavePasskeyNewLogin" : "clearFiltersOrTryAnother") | i18n
}}</ng-container>
<button <button
bitButton bitButton
buttonType="primary" buttonType="primary"
slot="button" slot="button"
type="button" type="button"
(click)="saveNewLogin()" (click)="hasSearched ? clearSearch() : saveNewLogin()"
[loading]="loading" [loading]="loading"
> >
{{ "savePasskeyNewLogin" | i18n }} {{ (hasSearched ? "multiSelectClearAll" : "savePasskeyNewLogin") | i18n }}
</button> </button>
</bit-no-items> </bit-no-items>
</ng-container> </ng-container>

View File

@ -91,7 +91,6 @@ interface ViewData {
export class Fido2Component implements OnInit, OnDestroy { export class Fido2Component implements OnInit, OnDestroy {
private destroy$ = new Subject<void>(); private destroy$ = new Subject<void>();
private message$ = new BehaviorSubject<BrowserFido2Message>(null); private message$ = new BehaviorSubject<BrowserFido2Message>(null);
private hasSearched = false;
protected BrowserFido2MessageTypes = BrowserFido2MessageTypes; protected BrowserFido2MessageTypes = BrowserFido2MessageTypes;
protected cipher: CipherView; protected cipher: CipherView;
protected ciphers?: CipherView[] = []; protected ciphers?: CipherView[] = [];
@ -104,6 +103,7 @@ export class Fido2Component implements OnInit, OnDestroy {
protected noResultsIcon = Icons.NoResults; protected noResultsIcon = Icons.NoResults;
protected passkeyAction: PasskeyActionValue = PasskeyActions.Register; protected passkeyAction: PasskeyActionValue = PasskeyActions.Register;
protected PasskeyActions = PasskeyActions; protected PasskeyActions = PasskeyActions;
protected hasSearched = false;
protected searchText: string; protected searchText: string;
protected searchTypeSearch = false; protected searchTypeSearch = false;
protected senderTabId?: string; protected senderTabId?: string;
@ -370,19 +370,30 @@ export class Fido2Component implements OnInit, OnDestroy {
return this.equivalentDomains; 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() { protected async search() {
this.hasSearched = await this.searchService.isSearchable(this.searchText); this.hasSearched = true;
if (this.hasSearched) { const isSearchable = await this.searchService.isSearchable(this.searchText);
if (isSearchable) {
this.displayedCiphers = await this.searchService.searchCiphers( this.displayedCiphers = await this.searchService.searchCiphers(
this.searchText, this.searchText,
null, null,
this.ciphers, this.ciphers,
); );
} else { } else {
const equivalentDomains = await this.getEquivalentDomains(); await this.setDisplayedCiphersToAllDomainMatch();
this.displayedCiphers = this.ciphers.filter((cipher) =>
cipher.login.matchesUri(this.url, equivalentDomains),
);
} }
} }