PM-23733 - Add filter + force refresh

libs/angular/src/platform/feature-flags/feature-flags.component.html

@@ -3,20 +3,30 @@
     <i class="bwi bwi-spinner bwi-spin tw-text-2xl" aria-hidden="true"></i>
   </div>
 } @else {
-  <!-- // TODO: add forced update to config -->
-  <!-- // TODO: add filtering inline for table -->
+  <button buttonType="primary" type="button" bitButton (click)="refresh()" class="tw-mb-4">
+    {{ "refresh" | i18n }}
+  </button>
 
-  <bit-table [dataSource]="tableDataSource">
-    <ng-container header>
-      <th bitCell bitSortable="key" default>key</th>
-      <th bitCell bitSortable="value" default>value</th>
-    </ng-container>
+  <bit-search
+    id="search"
+    placeholder="{{ 'filter' | i18n }}"
+    [(ngModel)]="searchText"
+    (ngModelChange)="onSearchTextChanged($event)"
+  />
 
-    <ng-template body let-rows$>
-      <tr bitRow *ngFor="let r of rows$ | async">
-        <td bitCell>{{ r.key }}</td>
-        <td bitCell>{{ r.value }}</td>
-      </tr>
-    </ng-template>
-  </bit-table>
+  <div class="tw-flex tw-flex-col">
+    <bit-table [dataSource]="tableDataSource">
+      <ng-container header>
+        <th bitCell bitSortable="key" default>{{ "flagName" | i18n }}</th>
+        <th bitCell bitSortable="value" default>{{ "flagValue" | i18n }}</th>
+      </ng-container>
+
+      <ng-template body let-rows$>
+        <tr bitRow *ngFor="let r of rows$ | async">
+          <td bitCell>{{ r.key }}</td>
+          <td bitCell>{{ r.value }}</td>
+        </tr>
+      </ng-template>
+    </bit-table>
+  </div>
 }

libs/angular/src/platform/feature-flags/feature-flags.component.ts

@@ -1,21 +1,41 @@
 import { CommonModule } from "@angular/common";
 import { Component, DestroyRef, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormsModule } from "@angular/forms";
 import { map } from "rxjs";
 
 import { AllowedFeatureFlagTypes } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import { TableDataSource, TableModule } from "@bitwarden/components";
+import {
+  ButtonModule,
+  FormFieldModule,
+  InputModule,
+  SearchModule,
+  TableDataSource,
+  TableModule,
+} from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 @Component({
   selector: "app-feature-flags",
   templateUrl: "./feature-flags.component.html",
-  imports: [CommonModule, TableModule],
+  imports: [
+    CommonModule,
+    TableModule,
+    ButtonModule,
+    I18nPipe,
+    FormsModule,
+    FormFieldModule,
+    InputModule,
+    SearchModule,
+  ],
 })
 export class FeatureFlagsComponent implements OnInit {
   loading = true;
   tableDataSource = new TableDataSource<{ key: string; value: AllowedFeatureFlagTypes }>();
 
+  searchText = "";
+
   constructor(
     private destroyRef: DestroyRef,
     private configService: ConfigService,
@@ -42,4 +62,13 @@ export class FeatureFlagsComponent implements OnInit {
         this.loading = false;
       });
   }
+
+  onSearchTextChanged(searchText: string) {
+    this.searchText = searchText;
+    this.tableDataSource.filter = searchText;
+  }
+
+  refresh() {
+    this.configService.refreshServerConfig();
+  }
 }