Merge branch 'main' of github.com:bitwarden/clients into vault/pm-28060/remove-skeleton-ff

libs/common/src/admin-console/models/collections/collection-admin.view.ts

@@ -121,13 +121,13 @@ export class CollectionAdminView extends CollectionView {
     try {
       view.name = await encryptService.decryptString(new EncString(view.name), orgKey);
     } catch (e) {
+      view.name = "[error: cannot decrypt]";
       // Note: This should be replaced by the owning team with appropriate, domain-specific behavior.
       // eslint-disable-next-line no-console
       console.error(
         "[CollectionAdminView/fromCollectionAccessDetails] Error decrypting collection name",
         e,
       );
-      throw e;
     }
     view.assigned = collection.assigned;
     view.readOnly = collection.readOnly;

libs/common/src/admin-console/models/collections/collection.view.ts

@@ -126,7 +126,14 @@ export class CollectionView implements View, ITreeNodeObject {
   ): Promise<CollectionView> {
     const view = new CollectionView({ ...collection, name: "" });
 
-    view.name = await encryptService.decryptString(collection.name, key);
+    try {
+      view.name = await encryptService.decryptString(collection.name, key);
+    } catch (e) {
+      view.name = "[error: cannot decrypt]";
+      // eslint-disable-next-line no-console
+      console.error("[CollectionView] Error decrypting collection name", e);
+    }
+
     view.assigned = true;
     view.externalId = collection.externalId;
     view.readOnly = collection.readOnly;

libs/common/src/admin-console/models/request/provider/provider-user-confirm.request.ts

@@ -1,5 +1,7 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 export class ProviderUserConfirmRequest {
-  key: string;
+  protected key: string;
+
+  constructor(key: string) {
+    this.key = key;
+  }
 }

libs/common/src/enums/feature-flag.enum.ts

@@ -14,6 +14,7 @@ export enum FeatureFlag {
   AutoConfirm = "pm-19934-auto-confirm-organization-users",
   BlockClaimedDomainAccountCreation = "pm-28297-block-uninvited-claimed-domain-registration",
   IncreaseBulkReinviteLimitForCloud = "pm-28251-increase-bulk-reinvite-limit-for-cloud",
+  MembersComponentRefactor = "pm-29503-refactor-members-inheritance",
 
   /* Auth */
   PM23801_PrefetchPasswordPrelogin = "pm-23801-prefetch-password-prelogin",
@@ -22,6 +23,7 @@ export enum FeatureFlag {
   MacOsNativeCredentialSync = "macos-native-credential-sync",
   WindowsDesktopAutotype = "windows-desktop-autotype",
   WindowsDesktopAutotypeGA = "windows-desktop-autotype-ga",
+  SSHAgentV2 = "ssh-agent-v2",
 
   /* Billing */
   TrialPaymentOptional = "PM-8163-trial-payment",
@@ -99,11 +101,13 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.AutoConfirm]: FALSE,
   [FeatureFlag.BlockClaimedDomainAccountCreation]: FALSE,
   [FeatureFlag.IncreaseBulkReinviteLimitForCloud]: FALSE,
+  [FeatureFlag.MembersComponentRefactor]: FALSE,
 
   /* Autofill */
   [FeatureFlag.MacOsNativeCredentialSync]: FALSE,
   [FeatureFlag.WindowsDesktopAutotype]: FALSE,
   [FeatureFlag.WindowsDesktopAutotypeGA]: FALSE,
+  [FeatureFlag.SSHAgentV2]: FALSE,
 
   /* Tools */
   [FeatureFlag.UseSdkPasswordGenerators]: FALSE,

libs/components/src/breadcrumbs/breadcrumbs.component.html

@@ -2,7 +2,6 @@
   @if (breadcrumb.route(); as route) {
     <a
       bitLink
-      linkType="primary"
       class="tw-my-2 tw-inline-block"
       [routerLink]="route"
       [queryParams]="breadcrumb.queryParams()"
@@ -14,7 +13,6 @@
     <button
       type="button"
       bitLink
-      linkType="primary"
       class="tw-my-2 tw-inline-block"
       (click)="breadcrumb.onClick($event)"
     >
@@ -42,7 +40,6 @@
       @if (breadcrumb.route(); as route) {
         <a
           bitMenuItem
-          linkType="primary"
           [routerLink]="route"
           [queryParams]="breadcrumb.queryParams()"
           [queryParamsHandling]="breadcrumb.queryParamsHandling()"
@@ -50,7 +47,7 @@
           <ng-container [ngTemplateOutlet]="breadcrumb.content()"></ng-container>
         </a>
       } @else {
-        <button type="button" bitMenuItem linkType="primary" (click)="breadcrumb.onClick($event)">
+        <button type="button" bitMenuItem (click)="breadcrumb.onClick($event)">
           <ng-container [ngTemplateOutlet]="breadcrumb.content()"></ng-container>
         </button>
       }
@@ -61,7 +58,6 @@
     @if (breadcrumb.route(); as route) {
       <a
         bitLink
-        linkType="primary"
         class="tw-my-2 tw-inline-block"
         [routerLink]="route"
         [queryParams]="breadcrumb.queryParams()"
@@ -73,7 +69,6 @@
       <button
         type="button"
         bitLink
-        linkType="primary"
         class="tw-my-2 tw-inline-block"
         (click)="breadcrumb.onClick($event)"
       >

libs/components/src/link/link.directive.ts

@@ -3,21 +3,34 @@ import { input, HostBinding, Directive, inject, ElementRef, booleanAttribute } f
 import { AriaDisableDirective } from "../a11y";
 import { ariaDisableElement } from "../utils";
 
-export type LinkType = "primary" | "secondary" | "contrast" | "light";
+export const LinkTypes = [
+  "primary",
+  "secondary",
+  "contrast",
+  "light",
+  "default",
+  "subtle",
+  "success",
+  "warning",
+  "danger",
+] as const;
+
+export type LinkType = (typeof LinkTypes)[number];
 
 const linkStyles: Record<LinkType, string[]> = {
-  primary: [
-    "!tw-text-primary-600",
-    "hover:!tw-text-primary-700",
-    "focus-visible:before:tw-ring-primary-600",
-  ],
-  secondary: ["!tw-text-main", "hover:!tw-text-main", "focus-visible:before:tw-ring-primary-600"],
+  primary: ["tw-text-fg-brand", "hover:tw-text-fg-brand-strong"],
+  default: ["tw-text-fg-brand", "hover:tw-text-fg-brand-strong"],
+  secondary: ["tw-text-fg-heading", "hover:tw-text-fg-heading"],
+  light: ["tw-text-fg-white", "hover:tw-text-fg-white", "focus-visible:before:tw-ring-fg-contrast"],
+  subtle: ["!tw-text-fg-heading", "hover:tw-text-fg-heading"],
+  success: ["tw-text-fg-success", "hover:tw-text-fg-success-strong"],
+  warning: ["tw-text-fg-warning", "hover:tw-text-fg-warning-strong"],
+  danger: ["tw-text-fg-danger", "hover:tw-text-fg-danger-strong"],
   contrast: [
-    "!tw-text-contrast",
-    "hover:!tw-text-contrast",
-    "focus-visible:before:tw-ring-text-contrast",
+    "tw-text-fg-contrast",
+    "hover:tw-text-fg-contrast",
+    "focus-visible:before:tw-ring-fg-contrast",
   ],
-  light: ["!tw-text-alt2", "hover:!tw-text-alt2", "focus-visible:before:tw-ring-text-alt2"],
 };
 
 const commonStyles = [
@@ -32,16 +45,18 @@ const commonStyles = [
   "tw-rounded",
   "tw-transition",
   "tw-no-underline",
+  "tw-cursor-pointer",
   "hover:tw-underline",
   "hover:tw-decoration-1",
   "disabled:tw-no-underline",
   "disabled:tw-cursor-not-allowed",
-  "disabled:!tw-text-secondary-300",
-  "disabled:hover:!tw-text-secondary-300",
+  "disabled:!tw-text-fg-disabled",
+  "disabled:hover:!tw-text-fg-disabled",
   "disabled:hover:tw-no-underline",
   "focus-visible:tw-outline-none",
   "focus-visible:tw-underline",
   "focus-visible:tw-decoration-1",
+  "focus-visible:before:tw-ring-border-focus",
 
   // Workaround for html button tag not being able to be set to `display: inline`
   // and at the same time not being able to use `tw-ring-offset` because of box-shadow issue.
@@ -63,14 +78,14 @@ const commonStyles = [
   "focus-visible:tw-z-10",
   "aria-disabled:tw-no-underline",
   "aria-disabled:tw-pointer-events-none",
-  "aria-disabled:!tw-text-secondary-300",
-  "aria-disabled:hover:!tw-text-secondary-300",
+  "aria-disabled:!tw-text-fg-disabled",
+  "aria-disabled:hover:!tw-text-fg-disabled",
   "aria-disabled:hover:tw-no-underline",
 ];
 
 @Directive()
 abstract class LinkDirective {
-  readonly linkType = input<LinkType>("primary");
+  readonly linkType = input<LinkType>("default");
 }
 
 /**

libs/components/src/link/link.mdx

@@ -18,10 +18,15 @@ import { LinkModule } from "@bitwarden/components";
 
 You can use one of the following variants by providing it as the `linkType` input:
 
-- `primary` - most common, uses brand color
-- `secondary` - matches the main text color
+- @deprecated `primary` => use `default` instead
+- @deprecated `secondary` => use `subtle` instead
+- `default` - most common, uses brand color
+- `subtle` - matches the main text color
 - `contrast` - for high contrast against a dark background (or a light background in dark mode)
 - `light` - always a light color, even in dark mode
+- `warning` - used in association with warning callouts/banners
+- `success` - used in association with success callouts/banners
+- `danger` - used in association with danger callouts/banners
 
 ## Sizes
 

libs/components/src/link/link.stories.ts

@@ -2,7 +2,7 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
 
-import { AnchorLinkDirective, ButtonLinkDirective } from "./link.directive";
+import { AnchorLinkDirective, ButtonLinkDirective, LinkTypes } from "./link.directive";
 import { LinkModule } from "./link.module";
 
 export default {
@@ -14,7 +14,7 @@ export default {
   ],
   argTypes: {
     linkType: {
-      options: ["primary", "secondary", "contrast"],
+      options: LinkTypes.map((type) => type),
       control: { type: "radio" },
     },
   },
@@ -30,48 +30,153 @@ type Story = StoryObj<ButtonLinkDirective>;
 
 export const Default: Story = {
   render: (args) => ({
+    props: {
+      linkType: args.linkType,
+      backgroundClass:
+        args.linkType === "contrast"
+          ? "tw-bg-bg-contrast"
+          : args.linkType === "light"
+            ? "tw-bg-bg-brand"
+            : "tw-bg-transparent",
+    },
     template: /*html*/ `
-      <a bitLink ${formatArgsForCodeSnippet<ButtonLinkDirective>(args)}>Your text here</a>
+      <div class="tw-p-2" [class]="backgroundClass">
+        <a bitLink href="" ${formatArgsForCodeSnippet<ButtonLinkDirective>(args)}>Your text here</a>
+      </div>
     `,
   }),
+  args: {
+    linkType: "primary",
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+export const AllVariations: Story = {
+  render: () => ({
+    template: /*html*/ `
+      <div class="tw-flex tw-flex-col tw-gap-6">
+        <div class="tw-flex tw-gap-4 tw-p-2">
+          <a bitLink linkType="primary" href="#">Primary</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2">
+          <a bitLink linkType="secondary" href="#">Secondary</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2 tw-bg-bg-contrast">
+          <a bitLink linkType="contrast" href="#">Contrast</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2 tw-bg-bg-brand">
+          <a bitLink linkType="light" href="#">Light</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2">
+          <a bitLink linkType="default" href="#">Default</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2">
+          <a bitLink linkType="subtle" href="#">Subtle</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2">
+          <a bitLink linkType="success" href="#">Success</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2">
+          <a bitLink linkType="warning" href="#">Warning</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2">
+          <a bitLink linkType="danger" href="#">Danger</a>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: {
+      exclude: ["linkType"],
+      hideNoControlsWarning: true,
+    },
+  },
 };
 
 export const InteractionStates: Story = {
   render: () => ({
     template: /*html*/ `
-      <div class="tw-flex tw-gap-4 tw-p-2 tw-mb-6">
+      <div class="tw-flex tw-flex-col tw-gap-6">
+        <div class="tw-flex tw-gap-4 tw-p-2">
         <a bitLink linkType="primary" href="#">Primary</a>
         <a bitLink linkType="primary" href="#" class="tw-test-hover">Primary</a>
         <a bitLink linkType="primary" href="#" class="tw-test-focus-visible">Primary</a>
         <a bitLink linkType="primary" href="#" class="tw-test-hover tw-test-focus-visible">Primary</a>
       </div>
-      <div class="tw-flex tw-gap-4 tw-p-2 tw-mb-6">
+      <div class="tw-flex tw-gap-4 tw-p-2">
         <a bitLink linkType="secondary" href="#">Secondary</a>
         <a bitLink linkType="secondary" href="#" class="tw-test-hover">Secondary</a>
         <a bitLink linkType="secondary" href="#" class="tw-test-focus-visible">Secondary</a>
         <a bitLink linkType="secondary" href="#" class="tw-test-hover tw-test-focus-visible">Secondary</a>
       </div>
-      <div class="tw-flex tw-gap-4 tw-p-2 tw-mb-6 tw-bg-primary-600">
+      <div class="tw-flex tw-gap-4 tw-p-2 tw-bg-bg-contrast">
         <a bitLink linkType="contrast" href="#">Contrast</a>
         <a bitLink linkType="contrast" href="#" class="tw-test-hover">Contrast</a>
         <a bitLink linkType="contrast" href="#" class="tw-test-focus-visible">Contrast</a>
         <a bitLink linkType="contrast" href="#" class="tw-test-hover tw-test-focus-visible">Contrast</a>
       </div>
-      <div class="tw-flex tw-gap-4 tw-p-2 tw-mb-6 tw-bg-primary-600">
+      <div class="tw-flex tw-gap-4 tw-p-2 tw-bg-bg-brand">
         <a bitLink linkType="light" href="#">Light</a>
         <a bitLink linkType="light" href="#" class="tw-test-hover">Light</a>
         <a bitLink linkType="light" href="#" class="tw-test-focus-visible">Light</a>
         <a bitLink linkType="light" href="#" class="tw-test-hover tw-test-focus-visible">Light</a>
       </div>
+      <div class="tw-flex tw-gap-4 tw-p-2">
+        <a bitLink linkType="default" href="#">Default</a>
+        <a bitLink linkType="default" href="#" class="tw-test-hover">Default</a>
+        <a bitLink linkType="default" href="#" class="tw-test-focus-visible">Default</a>
+        <a bitLink linkType="default" href="#" class="tw-test-hover tw-test-focus-visible">Default</a>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-p-2">
+        <a bitLink linkType="subtle" href="#">Subtle</a>
+        <a bitLink linkType="subtle" href="#" class="tw-test-hover">Subtle</a>
+        <a bitLink linkType="subtle" href="#" class="tw-test-focus-visible">Subtle</a>
+        <a bitLink linkType="subtle" href="#" class="tw-test-hover tw-test-focus-visible">Subtle</a>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-p-2">
+        <a bitLink linkType="success" href="#">Success</a>
+        <a bitLink linkType="success" href="#" class="tw-test-hover">Success</a>
+        <a bitLink linkType="success" href="#" class="tw-test-focus-visible">Success</a>
+        <a bitLink linkType="success" href="#" class="tw-test-hover tw-test-focus-visible">Success</a>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-p-2">
+        <a bitLink linkType="warning" href="#">Warning</a>
+        <a bitLink linkType="warning" href="#" class="tw-test-hover">Warning</a>
+        <a bitLink linkType="warning" href="#" class="tw-test-focus-visible">Warning</a>
+        <a bitLink linkType="warning" href="#" class="tw-test-hover tw-test-focus-visible">Warning</a>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-p-2">
+        <a bitLink linkType="danger" href="#">Danger</a>
+        <a bitLink linkType="danger" href="#" class="tw-test-hover">Danger</a>
+        <a bitLink linkType="danger" href="#" class="tw-test-focus-visible">Danger</a>
+        <a bitLink linkType="danger" href="#" class="tw-test-hover tw-test-focus-visible">Danger</a>
+      </div>
+      </div>
     `,
   }),
+  parameters: {
+    controls: {
+      exclude: ["linkType"],
+      hideNoControlsWarning: true,
+    },
+  },
 };
 
 export const Buttons: Story = {
   render: (args) => ({
-    props: args,
+    props: {
+      linkType: args.linkType,
+      backgroundClass:
+        args.linkType === "contrast"
+          ? "tw-bg-bg-contrast"
+          : args.linkType === "light"
+            ? "tw-bg-bg-brand"
+            : "tw-bg-transparent",
+    },
     template: /*html*/ `
-    <div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-600': linkType === 'contrast' }">
+    <div class="tw-p-2" [class]="backgroundClass">
       <div class="tw-block tw-p-2">
         <button type="button" bitLink [linkType]="linkType">Button</button>
       </div>
@@ -100,9 +205,17 @@ export const Buttons: Story = {
 
 export const Anchors: StoryObj<AnchorLinkDirective> = {
   render: (args) => ({
-    props: args,
+    props: {
+      linkType: args.linkType,
+      backgroundClass:
+        args.linkType === "contrast"
+          ? "tw-bg-bg-contrast"
+          : args.linkType === "light"
+            ? "tw-bg-bg-brand"
+            : "tw-bg-transparent",
+    },
     template: /*html*/ `
-    <div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-600': linkType === 'contrast' }">
+    <div class="tw-p-2" [class]="backgroundClass">
       <div class="tw-block tw-p-2">
         <a bitLink [linkType]="linkType" href="#">Anchor</a>
       </div>
@@ -138,18 +251,15 @@ export const Inline: Story = {
       </span>
     `,
   }),
-  args: {
-    linkType: "primary",
-  },
 };
 
-export const Disabled: Story = {
+export const Inactive: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
       <button type="button" bitLink disabled linkType="primary" class="tw-me-2">Primary</button>
       <button type="button" bitLink disabled linkType="secondary" class="tw-me-2">Secondary</button>
-      <div class="tw-bg-primary-600 tw-p-2 tw-inline-block">
+      <div class="tw-bg-bg-contrast tw-p-2 tw-inline-block">
         <button type="button" bitLink disabled linkType="contrast">Contrast</button>
       </div>
     `,

libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts

@@ -73,7 +73,6 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
           A random password
           <button
             bitLink
-            linkType="primary"
             [bitPopoverTriggerFor]="myPopover"
             #triggerRef="popoverTrigger"
             type="button"

libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts

@@ -112,13 +112,12 @@ class KitchenSinkDialogComponent {
 
     <div class="tw-my-6">
       <h1 bitTypography="h1">Bitwarden Kitchen Sink<bit-avatar text="Bit Warden"></bit-avatar></h1>
-      <a bitLink linkType="primary" href="#">This is a link</a>
+      <a bitLink href="#">This is a link</a>
       <p bitTypography="body1" class="tw-inline">
         &nbsp;and this is a link button popover trigger:&nbsp;
       </p>
       <button
         bitLink
-        linkType="primary"
         [bitPopoverTriggerFor]="myPopover"
         #triggerRef="popoverTrigger"
         type="button"

libs/tools/send/send-ui/src/send-list/send-list.component.ts

@@ -1,17 +1,8 @@
 import { CommonModule } from "@angular/common";
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  inject,
-  input,
-  output,
-} from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, effect, input, output } from "@angular/core";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { NoResults, NoSendsIcon } from "@bitwarden/assets/svg";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
 import {
   ButtonModule,
@@ -57,8 +48,6 @@ export class SendListComponent {
   protected readonly noResultsIcon = NoResults;
   protected readonly sendListState = SendListState;
 
-  private i18nService = inject(I18nService);
-
   readonly sends = input.required<SendView[]>();
   readonly loading = input<boolean>(false);
   readonly disableSend = input<boolean>(false);
@@ -70,7 +59,7 @@ export class SendListComponent {
   );
 
   protected readonly noSearchResults = computed(
-    () => this.showSearchBar() && (this.sends().length === 0 || this.searchText().length > 0),
+    () => this.showSearchBar() && this.sends().length === 0,
   );
 
   // Reusable data source instance - updated reactively when sends change