[PM-8333] Autofill refresh button for sidebar popup (Firefox) (#9314)
* [PM-8333] Ensure title suffix is aligned with title * [PM-8333] Add refresh button for autofill list items section for FF sidebar * [PM-8333] Add button type
This commit is contained in:
Shane Melton
GitHub
parent
0b950080ca
commit
75975dd71f
|
|
@ -1,5 +1,5 @@
|
|||
<div class="tw-flex tw-justify-between tw-items-end tw-gap-1 tw-px-1 tw-pb-1">
|
||||
<div>
|
||||
<div class="tw-flex tw-items-center tw-gap-1">
|
||||
<h2 bitTypography="h6" noMargin class="tw-mb-0 tw-text-headers">
|
||||
{{ title }}
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
|
||||
import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
|
||||
|
||||
import {
|
||||
CardComponent,
|
||||
|
|
@ -64,6 +64,20 @@ export const TailingIcon: Story = {
|
|||
},
|
||||
};
|
||||
|
||||
export const TitleSuffix: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<popup-section-header [title]="title">
|
||||
<button bitIconButton="bwi-refresh" size="small" slot="title-suffix"></button>
|
||||
</popup-section-header>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
title: "Title Suffix",
|
||||
},
|
||||
};
|
||||
|
||||
export const WithSections: Story = {
|
||||
render: () => ({
|
||||
template: `
|
||||
|
|
|
|||
|
|
@ -2,11 +2,23 @@
|
|||
*ngIf="autofillCiphers$ | async as ciphers"
|
||||
[ciphers]="ciphers"
|
||||
[title]="'autofillSuggestions' | i18n"
|
||||
[showRefresh]="showRefresh"
|
||||
(onRefresh)="refreshCurrentTab()"
|
||||
showAutoFill
|
||||
></app-vault-list-items-container>
|
||||
<ng-container *ngIf="showEmptyAutofillTip$ | async">
|
||||
<bit-section>
|
||||
<popup-section-header [title]="'autofillSuggestions' | i18n"></popup-section-header>
|
||||
<popup-section-header [title]="'autofillSuggestions' | i18n">
|
||||
<button
|
||||
*ngIf="showRefresh"
|
||||
bitIconButton="bwi-refresh"
|
||||
size="small"
|
||||
slot="title-suffix"
|
||||
type="button"
|
||||
[appA11yTitle]="'refresh' | i18n"
|
||||
(click)="refreshCurrentTab()"
|
||||
></button>
|
||||
</popup-section-header>
|
||||
<span class="tw-text-muted tw-px-1" bitTypography="body2">{{
|
||||
"autofillSuggestionsTip" | i18n
|
||||
}}</span>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@ import { combineLatest, map, Observable } from "rxjs";
|
|||
|
||||
import { JslibModule } from "@bitwarden/angular/jslib.module";
|
||||
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
|
||||
import { SectionComponent, TypographyModule } from "@bitwarden/components";
|
||||
import { IconButtonModule, SectionComponent, TypographyModule } from "@bitwarden/components";
|
||||
|
||||
import BrowserPopupUtils from "../../../../../platform/popup/browser-popup-utils";
|
||||
import { PopupSectionHeaderComponent } from "../../../../../platform/popup/popup-section-header/popup-section-header.component";
|
||||
import { VaultPopupItemsService } from "../../../services/vault-popup-items.service";
|
||||
import { VaultListItemsContainerComponent } from "../vault-list-items-container/vault-list-items-container.component";
|
||||
|
|
@ -19,6 +20,7 @@ import { VaultListItemsContainerComponent } from "../vault-list-items-container/
|
|||
VaultListItemsContainerComponent,
|
||||
JslibModule,
|
||||
PopupSectionHeaderComponent,
|
||||
IconButtonModule,
|
||||
],
|
||||
selector: "app-autofill-vault-list-items",
|
||||
templateUrl: "autofill-vault-list-items.component.html",
|
||||
|
|
@ -31,6 +33,12 @@ export class AutofillVaultListItemsComponent {
|
|||
protected autofillCiphers$: Observable<CipherView[]> =
|
||||
this.vaultPopupItemsService.autoFillCiphers$;
|
||||
|
||||
/**
|
||||
* Flag indicating whether the refresh button should be shown. Only shown when the popup is within the FF sidebar.
|
||||
* @protected
|
||||
*/
|
||||
protected showRefresh: boolean = BrowserPopupUtils.inSidebar(window);
|
||||
|
||||
/**
|
||||
* Observable that determines whether the empty autofill tip should be shown.
|
||||
* The tip is shown when there are no ciphers to autofill, no filter is applied, and autofill is allowed in
|
||||
|
|
@ -48,4 +56,12 @@ export class AutofillVaultListItemsComponent {
|
|||
constructor(private vaultPopupItemsService: VaultPopupItemsService) {
|
||||
// TODO: Migrate logic to show Autofill policy toast PM-8144
|
||||
}
|
||||
|
||||
/**
|
||||
* Refreshes the current tab to re-populate the autofill ciphers.
|
||||
* @protected
|
||||
*/
|
||||
protected refreshCurrentTab() {
|
||||
this.vaultPopupItemsService.refreshCurrentTab();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,15 @@
|
|||
<bit-section *ngIf="ciphers?.length > 0">
|
||||
<popup-section-header [title]="title">
|
||||
<span bitTypography="body2" slot="end">{{ ciphers.length }}</span>
|
||||
<button
|
||||
*ngIf="showRefresh"
|
||||
bitIconButton="bwi-refresh"
|
||||
type="button"
|
||||
size="small"
|
||||
slot="title-suffix"
|
||||
(click)="onRefresh.emit()"
|
||||
[appA11yTitle]="'refresh' | i18n"
|
||||
></button>
|
||||
</popup-section-header>
|
||||
<bit-item-group>
|
||||
<bit-item *ngFor="let cipher of ciphers">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { CommonModule } from "@angular/common";
|
||||
import { booleanAttribute, Component, Input } from "@angular/core";
|
||||
import { booleanAttribute, Component, EventEmitter, Input, Output } from "@angular/core";
|
||||
import { RouterLink } from "@angular/router";
|
||||
|
||||
import { JslibModule } from "@bitwarden/angular/jslib.module";
|
||||
|
|
@ -33,12 +33,33 @@ import { PopupSectionHeaderComponent } from "../../../../../platform/popup/popup
|
|||
standalone: true,
|
||||
})
|
||||
export class VaultListItemsContainerComponent {
|
||||
/**
|
||||
* The list of ciphers to display.
|
||||
*/
|
||||
@Input()
|
||||
ciphers: CipherView[];
|
||||
|
||||
/**
|
||||
* Title for the vault list item section.
|
||||
*/
|
||||
@Input()
|
||||
title: string;
|
||||
|
||||
/**
|
||||
* Option to show a refresh button in the section header.
|
||||
*/
|
||||
@Input({ transform: booleanAttribute })
|
||||
showRefresh: boolean;
|
||||
|
||||
/**
|
||||
* Event emitted when the refresh button is clicked.
|
||||
*/
|
||||
@Output()
|
||||
onRefresh = new EventEmitter<void>();
|
||||
|
||||
/**
|
||||
* Option to show the autofill button for each item.
|
||||
*/
|
||||
@Input({ transform: booleanAttribute })
|
||||
showAutoFill: boolean;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue