From bd6532855dc8993abca25ec866f03e30ca832baa Mon Sep 17 00:00:00 2001
From: Camiel van Schoonhoven <camiel.vanschoonhoven@shopify.com>
Date: Mon, 19 Jan 2026 16:52:30 -0800
Subject: [PATCH] chore: Split Settings from Beta Flags

---
 package-lock.json                             |  15 ++
 package.json                                  |   5 +-
 src/betaFlags.ts                              |   7 +
 .../shared/Settings/BetaFeatures.tsx          |  28 ++++
 .../Settings/PersonalPreferencesDialog.tsx    |  38 +++--
 src/components/shared/Settings/Settings.tsx   |  26 ++++
 .../tests/PersonalPreferencesDialog.test.tsx  | 139 +++++++++++++-----
 .../Settings/tests/useBetaFlagReducer.test.ts |   6 +
 src/types/configuration.ts                    |   1 +
 tests/e2e/published-componentlib.spec.ts      |   2 +
 .../e2e/published-componentlifecycle.spec.ts  |   2 +
 11 files changed, 214 insertions(+), 55 deletions(-)
 create mode 100644 src/components/shared/Settings/BetaFeatures.tsx
 create mode 100644 src/components/shared/Settings/Settings.tsx

diff --git a/package-lock.json b/package-lock.json
index 717d6f0be..7309370b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -67,6 +67,7 @@
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
         "@types/js-yaml": "^4.0.9",
         "@types/node": "^25.0.9",
         "@types/react": "^19.2.9",
@@ -4277,6 +4278,20 @@
         }
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
diff --git a/package.json b/package.json
index 41d13f65d..4b2d0dc8c 100644
--- a/package.json
+++ b/package.json
@@ -110,6 +110,7 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^25.0.9",
     "@types/react": "^19.2.9",
@@ -128,10 +129,10 @@
     "jsdom": "^27.4.0",
     "knip": "^5.82.1",
     "prettier": "^3.8.1",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.1",
     "vite": "^7.3.1",
-    "vitest": "^3.0.5",
-    "tsx": "^4.21.0"
+    "vitest": "^3.0.5"
   }
 }
