PM-23733 - BEEEP - Create dev tools feature flags view first draft.

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

@@ -0,0 +1,17 @@
+@if (loading) {
+  <div class="tw-flex tw-justify-center tw-items-center tw-p-4">
+    <i class="bwi bwi-spinner bwi-spin tw-text-2xl" aria-hidden="true"></i>
+  </div>
+} @else {
+  <bit-table-scroll [dataSource]="tableDataSource" [rowSize]="50">
+    <ng-container header>
+      <th bitCell bitSortable="key" default>key</th>
+      <th bitCell bitSortable="value" default>value</th>
+    </ng-container>
+
+    <ng-template bitRowDef let-row>
+      <td bitCell>{{ row.key }}</td>
+      <td bitCell>{{ row.value }}</td>
+    </ng-template>
+  </bit-table-scroll>
+}

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

@@ -0,0 +1,45 @@
+import { CommonModule } from "@angular/common";
+import { Component, DestroyRef, OnInit } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+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";
+
+@Component({
+  selector: "app-feature-flags",
+  templateUrl: "./feature-flags.component.html",
+  imports: [CommonModule, TableModule],
+})
+export class FeatureFlagsComponent implements OnInit {
+  loading = true;
+  tableDataSource = new TableDataSource<{ key: string; value: AllowedFeatureFlagTypes }>();
+
+  constructor(
+    private destroyRef: DestroyRef,
+    private configService: ConfigService,
+  ) {}
+
+  ngOnInit() {
+    this.configService.featureStates$
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        map((states) => {
+          if (!states) {
+            return [];
+          }
+
+          // Convert the feature states object into an array of key-value pairs
+          return Object.entries(states).map(([key, value]) => ({
+            key,
+            value,
+          }));
+        }),
+      )
+      .subscribe((featureStates) => {
+        this.tableDataSource.data = featureStates;
+        this.loading = false;
+      });
+  }
+}

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

@@ -0,0 +1 @@
+export * from "./feature-flags.component";