From 68b62e73f1fad94d15f52aeccece75e2586814b6 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Wed, 19 Apr 2023 22:21:57 +0200
Subject: [PATCH] [SM-645] Use search component in secrets manager (#4991)

* Move search component into the component library

* Migrate search fields

* Reshuffle imports slightly

* Remove export input module

---------

Co-authored-by: cd-bitwarden <106776772+cd-bitwarden@users.noreply.github.com>
---
 .../members/people.component.html             |  5 +--
 .../search-input/search-input.stories.ts      | 36 -----------------
 .../shared/shared-organization.module.ts      |  9 +++--
 .../projects/projects/projects.component.html |  6 ++-
 .../secrets/secrets.component.html            |  6 ++-
 .../service-accounts.component.html           |  5 +--
 .../shared/sm-shared.module.ts                |  7 +++-
 libs/components/src/index.ts                  |  3 +-
 libs/components/src/search/index.ts           |  1 +
 .../src/search/search.component.html          |  0
 .../components/src/search/search.component.ts |  8 ++--
 libs/components/src/search/search.module.ts   | 14 +++++++
 libs/components/src/search/search.stories.ts  | 40 +++++++++++++++++++
 13 files changed, 85 insertions(+), 55 deletions(-)
 delete mode 100644 apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.stories.ts
 create mode 100644 libs/components/src/search/index.ts
 rename apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.component.html => libs/components/src/search/search.component.html (100%)
 rename apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.component.ts => libs/components/src/search/search.component.ts (84%)
 create mode 100644 libs/components/src/search/search.module.ts
 create mode 100644 libs/components/src/search/search.stories.ts

diff --git a/apps/web/src/app/admin-console/organizations/members/people.component.html b/apps/web/src/app/admin-console/organizations/members/people.component.html
index d0fa99d842..17f587c533 100644
--- a/apps/web/src/app/admin-console/organizations/members/people.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/people.component.html
@@ -29,12 +29,11 @@
         </bit-toggle>
       </bit-toggle-group>
 
-      <app-search-input
+      <bit-search
         class="tw-grow"
         [(ngModel)]="searchText"
         [placeholder]="'searchMembers' | i18n"
-      >
-      </app-search-input>
+      ></bit-search>
 
       <button type="button" bitButton buttonType="primary" (click)="invite()">
         <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
diff --git a/apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.stories.ts b/apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.stories.ts
deleted file mode 100644
index 6b56586835..0000000000
--- a/apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.stories.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { Meta, moduleMetadata, Story } from "@storybook/angular";
-
-import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { InputModule } from "@bitwarden/components/src/input/input.module";
-
-import { PreloadedEnglishI18nModule } from "../../../../../tests/preloaded-english-i18n.module";
-
-import { SearchInputComponent } from "./search-input.component";
-
-export default {
-  title: "Web/Organizations/Search Input",
-  component: SearchInputComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [
-        InputModule,
-        FormsModule,
-        ReactiveFormsModule,
-        PreloadedEnglishI18nModule,
-        JslibModule,
-      ],
-      providers: [],
-    }),
-  ],
-} as Meta;
-
-const Template: Story<SearchInputComponent> = (args: SearchInputComponent) => ({
-  props: args,
-  template: `
-    <app-search-input [(ngModel)]="searchText" [placeholder]="placeholder" [disabled]="disabled"></app-search-input>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
diff --git a/apps/web/src/app/admin-console/organizations/shared/shared-organization.module.ts b/apps/web/src/app/admin-console/organizations/shared/shared-organization.module.ts
index 089f088c25..094a059099 100644
--- a/apps/web/src/app/admin-console/organizations/shared/shared-organization.module.ts
+++ b/apps/web/src/app/admin-console/organizations/shared/shared-organization.module.ts
@@ -1,14 +1,15 @@
 import { NgModule } from "@angular/core";
 
+import { SearchModule } from "@bitwarden/components";
+
 import { SharedModule } from "../../../shared/shared.module";
 
 import { AccessSelectorModule } from "./components/access-selector/access-selector.module";
 import { CollectionDialogModule } from "./components/collection-dialog";
-import { SearchInputComponent } from "./components/search-input/search-input.component";
 
 @NgModule({
-  imports: [SharedModule, CollectionDialogModule, AccessSelectorModule],
-  declarations: [SearchInputComponent],
-  exports: [SharedModule, CollectionDialogModule, AccessSelectorModule, SearchInputComponent],
+  imports: [SharedModule, CollectionDialogModule, AccessSelectorModule, SearchModule],
+  declarations: [],
+  exports: [SharedModule, CollectionDialogModule, AccessSelectorModule, SearchModule],
 })
 export class SharedOrganizationModule {}
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/projects/projects/projects.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/projects/projects/projects.component.html
index 29d03a7f5e..d7bc89af02 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/projects/projects/projects.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/projects/projects/projects.component.html
@@ -1,5 +1,9 @@
 <sm-header>
-  <input bitInput [placeholder]="'searchProjects' | i18n" [(ngModel)]="search" class="tw-w-80" />
+  <bit-search
+    [placeholder]="'searchProjects' | i18n"
+    [(ngModel)]="search"
+    class="tw-w-80"
+  ></bit-search>
   <sm-new-menu></sm-new-menu>
 </sm-header>
 <sm-projects-list
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/secrets/secrets.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/secrets/secrets.component.html
index a661ac7bf4..cb7a882f2f 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/secrets/secrets.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/secrets/secrets.component.html
@@ -1,5 +1,9 @@
 <sm-header>
-  <input bitInput [placeholder]="'searchSecrets' | i18n" [(ngModel)]="search" class="tw-w-80" />
+  <bit-search
+    [placeholder]="'searchSecrets' | i18n"
+    [(ngModel)]="search"
+    class="tw-w-80"
+  ></bit-search>
   <sm-new-menu></sm-new-menu>
 </sm-header>
 <sm-secrets-list
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.component.html
index 7e8e99d80a..c90f3f9f52 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.component.html
@@ -1,10 +1,9 @@
 <sm-header>
-  <input
-    bitInput
+  <bit-search
     [placeholder]="'searchServiceAccounts' | i18n"
     [(ngModel)]="search"
     class="tw-w-80"
-  />
+  ></bit-search>
   <sm-new-menu></sm-new-menu>
 </sm-header>
 <sm-service-accounts-list
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 33a2a97cb1..6fa697a5b8 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, NoItemsModule } from "@bitwarden/components";
+import { MultiSelectModule, SearchModule, 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";
@@ -20,17 +20,20 @@ import { SecretsListComponent } from "./secrets-list.component";
     MultiSelectModule,
     CoreOrganizationModule,
     NoItemsModule,
+    SearchModule,
   ],
   exports: [
     SharedModule,
     NoItemsModule,
     AccessRemovalDialogComponent,
+    AccessSelectorComponent,
     BulkStatusDialogComponent,
     HeaderComponent,
     NewMenuComponent,
     ProjectsListComponent,
+    SearchModule,
     SecretsListComponent,
-    AccessSelectorComponent,
+    SharedModule,
   ],
   declarations: [
     AccessRemovalDialogComponent,
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index b1b4ea0607..7abe0864aa 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -19,9 +19,10 @@ export * from "./navigation";
 export * from "./no-items";
 export * from "./progress";
 export * from "./radio-button";
+export * from "./search";
+export * from "./select";
 export * from "./table";
 export * from "./tabs";
 export * from "./toggle-group";
-export * from "./select";
 export * from "./typography";
 export * from "./utils/i18n-mock.service";
diff --git a/libs/components/src/search/index.ts b/libs/components/src/search/index.ts
new file mode 100644
index 0000000000..3cd1408a4a
--- /dev/null
+++ b/libs/components/src/search/index.ts
@@ -0,0 +1 @@
+export * from "./search.module";
diff --git a/apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.component.html b/libs/components/src/search/search.component.html
similarity index 100%
rename from apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.component.html
rename to libs/components/src/search/search.component.html
diff --git a/apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.component.ts b/libs/components/src/search/search.component.ts
similarity index 84%
rename from apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.component.ts
rename to libs/components/src/search/search.component.ts
index 4bdcf665cd..0fe42a8c6a 100644
--- a/apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.component.ts
+++ b/libs/components/src/search/search.component.ts
@@ -4,17 +4,17 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 let nextId = 0;
 
 @Component({
-  selector: "app-search-input",
-  templateUrl: "./search-input.component.html",
+  selector: "bit-search",
+  templateUrl: "./search.component.html",
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       multi: true,
-      useExisting: SearchInputComponent,
+      useExisting: SearchComponent,
     },
   ],
 })
-export class SearchInputComponent implements ControlValueAccessor {
+export class SearchComponent implements ControlValueAccessor {
   private notifyOnChange: (v: string) => void;
   private notifyOnTouch: () => void;
 
diff --git a/libs/components/src/search/search.module.ts b/libs/components/src/search/search.module.ts
new file mode 100644
index 0000000000..6207277490
--- /dev/null
+++ b/libs/components/src/search/search.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+
+import { InputModule } from "../input/input.module";
+import { SharedModule } from "../shared";
+
+import { SearchComponent } from "./search.component";
+
+@NgModule({
+  imports: [SharedModule, InputModule, FormsModule],
+  declarations: [SearchComponent],
+  exports: [SearchComponent],
+})
+export class SearchModule {}
diff --git a/libs/components/src/search/search.stories.ts b/libs/components/src/search/search.stories.ts
new file mode 100644
index 0000000000..0968e9b6ed
--- /dev/null
+++ b/libs/components/src/search/search.stories.ts
@@ -0,0 +1,40 @@
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { InputModule } from "../input/input.module";
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { SearchComponent } from "./search.component";
+
+export default {
+  title: "Component Library/Form/Search",
+  component: SearchComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [InputModule, FormsModule, ReactiveFormsModule, JslibModule],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              search: "Search",
+            });
+          },
+        },
+      ],
+    }),
+  ],
+} as Meta;
+
+const Template: Story<SearchComponent> = (args: SearchComponent) => ({
+  props: args,
+  template: `
+    <bit-search [(ngModel)]="searchText" [placeholder]="placeholder" [disabled]="disabled"></bit-search>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};