diff --git a/src/betaFlags.ts b/src/betaFlags.ts
index 113db41fb..6d6711e37 100644
--- a/src/betaFlags.ts
+++ b/src/betaFlags.ts
@@ -9,12 +9,14 @@ export const ExistingBetaFlags = {
     description:
       "Highlight the tasks on the Pipeline canvas when the component is hovered over in the component library.",
     default: false,
+    category: "beta",
   } as BetaFlag,
 
   ["remote-component-library-search"]: {
     name: "Published Components Library",
     description: "Enable the Published Components Library feature.",
     default: isRemoteComponentLibraryEnabled,
+    category: "beta",
   } as BetaFlag,
 
   ["github-component-library"]: {
@@ -22,12 +24,14 @@ export const ExistingBetaFlags = {
     description:
       "Enable the GitHub Component Library. All lib folders will be based on GitHub components",
     default: false,
+    category: "beta",
   } as BetaFlag,
 
   ["redirect-on-new-pipeline-run"]: {
     name: "Redirect on new pipeline run",
     description: "Automatically open a new tab after starting a new execution.",
     default: false,
+    category: "setting",
   } as BetaFlag,
 
   ["created-by-me-default"]: {
@@ -35,6 +39,7 @@ export const ExistingBetaFlags = {
     description:
       "Automatically select the 'Created by me' filter when viewing the pipeline run list.",
     default: false,
+    category: "setting",
   } as BetaFlag,
 
   ["in-app-component-editor"]: {
@@ -42,6 +47,7 @@ export const ExistingBetaFlags = {
     description:
       "Enable the in-app component editor for creating and editing pipeline components.",
     default: true,
+    category: "beta",
   } as BetaFlag,
 
   ["partial-selection"]: {
@@ -49,5 +55,6 @@ export const ExistingBetaFlags = {
     description:
       "Allow nodes to be selected when partially covered by the selection box. Use Shift+drag for full selection, or Shift+Cmd+drag (Shift+Ctrl on Windows) for partial selection.",
     default: false,
+    category: "beta",
   } as BetaFlag,
 };
diff --git a/src/components/shared/Settings/BetaFeatures.tsx b/src/components/shared/Settings/BetaFeatures.tsx
new file mode 100644
index 000000000..11c8289b9
--- /dev/null
+++ b/src/components/shared/Settings/BetaFeatures.tsx
@@ -0,0 +1,28 @@
+import { BlockStack } from "@/components/ui/layout";
+import { Paragraph } from "@/components/ui/typography";
+import type { Flag } from "@/types/configuration";
+
+import { Setting } from "./Setting";
+
+interface BetaFeaturesProps {
+  betaFlags: Flag[];
+  onChange: (key: string, enabled: boolean) => void;
+}
+
+export function BetaFeatures({ betaFlags, onChange }: BetaFeaturesProps) {
+  return (
+    <BlockStack gap="4">
+      <Paragraph weight="semibold">Beta Features</Paragraph>
+      {betaFlags.length === 0 && (
+        <Paragraph>No beta features available.</Paragraph>
+      )}
+      {betaFlags.map((flag) => (
+        <Setting
+          key={flag.key}
+          setting={flag}
+          onChange={(enabled) => onChange(flag.key, enabled)}
+        />
+      ))}
+    </BlockStack>
+  );
+}
diff --git a/src/components/shared/Settings/PersonalPreferencesDialog.tsx b/src/components/shared/Settings/PersonalPreferencesDialog.tsx
index b9cfe3046..6a53bb118 100644
--- a/src/components/shared/Settings/PersonalPreferencesDialog.tsx
+++ b/src/components/shared/Settings/PersonalPreferencesDialog.tsx
@@ -9,10 +9,10 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { BlockStack } from "@/components/ui/layout";
-import { Paragraph } from "@/components/ui/typography";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
-import { Setting } from "./Setting";
+import { BetaFeatures } from "./BetaFeatures";
+import { Settings } from "./Settings";
 import { useBetaFlagsReducer } from "./useBetaFlagReducer";
 
 interface PersonalPreferencesDialogProps {
@@ -24,12 +24,19 @@ export function PersonalPreferencesDialog({
   open,
   setOpen,
 }: PersonalPreferencesDialogProps) {
-  const [betaFlags, dispatch] = useBetaFlagsReducer(ExistingBetaFlags);
+  const [allFlags, dispatch] = useBetaFlagsReducer(ExistingBetaFlags);
 
   const handleSetFlag = (flag: string, enabled: boolean) => {
     dispatch({ type: "setFlag", payload: { key: flag, enabled } });
   };
 
+  const betaFlags = Object.values(allFlags).filter(
+    (flag) => flag.category === "beta",
+  );
+  const settings = Object.values(allFlags).filter(
+    (flag) => flag.category === "setting",
+  );
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
@@ -45,16 +52,19 @@ export function PersonalPreferencesDialog({
           Configure your personal preferences.
         </DialogDescription>
 
-        <BlockStack gap="4">
-          <Paragraph weight="semibold">Beta Features</Paragraph>
-          {betaFlags.map((flag) => (
-            <Setting
-              key={flag.key}
-              setting={flag}
-              onChange={(enabled) => handleSetFlag(flag.key, enabled)}
-            />
-          ))}
-        </BlockStack>
+        <Tabs defaultValue="settings" className="w-full gap-4">
+          <TabsList>
+            <TabsTrigger value="settings">Settings</TabsTrigger>
+            <TabsTrigger value="betas">Beta Features</TabsTrigger>
+          </TabsList>
+          <TabsContent value="settings">
+            <Settings settings={settings} onChange={handleSetFlag} />
+          </TabsContent>
+          <TabsContent value="betas">
+            <BetaFeatures betaFlags={betaFlags} onChange={handleSetFlag} />
+          </TabsContent>
+        </Tabs>
+
         <DialogFooter>
           <DialogClose asChild>
             <Button
diff --git a/src/components/shared/Settings/Settings.tsx b/src/components/shared/Settings/Settings.tsx
new file mode 100644
index 000000000..2f3f94758
--- /dev/null
+++ b/src/components/shared/Settings/Settings.tsx
@@ -0,0 +1,26 @@
+import { BlockStack } from "@/components/ui/layout";
+import { Paragraph } from "@/components/ui/typography";
+import type { Flag } from "@/types/configuration";
+
+import { Setting } from "./Setting";
+
+interface SettingsProps {
+  settings: Flag[];
+  onChange: (key: string, enabled: boolean) => void;
+}
+
+export function Settings({ settings, onChange }: SettingsProps) {
+  return (
+    <BlockStack gap="4">
+      <Paragraph weight="semibold">Settings</Paragraph>
+      {settings.length === 0 && <Paragraph>No settings available.</Paragraph>}
+      {settings.map((setting) => (
+        <Setting
+          key={setting.key}
+          setting={setting}
+          onChange={(enabled) => onChange(setting.key, enabled)}
+        />
+      ))}
+    </BlockStack>
+  );
+}
diff --git a/src/components/shared/Settings/tests/PersonalPreferencesDialog.test.tsx b/src/components/shared/Settings/tests/PersonalPreferencesDialog.test.tsx
index c5c7c62a8..9011de4ae 100644
--- a/src/components/shared/Settings/tests/PersonalPreferencesDialog.test.tsx
+++ b/src/components/shared/Settings/tests/PersonalPreferencesDialog.test.tsx
@@ -1,6 +1,9 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+import type { Flag } from "@/types/configuration";
+
 import { PersonalPreferencesDialog } from "../PersonalPreferencesDialog";
 import { useBetaFlagsReducer } from "../useBetaFlagReducer";
 
@@ -11,13 +14,14 @@ describe("PersonalPreferencesDialog", () => {
   const mockDispatch = vi.fn();
   const mockSetOpen = vi.fn();
 
-  const mockBetaFlags = [
+  const mockBetaFlags: Flag[] = [
     {
       key: "codeViewer",
       name: "Code Viewer virtualization",
       description: "Enable the code viewer virtualization.",
       enabled: false,
       default: false,
+      category: "beta",
     },
     {
       key: "testFeature",
@@ -25,6 +29,7 @@ describe("PersonalPreferencesDialog", () => {
       description: "A test feature for testing purposes.",
       enabled: true,
       default: false,
+      category: "setting",
     },
   ];
 
@@ -32,7 +37,6 @@ describe("PersonalPreferencesDialog", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    // Set default mock implementation
     mockUseBetaFlagsReducer.mockReturnValue([mockBetaFlags, mockDispatch]);
   });
 
@@ -60,65 +64,112 @@ describe("PersonalPreferencesDialog", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("should render beta features section", () => {
+  it("should render both tabs", () => {
     render(<PersonalPreferencesDialog open={true} setOpen={mockSetOpen} />);
 
-    expect(screen.getByText("Beta Features")).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Settings" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("tab", { name: "Beta Features" }),
+    ).toBeInTheDocument();
   });
 
-  it("should render all beta flags with correct information", () => {
+  it("should render settings tab content by default", () => {
     render(<PersonalPreferencesDialog open={true} setOpen={mockSetOpen} />);
 
-    // Check first beta flag
-    expect(screen.getByText("Code Viewer virtualization")).toBeInTheDocument();
+    expect(screen.getByText("Test Feature")).toBeInTheDocument();
+    expect(
+      screen.getByText("A test feature for testing purposes."),
+    ).toBeInTheDocument();
+  });
+
+  it("should render beta features tab content when clicked", async () => {
+    const user = userEvent.setup();
+    render(<PersonalPreferencesDialog open={true} setOpen={mockSetOpen} />);
+
+    const betaTab = screen.getByRole("tab", { name: "Beta Features" });
+    await user.click(betaTab);
+
+    expect(
+      await screen.findByText("Code Viewer virtualization"),
+    ).toBeInTheDocument();
     expect(
       screen.getByText("Enable the code viewer virtualization."),
     ).toBeInTheDocument();
+  });
+
+  it("should render all flags with correct information in their respective tabs", async () => {
+    const user = userEvent.setup();
+    render(<PersonalPreferencesDialog open={true} setOpen={mockSetOpen} />);
 
-    // Check second beta flag
     expect(screen.getByText("Test Feature")).toBeInTheDocument();
     expect(
       screen.getByText("A test feature for testing purposes."),
     ).toBeInTheDocument();
+
+    const betaTab = screen.getByRole("tab", { name: "Beta Features" });
+    await user.click(betaTab);
+
+    expect(
+      await screen.findByText("Code Viewer virtualization"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("Enable the code viewer virtualization."),
+    ).toBeInTheDocument();
   });
 
-  it("should render switches with correct initial states", () => {
+  it("should render switches with correct initial states in settings tab", () => {
     render(<PersonalPreferencesDialog open={true} setOpen={mockSetOpen} />);
 
-    const switches = screen.getAllByRole("switch");
-    expect(switches).toHaveLength(2);
-
-    // First switch should be unchecked (enabled: false)
-    expect(switches[0]).not.toBeChecked();
+    const settingsSwitches = screen.getAllByRole("switch");
 
-    // Second switch should be checked (enabled: true)
-    expect(switches[1]).toBeChecked();
+    expect(settingsSwitches).toHaveLength(1);
+    expect(settingsSwitches[0]).toBeChecked();
   });
 
-  it("should dispatch setFlag action when switch is toggled", () => {
+  it("should render switches with correct initial states in beta features tab", async () => {
+    const user = userEvent.setup();
     render(<PersonalPreferencesDialog open={true} setOpen={mockSetOpen} />);
 
-    const switches = screen.getAllByRole("switch");
+    const betaTab = screen.getByRole("tab", { name: "Beta Features" });
+    await user.click(betaTab);
 
-    // Toggle first switch (currently false, should become true)
-    fireEvent.click(switches[0]);
+    const betaSwitches = await screen.findAllByRole("switch");
+
+    expect(betaSwitches).toHaveLength(1);
+    expect(betaSwitches[0]).not.toBeChecked();
+  });
+
+  it("should dispatch setFlag action when settings switch is toggled", async () => {
+    const user = userEvent.setup();
+    render(<PersonalPreferencesDialog open={true} setOpen={mockSetOpen} />);
+
+    const settingsSwitch = screen.getByTestId("testFeature-switch");
+    await user.click(settingsSwitch);
 
     expect(mockDispatch).toHaveBeenCalledWith({
       type: "setFlag",
       payload: {
-        key: "codeViewer",
-        enabled: true,
+        key: "testFeature",
+        enabled: false,
       },
     });
+  });
+
+  it("should dispatch setFlag action when beta switch is toggled", async () => {
+    const user = userEvent.setup();
+    render(<PersonalPreferencesDialog open={true} setOpen={mockSetOpen} />);
+
+    const betaTab = screen.getByRole("tab", { name: "Beta Features" });
+    await user.click(betaTab);
 
-    // Toggle second switch (currently true, should become false)
-    fireEvent.click(switches[1]);
+    const betaSwitch = await screen.findByTestId("codeViewer-switch");
+    await user.click(betaSwitch);
 
     expect(mockDispatch).toHaveBeenCalledWith({
       type: "setFlag",
       payload: {
-        key: "testFeature",
-        enabled: false,
+        key: "codeViewer",
+        enabled: true,
       },
     });
   });
@@ -130,21 +181,21 @@ describe("PersonalPreferencesDialog", () => {
     expect(closeButton).toBeInTheDocument();
   });
 
-  it("should call setOpen(false) when OK button is clicked", () => {
+  it("should call setOpen(false) when Close button is clicked", async () => {
+    const user = userEvent.setup();
     render(<PersonalPreferencesDialog open={true} setOpen={mockSetOpen} />);
 
     const closeButton = screen.getByTestId("close-button");
-    fireEvent.click(closeButton);
+    await user.click(closeButton);
 
     expect(mockSetOpen).toHaveBeenCalledWith(false);
   });
 
-  it("should call setOpen when dialog is closed via onOpenChange", () => {
+  it("should call setOpen when dialog is closed via onOpenChange", async () => {
+    const user = userEvent.setup();
     render(<PersonalPreferencesDialog open={true} setOpen={mockSetOpen} />);
 
-    // Simulate closing the dialog via ESC key or backdrop click
-    // This would trigger the onOpenChange callback
-    fireEvent.keyDown(document, { key: "Escape" });
+    await user.keyboard("{Escape}");
 
     expect(mockSetOpen).toHaveBeenCalled();
   });
@@ -155,32 +206,42 @@ describe("PersonalPreferencesDialog", () => {
     const dialog = screen.getByRole("dialog", { name: "Personal Preferences" });
     expect(dialog).toHaveAttribute("aria-label", "Personal Preferences");
 
-    // Check that the dialog description exists (the aria-label is on the parent DialogDescription component)
     expect(
       screen.getByText("Configure your personal preferences."),
     ).toBeInTheDocument();
   });
 
-  it("should handle empty beta flags array", () => {
-    // Mock empty beta flags
+  it("should handle empty flags arrays", async () => {
+    const user = userEvent.setup();
     mockUseBetaFlagsReducer.mockReturnValue([[], mockDispatch]);
 
     render(<PersonalPreferencesDialog open={true} setOpen={mockSetOpen} />);
 
-    expect(screen.getByText("Beta Features")).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Settings" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("tab", { name: "Beta Features" }),
+    ).toBeInTheDocument();
+
+    expect(screen.queryAllByRole("switch")).toHaveLength(0);
+
+    const betaTab = screen.getByRole("tab", { name: "Beta Features" });
+    await user.click(betaTab);
+
     expect(screen.queryAllByRole("switch")).toHaveLength(0);
   });
 
   it("should maintain consistent dialog structure", () => {
     render(<PersonalPreferencesDialog open={true} setOpen={mockSetOpen} />);
 
-    // Check dialog structure
     expect(screen.getByRole("dialog")).toBeInTheDocument();
     expect(screen.getByText("Personal Preferences")).toBeInTheDocument();
     expect(
       screen.getByText("Configure your personal preferences."),
     ).toBeInTheDocument();
-    expect(screen.getByText("Beta Features")).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Settings" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("tab", { name: "Beta Features" }),
+    ).toBeInTheDocument();
     expect(screen.getByTestId("close-button")).toBeInTheDocument();
   });
 });
diff --git a/src/components/shared/Settings/tests/useBetaFlagReducer.test.ts b/src/components/shared/Settings/tests/useBetaFlagReducer.test.ts
index bb1b50045..be9d227db 100644
--- a/src/components/shared/Settings/tests/useBetaFlagReducer.test.ts
+++ b/src/components/shared/Settings/tests/useBetaFlagReducer.test.ts
@@ -20,16 +20,19 @@ describe("useBetaFlagsReducer", () => {
       name: "Feature 1",
       description: "First feature flag",
       default: false,
+      category: "beta",
     },
     feature2: {
       name: "Feature 2",
       description: "Second feature flag",
       default: true,
+      category: "beta",
     },
     feature3: {
       name: "Feature 3",
       description: "Third feature flag",
       default: false,
+      category: "setting",
     },
   };
 
@@ -44,6 +47,7 @@ describe("useBetaFlagsReducer", () => {
       description: "First feature flag",
       enabled: false,
       default: false,
+      category: "beta",
     });
     expect(state[1]).toEqual({
       key: "feature2",
@@ -51,6 +55,7 @@ describe("useBetaFlagsReducer", () => {
       description: "Second feature flag",
       enabled: true, // Should use default value
       default: true,
+      category: "beta",
     });
     expect(state[2]).toEqual({
       key: "feature3",
@@ -58,6 +63,7 @@ describe("useBetaFlagsReducer", () => {
       description: "Third feature flag",
       enabled: false,
       default: false,
+      category: "setting",
     });
   });
 
diff --git a/src/types/configuration.ts b/src/types/configuration.ts
index f6a858ff8..50724f615 100644
--- a/src/types/configuration.ts
+++ b/src/types/configuration.ts
@@ -2,6 +2,7 @@ export interface BetaFlag {
   name: string;
   description: string;
   default: boolean;
+  category: "beta" | "setting";
 }
 
 export type BetaFlags = Record<string, BetaFlag>;
diff --git a/tests/e2e/published-componentlib.spec.ts b/tests/e2e/published-componentlib.spec.ts
index cf803e7e3..fb37225a8 100644
--- a/tests/e2e/published-componentlib.spec.ts
+++ b/tests/e2e/published-componentlib.spec.ts
@@ -35,6 +35,8 @@ test.describe("Published Component Library", () => {
     const dialog = page.getByTestId("personal-preferences-dialog");
     await expect(dialog).toBeVisible();
 
+    await dialog.getByRole("tab", { name: "Beta Features" }).click();
+
     const switchElement = dialog.getByTestId(
       "remote-component-library-search-switch",
     );
diff --git a/tests/e2e/published-componentlifecycle.spec.ts b/tests/e2e/published-componentlifecycle.spec.ts
index 3c8143c8e..08a8157a8 100644
--- a/tests/e2e/published-componentlifecycle.spec.ts
+++ b/tests/e2e/published-componentlifecycle.spec.ts
@@ -33,6 +33,8 @@ test.describe("Published Component Library - Lifecycle", () => {
     const dialog = page.getByTestId("personal-preferences-dialog");
     await expect(dialog).toBeVisible();
 
+    await dialog.getByRole("tab", { name: "Beta Features" }).click();
+
     const switchElement = dialog.getByTestId(
       "remote-component-library-search-switch",
     );