[SM-660] move sm-no-items to CL (#5059)

* refactor: move sm-no-items to CL

* update and run prettier

* apply code review

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>

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>

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>

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">

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,

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";

libs/components/src/no-items/index.ts

@@ -0,0 +1 @@
+export * from "./no-items.module";

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;
+}

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 {}

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({});