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

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"
-      >
+      ></bit-search>
-      </app-search-input>
 
       <button type="button" bitButton buttonType="primary" (click)="invite()">
         <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>

apps/web/src/app/admin-console/organizations/shared/components/search-input/search-input.stories.ts

@@ -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 = {};

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],
+  imports: [SharedModule, CollectionDialogModule, AccessSelectorModule, SearchModule],
-  declarations: [SearchInputComponent],
+  declarations: [],
-  exports: [SharedModule, CollectionDialogModule, AccessSelectorModule, SearchInputComponent],
+  exports: [SharedModule, CollectionDialogModule, AccessSelectorModule, SearchModule],
 })
 export class SharedOrganizationModule {}

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

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

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.component.html

@@ -1,10 +1,9 @@
 <sm-header>
-  <input
+  <bit-search
-    bitInput
     [placeholder]="'searchServiceAccounts' | i18n"
     [(ngModel)]="search"
     class="tw-w-80"
-  />
+  ></bit-search>
   <sm-new-menu></sm-new-menu>
 </sm-header>
 <sm-service-accounts-list

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,

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

libs/components/src/search/index.ts

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

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",
+  selector: "bit-search",
-  templateUrl: "./search-input.component.html",
+  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;
 

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

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