From a703240806bd14a837b3fba40ec0a6e76d287309 Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartian.com>
Date: Wed, 22 Mar 2023 18:12:09 -0400
Subject: [PATCH 1/3] refactor: move sm-no-items to CL

---
 .../access/access-list.component.html         |  8 ++---
 .../service-accounts-list.component.html      |  6 ++--
 .../service-accounts.module.ts                |  9 +++--
 .../shared/projects-list.component.html       |  6 ++--
 .../shared/secrets-list.component.html        | 12 +++----
 .../shared/sm-shared.module.ts                | 13 ++++---
 libs/components/src/index.ts                  |  1 +
 libs/components/src/no-items/index.ts         |  2 ++
 .../src/no-items}/no-items.component.html     |  0
 .../src/no-items}/no-items.component.ts       |  4 +--
 .../src/no-items/no-items.module.ts           | 13 +++++++
 .../src/no-items/no-items.stories.ts          | 35 +++++++++++++++++++
 12 files changed, 84 insertions(+), 25 deletions(-)
 create mode 100644 libs/components/src/no-items/index.ts
 rename {bitwarden_license/bit-web/src/app/secrets-manager/shared => libs/components/src/no-items}/no-items.component.html (100%)
 rename {bitwarden_license/bit-web/src/app/secrets-manager/shared => libs/components/src/no-items}/no-items.component.ts (69%)
 create mode 100644 libs/components/src/no-items/no-items.module.ts
 create mode 100644 libs/components/src/no-items/no-items.stories.ts

diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html
index 6675dbbdcc7..a04dba11880 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html
@@ -2,7 +2,7 @@
   <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
 </div>
 
-<sm-no-items *ngIf="tokens?.length == 0">
+<bit-no-items *ngIf="tokens?.length == 0">
   <ng-container slot="title">{{ "accessTokensNoItemsTitle" | i18n }}</ng-container>
   <ng-container slot="description">{{ "accessTokensNoItemsDesc" | i18n }}</ng-container>
   <button
@@ -15,7 +15,7 @@
     <i class="bwi bwi-plus" aria-hidden="true"></i>
     {{ "newAccessToken" | i18n }}
   </button>
-</sm-no-items>
+</bit-no-items>
 
 <bit-table *ngIf="tokens?.length >= 1">
   <ng-container header>
@@ -59,9 +59,9 @@
       <td bitCell>{{ token.name }}</td>
       <td bitCell>{{ permission(token) | i18n }}</td>
       <td bitCell>
-        {{ token.expireAt === null ? ("never" | i18n) : (token.expireAt | date : "medium") }}
+        {{ token.expireAt === null ? ("never" | i18n) : (token.expireAt | date: "medium") }}
       </td>
-      <td bitCell>{{ token.revisionDate | date : "medium" }}</td>
+      <td bitCell>{{ token.revisionDate | date: "medium" }}</td>
       <td bitCell>
         <button
           type="button"
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
index 12de57f3867..e936849fd82 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
@@ -2,7 +2,7 @@
   <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
 </div>
 
-<sm-no-items *ngIf="serviceAccounts?.length == 0">
+<bit-no-items *ngIf="serviceAccounts?.length == 0">
   <ng-container slot="title">{{ "serviceAccountsNoItemsTitle" | i18n }}</ng-container>
   <ng-container slot="description">{{ "serviceAccountsNoItemsMessage" | i18n }}</ng-container>
   <button
@@ -15,7 +15,7 @@
     <i class="bwi bwi-plus" aria-hidden="true"></i>
     {{ "newServiceAccount" | i18n }}
   </button>
-</sm-no-items>
+</bit-no-items>
 
 <bit-table *ngIf="serviceAccounts?.length >= 1" [dataSource]="dataSource">
   <ng-container header>
@@ -67,7 +67,7 @@
         <!-- TODO add number of secrets once mapping is implemented-->
         <span> 0 </span>
       </td>
-      <td bitCell>{{ serviceAccount.revisionDate | date : "medium" }}</td>
+      <td bitCell>{{ serviceAccount.revisionDate | date: "medium" }}</td>
       <td bitCell>
         <button
           type="button"
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.module.ts
index d58655342fa..b76327531c0 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.module.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 
-import { BreadcrumbsModule } from "@bitwarden/components";
+import { BreadcrumbsModule, NoItemsModule } from "@bitwarden/components";
 
 import { SecretsManagerSharedModule } from "../shared/sm-shared.module";
 
