[PM-4962] remove all bootstrap classes from reports. add missing header column (#10524)

* remove all bootstrap classes from reports. add missing header column

* finish migrating table components to component library

* update reports based on PR feedback

apps/web/src/app/tools/reports/pages/breach-report.component.html

@@ -12,25 +12,25 @@
       {{ "checkBreaches" | i18n }}
     </button>
   </form>
-  <div class="mt-4" *ngIf="!loading && checkedUsername">
+  <div class="tw-mt-4" *ngIf="!loading && checkedUsername">
     <p *ngIf="error">{{ "reportError" | i18n }}...</p>
     <ng-container *ngIf="!error">
-      <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!breachedAccounts.length">
+      <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!breachedAccounts.length">
         {{ "breachUsernameNotFound" | i18n: checkedUsername }}
-      </app-callout>
-      <app-callout type="danger" title="{{ 'breachFound' | i18n }}" *ngIf="breachedAccounts.length">
+      </bit-callout>
+      <bit-callout type="danger" title="{{ 'breachFound' | i18n }}" *ngIf="breachedAccounts.length">
         {{ "breachUsernameFound" | i18n: checkedUsername : breachedAccounts.length }}
-      </app-callout>
+      </bit-callout>
       <ul class="list-group list-group-breach" *ngIf="breachedAccounts.length">
         <li *ngFor="let a of breachedAccounts" class="list-group-item min-height-fix">
           <div class="row">
-            <div class="col-2 text-center">
+            <div class="col-2 tw-text-center">
               <img [src]="a.logoPath" alt="" class="img-fluid" />
             </div>
             <div class="col-7">
-              <h3 class="text-lg">{{ a.title }}</h3>
+              <h3 class="tw-text-lg">{{ a.title }}</h3>
               <p [innerHTML]="a.description"></p>
-              <p class="mb-1">{{ "compromisedData" | i18n }}:</p>
+              <p class="tw-mb-1">{{ "compromisedData" | i18n }}:</p>
               <ul>
                 <li *ngFor="let d of a.dataClasses">{{ d }}</li>
               </ul>

apps/web/src/app/tools/reports/pages/cipher-report.component.ts

@@ -98,15 +98,13 @@ export class CipherReportComponent implements OnDestroy {
 
   async filterOrgToggle(status: any) {
     this.currentFilterStatus = status;
-    await this.setCiphers();
     if (status === 0) {
-      return;
+      this.dataSource.filter = null;
     } else if (status === 1) {
-      this.ciphers = this.ciphers.filter((c: any) => c.orgFilterStatus == null);
+      this.dataSource.filter = (c: any) => c.orgFilterStatus == null;
     } else {
-      this.ciphers = this.ciphers.filter((c: any) => c.orgFilterStatus === status);
+      this.dataSource.filter = (c: any) => c.orgFilterStatus === status;
     }
-    this.dataSource.data = this.ciphers;
   }
 
   async load() {

apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html

@@ -5,7 +5,7 @@
   <button type="submit" buttonType="primary" bitButton [loading]="loading" (click)="load()">
     {{ "checkExposedPasswords" | i18n }}
   </button>
-  <div class="mt-4" *ngIf="hasLoaded">
+  <div class="tw-mt-4" *ngIf="hasLoaded">
     <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
       {{ "noExposedPasswords" | i18n }}
     </bit-callout>
@@ -26,21 +26,21 @@
           </bit-toggle>
         </ng-container>
       </bit-toggle-group>
-      <bit-table [dataSource]="dataSource" class="table">
+      <bit-table [dataSource]="dataSource">
         <ng-container header *ngIf="!isAdminConsoleActive">
-          <tr>
-            <th></th>
-            <th>{{ "name" | i18n }}</th>
-            <th>{{ "owner" | i18n }}</th>
-            <th></th>
+          <tr bitRow>
+            <th bitCell></th>
+            <th bitCell>{{ "name" | i18n }}</th>
+            <th bitCell>{{ "owner" | i18n }}</th>
+            <th bitCell></th>
           </tr>
         </ng-container>
         <ng-template body let-rows$>
           <tr bitRow *ngFor="let r of rows$ | async">
-            <td class="table-list-icon">
+            <td bitCell>
               <app-vault-icon [cipher]="r"></app-vault-icon>
             </td>
-            <td>
+            <td bitCell>
               <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
                 <a
                   href="#"
@@ -74,7 +74,7 @@
               <br />
               <small>{{ r.subTitle }}</small>
             </td>
-            <td>
+            <td bitCell>
               <app-org-badge
                 *ngIf="!organization"
                 [disabled]="disabled"
@@ -84,7 +84,7 @@
               >
               </app-org-badge>
             </td>
-            <td class="text-right">
+            <td bitCell class="tw-text-right">
               <span bitBadge variant="warning">
                 {{ "exposedXTimes" | i18n: (exposedPasswordMap.get(r.id) | number) }}
               </span>

apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html

@@ -4,13 +4,13 @@
   <p>{{ "inactive2faReportDesc" | i18n }}</p>
   <div *ngIf="!hasLoaded && loading">
     <i
-      class="bwi bwi-spinner bwi-spin text-muted"
+      class="bwi bwi-spinner bwi-spin tw-text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
     <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </div>
-  <div class="mt-4" *ngIf="hasLoaded">
+  <div class="tw-mt-4" *ngIf="hasLoaded">
     <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
       {{ "noInactive2fa" | i18n }}
     </bit-callout>
@@ -31,21 +31,22 @@
           </bit-toggle>
         </ng-container>
       </bit-toggle-group>
-      <bit-table [dataSource]="dataSource" class="table">
+      <bit-table [dataSource]="dataSource">
         <ng-container header *ngIf="!isAdminConsoleActive">
-          <tr>
-            <th></th>
-            <th>{{ "name" | i18n }}</th>
-            <th>{{ "owner" | i18n }}</th>
+          <tr bitRow>
+            <th bitCell></th>
+            <th bitCell>{{ "name" | i18n }}</th>
+            <th bitCell>{{ "owner" | i18n }}</th>
+            <th bitCell></th>
           </tr>
         </ng-container>
         <tbody>
           <ng-template body let-rows$>
             <tr bitRow *ngFor="let r of rows$ | async">
-              <td class="table-list-icon">
+              <td bitCell>
                 <app-vault-icon [cipher]="r"></app-vault-icon>
               </td>
-              <td class="reduced-lh wrap">
+              <td bitCell>
                 <a
                   href="#"
                   appStopClick
@@ -74,7 +75,7 @@
                 <br />
                 <small>{{ r.subTitle }}</small>
               </td>
-              <td>
+              <td bitCell>
                 <app-org-badge
                   *ngIf="!organization"
                   [disabled]="disabled"
@@ -84,7 +85,7 @@
                 >
                 </app-org-badge>
               </td>
-              <td class="text-right">
+              <td bitCell class="tw-text-right">
                 <a
                   bitBadge
                   href="{{ cipherDocs.get(r.id) }}"

apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html

@@ -4,13 +4,13 @@
   <p>{{ "reusedPasswordsReportDesc" | i18n }}</p>
   <div *ngIf="!hasLoaded && loading">
     <i
-      class="bwi bwi-spinner bwi-spin text-muted"
+      class="bwi bwi-spinner bwi-spin tw-text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
     <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </div>
-  <div class="mt-4" *ngIf="hasLoaded">
+  <div class="tw-mt-4" *ngIf="hasLoaded">
     <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
       {{ "noReusedPasswords" | i18n }}
     </bit-callout>
@@ -33,20 +33,21 @@
         </ng-container>
       </bit-toggle-group>
 
-      <bit-table [dataSource]="dataSource" class="table">
+      <bit-table [dataSource]="dataSource">
         <ng-container header *ngIf="!isAdminConsoleActive">
-          <tr>
-            <th></th>
-            <th>{{ "name" | i18n }}</th>
-            <th>{{ "owner" | i18n }}</th>
+          <tr bitRow>
+            <th bitCell></th>
+            <th bitCell>{{ "name" | i18n }}</th>
+            <th bitCell>{{ "owner" | i18n }}</th>
+            <th bitCell></th>
           </tr>
         </ng-container>
         <ng-template body let-rows$>
           <tr bitRow *ngFor="let r of rows$ | async">
-            <td class="table-list-icon">
+            <td bitCell>
               <app-vault-icon [cipher]="r"></app-vault-icon>
             </td>
-            <td>
+            <td bitCell>
               <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
                 <a
                   href="#"
@@ -80,7 +81,7 @@
               <br />
               <small>{{ r.subTitle }}</small>
             </td>
-            <td>
+            <td bitCell>
               <app-org-badge
                 *ngIf="!organization"
                 [disabled]="disabled"
@@ -90,7 +91,7 @@
               >
               </app-org-badge>
             </td>
-            <td class="text-right">
+            <td bitCell class="tw-text-right">
               <span bitBadge variant="warning">
                 {{ "reusedXTimes" | i18n: passwordUseMap.get(r.login.password) }}
               </span>

apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html

@@ -4,13 +4,13 @@
   <p>{{ "unsecuredWebsitesReportDesc" | i18n }}</p>
   <div *ngIf="!hasLoaded && loading">
     <i
-      class="bwi bwi-spinner bwi-spin text-muted"
+      class="bwi bwi-spinner bwi-spin tw-text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
     <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </div>
-  <div class="mt-4" *ngIf="hasLoaded">
+  <div class="tw-mt-4" *ngIf="hasLoaded">
     <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
       {{ "noUnsecuredWebsites" | i18n }}
     </bit-callout>
@@ -32,20 +32,21 @@
           </bit-toggle>
         </ng-container>
       </bit-toggle-group>
-      <bit-table [dataSource]="dataSource" class="table">
+      <bit-table [dataSource]="dataSource">
         <ng-container header *ngIf="!isAdminConsoleActive">
-          <tr>
-            <th></th>
-            <th>{{ "name" | i18n }}</th>
-            <th>{{ "owner" | i18n }}</th>
+          <tr bitRow>
+            <th bitCell></th>
+            <th bitCell>{{ "name" | i18n }}</th>
+            <th bitCell>{{ "owner" | i18n }}</th>
+            <th bitCell></th>
           </tr>
         </ng-container>
         <ng-template body let-rows$>
           <tr bitRow *ngFor="let r of rows$ | async">
-            <td class="table-list-icon">
+            <td bitCell>
               <app-vault-icon [cipher]="r"></app-vault-icon>
             </td>
-            <td class="reduced-lh wrap">
+            <td bitCell>
               <a href="#" appStopClick (click)="selectCipher(r)" title="{{ 'editItem' | i18n }}">{{
                 r.name
               }}</a>
@@ -70,7 +71,7 @@
               <br />
               <small>{{ r.subTitle }}</small>
             </td>
-            <td>
+            <td bitCell>
               <app-org-badge
                 *ngIf="!organization"
                 [disabled]="disabled"

apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html

@@ -4,13 +4,13 @@
   <p>{{ "weakPasswordsReportDesc" | i18n }}</p>
   <div *ngIf="!hasLoaded && loading">
     <i
-      class="bwi bwi-spinner bwi-spin text-muted"
+      class="bwi bwi-spinner bwi-spin tw-text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
     <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </div>
-  <div class="mt-4" *ngIf="hasLoaded">
+  <div class="tw-mt-4" *ngIf="hasLoaded">
     <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
       {{ "noWeakPasswords" | i18n }}
     </bit-callout>
@@ -31,20 +31,21 @@
           </bit-toggle>
         </ng-container>
       </bit-toggle-group>
-      <bit-table [dataSource]="dataSource" class="table">
+      <bit-table [dataSource]="dataSource">
         <ng-container header *ngIf="!isAdminConsoleActive">
-          <tr>
-            <th></th>
-            <th>{{ "name" | i18n }}</th>
-            <th>{{ "owner" | i18n }}</th>
+          <tr bitRow>
+            <th bitCell></th>
+            <th bitCell>{{ "name" | i18n }}</th>
+            <th bitCell>{{ "owner" | i18n }}</th>
+            <th bitCell></th>
           </tr>
         </ng-container>
         <ng-template body let-rows$>
           <tr bitRow *ngFor="let r of rows$ | async">
-            <td class="table-list-icon">
+            <td bitCell>
               <app-vault-icon [cipher]="r"></app-vault-icon>
             </td>
-            <td class="reduced-lh wrap">
+            <td bitCell>
               <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
                 <a
                   href="#"
@@ -78,7 +79,7 @@
               <br />
               <small>{{ r.subTitle }}</small>
             </td>
-            <td>
+            <td bitCell>
               <app-org-badge
                 *ngIf="!organization"
                 [disabled]="disabled"
@@ -88,7 +89,7 @@
               >
               </app-org-badge>
             </td>
-            <td class="text-right">
+            <td bitCell class="tw-text-right">
               <span bitBadge [variant]="passwordStrengthMap.get(r.id)[1]">
                 {{ passwordStrengthMap.get(r.id)[0] | i18n }}
               </span>