From 36de1c8e32ce6ffd2b4411fa3620fe88401a1958 Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Fri, 7 Apr 2023 11:05:14 -0400
Subject: [PATCH] [SM-660] move sm-no-items to CL (#5059)

* refactor: move sm-no-items to CL

* update and run prettier

* apply code review
---
 .../access/access-list.component.html         |  4 +--
 .../service-accounts-list.component.html      |  4 +--
 .../shared/no-items.component.ts              | 11 ------
 .../shared/projects-list.component.html       |  4 +--
 .../shared/secrets-list.component.html        |  8 ++---
 .../shared/sm-shared.module.ts                | 14 +++++---
 libs/components/src/index.ts                  |  1 +
 libs/components/src/no-items/index.ts         |  1 +
 .../src/no-items}/no-items.component.html     |  0
 .../src/no-items/no-items.component.ts        | 14 ++++++++
 .../src/no-items/no-items.module.ts           | 13 +++++++
 .../src/no-items/no-items.stories.ts          | 35 +++++++++++++++++++
 12 files changed, 83 insertions(+), 26 deletions(-)
 delete mode 100644 bitwarden_license/bit-web/src/app/secrets-manager/shared/no-items.component.ts
 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%)
 create mode 100644 libs/components/src/no-items/no-items.component.ts
 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 6675dbbdcc..efcb70a0ef 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>
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 12de57f386..e3e71ed85e 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>
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/no-items.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/shared/no-items.component.ts
deleted file mode 100644
index bc516b5995..0000000000
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/no-items.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from "@angular/core";
-
-import { Icons } from "@bitwarden/components";
-
-@Component({
-  selector: "sm-no-items",
-  templateUrl: "./no-items.component.html",
-})
-export class NoItemsComponent {
-  protected icon = Icons.Search;
-}
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 0dfb15a2d5..8705c7b2cf 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>
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 572f1a8049..61b103a05b 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">
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 47fa4f1aa4..33a2a97cb1 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 { CoreOrganizationModule } from "@bitwarden/web-vault/app/admin-console/organizations/core";
 import { ProductSwitcherModule } from "@bitwarden/web-vault/app/layouts/product-switcher/product-switcher.module";
 import { SharedModule } from "@bitwarden/web-vault/app/shared";
@@ -10,19 +10,24 @@ 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,
+    NoItemsModule,
     AccessRemovalDialogComponent,
     BulkStatusDialogComponent,
     HeaderComponent,
     NewMenuComponent,
-    NoItemsComponent,
     ProjectsListComponent,
     SecretsListComponent,
     AccessSelectorComponent,
@@ -32,7 +37,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 a5766287bf..b1b4ea0607 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 0000000000..a368ad18f9
--- /dev/null
+++ b/libs/components/src/no-items/index.ts
@@ -0,0 +1 @@
+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/libs/components/src/no-items/no-items.component.ts b/libs/components/src/no-items/no-items.component.ts
new file mode 100644
index 0000000000..a172a2eeab
--- /dev/null
+++ b/libs/components/src/no-items/no-items.component.ts
@@ -0,0 +1,14 @@
+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",
+})
+export class NoItemsComponent {
+  protected icon = Icons.Search;
+}
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 0000000000..9fe6eb37aa
--- /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 0000000000..0b08aafbc1
--- /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({});