@@ -19,7 +19,12 @@ import { ServiceAccountsRoutingModule } from "./service-accounts-routing.module"
 import { ServiceAccountsComponent } from "./service-accounts.component";
 
 @NgModule({
-  imports: [SecretsManagerSharedModule, ServiceAccountsRoutingModule, BreadcrumbsModule],
+  imports: [
+    SecretsManagerSharedModule,
+    ServiceAccountsRoutingModule,
+    BreadcrumbsModule,
+    NoItemsModule,
+  ],
   declarations: [
     AccessListComponent,
     AccessTokenComponent,
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html
index 0dfb15a2d5e..71bc783518e 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html
@@ -2,7 +2,7 @@
   <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
 </div>
 
-<sm-no-items *ngIf="projects?.length == 0">
+<bit-no-items *ngIf="projects?.length == 0">
   <ng-container slot="title">{{ "projectsNoItemsTitle" | i18n }}</ng-container>
   <ng-container slot="description">{{ "projectsNoItemsMessage" | i18n }}</ng-container>
   <button
@@ -15,7 +15,7 @@
     <i class="bwi bwi-plus" aria-hidden="true"></i>
     {{ "newProject" | i18n }}
   </button>
-</sm-no-items>
+</bit-no-items>
 
 <bit-table *ngIf="projects?.length >= 1" [dataSource]="dataSource">
   <ng-container header>
@@ -62,7 +62,7 @@
           }}</a>
         </div>
       </td>
-      <td bitCell class="tw-whitespace-nowrap">{{ project.revisionDate | date : "medium" }}</td>
+      <td bitCell class="tw-whitespace-nowrap">{{ project.revisionDate | date: "medium" }}</td>
       <td bitCell>
         <button
           type="button"
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
index 10691b2120c..027e5e6f672 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
@@ -3,11 +3,11 @@
 </div>
 
 <ng-container *ngIf="secrets?.length == 0">
-  <sm-no-items *ngIf="trash">
+  <bit-no-items *ngIf="trash">
     <ng-container slot="title">{{ "secretsNoItemsTitle" | i18n }}</ng-container>
     <ng-container slot="description">{{ "secretsTrashNoItemsMessage" | i18n }}</ng-container>
-  </sm-no-items>
-  <sm-no-items *ngIf="!trash">
+  </bit-no-items>
+  <bit-no-items *ngIf="!trash">
     <ng-container slot="title">{{ "secretsNoItemsTitle" | i18n }}</ng-container>
     <ng-container slot="description">{{ "secretsNoItemsMessage" | i18n }}</ng-container>
     <button
@@ -20,7 +20,7 @@
       <i class="bwi bwi-plus" aria-hidden="true"></i>
       {{ "newSecret" | i18n }}
     </button>
-  </sm-no-items>
+  </bit-no-items>
 </ng-container>
 
 <bit-table *ngIf="secrets?.length >= 1" [dataSource]="dataSource">
@@ -78,14 +78,14 @@
           class="tw-ml-1"
           [title]="project.name"
         >
-          {{ project.name | ellipsis : 32 }}
+          {{ project.name | ellipsis: 32 }}
         </span>
         <span *ngIf="secret.projects.length === 0" bitBadge badgeType="warning" class="tw-ml-1"
           ><i class="bwi bwi-fw bwi-exclamation-triangle tw-mr-1" aria-hidden="true"></i
           >{{ "unassigned" | i18n }}</span
         >
       </td>
-      <td bitCell class="tw-whitespace-nowrap">{{ secret.revisionDate | date : "medium" }}</td>
+      <td bitCell class="tw-whitespace-nowrap">{{ secret.revisionDate | date: "medium" }}</td>
       <td bitCell>
         <button
           type="button"
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/sm-shared.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/shared/sm-shared.module.ts
index 9361c1ab037..c1cb42a3b87 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/sm-shared.module.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/sm-shared.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 
-import { MultiSelectModule } from "@bitwarden/components";
+import { MultiSelectModule, NoItemsModule } from "@bitwarden/components";
 import { ProductSwitcherModule } from "@bitwarden/web-vault/app/layouts/product-switcher/product-switcher.module";
 import { CoreOrganizationModule } from "@bitwarden/web-vault/app/organizations/core";
 import { SharedModule } from "@bitwarden/web-vault/app/shared";
@@ -10,19 +10,23 @@ import { AccessRemovalDialogComponent } from "./access-policies/dialogs/access-r
 import { BulkStatusDialogComponent } from "./dialogs/bulk-status-dialog.component";
 import { HeaderComponent } from "./header.component";
 import { NewMenuComponent } from "./new-menu.component";
-import { NoItemsComponent } from "./no-items.component";
 import { ProjectsListComponent } from "./projects-list.component";
 import { SecretsListComponent } from "./secrets-list.component";
 
 @NgModule({
-  imports: [SharedModule, ProductSwitcherModule, MultiSelectModule, CoreOrganizationModule],
+  imports: [
+    SharedModule,
+    ProductSwitcherModule,
+    MultiSelectModule,
+    CoreOrganizationModule,
+    NoItemsModule,
+  ],
   exports: [
     SharedModule,
     AccessRemovalDialogComponent,
     BulkStatusDialogComponent,
     HeaderComponent,
     NewMenuComponent,
-    NoItemsComponent,
     ProjectsListComponent,
     SecretsListComponent,
     AccessSelectorComponent,
@@ -32,7 +36,6 @@ import { SecretsListComponent } from "./secrets-list.component";
     BulkStatusDialogComponent,
     HeaderComponent,
     NewMenuComponent,
-    NoItemsComponent,
     ProjectsListComponent,
     SecretsListComponent,
     AccessSelectorComponent,
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index a5766287bf1..b1b4ea06070 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -16,6 +16,7 @@ export * from "./link";
 export * from "./menu";
 export * from "./multi-select";
 export * from "./navigation";
+export * from "./no-items";
 export * from "./progress";
 export * from "./radio-button";
 export * from "./table";
diff --git a/libs/components/src/no-items/index.ts b/libs/components/src/no-items/index.ts
new file mode 100644
index 00000000000..b4572b938ae
--- /dev/null
+++ b/libs/components/src/no-items/index.ts
@@ -0,0 +1,2 @@
+export * from "./no-items.component";
+export * from "./no-items.module";
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/no-items.component.html b/libs/components/src/no-items/no-items.component.html
similarity index 100%
rename from bitwarden_license/bit-web/src/app/secrets-manager/shared/no-items.component.html
rename to libs/components/src/no-items/no-items.component.html
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/no-items.component.ts b/libs/components/src/no-items/no-items.component.ts
similarity index 69%
rename from bitwarden_license/bit-web/src/app/secrets-manager/shared/no-items.component.ts
rename to libs/components/src/no-items/no-items.component.ts
index bc516b5995c..e6ce196454f 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/no-items.component.ts
+++ b/libs/components/src/no-items/no-items.component.ts
@@ -1,9 +1,9 @@
 import { Component } from "@angular/core";
 
-import { Icons } from "@bitwarden/components";
+import { Icons } from "..";
 
 @Component({
-  selector: "sm-no-items",
+  selector: "bit-no-items",
   templateUrl: "./no-items.component.html",
 })
 export class NoItemsComponent {
diff --git a/libs/components/src/no-items/no-items.module.ts b/libs/components/src/no-items/no-items.module.ts
new file mode 100644
index 00000000000..9fe6eb37aa9
--- /dev/null
+++ b/libs/components/src/no-items/no-items.module.ts
@@ -0,0 +1,13 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { IconModule } from "../icon";
+
+import { NoItemsComponent } from "./no-items.component";
+
+@NgModule({
+  imports: [CommonModule, IconModule],
+  exports: [NoItemsComponent],
+  declarations: [NoItemsComponent],
+})
+export class NoItemsModule {}
diff --git a/libs/components/src/no-items/no-items.stories.ts b/libs/components/src/no-items/no-items.stories.ts
new file mode 100644
index 00000000000..0b08aafbc11
--- /dev/null
+++ b/libs/components/src/no-items/no-items.stories.ts
@@ -0,0 +1,35 @@
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { ButtonModule } from "../button";
+
+import { NoItemsModule } from "./no-items.module";
+
+export default {
+  title: "Component Library/No Items",
+  decorators: [
+    moduleMetadata({
+      imports: [ButtonModule, NoItemsModule],
+    }),
+  ],
+} as Meta;
+
+const Template: Story = (args) => ({
+  props: args,
+  template: `
+  <bit-no-items class="tw-text-main">
+    <ng-container slot="title">No items found</ng-container>
+    <ng-container slot="description">Your description here.</ng-container>
+    <button
+        slot="button"
+        type="button"
+        bitButton
+        buttonType="secondary"
+    >
+        <i class="bwi bwi-plus" aria-hidden="true"></i>
+        New item
+    </button>
+  </bit-no-items>
+  `,
+});
+
+export const Default = Template.bind({});

From eb6e94c8a9a06111db8f484cfd2b44b69f3aad7a Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartian.com>
Date: Wed, 22 Mar 2023 18:18:35 -0400
Subject: [PATCH 2/3] update and run prettier

---
 .../service-accounts/access/access-list.component.html        | 4 ++--
 .../service-accounts/service-accounts-list.component.html     | 2 +-
 .../app/secrets-manager/shared/projects-list.component.html   | 2 +-
 .../app/secrets-manager/shared/secrets-list.component.html    | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html
index a04dba11880..efcb70a0ef9 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html
@@ -59,9 +59,9 @@
       <td bitCell>{{ token.name }}</td>
       <td bitCell>{{ permission(token) | i18n }}</td>
       <td bitCell>
-        {{ token.expireAt === null ? ("never" | i18n) : (token.expireAt | date: "medium") }}
+        {{ token.expireAt === null ? ("never" | i18n) : (token.expireAt | date : "medium") }}
       </td>
-      <td bitCell>{{ token.revisionDate | date: "medium" }}</td>
+      <td bitCell>{{ token.revisionDate | date : "medium" }}</td>
       <td bitCell>
         <button
           type="button"
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
index e936849fd82..e3e71ed85e0 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
@@ -67,7 +67,7 @@
         <!-- TODO add number of secrets once mapping is implemented-->
         <span> 0 </span>
       </td>
-      <td bitCell>{{ serviceAccount.revisionDate | date: "medium" }}</td>
+      <td bitCell>{{ serviceAccount.revisionDate | date : "medium" }}</td>
       <td bitCell>
         <button
           type="button"
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html
index 71bc783518e..8705c7b2cf5 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html
@@ -62,7 +62,7 @@
           }}</a>
         </div>
       </td>
-      <td bitCell class="tw-whitespace-nowrap">{{ project.revisionDate | date: "medium" }}</td>
+      <td bitCell class="tw-whitespace-nowrap">{{ project.revisionDate | date : "medium" }}</td>
       <td bitCell>
         <button
           type="button"
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
index 027e5e6f672..420792ccd8d 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
@@ -78,14 +78,14 @@
           class="tw-ml-1"
           [title]="project.name"
         >
-          {{ project.name | ellipsis: 32 }}
+          {{ project.name | ellipsis : 32 }}
         </span>
         <span *ngIf="secret.projects.length === 0" bitBadge badgeType="warning" class="tw-ml-1"
           ><i class="bwi bwi-fw bwi-exclamation-triangle tw-mr-1" aria-hidden="true"></i
           >{{ "unassigned" | i18n }}</span
         >
       </td>
-      <td bitCell class="tw-whitespace-nowrap">{{ secret.revisionDate | date: "medium" }}</td>
+      <td bitCell class="tw-whitespace-nowrap">{{ secret.revisionDate | date : "medium" }}</td>
       <td bitCell>
         <button
           type="button"

From f3311a316574eff6528cfd11531636369948b1d9 Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartian.com>
Date: Fri, 24 Mar 2023 10:00:25 -0400
Subject: [PATCH 3/3] apply code review

---
 .../service-accounts/service-accounts.module.ts          | 9 ++-------
 .../src/app/secrets-manager/shared/sm-shared.module.ts   | 1 +
 libs/components/src/no-items/index.ts                    | 1 -
 libs/components/src/no-items/no-items.component.ts       | 3 +++
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.module.ts
index b76327531c0..d58655342fa 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.module.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from "@angular/core";
 
-import { BreadcrumbsModule, NoItemsModule } from "@bitwarden/components";
+import { BreadcrumbsModule } from "@bitwarden/components";
 
 import { SecretsManagerSharedModule } from "../shared/sm-shared.module";
 
@@ -19,12 +19,7 @@ import { ServiceAccountsRoutingModule } from "./service-accounts-routing.module"
 import { ServiceAccountsComponent } from "./service-accounts.component";
 
 @NgModule({
-  imports: [
-    SecretsManagerSharedModule,
-    ServiceAccountsRoutingModule,
-    BreadcrumbsModule,
-    NoItemsModule,
-  ],
+  imports: [SecretsManagerSharedModule, ServiceAccountsRoutingModule, BreadcrumbsModule],
   declarations: [
     AccessListComponent,
     AccessTokenComponent,
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/sm-shared.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/shared/sm-shared.module.ts
index c1cb42a3b87..8f704992831 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/sm-shared.module.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/sm-shared.module.ts
@@ -23,6 +23,7 @@ import { SecretsListComponent } from "./secrets-list.component";
   ],
   exports: [
     SharedModule,
+    NoItemsModule,
     AccessRemovalDialogComponent,
     BulkStatusDialogComponent,
     HeaderComponent,
diff --git a/libs/components/src/no-items/index.ts b/libs/components/src/no-items/index.ts
index b4572b938ae..a368ad18f9f 100644
--- a/libs/components/src/no-items/index.ts
+++ b/libs/components/src/no-items/index.ts
@@ -1,2 +1 @@
-export * from "./no-items.component";
 export * from "./no-items.module";
diff --git a/libs/components/src/no-items/no-items.component.ts b/libs/components/src/no-items/no-items.component.ts
index e6ce196454f..a172a2eeabd 100644
--- a/libs/components/src/no-items/no-items.component.ts
+++ b/libs/components/src/no-items/no-items.component.ts
@@ -2,6 +2,9 @@ import { Component } from "@angular/core";
 
 import { Icons } from "..";
 
+/**
+ * Component for displaying a message when there are no items to display. Expects title, description and button slots.
+ */
 @Component({
   selector: "bit-no-items",
   templateUrl: "./no-items.component.html",