From 708737f99f0474cee767609d2d8a6c4e525f15dc Mon Sep 17 00:00:00 2001 From: Jonathan Prusik Date: Thu, 12 Jun 2025 10:14:58 -0400 Subject: [PATCH] [PM-21693] Unlock notification should have disabled/loading state while decrypting vault (#15128) * add animated spinner icon * add loading state to action button component * render loading state on vault unlock --- .../components/buttons/action-button.ts | 23 +++++++--- .../content/components/constants/styles.ts | 11 +++++ .../content/components/icons/index.ts | 1 + .../content/components/icons/spinner.ts | 34 ++++++++++++++ .../buttons/action-button.lit-stories.ts | 20 +++++++-- .../lit-stories/icons/icons.lit-stories.ts | 29 ++++++++---- .../components/notification/button-row.ts | 1 + .../components/notification/container.ts | 3 ++ .../content/components/notification/footer.ts | 3 ++ .../content/components/rows/button-row.ts | 2 + apps/browser/src/autofill/notification/bar.ts | 45 +++++++++++-------- 11 files changed, 136 insertions(+), 36 deletions(-) create mode 100644 apps/browser/src/autofill/content/components/icons/spinner.ts diff --git a/apps/browser/src/autofill/content/components/buttons/action-button.ts b/apps/browser/src/autofill/content/components/buttons/action-button.ts index 74ac2518226..339b628875c 100644 --- a/apps/browser/src/autofill/content/components/buttons/action-button.ts +++ b/apps/browser/src/autofill/content/components/buttons/action-button.ts @@ -4,10 +4,12 @@ import { html, TemplateResult } from "lit"; import { Theme } from "@bitwarden/common/platform/enums"; import { border, themes, typography, spacing } from "../constants/styles"; +import { Spinner } from "../icons"; export type ActionButtonProps = { buttonText: string | TemplateResult; disabled?: boolean; + isLoading?: boolean; theme: Theme; handleClick: (e: Event) => void; fullWidth?: boolean; @@ -16,40 +18,46 @@ export type ActionButtonProps = { export function ActionButton({ buttonText, disabled = false, + isLoading = false, theme, handleClick, fullWidth = true, }: ActionButtonProps) { const handleButtonClick = (event: Event) => { - if (!disabled) { + if (!disabled && !isLoading) { handleClick(event); } }; return html` `; } const actionButtonStyles = ({ disabled, - theme, fullWidth, + isLoading, + theme, }: { disabled: boolean; - theme: Theme; fullWidth: boolean; + isLoading: boolean; + theme: Theme; }) => css` ${typography.body2} user-select: none; + display: flex; + align-items: center; + justify-content: center; border: 1px solid transparent; border-radius: ${border.radius.full}; padding: ${spacing["1"]} ${spacing["3"]}; @@ -59,7 +67,7 @@ const actionButtonStyles = ({ text-overflow: ellipsis; font-weight: 700; - ${disabled + ${disabled || isLoading ? ` background-color: ${themes[theme].secondary["300"]}; color: ${themes[theme].text.muted}; @@ -81,7 +89,8 @@ const actionButtonStyles = ({ `} svg { - width: fit-content; + padding: 2px 0; /* Match line-height of button body2 typography */ + width: auto; height: 16px; } `; diff --git a/apps/browser/src/autofill/content/components/constants/styles.ts b/apps/browser/src/autofill/content/components/constants/styles.ts index 08c8671ce14..55130781808 100644 --- a/apps/browser/src/autofill/content/components/constants/styles.ts +++ b/apps/browser/src/autofill/content/components/constants/styles.ts @@ -174,6 +174,17 @@ export const buildIconColorRule = (color: string, rule: RuleName = ruleNames.fil ${rule}: ${color}; `; +export const animations = { + spin: ` + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } + `, +}; + export function scrollbarStyles(theme: Theme, color?: { thumb?: string; track?: string }) { const thumbColor = color?.thumb || themes[theme].secondary["500"]; const trackColor = color?.track || themes[theme].background.alt; diff --git a/apps/browser/src/autofill/content/components/icons/index.ts b/apps/browser/src/autofill/content/components/icons/index.ts index 65ec6301ac4..d1538e1543f 100644 --- a/apps/browser/src/autofill/content/components/icons/index.ts +++ b/apps/browser/src/autofill/content/components/icons/index.ts @@ -11,4 +11,5 @@ export { Folder } from "./folder"; export { Globe } from "./globe"; export { PencilSquare } from "./pencil-square"; export { Shield } from "./shield"; +export { Spinner } from "./spinner"; export { User } from "./user"; diff --git a/apps/browser/src/autofill/content/components/icons/spinner.ts b/apps/browser/src/autofill/content/components/icons/spinner.ts new file mode 100644 index 00000000000..20f53a43d44 --- /dev/null +++ b/apps/browser/src/autofill/content/components/icons/spinner.ts @@ -0,0 +1,34 @@ +import { css, keyframes } from "@emotion/css"; +import { html } from "lit"; + +import { IconProps } from "../common-types"; +import { buildIconColorRule, ruleNames, themes, animations } from "../constants/styles"; + +export function Spinner({ + ariaHidden = true, + color, + disabled, + theme, + disableSpin = false, +}: IconProps & { disableSpin?: boolean }) { + const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main; + + return html` + + + + `; +} + +const animation = css` + animation: ${keyframes(animations.spin)} 2s infinite linear; +`; diff --git a/apps/browser/src/autofill/content/components/lit-stories/buttons/action-button.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/buttons/action-button.lit-stories.ts index 77769bc67dc..dc630e537b0 100644 --- a/apps/browser/src/autofill/content/components/lit-stories/buttons/action-button.lit-stories.ts +++ b/apps/browser/src/autofill/content/components/lit-stories/buttons/action-button.lit-stories.ts @@ -1,9 +1,12 @@ import { Meta, StoryObj } from "@storybook/web-components"; +import { html } from "lit"; import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum"; import { ActionButton, ActionButtonProps } from "../../buttons/action-button"; +type ComponentAndControls = ActionButtonProps & { width: number }; + export default { title: "Components/Buttons/Action Button", argTypes: { @@ -11,12 +14,15 @@ export default { disabled: { control: "boolean" }, theme: { control: "select", options: [...Object.values(ThemeTypes)] }, handleClick: { control: false }, + width: { control: "number", min: 10, max: 100, step: 1 }, }, args: { buttonText: "Click Me", disabled: false, + isLoading: false, theme: ThemeTypes.Light, handleClick: () => alert("Clicked"), + width: 150, }, parameters: { design: { @@ -24,10 +30,18 @@ export default { url: "https://www.figma.com/design/LEhqLAcBPY8uDKRfU99n9W/Autofill-notification-redesign?node-id=487-14755&t=2O7uCAkwRZCcjumm-4", }, }, -} as Meta; +} as Meta; -const Template = (args: ActionButtonProps) => ActionButton({ ...args }); +const Template = (args: ComponentAndControls) => { + const { width, ...componentProps } = args; + return html`
${ActionButton({ ...componentProps })}
`; +}; + +export const Default: StoryObj = { + args: { + isLoading: true, + theme: "dark", + }, -export const Default: StoryObj = { render: Template, }; diff --git a/apps/browser/src/autofill/content/components/lit-stories/icons/icons.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/icons/icons.lit-stories.ts index 3741ccbcb69..4e18008b94a 100644 --- a/apps/browser/src/autofill/content/components/lit-stories/icons/icons.lit-stories.ts +++ b/apps/browser/src/autofill/content/components/lit-stories/icons/icons.lit-stories.ts @@ -6,9 +6,10 @@ import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum"; import { IconProps } from "../../common-types"; import * as Icons from "../../icons"; +const { Spinner, ...StaticIcons } = Icons; + type Args = IconProps & { size: number; - iconLink: URL; }; export default { @@ -26,7 +27,10 @@ export default { }, } as Meta; -const Template = (args: Args, IconComponent: (props: IconProps) => ReturnType) => html` +const Template = ( + args: Args, + IconComponent: (props: IconProps & { disableSpin?: boolean }) => ReturnType, +) => html`
@@ -34,18 +38,26 @@ const Template = (args: Args, IconComponent: (props: IconProps) => ReturnType `; -const createIconStory = (iconName: keyof typeof Icons): StoryObj => { +const createIconStory = ( + iconName: keyof typeof StaticIcons, +): StoryObj => { const story = { - render: (args) => Template(args, Icons[iconName]), + render: (args) => Template(args, StaticIcons[iconName]), } as StoryObj; - story.argTypes = { - iconLink: { table: { disable: true } }, - }; - return story; }; +const SpinnerIconStory: StoryObj = { + render: (args) => Template(args, Spinner), + argTypes: { + disableSpin: { control: "boolean" }, + }, + args: { + disableSpin: false, + }, +}; + export const AngleDownIcon = createIconStory("AngleDown"); export const AngleUpIcon = createIconStory("AngleUp"); export const BusinessIcon = createIconStory("Business"); @@ -58,4 +70,5 @@ export const FolderIcon = createIconStory("Folder"); export const GlobeIcon = createIconStory("Globe"); export const PencilSquareIcon = createIconStory("PencilSquare"); export const ShieldIcon = createIconStory("Shield"); +export const SpinnerIcon = SpinnerIconStory; export const UserIcon = createIconStory("User"); diff --git a/apps/browser/src/autofill/content/components/notification/button-row.ts b/apps/browser/src/autofill/content/components/notification/button-row.ts index 470147cb469..04b79c1951a 100644 --- a/apps/browser/src/autofill/content/components/notification/button-row.ts +++ b/apps/browser/src/autofill/content/components/notification/button-row.ts @@ -34,6 +34,7 @@ export type NotificationButtonRowProps = { organizations?: OrgView[]; primaryButton: { text: string; + isLoading?: boolean; handlePrimaryButtonClick: (args: any) => void; }; personalVaultIsAllowed: boolean; diff --git a/apps/browser/src/autofill/content/components/notification/container.ts b/apps/browser/src/autofill/content/components/notification/container.ts index cc7f0fc72c0..0c70e0da63c 100644 --- a/apps/browser/src/autofill/content/components/notification/container.ts +++ b/apps/browser/src/autofill/content/components/notification/container.ts @@ -29,6 +29,7 @@ export type NotificationContainerProps = NotificationBarIframeInitData & { folders?: FolderView[]; headerMessage?: string; i18n: I18n; + isLoading?: boolean; organizations?: OrgView[]; personalVaultIsAllowed?: boolean; notificationTestId: string; @@ -44,6 +45,7 @@ export function NotificationContainer({ folders, headerMessage, i18n, + isLoading, organizations, personalVaultIsAllowed = true, notificationTestId, @@ -74,6 +76,7 @@ export function NotificationContainer({ collections, folders, i18n, + isLoading, notificationType: type, organizations, personalVaultIsAllowed, diff --git a/apps/browser/src/autofill/content/components/notification/footer.ts b/apps/browser/src/autofill/content/components/notification/footer.ts index b47dd5cc094..d37547a6fae 100644 --- a/apps/browser/src/autofill/content/components/notification/footer.ts +++ b/apps/browser/src/autofill/content/components/notification/footer.ts @@ -16,6 +16,7 @@ export type NotificationFooterProps = { collections?: CollectionView[]; folders?: FolderView[]; i18n: I18n; + isLoading?: boolean; notificationType?: NotificationType; organizations?: OrgView[]; personalVaultIsAllowed: boolean; @@ -27,6 +28,7 @@ export function NotificationFooter({ collections, folders, i18n, + isLoading, notificationType, organizations, personalVaultIsAllowed, @@ -52,6 +54,7 @@ export function NotificationFooter({ i18n, primaryButton: { handlePrimaryButtonClick: handleSaveAction, + isLoading, text: primaryButtonText, }, personalVaultIsAllowed, diff --git a/apps/browser/src/autofill/content/components/rows/button-row.ts b/apps/browser/src/autofill/content/components/rows/button-row.ts index 041d0a6b696..8b4eabfec50 100644 --- a/apps/browser/src/autofill/content/components/rows/button-row.ts +++ b/apps/browser/src/autofill/content/components/rows/button-row.ts @@ -12,6 +12,7 @@ export type ButtonRowProps = { theme: Theme; primaryButton: { text: string; + isLoading?: boolean; handlePrimaryButtonClick: (args: any) => void; }; selectButtons?: { @@ -29,6 +30,7 @@ export function ButtonRow({ theme, primaryButton, selectButtons }: ButtonRowProp ${ActionButton({ handleClick: primaryButton.handlePrimaryButtonClick, buttonText: primaryButton.text, + isLoading: primaryButton.isLoading, theme, })}
diff --git a/apps/browser/src/autofill/notification/bar.ts b/apps/browser/src/autofill/notification/bar.ts index 275e6cb0721..285ae4aa257 100644 --- a/apps/browser/src/autofill/notification/bar.ts +++ b/apps/browser/src/autofill/notification/bar.ts @@ -249,25 +249,34 @@ async function initNotificationBar(message: NotificationBarWindowMessage) { document.head.querySelectorAll('link[rel="stylesheet"]').forEach((node) => node.remove()); if (isVaultLocked) { - return render( - NotificationContainer({ - ...notificationBarIframeInitData, - headerMessage, - type: resolvedType, - notificationTestId, - theme: resolvedTheme, - personalVaultIsAllowed: !personalVaultDisallowed, - handleCloseNotification, - handleSaveAction: (e) => { - sendSaveCipherMessage(true); + const notificationConfig = { + ...notificationBarIframeInitData, + headerMessage, + type: resolvedType, + notificationTestId, + theme: resolvedTheme, + personalVaultIsAllowed: !personalVaultDisallowed, + handleCloseNotification, + handleEditOrUpdateAction, + i18n, + }; - // @TODO can't close before vault has finished decrypting, but can't leave open during long decrypt because it looks like the experience has failed - }, - handleEditOrUpdateAction, - i18n, - }), - document.body, - ); + const handleSaveAction = () => { + sendSaveCipherMessage(true); + + render( + NotificationContainer({ + ...notificationConfig, + handleSaveAction: () => {}, + isLoading: true, + }), + document.body, + ); + }; + + const UnlockNotification = NotificationContainer({ ...notificationConfig, handleSaveAction }); + + return render(UnlockNotification, document.body); } // Handle AtRiskPasswordNotification render