Move feature flag page to app

navapbc · May 22, 2024 · 395baed · 395baed
1 parent a3e6255
commit 395baed
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 97 deletions.
diff --git a/frontend/src/app/[locale]/dev/feature-flags/FeatureFlagsTable.tsx b/frontend/src/app/[locale]/dev/feature-flags/FeatureFlagsTable.tsx
@@ -0,0 +1,61 @@
+"use client";
+import { useFeatureFlags } from "src/hooks/useFeatureFlags";
+
+import React from "react";
+import { Button, Table } from "@trussworks/react-uswds";
+
+/**
+ * View for managing feature flags
+ */
+export default function FeatureFlagsTable() {
+  const { featureFlagsManager, mounted, setFeatureFlag } = useFeatureFlags();
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <th scope="col">Status</th>
+          <th scope="col">Feature Flag</th>
+          <th scope="col">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {Object.entries(featureFlagsManager.featureFlags).map(
+          ([featureName, enabled]) => (
+            <tr key={featureName}>
+              <td
+                data-testid={`${featureName}-status`}
+                style={{ background: enabled ? "#81cc81" : "#fc6a6a" }}
+              >
+                {enabled ? "Enabled" : "Disabled"}
+              </td>
+              <th scope="row">{featureName}</th>
+              <td>
+                <Button
+                  data-testid={`enable-${featureName}`}
+                  disabled={enabled}
+                  onClick={() => setFeatureFlag(featureName, true)}
+                  type="button"
+                >
+                  Enable
+                </Button>
+                <Button
+                  data-testid={`disable-${featureName}`}
+                  disabled={!enabled}
+                  onClick={() => setFeatureFlag(featureName, false)}
+                  type="button"
+                >
+                  Disable
+                </Button>
+              </td>
+            </tr>
+          ),
+        )}
+      </tbody>
+    </Table>
+  );
+}
diff --git a/frontend/src/app/[locale]/dev/feature-flags/page.tsx b/frontend/src/app/[locale]/dev/feature-flags/page.tsx
@@ -0,0 +1,30 @@
+import { Metadata } from "next";
+
+import Head from "next/head";
+import React from "react";
+import FeatureFlagsTable from "./FeatureFlagsTable";
+
+export function generateMetadata() {
+  const meta: Metadata = {
+    title: "Feature flag manager",
+  };
+
+  return meta;
+}
+
+/**
+ * View for managing feature flags
+ */
+export default function FeatureFlags() {
+  return (
+    <>
+      <Head>
+        <title>Manage Feature Flags</title>
+      </Head>
+      <div>
+        <h1>Manage Feature Flags</h1>
+        <FeatureFlagsTable />
+      </div>
+    </>
+  );
+}
diff --git a/frontend/src/pages/dev/feature-flags.tsx b/frontend/src/pages/dev/feature-flags.tsx
diff --git a/frontend/tests/pages/dev/feature-flags.test.tsx b/frontend/tests/pages/dev/feature-flags.test.tsx
@@ -3,9 +3,9 @@
  */
 
 import { fireEvent, render, screen } from "@testing-library/react";
-import FeatureFlags, { getStaticProps } from "src/pages/dev/feature-flags";
+import FeatureFlags from "src/app/[locale]/dev/feature-flags/page";
 
-import { mockDefaultFeatureFlags } from "../../utils/FeatureFlagTestUtils";
+import { mockDefaultFeatureFlags } from "tests/utils/FeatureFlagTestUtils";
 
 describe("Feature flags page", () => {
   const MOCK_DEFAULT_FEATURE_FLAGS = {
@@ -43,12 +43,4 @@ describe("Feature flags page", () => {
       expect(statusElement).toHaveTextContent("Enabled");
     });
   });
-
-  it("is disabled in production", () => {
-    expect(getStaticProps().notFound).toBeUndefined();
-    const oldEnv = { ...process.env };
-    process.env.NEXT_PUBLIC_ENVIRONMENT = "prod";
-    expect(getStaticProps().notFound).toBe(true);
-    process.env = oldEnv; // Restore old environment
-  });
 });