[PM-8972] Migrate callouts to the new CL callout (#9710)

* Migrate callouts to the new CL callout
2024-06-20 15:45:48 +02:00 · 2024-06-20 15:45:48 +02:00 · cbb2fa9442
parent 593dc3c716
commit cbb2fa9442
32 changed files with 75 additions and 77 deletions
--- a/apps/web/src/app/admin-console/organizations/manage/verify-recover-delete-org.component.html
+++ b/apps/web/src/app/admin-console/organizations/manage/verify-recover-delete-org.component.html
@ -3,9 +3,9 @@
    <p class="tw-text-xl tw-text-center tw-mb-4">{{ "deleteOrganization" | i18n }}</p>
    <div class="tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background">
      <div class="tw-p-5">
-        <app-callout type="warning">{{
-          "deletingOrganizationIsPermanentWarning" | i18n: name
-        }}</app-callout>
+        <bit-callout type="warning">
+          {{ "deletingOrganizationIsPermanentWarning" | i18n: name }}
+        </bit-callout>
        <p class="tw-text-center">
          <strong>{{ name }}</strong>
        </p>
--- a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-confirm.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-confirm.component.html
@ -1,11 +1,11 @@
 <bit-dialog dialogSize="large" [title]="'confirmUsers' | i18n" [loading]="loading">
  <ng-container bitDialogContent>
-    <app-callout type="danger" *ngIf="filteredUsers.length <= 0">
+    <bit-callout type="danger" *ngIf="filteredUsers.length <= 0">
      {{ "noSelectedUsersApplicable" | i18n }}
-    </app-callout>
-    <app-callout type="error" *ngIf="error">
+    </bit-callout>
+    <bit-callout type="danger" [title]="'error' | i18n" *ngIf="error">
      {{ error }}
-    </app-callout>
+    </bit-callout>
    <ng-container *ngIf="!loading && !done">
      <p bitTypography="body1">
        {{ "fingerprintEnsureIntegrityVerify" | i18n }}
--- a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-remove.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-remove.component.html
@ -1,18 +1,18 @@
 <bit-dialog dialogSize="large" [title]="'removeUsers' | i18n">
  <ng-container bitDialogContent>
-    <app-callout type="danger" *ngIf="users.length <= 0">
+    <bit-callout type="danger" *ngIf="users.length <= 0">
      {{ "noSelectedUsersApplicable" | i18n }}
-    </app-callout>
-    <app-callout type="error" *ngIf="error">
+    </bit-callout>
+    <bit-callout type="danger" [title]="'error' | i18n" *ngIf="error">
      {{ error }}
-    </app-callout>
+    </bit-callout>
    <ng-container *ngIf="!done">
-      <app-callout type="warning" *ngIf="users.length > 0 && !error">
+      <bit-callout type="warning" *ngIf="users.length > 0 && !error">
        <p bitTypography="body1">{{ removeUsersWarning }}</p>
        <p *ngIf="this.showNoMasterPasswordWarning" bitTypography="body1">
          {{ "removeMembersWithoutMasterPasswordWarning" | i18n }}
        </p>
-      </app-callout>
+      </bit-callout>
      <bit-table>
        <ng-container header>
          <tr>
--- a/apps/web/src/app/admin-console/organizations/members/people.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/people.component.html
@ -48,14 +48,14 @@
 <ng-container *ngIf="firstLoaded">
  <p *ngIf="!dataSource.filteredData.length">{{ "noMembersInList" | i18n }}</p>
  <ng-container *ngIf="dataSource.filteredData.length">
-    <app-callout
+    <bit-callout
      type="info"
      title="{{ 'confirmUsers' | i18n }}"
-      icon="bwi bwi-check-circle"
+      icon="bwi-check-circle"
      *ngIf="showConfirmUsers"
    >
      {{ "usersNeedConfirmed" | i18n }}
-    </app-callout>
+    </bit-callout>
    <!-- The padding on the bottom of the cdk-virtual-scroll-viewport element is required to prevent table row content
    from overflowing the <main> element. -->
    <cdk-virtual-scroll-viewport scrollWindow [itemSize]="rowHeight" class="tw-pb-8">
--- a/apps/web/src/app/admin-console/organizations/policies/disable-send.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/disable-send.component.html
@ -1,6 +1,6 @@
-<app-callout type="warning">
+<bit-callout type="warning">
  {{ "disableSendExemption" | i18n }}
-</app-callout>
+</bit-callout>

 <bit-form-control>
  <input type="checkbox" bitCheckbox [formControl]="enabled" id="enabled" />
--- a/apps/web/src/app/admin-console/organizations/policies/master-password.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/master-password.component.html
@ -1,6 +1,6 @@
-<app-callout type="info" *ngIf="showKeyConnectorInfo">
+<bit-callout type="info" *ngIf="showKeyConnectorInfo">
  {{ "keyConnectorPolicyRestriction" | i18n }}
-</app-callout>
+</bit-callout>

 <div [formGroup]="data">
  <bit-form-control>
--- a/apps/web/src/app/admin-console/organizations/policies/personal-ownership.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/personal-ownership.component.html
@ -1,6 +1,6 @@
-<app-callout type="warning">
+<bit-callout type="warning">
  {{ "personalOwnershipExemption" | i18n }}
-</app-callout>
+</bit-callout>

 <div class="form-group">
  <div class="form-check">
--- a/apps/web/src/app/admin-console/organizations/policies/require-sso.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/require-sso.component.html
@ -1,9 +1,9 @@
-<app-callout type="tip" title="{{ 'prerequisite' | i18n }}">
+<bit-callout type="info" title="{{ 'prerequisite' | i18n }}">
  {{ "requireSsoPolicyReq" | i18n }}
-</app-callout>
-<app-callout type="warning">
+</bit-callout>
+<bit-callout type="warning">
  {{ "requireSsoExemption" | i18n }}
-</app-callout>
+</bit-callout>

 <bit-form-control>
  <input type="checkbox" bitCheckbox [formControl]="enabled" id="enabled" />
--- a/apps/web/src/app/admin-console/organizations/policies/send-options.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/send-options.component.html
@ -1,6 +1,6 @@
-<app-callout type="warning">
+<bit-callout type="warning">
  {{ "sendOptionsExemption" | i18n }}
-</app-callout>
+</bit-callout>

 <bit-form-control>
  <input type="checkbox" bitCheckbox [formControl]="enabled" id="enabled" />
--- a/apps/web/src/app/admin-console/organizations/policies/single-org.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/single-org.component.html
@ -1,6 +1,6 @@
-<app-callout type="warning">
+<bit-callout type="warning">
  {{ "singleOrgPolicyWarning" | i18n }}
-</app-callout>
+</bit-callout>

 <bit-form-control>
  <input type="checkbox" bitCheckbox [formControl]="enabled" id="enabled" />
--- a/apps/web/src/app/admin-console/organizations/policies/two-factor-authentication.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/two-factor-authentication.component.html
@ -1,6 +1,6 @@
-<app-callout type="warning">
+<bit-callout type="warning">
  {{ "twoStepLoginPolicyWarning" | i18n }}
-</app-callout>
+</bit-callout>

 <bit-form-control>
  <input type="checkbox" id="enabled" bitCheckbox [formControl]="enabled" />
--- a/apps/web/src/app/admin-console/organizations/settings/components/delete-organization-dialog.component.html
+++ b/apps/web/src/app/admin-console/organizations/settings/components/delete-organization-dialog.component.html
@ -2,9 +2,9 @@
  <bit-dialog [loading]="!loaded">
    <span bitDialogTitle>{{ "deleteOrganization" | i18n }}</span>
    <div bitDialogContent>
-      <app-callout type="warning">{{
-        "deletingOrganizationIsPermanentWarning" | i18n: organization?.name
-      }}</app-callout>
+      <bit-callout type="warning">
+        {{ "deletingOrganizationIsPermanentWarning" | i18n: organization?.name }}
+      </bit-callout>
      <p id="organizationDeleteDescription">
        <ng-container
          *ngIf="
--- a/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html
+++ b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html
@ -4,9 +4,6 @@
      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
      {{ "loading" | i18n }}
    </div>
-    <app-callout type="error" *ngIf="error">
-      {{ error }}
-    </app-callout>
    <p class="tw-text-lg">{{ "pickAnAvatarColor" | i18n }}</p>
    <div class="tw-flex tw-flex-wrap tw-justify-center tw-gap-8">
      <ng-container *ngFor="let c of defaultColorPalette">
--- a/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts
@ -31,7 +31,6 @@ export class ChangeAvatarDialogComponent implements OnInit, OnDestroy {
  @ViewChild("colorPicker") colorPickerElement: ElementRef<HTMLElement>;

  loading = false;
-  error: string;
  defaultColorPalette: NamedAvatarColor[] = [
    { name: "brightBlue", color: "#16cbfc" },
    { name: "green", color: "#94cc4b" },
--- a/apps/web/src/app/auth/settings/account/change-email.component.html
+++ b/apps/web/src/app/auth/settings/account/change-email.component.html
@ -1,7 +1,7 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit">
-  <app-callout type="warning" *ngIf="showTwoFactorEmailWarning">
+  <bit-callout type="warning" *ngIf="showTwoFactorEmailWarning">
    {{ "changeEmailTwoFactorWarning" | i18n }}
-  </app-callout>
+  </bit-callout>

  <div class="tw-w-1/2 tw-pr-2" formGroupName="step1">
    <bit-form-field>
@ -29,7 +29,7 @@
  <ng-container *ngIf="tokenSent">
    <hr />
    <p>{{ "changeEmailDesc" | i18n: formGroup.controls.step1.value.newEmail }}</p>
-    <app-callout type="warning">{{ "loggedOutWarning" | i18n }}</app-callout>
+    <bit-callout type="warning">{{ "loggedOutWarning" | i18n }}</bit-callout>

    <div class="tw-w-1/2 tw-pr-2">
      <bit-form-field>
--- a/apps/web/src/app/auth/settings/account/deauthorize-sessions.component.html
+++ b/apps/web/src/app/auth/settings/account/deauthorize-sessions.component.html
@ -20,7 +20,7 @@
      </div>
      <div class="modal-body">
        <p>{{ "deauthorizeSessionsDesc" | i18n }}</p>
-        <app-callout type="warning">{{ "deauthorizeSessionsWarning" | i18n }}</app-callout>
+        <bit-callout type="warning">{{ "deauthorizeSessionsWarning" | i18n }}</bit-callout>
        <app-user-verification [(ngModel)]="masterPassword" ngDefaultControl name="secret">
        </app-user-verification>
      </div>
--- a/apps/web/src/app/auth/settings/account/delete-account-dialog.component.html
+++ b/apps/web/src/app/auth/settings/account/delete-account-dialog.component.html
@ -2,7 +2,7 @@
  <bit-dialog dialogSize="default" [title]="'deleteAccount' | i18n">
    <ng-container bitDialogContent>
      <p bitTypography="body1">{{ "deleteAccountDesc" | i18n }}</p>
-      <app-callout type="warning">{{ "deleteAccountWarning" | i18n }}</app-callout>
+      <bit-callout type="warning">{{ "deleteAccountWarning" | i18n }}</bit-callout>
      <app-user-verification-form-input
        formControlName="verification"
        name="verification"
--- a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html
@ -5,7 +5,7 @@
      <small class="tw-text-muted" *ngIf="params.name">{{ params.name }}</small>
    </span>
    <div bitDialogContent>
-      <app-callout type="warning">{{ "loggedOutWarning" | i18n }}</app-callout>
+      <bit-callout type="warning">{{ "loggedOutWarning" | i18n }}</bit-callout>
      <auth-password-callout [policy]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
      </auth-password-callout>
      <div class="tw-w-full tw-flex tw-gap-4">
--- a/apps/web/src/app/auth/settings/security/api-key.component.html
+++ b/apps/web/src/app/auth/settings/security/api-key.component.html
@ -5,11 +5,11 @@
      <p bitTypography="body1">{{ data.apiKeyDescription | i18n }}</p>
      <app-user-verification-form-input formControlName="masterPassword" *ngIf="!clientSecret">
      </app-user-verification-form-input>
-      <app-callout type="warning" *ngIf="clientSecret">{{ data.apiKeyWarning | i18n }}</app-callout>
-      <app-callout
+      <bit-callout type="warning" *ngIf="clientSecret">{{ data.apiKeyWarning | i18n }}</bit-callout>
+      <bit-callout
        type="info"
        title="{{ 'oauth2ClientCredentials' | i18n }}"
-        icon="bwi bwi-key"
+        icon="bwi-key"
        *ngIf="clientSecret"
      >
        <p bitTypography="body1" class="tw-mb-1">
@ -28,7 +28,7 @@
          <strong>grant_type:</strong><br />
          <code>{{ data.grantType }}</code>
        </p>
-      </app-callout>
+      </bit-callout>
    </div>
    <div bitDialogFooter>
      <button type="submit" buttonType="primary" *ngIf="!clientSecret" bitButton bitFormButton>
--- a/apps/web/src/app/auth/settings/two-factor-authenticator.component.html
+++ b/apps/web/src/app/auth/settings/two-factor-authenticator.component.html
@ -1,7 +1,7 @@
 <form *ngIf="authed" [formGroup]="formGroup" [bitSubmit]="submit">
  <bit-dialog dialogSize="default">
-    <span bitDialogTitle
-      >{{ "twoStepLogin" | i18n }}
+    <span bitDialogTitle>
+      {{ "twoStepLogin" | i18n }}
      <span bitTypography="body1">{{ "authenticatorAppTitle" | i18n }}</span>
    </span>
    <ng-container bitDialogContent>
@ -13,10 +13,10 @@
        </p>
      </ng-container>
      <ng-container *ngIf="enabled">
-        <app-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi bwi-check-circle">
+        <bit-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi-check-circle">
          <p bitTypography="body1">{{ "twoStepLoginProviderEnabled" | i18n }}</p>
          {{ "twoStepAuthenticatorReaddDesc" | i18n }}
-        </app-callout>
+        </bit-callout>
        <img class="float-right mfaType0" alt="Authenticator app logo" />
        <p bitTypography="body1">{{ "twoStepAuthenticatorNeedApp" | i18n }}</p>
      </ng-container>
--- a/apps/web/src/app/auth/settings/two-factor-email.component.html
+++ b/apps/web/src/app/auth/settings/two-factor-email.component.html
@ -6,9 +6,9 @@
    </span>
    <ng-container bitDialogContent>
      <ng-container *ngIf="enabled">
-        <app-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi bwi-check-circle">
+        <bit-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi-check-circle">
          {{ "twoStepLoginProviderEnabled" | i18n }}
-        </app-callout>
+        </bit-callout>
        <strong>{{ "email" | i18n }}:</strong> {{ email }}
      </ng-container>
      <ng-container *ngIf="!enabled">
--- a/apps/web/src/app/billing/organizations/organization-plans.component.html
+++ b/apps/web/src/app/billing/organizations/organization-plans.component.html
@ -455,7 +455,9 @@
    </ng-container>
  </bit-section>
  <bit-section *ngIf="singleOrgPolicyBlock">
-    <app-callout [type]="'error'">{{ "singleOrgBlockCreateMessage" | i18n }}</app-callout>
+    <bit-callout type="danger" [title]="'error' | i18n">
+      {{ "singleOrgBlockCreateMessage" | i18n }}
+    </bit-callout>
  </bit-section>
  <bit-section>
    <button
--- a/apps/web/src/app/billing/shared/payment.component.html
+++ b/apps/web/src/app/billing/shared/payment.component.html
@ -63,9 +63,9 @@
    </div>
  </ng-container>
  <ng-container *ngIf="showMethods && method === paymentMethodType.BankAccount">
-    <app-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
+    <bit-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
      {{ "verifyBankAccountInitialDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}
-    </app-callout>
+    </bit-callout>
    <div class="tw-grid tw-grid-cols-12 tw-gap-4" formGroupName="bank">
      <bit-form-field class="tw-col-span-6">
        <bit-label>{{ "routingNumber" | i18n }}</bit-label>
@ -106,8 +106,8 @@
    </div>
  </ng-container>
  <ng-container *ngIf="showMethods && method === paymentMethodType.Credit">
-    <app-callout type="note">
+    <bit-callout>
      {{ "makeSureEnoughCredit" | i18n }}
-    </app-callout>
+    </bit-callout>
  </ng-container>
 </div>
--- a/apps/web/src/app/settings/preferences.component.html
+++ b/apps/web/src/app/settings/preferences.component.html
@ -3,7 +3,7 @@
 <bit-container>
  <p bitTypography="body1">{{ "preferencesDesc" | i18n }}</p>
  <form [formGroup]="form" [bitSubmit]="submit" class="tw-w-1/2">
-    <app-callout type="info" *ngIf="vaultTimeoutPolicyCallout | async as policy">
+    <bit-callout type="info" *ngIf="vaultTimeoutPolicyCallout | async as policy">
      <span *ngIf="policy.timeout && policy.action">
        {{
          "vaultTimeoutPolicyWithActionInEffect"
@ -16,7 +16,7 @@
      <span *ngIf="!policy.timeout && policy.action">
        {{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }}
      </span>
-    </app-callout>
+    </bit-callout>
    <app-vault-timeout-input
      [vaultTimeoutOptions]="vaultTimeoutOptions"
      [formControl]="form.controls.vaultTimeout"
--- a/apps/web/src/app/vault/individual-vault/add-edit.component.html
+++ b/apps/web/src/app/vault/individual-vault/add-edit.component.html
@ -20,9 +20,9 @@
        </button>
      </div>
      <div class="modal-body" *ngIf="cipher">
-        <app-callout type="info" *ngIf="allowOwnershipAssignment() && !allowPersonal">
+        <bit-callout type="info" *ngIf="allowOwnershipAssignment() && !allowPersonal">
          {{ "personalOwnershipPolicyInEffect" | i18n }}
-        </app-callout>
+        </bit-callout>
        <div class="row" *ngIf="!editMode && !viewOnly">
          <div class="col-6 form-group">
            <label for="type">{{ "whatTypeOfItem" | i18n }}</label>
--- a/apps/web/src/app/vault/individual-vault/vault.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault.component.html
@ -33,9 +33,9 @@
    </div>
  </div>
  <div class="tw-basis-3/4 tw-max-w-3/4 tw-px-2.5">
-    <app-callout type="warning" *ngIf="activeFilter.isDeleted" icon="bwi-exclamation-triangle">
+    <bit-callout type="warning" *ngIf="activeFilter.isDeleted">
      {{ trashCleanupWarning }}
-    </app-callout>
+    </bit-callout>
    <app-vault-items
      [ciphers]="ciphers"
      [collections]="collections"
--- a/apps/web/src/app/vault/org-vault/vault.component.html
+++ b/apps/web/src/app/vault/org-vault/vault.component.html
@ -41,9 +41,9 @@
        {{ "addAccess" | i18n }}
      </bit-toggle>
    </bit-toggle-group>
-    <app-callout type="warning" *ngIf="activeFilter.isDeleted" icon="bwi bwi-exclamation-triangle">
+    <bit-callout type="warning" *ngIf="activeFilter.isDeleted">
      {{ trashCleanupWarning }}
-    </app-callout>
+    </bit-callout>
    <app-vault-items
      [ciphers]="ciphers"
      [collections]="collections"
--- a/apps/web/src/app/vault/settings/purge-vault.component.html
+++ b/apps/web/src/app/vault/settings/purge-vault.component.html
@ -4,7 +4,7 @@
      <p bitTypography="body1">
        {{ (organizationId ? "purgeOrgVaultDesc" : "purgeVaultDesc") | i18n }}
      </p>
-      <app-callout type="warning">{{ "purgeVaultWarning" | i18n }}</app-callout>
+      <bit-callout type="warning">{{ "purgeVaultWarning" | i18n }}</bit-callout>
      <app-user-verification formControlName="masterPassword"></app-user-verification>
    </ng-container>
    <ng-container bitDialogFooter>
--- a/bitwarden_license/bit-web/src/app/admin-console/policies/activate-autofill.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/policies/activate-autofill.component.html
@ -1,9 +1,9 @@
-<app-callout type="warning">
+<bit-callout type="warning">
  {{ "experimentalFeature" | i18n }}
  <a href="https://bitwarden.com/help/auto-fill-browser/" target="_blank" rel="noreferrer">{{
    "learnMoreAboutAutofill" | i18n
  }}</a>
-</app-callout>
+</bit-callout>

 <bit-form-control>
  <input type="checkbox" id="enabled" bitCheckbox [formControl]="enabled" />
--- a/bitwarden_license/bit-web/src/app/admin-console/policies/maximum-vault-timeout.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/policies/maximum-vault-timeout.component.html
@ -1,6 +1,6 @@
-<app-callout type="tip" title="{{ 'prerequisite' | i18n }}">
+<bit-callout title="{{ 'prerequisite' | i18n }}">
  {{ "requireSsoPolicyReq" | i18n }}
-</app-callout>
+</bit-callout>

 <bit-form-control>
  <input type="checkbox" id="enabled" bitCheckbox [formControl]="enabled" />
--- a/bitwarden_license/bit-web/src/app/auth/sso/sso.component.html
+++ b/bitwarden_license/bit-web/src/app/auth/sso/sso.component.html
@ -106,9 +106,9 @@
          showKeyConnectorOptions
        "
      >
-        <app-callout type="warning" [useAlertRole]="true">
+        <bit-callout type="warning" [useAlertRole]="true">
          {{ "keyConnectorWarning" | i18n }}
-        </app-callout>
+        </bit-callout>

        <bit-form-field>
          <bit-label>{{ "keyConnectorUrl" | i18n }}</bit-label>
--- a/bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-export.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-export.component.html
@ -2,9 +2,9 @@

 <form [formGroup]="formGroup" [bitSubmit]="submit">
  <div class="tw-my-4 tw-max-w-xl">
-    <app-callout type="info" title="{{ 'exportingOrganizationSecretDataTitle' | i18n }}">
+    <bit-callout type="info" title="{{ 'exportingOrganizationSecretDataTitle' | i18n }}">
      {{ "exportingOrganizationSecretDataDescription" | i18n: orgName }}
-    </app-callout>
+    </bit-callout>
  </div>

  <bit-form-field class="tw-max-w-sm">