From a4589de0dd2de34be73ae09184dd31b8e45f4885 Mon Sep 17 00:00:00 2001
From: minnakt <47064971+minnakt@users.noreply.github.com>
Date: Fri, 6 Dec 2024 15:30:23 -0500
Subject: [PATCH] DEVPROD-10202: Allow users to opt in to beta features (#459)

---
 .../integration/preferences/notifications.ts  |   2 +-
 .../preferences/user_preferences.ts           |  33 +++
 .../analytics/navbar/useNavbarAnalytics.ts    |   1 +
 .../preferences/usePreferencesAnalytics.ts    |   1 +
 apps/spruce/src/components/Header/Navbar.tsx  |   2 +-
 .../SpruceForm/Widgets/LeafyGreenWidgets.tsx  |  32 ++-
 .../components/SpruceForm/Widgets/types.ts    |   1 +
 .../SpruceForm_Example2.storyshot             |  14 +-
 .../src/components/SpruceForm/index.tsx       |   2 +
 apps/spruce/src/gql/generated/types.ts        |  45 ++++
 apps/spruce/src/gql/mutations/index.ts        |   2 +
 .../update-user-beta-features.graphql         |   7 +
 .../gql/queries/admin-beta-features.graphql   |   9 +
 apps/spruce/src/gql/queries/index.ts          |   4 +
 .../gql/queries/user-beta-features.graphql    |   8 +
 apps/spruce/src/hooks/index.ts                |   5 +
 .../spruce/src/hooks/useBetaFeatures/index.ts |  70 ++++++
 .../useBetaFeatures/useBetaFeatures.test.tsx  | 119 ++++++++++
 .../preferences/preferencesTabs/NewUITab.tsx  | 122 ++--------
 .../preferencesTabs/NotificationsTab.tsx      |   2 +-
 .../preferencesTabs/ProfileTab.tsx            | 210 +-----------------
 .../preferencesTabs/newUITab/BetaFeatures.tsx | 178 +++++++++++++++
 .../newUITab/PreferenceToggles.tsx            | 106 +++++++++
 .../preferencesTabs/profileTab/Settings.tsx   | 191 ++++++++++++++++
 24 files changed, 849 insertions(+), 317 deletions(-)
 create mode 100644 apps/spruce/src/gql/mutations/update-user-beta-features.graphql
 create mode 100644 apps/spruce/src/gql/queries/admin-beta-features.graphql
 create mode 100644 apps/spruce/src/gql/queries/user-beta-features.graphql
 create mode 100644 apps/spruce/src/hooks/useBetaFeatures/index.ts
 create mode 100644 apps/spruce/src/hooks/useBetaFeatures/useBetaFeatures.test.tsx
 create mode 100644 apps/spruce/src/pages/preferences/preferencesTabs/newUITab/BetaFeatures.tsx
 create mode 100644 apps/spruce/src/pages/preferences/preferencesTabs/newUITab/PreferenceToggles.tsx
 create mode 100644 apps/spruce/src/pages/preferences/preferencesTabs/profileTab/Settings.tsx

diff --git a/apps/spruce/cypress/integration/preferences/notifications.ts b/apps/spruce/cypress/integration/preferences/notifications.ts
index 37f024d31..c5464ba33 100644
--- a/apps/spruce/cypress/integration/preferences/notifications.ts
+++ b/apps/spruce/cypress/integration/preferences/notifications.ts
@@ -21,7 +21,7 @@ describe("preferences/notifications", () => {
       cy.dataCy("slack-username-field").clear();
       cy.dataCy("slack-username-field").type("slack.user");
       cy.dataCy("save-profile-changes-button").click();
-      cy.validateToast("success", "Your changes have successfully been saved.");
+      cy.validateToast("success", "Your changes have been saved.");
     });
   });
 
diff --git a/apps/spruce/cypress/integration/preferences/user_preferences.ts b/apps/spruce/cypress/integration/preferences/user_preferences.ts
index 94d6db8f2..caf635a8f 100644
--- a/apps/spruce/cypress/integration/preferences/user_preferences.ts
+++ b/apps/spruce/cypress/integration/preferences/user_preferences.ts
@@ -2,6 +2,7 @@ const baseRoute = "/preferences";
 const tabNames = {
   profile: "/profile",
   cli: "/cli",
+  newUI: "/newUI",
 };
 describe("user preferences pages", () => {
   it("visiting /preferences should redirect to the profile tab", () => {
@@ -22,4 +23,36 @@ describe("user preferences pages", () => {
     cy.contains("button", "Reset key").click();
     cy.contains(defaultApiKey).should("not.exist");
   });
+
+  describe("beta features", () => {
+    it("should be able to edit beta features", () => {
+      cy.visit(`${baseRoute}${tabNames.newUI}`);
+      cy.dataCy("save-beta-features-button").should(
+        "have.attr",
+        "aria-disabled",
+        "true",
+      );
+
+      cy.dataCy("spruce-waterfall-enabled").within(() => {
+        cy.get('[data-label="Disabled"]').should("be.checked");
+        cy.get('[data-label="Enabled"]').click({ force: true });
+        cy.get('[data-label="Disabled"]').should("not.be.checked");
+        cy.get('[data-label="Enabled"]').should("be.checked");
+      });
+
+      cy.dataCy("save-beta-features-button").should(
+        "have.attr",
+        "aria-disabled",
+        "false",
+      );
+      cy.dataCy("save-beta-features-button").click();
+      cy.validateToast("success", "Your changes have been saved.");
+      cy.reload();
+
+      cy.dataCy("spruce-waterfall-enabled").within(() => {
+        cy.get('[data-label="Disabled"]').should("not.be.checked");
+        cy.get('[data-label="Enabled"]').should("be.checked");
+      });
+    });
+  });
 });
diff --git a/apps/spruce/src/analytics/navbar/useNavbarAnalytics.ts b/apps/spruce/src/analytics/navbar/useNavbarAnalytics.ts
index ec6d973eb..e9c59f3e6 100644
--- a/apps/spruce/src/analytics/navbar/useNavbarAnalytics.ts
+++ b/apps/spruce/src/analytics/navbar/useNavbarAnalytics.ts
@@ -6,6 +6,7 @@ type Action =
   | { name: "Clicked legacy UI link" }
   | { name: "Clicked logo link" }
   | { name: "Clicked waterfall link" }
+  | { name: "Clicked project health link" }
   | { name: "Clicked my patches link" }
   | { name: "Clicked my hosts link" }
   | { name: "Clicked all hosts link" }
diff --git a/apps/spruce/src/analytics/preferences/usePreferencesAnalytics.ts b/apps/spruce/src/analytics/preferences/usePreferencesAnalytics.ts
index 5c2ebb1e3..94bae9963 100644
--- a/apps/spruce/src/analytics/preferences/usePreferencesAnalytics.ts
+++ b/apps/spruce/src/analytics/preferences/usePreferencesAnalytics.ts
@@ -4,6 +4,7 @@ import { AnalyticsIdentifier } from "analytics/types";
 type Action =
   | { name: "Changed tab"; tab: string }
   | { name: "Saved profile info" }
+  | { name: "Saved beta feature settings" }
   | { name: "Saved notification preferences" }
   | { name: "Deleted subscriptions" }
   | { name: "Clicked CLI download link"; "download.name": string }
diff --git a/apps/spruce/src/components/Header/Navbar.tsx b/apps/spruce/src/components/Header/Navbar.tsx
index fb88953cf..1bb31de52 100644
--- a/apps/spruce/src/components/Header/Navbar.tsx
+++ b/apps/spruce/src/components/Header/Navbar.tsx
@@ -76,7 +76,7 @@ export const Navbar: React.FC = () => {
         </LogoLink>
         <PrimaryLink
           data-cy="project-health-link"
-          onClick={() => sendEvent({ name: "Clicked waterfall link" })}
+          onClick={() => sendEvent({ name: "Clicked project health link" })}
           to={getCommitsRoute(projectIdentifier)}
         >
           Project Health
diff --git a/apps/spruce/src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx b/apps/spruce/src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx
index 93bd34503..26b28ae1c 100644
--- a/apps/spruce/src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx
+++ b/apps/spruce/src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef } from "react";
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import Banner from "@leafygreen-ui/banner";
 import Checkbox from "@leafygreen-ui/checkbox";
@@ -270,30 +271,48 @@ export const LeafyGreenRadio: React.FC<EnumSpruceWidgetProps> = ({
     elementWrapperCSS,
     enumDisabled,
     enumOptions,
+    inline,
   } = options;
+
+  // RadioGroup components do not accept boolean props for value, so use the indices instead.
+  const valueMap = enumOptions.map(({ value: val }) => val);
+
   return (
     <ElementWrapper css={elementWrapperCSS}>
       {label && (
         <LabelContainer>
-          <Label htmlFor={id}>{label}</Label>
+          <Label disabled={disabled} htmlFor={id}>
+            {label}
+          </Label>
         </LabelContainer>
       )}
       <RadioGroup
+        bold={false}
+        css={
+          inline
+            ? css`
+                display: flex;
+                flex-direction: row;
+                gap: ${size.l};
+              `
+            : ""
+        }
         data-cy={dataCy}
         id={id}
         name={label}
-        onChange={(e) => onChange(e.target.value)}
-        value={value}
+        onChange={(e) => onChange(valueMap[Number(e.target.value)])}
+        value={valueMap.indexOf(value)}
       >
         {enumOptions.map((o) => {
           const optionDisabled = enumDisabled?.includes(o.value) ?? false;
           const { description } = o.schema ?? {};
           return (
             <Radio
-              key={o.value}
+              key={valueMap.indexOf(o.value)}
+              data-label={o.label}
               description={description}
               disabled={disabled || optionDisabled}
-              value={o.value}
+              value={valueMap.indexOf(o.value)}
             >
               {o.label}
             </Radio>
@@ -351,8 +370,7 @@ export const LeafyGreenRadioBox: React.FC<
         data-cy={dataCy}
         id={id}
         name={label}
-        // @ts-expect-error: FIXME. This comment was added by an automated script.
-        onChange={(e) => onChange(valueMap[e.target.value])}
+        onChange={(e) => onChange(valueMap[Number(e.target.value)])}
         value={valueMap.indexOf(value)}
       >
         {enumOptions.map((o) => {
diff --git a/apps/spruce/src/components/SpruceForm/Widgets/types.ts b/apps/spruce/src/components/SpruceForm/Widgets/types.ts
index b275901b0..9726c1e74 100644
--- a/apps/spruce/src/components/SpruceForm/Widgets/types.ts
+++ b/apps/spruce/src/components/SpruceForm/Widgets/types.ts
@@ -17,6 +17,7 @@ export interface SpruceWidgetProps extends WidgetProps {
     emptyValue: string | null;
     errors: string[];
     focusOnMount: boolean;
+    inline: boolean;
     inputType: TextInputType;
     rows: number;
     showLabel: boolean;
diff --git a/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example2.storyshot b/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example2.storyshot
index 9f96c39f3..770c1af71 100644
--- a/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example2.storyshot
+++ b/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example2.storyshot
@@ -271,7 +271,7 @@
               >
                 <div
                   aria-label="radio-group-"
-                  class="leafygreen-ui-14o8ny9"
+                  class="leafygreen-ui-14o8ny9 css-0"
                   id="root_reprovisionMethod"
                   role="group"
                 >
@@ -279,19 +279,19 @@
                     class="leafygreen-ui-jpwlig"
                   >
                     <label
-                      class="leafygreen-ui-14lohqh"
+                      class="leafygreen-ui-1o99mn1"
                       data-lgid="lg-label"
                       for="radio-group--0"
                     >
                       <input
-                        aria-checked="false"
                         aria-describedby="lg-277"
                         aria-disabled="false"
                         class="lg-ui-radio-group-0002 leafygreen-ui-1iwed1m"
+                        data-label="Restart Jasper service on running hosts of this distro for this update"
                         id="radio-group--0"
                         name="radio-group-"
                         type="radio"
-                        value="restartJasper"
+                        value="0"
                       />
                       <div
                         class="lg-ui-radio-group-0001 leafygreen-ui-1tsb3ci"
@@ -307,19 +307,19 @@
                     class="leafygreen-ui-jpwlig"
                   >
                     <label
-                      class="leafygreen-ui-14lohqh"
+                      class="leafygreen-ui-1o99mn1"
                       data-lgid="lg-label"
                       for="radio-group--1"
                     >
                       <input
-                        aria-checked="false"
                         aria-describedby="lg-278"
                         aria-disabled="false"
                         class="lg-ui-radio-group-0002 leafygreen-ui-1iwed1m"
+                        data-label="Reprovision running hosts of this distro for this update"
                         id="radio-group--1"
                         name="radio-group-"
                         type="radio"
-                        value="reprovisionHosts"
+                        value="1"
                       />
                       <div
                         class="lg-ui-radio-group-0001 leafygreen-ui-1tsb3ci"
diff --git a/apps/spruce/src/components/SpruceForm/index.tsx b/apps/spruce/src/components/SpruceForm/index.tsx
index 87ebb3e0e..e3844e6a4 100644
--- a/apps/spruce/src/components/SpruceForm/index.tsx
+++ b/apps/spruce/src/components/SpruceForm/index.tsx
@@ -21,6 +21,7 @@ export const SpruceForm: React.FC<SpruceFormProps> = ({
   tagName,
   uiSchema,
   validate,
+  ...args
 }) => (
   <Form
     ArrayFieldTemplate={ArrayFieldTemplate}
@@ -42,6 +43,7 @@ export const SpruceForm: React.FC<SpruceFormProps> = ({
     validate={validate}
     // @ts-expect-error: FIXME. This comment was added by an automated script.
     widgets={widgets}
+    {...args}
   >
     {/*  Need to pass in an empty fragment child to remove default submit button */}
     {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
diff --git a/apps/spruce/src/gql/generated/types.ts b/apps/spruce/src/gql/generated/types.ts
index bad58de4f..e58c1448e 100644
--- a/apps/spruce/src/gql/generated/types.ts
+++ b/apps/spruce/src/gql/generated/types.ts
@@ -5766,6 +5766,21 @@ export type UpdateVolumeMutation = {
   updateVolume: boolean;
 };
 
+export type UpdateUserBetaFeaturesMutationVariables = Exact<{
+  opts: UpdateBetaFeaturesInput;
+}>;
+
+export type UpdateUserBetaFeaturesMutation = {
+  __typename?: "Mutation";
+  updateBetaFeatures?: {
+    __typename?: "UpdateBetaFeaturesPayload";
+    betaFeatures?: {
+      __typename?: "BetaFeatures";
+      spruceWaterfallEnabled: boolean;
+    } | null;
+  } | null;
+};
+
 export type UpdateUserSettingsMutationVariables = Exact<{
   userSettings: UserSettingsInput;
 }>;
@@ -5775,6 +5790,22 @@ export type UpdateUserSettingsMutation = {
   updateUserSettings: boolean;
 };
 
+export type AdminBetaFeaturesQueryVariables = Exact<{ [key: string]: never }>;
+
+export type AdminBetaFeaturesQuery = {
+  __typename?: "Query";
+  spruceConfig?: {
+    __typename?: "SpruceConfig";
+    ui: {
+      __typename?: "UIConfig";
+      betaFeatures: {
+        __typename?: "BetaFeatures";
+        spruceWaterfallEnabled: boolean;
+      };
+    };
+  } | null;
+};
+
 export type AgentLogsQueryVariables = Exact<{
   id: Scalars["String"]["input"];
   execution?: InputMaybe<Scalars["Int"]["input"]>;
@@ -9275,6 +9306,20 @@ export type UndispatchedTasksQuery = {
   };
 };
 
+export type UserBetaFeaturesQueryVariables = Exact<{ [key: string]: never }>;
+
+export type UserBetaFeaturesQuery = {
+  __typename?: "Query";
+  user: {
+    __typename?: "User";
+    userId: string;
+    betaFeatures: {
+      __typename?: "BetaFeatures";
+      spruceWaterfallEnabled: boolean;
+    };
+  };
+};
+
 export type UserConfigQueryVariables = Exact<{ [key: string]: never }>;
 
 export type UserConfigQuery = {
diff --git a/apps/spruce/src/gql/mutations/index.ts b/apps/spruce/src/gql/mutations/index.ts
index 764803e7f..c6123c8f9 100644
--- a/apps/spruce/src/gql/mutations/index.ts
+++ b/apps/spruce/src/gql/mutations/index.ts
@@ -54,6 +54,7 @@ import UPDATE_PATCH_DESCRIPTION from "./update-patch-description.graphql";
 import UPDATE_PUBLIC_KEY from "./update-public-key.graphql";
 import UPDATE_SPAWN_HOST_STATUS from "./update-spawn-host-status.graphql";
 import UPDATE_SPAWN_VOLUME from "./update-spawn-volume.graphql";
+import UPDATE_USER_BETA_FEATURES from "./update-user-beta-features.graphql";
 import UPDATE_USER_SETTINGS from "./update-user-settings.graphql";
 
 export {
@@ -113,5 +114,6 @@ export {
   UPDATE_PUBLIC_KEY,
   UPDATE_SPAWN_HOST_STATUS,
   UPDATE_SPAWN_VOLUME,
+  UPDATE_USER_BETA_FEATURES,
   UPDATE_USER_SETTINGS,
 };
diff --git a/apps/spruce/src/gql/mutations/update-user-beta-features.graphql b/apps/spruce/src/gql/mutations/update-user-beta-features.graphql
new file mode 100644
index 000000000..ece321965
--- /dev/null
+++ b/apps/spruce/src/gql/mutations/update-user-beta-features.graphql
@@ -0,0 +1,7 @@
+mutation UpdateUserBetaFeatures($opts: UpdateBetaFeaturesInput!) {
+  updateBetaFeatures(opts: $opts) {
+    betaFeatures {
+      spruceWaterfallEnabled
+    }
+  }
+}
diff --git a/apps/spruce/src/gql/queries/admin-beta-features.graphql b/apps/spruce/src/gql/queries/admin-beta-features.graphql
new file mode 100644
index 000000000..428954556
--- /dev/null
+++ b/apps/spruce/src/gql/queries/admin-beta-features.graphql
@@ -0,0 +1,9 @@
+query AdminBetaFeatures {
+  spruceConfig {
+    ui {
+      betaFeatures {
+        spruceWaterfallEnabled
+      }
+    }
+  }
+}
diff --git a/apps/spruce/src/gql/queries/index.ts b/apps/spruce/src/gql/queries/index.ts
index 81f842ad7..a91faec78 100644
--- a/apps/spruce/src/gql/queries/index.ts
+++ b/apps/spruce/src/gql/queries/index.ts
@@ -1,3 +1,4 @@
+import ADMIN_BETA_FEATURES from "./admin-beta-features.graphql";
 import AGENT_LOGS from "./agent-logs.graphql";
 import ALL_LOGS from "./all-logs.graphql";
 import AWS_REGIONS from "./aws-regions.graphql";
@@ -76,6 +77,7 @@ import TASK_TESTS from "./task-tests.graphql";
 import TASK from "./task.graphql";
 import TEST_ANALYSIS from "./test-analysis.graphql";
 import UNSCHEDULED_TASKS from "./undispatched-tasks.graphql";
+import USER_BETA_FEATURES from "./user-beta-features.graphql";
 import USER_CONFIG from "./user-config.graphql";
 import USER_DISTRO_SETTINGS_PERMISSIONS from "./user-distro-settings-permissions.graphql";
 import USER_PATCHES from "./user-patches.graphql";
@@ -91,6 +93,7 @@ import VIEWABLE_PROJECTS from "./viewable-projects.graphql";
 import WATERFALL from "./waterfall.graphql";
 
 export {
+  ADMIN_BETA_FEATURES,
   AGENT_LOGS,
   ALL_LOGS,
   AWS_REGIONS,
@@ -169,6 +172,7 @@ export {
   TASK,
   TEST_ANALYSIS,
   UNSCHEDULED_TASKS,
+  USER_BETA_FEATURES,
   USER_CONFIG,
   USER_PATCHES,
   USER_DISTRO_SETTINGS_PERMISSIONS,
diff --git a/apps/spruce/src/gql/queries/user-beta-features.graphql b/apps/spruce/src/gql/queries/user-beta-features.graphql
new file mode 100644
index 000000000..631080d34
--- /dev/null
+++ b/apps/spruce/src/gql/queries/user-beta-features.graphql
@@ -0,0 +1,8 @@
+query UserBetaFeatures {
+  user {
+    betaFeatures {
+      spruceWaterfallEnabled
+    }
+    userId
+  }
+}
diff --git a/apps/spruce/src/hooks/index.ts b/apps/spruce/src/hooks/index.ts
index 2422787fc..718fae4d1 100644
--- a/apps/spruce/src/hooks/index.ts
+++ b/apps/spruce/src/hooks/index.ts
@@ -26,3 +26,8 @@ export { useResize } from "./useResize";
 export { useRunningTime } from "./useRunningTime";
 export { useTopmostVisibleElement } from "./useTopmostVisibleElement";
 export { useHasProjectOrRepoEditPermission } from "./useHasProjectOrRepoEditPermission";
+export {
+  useAdminBetaFeatures,
+  useUserBetaFeatures,
+  useMergedBetaFeatures,
+} from "./useBetaFeatures";
diff --git a/apps/spruce/src/hooks/useBetaFeatures/index.ts b/apps/spruce/src/hooks/useBetaFeatures/index.ts
new file mode 100644
index 000000000..bd72ac43c
--- /dev/null
+++ b/apps/spruce/src/hooks/useBetaFeatures/index.ts
@@ -0,0 +1,70 @@
+import { useQuery } from "@apollo/client";
+import {
+  AdminBetaFeaturesQuery,
+  AdminBetaFeaturesQueryVariables,
+  BetaFeatures,
+  UserBetaFeaturesQuery,
+  UserBetaFeaturesQueryVariables,
+} from "gql/generated/types";
+import { ADMIN_BETA_FEATURES, USER_BETA_FEATURES } from "gql/queries";
+
+/**
+ * `useAdminBetaFeatures` returns the beta features defined at the admin level.
+ * @returns an object containing
+ * - adminBetaSettings: admin beta features settings
+ * - loading: boolean representing query loading state
+ */
+export const useAdminBetaFeatures = () => {
+  const { data, loading } = useQuery<
+    AdminBetaFeaturesQuery,
+    AdminBetaFeaturesQueryVariables
+  >(ADMIN_BETA_FEATURES);
+  const { spruceConfig } = data ?? {};
+  const { ui } = spruceConfig ?? {};
+  const { betaFeatures } = ui ?? {};
+  return { adminBetaSettings: betaFeatures, loading };
+};
+
+/**
+ * `useUserBetaFeatures` returns the user's beta feature settings.
+ * @returns an object containing
+ * - userBetaSettings: user's beta features settings
+ * - loading: boolean representing query loading state
+ */
+export const useUserBetaFeatures = () => {
+  const { data, loading } = useQuery<
+    UserBetaFeaturesQuery,
+    UserBetaFeaturesQueryVariables
+  >(USER_BETA_FEATURES, {
+    variables: {},
+  });
+  const { user } = data ?? {};
+  const { betaFeatures } = user ?? {};
+  return { userBetaSettings: betaFeatures, loading };
+};
+
+/**
+ * `useMergedBetaFeatures` returns the result of merging admin and user level beta features.
+ * @returns an object containing
+ * - betaFeatures: merged beta features
+ * - loading: boolean representing query loading state
+ */
+export const useMergedBetaFeatures = () => {
+  const { adminBetaSettings, loading: adminLoading } = useAdminBetaFeatures();
+  const { loading: userLoading, userBetaSettings } = useUserBetaFeatures();
+
+  if (!adminBetaSettings || !userBetaSettings) {
+    return { mergedBetaFeatures: undefined, loading: false };
+  }
+
+  const mergedBetaFeatures: BetaFeatures = {
+    spruceWaterfallEnabled:
+      adminBetaSettings.spruceWaterfallEnabled &&
+      userBetaSettings.spruceWaterfallEnabled,
+  };
+
+  return {
+    betaFeatures: mergedBetaFeatures,
+    loading: adminLoading || userLoading,
+  };
+};
diff --git a/apps/spruce/src/hooks/useBetaFeatures/useBetaFeatures.test.tsx b/apps/spruce/src/hooks/useBetaFeatures/useBetaFeatures.test.tsx
new file mode 100644
index 000000000..013b1e3e8
--- /dev/null
+++ b/apps/spruce/src/hooks/useBetaFeatures/useBetaFeatures.test.tsx
@@ -0,0 +1,119 @@
+import { MockedProvider, MockedProviderProps } from "@apollo/client/testing";
+import { renderHook, waitFor } from "@evg-ui/lib/test_utils";
+import { ApolloMock } from "@evg-ui/lib/test_utils/types";
+import {
+  AdminBetaFeaturesQuery,
+  AdminBetaFeaturesQueryVariables,
+  UserBetaFeaturesQuery,
+  UserBetaFeaturesQueryVariables,
+} from "gql/generated/types";
+import { ADMIN_BETA_FEATURES, USER_BETA_FEATURES } from "gql/queries";
+import {
+  useAdminBetaFeatures,
+  useUserBetaFeatures,
+  useMergedBetaFeatures,
+} from ".";
+
+interface ProviderProps {
+  mocks?: MockedProviderProps["mocks"];
+  children: React.ReactNode;
+}
+const ProviderWrapper: React.FC<ProviderProps> = ({ children, mocks = [] }) => (
+  <MockedProvider mocks={mocks}>{children}</MockedProvider>
+);
+
+describe("useAdminBetaFeatures", () => {
+  it("correctly reads admin beta feature settings", async () => {
+    const { result } = renderHook(() => useAdminBetaFeatures(), {
+      wrapper: ({ children }) =>
+        ProviderWrapper({
+          children,
+          mocks: [adminBetaFeatures],
+        }),
+    });
+    await waitFor(() => {
+      expect(result?.current?.adminBetaSettings?.spruceWaterfallEnabled).toBe(
+        false,
+      );
+    });
+  });
+});
+
+describe("useUserBetaFeatures", () => {
+  it("correctly reads user beta feature settings", async () => {
+    const { result } = renderHook(() => useUserBetaFeatures(), {
+      wrapper: ({ children }) =>
+        ProviderWrapper({
+          children,
+          mocks: [userBetaFeatures],
+        }),
+    });
+    await waitFor(() => {
+      expect(result?.current?.userBetaSettings?.spruceWaterfallEnabled).toBe(
+        true,
+      );
+    });
+  });
+});
+
+describe("useMergedBetaFeatures", () => {
+  it("correctly merges beta feature settings", async () => {
+    const { result } = renderHook(() => useMergedBetaFeatures(), {
+      wrapper: ({ children }) =>
+        ProviderWrapper({
+          children,
+          mocks: [adminBetaFeatures, userBetaFeatures],
+        }),
+    });
+    await waitFor(() => {
+      expect(result?.current?.betaFeatures).toBeDefined();
+    });
+    expect(result?.current?.betaFeatures?.spruceWaterfallEnabled).toBe(false);
+  });
+});
+
+const adminBetaFeatures: ApolloMock<
+  AdminBetaFeaturesQuery,
+  AdminBetaFeaturesQueryVariables
+> = {
+  request: {
+    query: ADMIN_BETA_FEATURES,
+    variables: {},
+  },
+  result: {
+    data: {
+      spruceConfig: {
+        __typename: "SpruceConfig",
+        ui: {
+          __typename: "UIConfig",
+          betaFeatures: {
+            __typename: "BetaFeatures",
+            spruceWaterfallEnabled: false,
+          },
+        },
+      },
+    },
+  },
+};
+
+const userBetaFeatures: ApolloMock<
+  UserBetaFeaturesQuery,
+  UserBetaFeaturesQueryVariables
+> = {
+  request: {
+    query: USER_BETA_FEATURES,
+    variables: {},
+  },
+  result: {
+    data: {
+      user: {
+        __typename: "User",
+        userId: "me",
+        betaFeatures: {
+          __typename: "BetaFeatures",
+          spruceWaterfallEnabled: true,
+        },
+      },
+    },
+  },
+};
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/NewUITab.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/NewUITab.tsx
index 250f29fb6..f64955154 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/NewUITab.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/NewUITab.tsx
@@ -1,108 +1,28 @@
-import { useMutation } from "@apollo/client";
-import styled from "@emotion/styled";
-import Toggle from "@leafygreen-ui/toggle";
-import { Label } from "@leafygreen-ui/typography";
-import { Skeleton } from "antd";
-import Cookies from "js-cookie";
-import { size } from "@evg-ui/lib/constants/tokens";
-import { usePreferencesAnalytics } from "analytics";
+import { ParagraphSkeleton } from "@leafygreen-ui/skeleton-loader";
 import { SettingsCard } from "components/SettingsCard";
-import { DISABLE_QUERY_POLLING } from "constants/cookies";
-import { useToastContext } from "context/toast";
-import {
-  UpdateUserSettingsMutation,
-  UpdateUserSettingsMutationVariables,
-} from "gql/generated/types";
-import { UPDATE_USER_SETTINGS } from "gql/mutations";
-import { useUserSettings } from "hooks";
+import { useAdminBetaFeatures, useUserBetaFeatures } from "hooks";
+import { BetaFeatureSettings } from "./newUITab/BetaFeatures";
+import { PreferenceToggles } from "./newUITab/PreferenceToggles";
 
 export const NewUITab: React.FC = () => {
-  const { sendEvent } = usePreferencesAnalytics();
-  const { loading, userSettings } = useUserSettings();
-  const { spruceV1 } = userSettings?.useSpruceOptions ?? {};
-  const dispatchToast = useToastContext();
-  const [updateUserSettings, { loading: updateLoading }] = useMutation<
-    UpdateUserSettingsMutation,
-    UpdateUserSettingsMutationVariables
-  >(UPDATE_USER_SETTINGS, {
-    onCompleted: () => {
-      dispatchToast.success(`Your changes have successfully been saved.`);
-    },
-    onError: (err) => {
-      dispatchToast.error(`Error while saving settings: '${err.message}'`);
-    },
-  });
-
-  if (loading) {
-    return <Skeleton active />;
-  }
-
-  const handleOnChangeNewUI = (c: boolean) => {
-    sendEvent({
-      name: "Toggled spruce",
-      value: c ? "Enabled" : "Disabled",
-    });
-    updateUserSettings({
-      variables: {
-        userSettings: {
-          useSpruceOptions: {
-            spruceV1: c,
-          },
-        },
-      },
-      refetchQueries: ["UserSettings"],
-    });
-  };
-
-  const handleOnChangePolling = () => {
-    const nextState = Cookies.get(DISABLE_QUERY_POLLING) !== "true";
-    sendEvent({
-      name: "Toggled polling",
-      value: nextState ? "Enabled" : "Disabled",
-    });
-    Cookies.set(DISABLE_QUERY_POLLING, nextState.toString());
-    window.location.reload();
-  };
+  const { userBetaSettings } = useUserBetaFeatures();
+  const { adminBetaSettings } = useAdminBetaFeatures();
 
   return (
-    <SettingsCard>
-      <PreferenceItem>
-        <Toggle
-          aria-label="Toggle new evergreen ui"
-          // @ts-expect-error: FIXME. This comment was added by an automated script.
-          checked={spruceV1}
-          disabled={updateLoading}
-          id="prefer-spruce"
-          onChange={handleOnChangeNewUI}
-          size="small"
-        />
-        <Label htmlFor="prefer-spruce">
-          Direct all inbound links to the new Evergreen UI, whenever possible
-          (e.g. from the CLI, GitHub, etc.).
-        </Label>
-      </PreferenceItem>
-      <PreferenceItem>
-        <Toggle
-          aria-label="Toggle background polling"
-          checked={Cookies.get(DISABLE_QUERY_POLLING) !== "true"}
-          id="polling"
-          onChange={handleOnChangePolling}
-          size="small"
-        />
-        <Label htmlFor="polling">
-          Allow background polling for active tabs in the current browser.
-        </Label>
-      </PreferenceItem>
-    </SettingsCard>
+    <>
+      <SettingsCard>
+        <PreferenceToggles />
+      </SettingsCard>
+      <SettingsCard>
+        {userBetaSettings && adminBetaSettings ? (
+          <BetaFeatureSettings
+            adminBetaSettings={adminBetaSettings}
+            userBetaSettings={userBetaSettings}
+          />
+        ) : (
+          <ParagraphSkeleton />
+        )}
+      </SettingsCard>
+    </>
   );
 };
-
-const PreferenceItem = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${size.xs};
-
-  :not(:last-of-type) {
-    margin-bottom: ${size.s};
-  }
-`;
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/NotificationsTab.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/NotificationsTab.tsx
index 10562f989..cc42cd0d1 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/NotificationsTab.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/NotificationsTab.tsx
@@ -42,7 +42,7 @@ export const NotificationsTab: React.FC = () => {
     UpdateUserSettingsMutationVariables
   >(UPDATE_USER_SETTINGS, {
     onCompleted: () => {
-      dispatchToast.success(`Your changes have successfully been saved.`);
+      dispatchToast.success("Your changes have been saved.");
     },
     onError: (err) => {
       dispatchToast.error(`Error while saving settings: '${err.message}'`);
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/ProfileTab.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/ProfileTab.tsx
index 14685ca3c..5a455acc1 100644
--- a/apps/spruce/src/pages/preferences/preferencesTabs/ProfileTab.tsx
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/ProfileTab.tsx
@@ -1,211 +1,23 @@
-import { useEffect, useState } from "react";
-import { useMutation, useQuery } from "@apollo/client";
-import styled from "@emotion/styled";
-import Button, { Variant } from "@leafygreen-ui/button";
-import { Skeleton } from "antd";
-import { usePreferencesAnalytics } from "analytics";
+import { useQuery } from "@apollo/client";
+import { ParagraphSkeleton } from "@leafygreen-ui/skeleton-loader";
 import { SettingsCard } from "components/SettingsCard";
-import { SpruceForm } from "components/SpruceForm";
-import { listOfDateFormatStrings, timeZones, TimeFormat } from "constants/time";
-import { useToastContext } from "context/toast";
-import {
-  UpdateUserSettingsMutation,
-  UpdateUserSettingsMutationVariables,
-  AwsRegionsQuery,
-} from "gql/generated/types";
-import { UPDATE_USER_SETTINGS } from "gql/mutations";
+import { AwsRegionsQuery } from "gql/generated/types";
 import { AWS_REGIONS } from "gql/queries";
 import { useUserSettings } from "hooks";
-import { getDateCopy, omitTypename } from "utils/string";
-
-const dateFormats = listOfDateFormatStrings.map((format) => ({
-  value: format,
-  str: `${format} - ${getDateCopy("08/31/2022", {
-    dateFormat: format,
-    dateOnly: true,
-  })}`,
-}));
+import { Settings } from "./profileTab/Settings";
 
 export const ProfileTab: React.FC = () => {
-  const { sendEvent } = usePreferencesAnalytics();
-  const dispatchToast = useToastContext();
-
-  const { loading, userSettings } = useUserSettings();
-  const {
-    dateFormat,
-    githubUser,
-    region,
-    timeFormat: dbTimeFormat,
-    timezone,
-  } = userSettings ?? {};
-  const lastKnownAs = githubUser?.lastKnownAs || "";
-  const timeFormat = dbTimeFormat || TimeFormat.TwelveHour;
-
-  const { data: awsRegionData, loading: awsRegionLoading } =
-    useQuery<AwsRegionsQuery>(AWS_REGIONS);
+  const { userSettings } = useUserSettings();
+  const { data: awsRegionData } = useQuery<AwsRegionsQuery>(AWS_REGIONS);
   const awsRegions = awsRegionData?.awsRegions || [];
 
-  const [updateUserSettings, { loading: updateLoading }] = useMutation<
-    UpdateUserSettingsMutation,
-    UpdateUserSettingsMutationVariables
-  >(UPDATE_USER_SETTINGS, {
-    onCompleted: () => {
-      dispatchToast.success(`Your changes have successfully been saved.`);
-    },
-    onError: (err) => {
-      dispatchToast.error(`Error while saving settings: '${err.message}'`);
-    },
-    refetchQueries: ["UserSettings"],
-  });
-
-  const [hasErrors, setHasErrors] = useState(false);
-  const [formState, setFormState] = useState<{
-    timezone: string;
-    region: string;
-    githubUser: { lastKnownAs?: string };
-    dateFormat: string;
-    timeFormat: string;
-  }>({
-    // @ts-expect-error: FIXME. This comment was added by an automated script.
-    timezone,
-    // @ts-expect-error: FIXME. This comment was added by an automated script.
-    region,
-    githubUser: { lastKnownAs },
-    // @ts-expect-error: FIXME. This comment was added by an automated script.
-    dateFormat,
-    timeFormat,
-  });
-
-  useEffect(() => {
-    setFormState({
-      githubUser: omitTypename(githubUser || {}),
-      // @ts-expect-error: FIXME. This comment was added by an automated script.
-      timezone,
-      // @ts-expect-error: FIXME. This comment was added by an automated script.
-      region,
-      // @ts-expect-error: FIXME. This comment was added by an automated script.
-      dateFormat,
-      timeFormat,
-    });
-  }, [dateFormat, githubUser, region, timeFormat, timezone]);
-
-  const handleSubmit = () => {
-    updateUserSettings({
-      variables: {
-        userSettings: formState,
-      },
-    });
-    sendEvent({
-      name: "Saved profile info",
-    });
-  };
-
-  if (loading || awsRegionLoading) {
-    return <Skeleton active />;
-  }
-
   return (
     <SettingsCard>
-      <ContentWrapper>
-        <SpruceForm
-          formData={formState}
-          onChange={({ errors, formData }) => {
-            setHasErrors(errors.length > 0);
-            setFormState(formData);
-          }}
-          schema={{
-            properties: {
-              githubUser: {
-                // @ts-expect-error: FIXME. This comment was added by an automated script.
-                title: null,
-                properties: {
-                  lastKnownAs: {
-                    type: "string",
-                    title: "GitHub Username",
-                  },
-                },
-              },
-              timezone: {
-                type: "string",
-                title: "Timezone",
-                oneOf: [
-                  ...timeZones.map(({ str, value }) => ({
-                    type: "string" as "string",
-                    title: str,
-                    enum: [value],
-                  })),
-                ],
-              },
-              region: {
-                type: "string",
-                title: "AWS Region",
-                enum: awsRegions,
-              },
-              dateFormat: {
-                type: "string",
-                title: "Date Format",
-                oneOf: [
-                  ...dateFormats.map(({ str, value }) => ({
-                    type: "string" as "string",
-                    title: str,
-                    enum: [value],
-                  })),
-                ],
-              },
-              timeFormat: {
-                type: "string",
-                title: "Time Format",
-                oneOf: [
-                  {
-                    type: "string" as "string",
-                    title: "12-hour clock",
-                    description: "Display time with AM/PM, e.g. 12:34 PM",
-                    enum: [TimeFormat.TwelveHour],
-                  },
-
-                  {
-                    type: "string" as "string",
-                    title: "24-hour clock",
-                    description: "Use 24-hour notation, e.g. 13:34",
-                    enum: [TimeFormat.TwentyFourHour],
-                  },
-                ],
-              },
-            },
-          }}
-          uiSchema={{
-            timezone: {
-              "ui:placeholder": "Select a timezone",
-            },
-            region: {
-              "ui:placeholder": "Select an AWS region",
-            },
-            githubUser: {
-              lastKnownAs: {
-                "ui:placeholder": "Enter your GitHub username",
-              },
-            },
-            dateFormat: {
-              "ui:placeholder": "Select a date format",
-            },
-            timeFormat: {
-              "ui:widget": "radio",
-            },
-          }}
-        />
-        <Button
-          data-cy="save-profile-changes-button"
-          disabled={!hasErrors || updateLoading}
-          onClick={handleSubmit}
-          variant={Variant.Primary}
-        >
-          Save changes
-        </Button>
-      </ContentWrapper>
+      {awsRegions.length && userSettings ? (
+        <Settings awsRegions={awsRegions} userSettings={userSettings} />
+      ) : (
+        <ParagraphSkeleton />
+      )}
     </SettingsCard>
   );
 };
-
-const ContentWrapper = styled.div`
-  width: 50%;
-`;
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/newUITab/BetaFeatures.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/newUITab/BetaFeatures.tsx
new file mode 100644
index 000000000..dd9cc52a6
--- /dev/null
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/newUITab/BetaFeatures.tsx
@@ -0,0 +1,178 @@
+import { useMemo, useState } from "react";
+import { useMutation } from "@apollo/client";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import Button, { Variant as ButtonVariant } from "@leafygreen-ui/button";
+import { diff } from "deep-object-diff";
+import { size } from "@evg-ui/lib/constants/tokens";
+import { usePreferencesAnalytics } from "analytics";
+import { SpruceForm } from "components/SpruceForm";
+import { useToastContext } from "context/toast";
+import {
+  BetaFeatures,
+  UpdateUserBetaFeaturesMutation,
+  UpdateUserBetaFeaturesMutationVariables,
+} from "gql/generated/types";
+import { UPDATE_USER_BETA_FEATURES } from "gql/mutations";
+
+type FormState = {
+  betaFeatures: BetaFeatures;
+};
+
+type BetaFeatureSettingsProps = {
+  userBetaSettings: BetaFeatures;
+  adminBetaSettings: BetaFeatures;
+};
+
+export const BetaFeatureSettings: React.FC<BetaFeatureSettingsProps> = ({
+  adminBetaSettings,
+  userBetaSettings,
+}) => {
+  const { sendEvent } = usePreferencesAnalytics();
+  const dispatchToast = useToastContext();
+
+  const [updateBetaFeatures] = useMutation<
+    UpdateUserBetaFeaturesMutation,
+    UpdateUserBetaFeaturesMutationVariables
+  >(UPDATE_USER_BETA_FEATURES, {
+    onCompleted: () => {
+      dispatchToast.success("Your changes have been saved.");
+    },
+    onError: (err) => {
+      dispatchToast.error(
+        `Error while saving beta feature settings: ${err.message}`,
+      );
+    },
+    refetchQueries: ["UserBetaFeatures"],
+  });
+
+  const initialState = useMemo(
+    () => ({ betaFeatures: userBetaSettings }),
+    [userBetaSettings],
+  );
+  const [formState, setFormState] = useState<FormState>(initialState);
+
+  const hasChanges = useMemo(() => {
+    const changes = diff(initialState, formState);
+    return Object.entries(changes).length > 0;
+  }, [initialState, formState]);
+
+  const handleSubmit = () => {
+    updateBetaFeatures({
+      variables: {
+        opts: {
+          betaFeatures: formState.betaFeatures,
+        },
+      },
+    });
+    sendEvent({
+      name: "Saved beta feature settings",
+    });
+  };
+
+  const hasActiveBetaFeatures = adminBetaSettings
+    ? Object.values(adminBetaSettings).filter((v) => v === true).length > 0
+    : false;
+
+  return (
+    <ContentWrapper>
+      <SpruceForm
+        formData={formState}
+        onChange={({ formData }) => {
+          setFormState(formData);
+        }}
+        schema={{
+          properties: {
+            betaFeatures: {
+              title: "Beta Features",
+              type: "object" as "object",
+              properties: {
+                spruceWaterfallEnabled: radioSchema({
+                  title: "Use new Spruce waterfall",
+                }),
+              },
+            },
+          },
+        }}
+        uiSchema={{
+          betaFeatures: {
+            "ui:description": (
+              <DescriptionWrapper>
+                <span>
+                  Enable beta features to get an early look at upcoming UI
+                  changes.
+                </span>
+                {hasActiveBetaFeatures ? (
+                  ""
+                ) : (
+                  <span>No beta experiments are active right now.</span>
+                )}
+              </DescriptionWrapper>
+            ),
+            spruceWaterfallEnabled: radioUiSchema({
+              dataCy: "spruce-waterfall-enabled",
+              isAdminEnabled: adminBetaSettings.spruceWaterfallEnabled,
+            }),
+          },
+        }}
+      />
+      <Button
+        data-cy="save-beta-features-button"
+        disabled={!hasChanges}
+        onClick={handleSubmit}
+        variant={ButtonVariant.Primary}
+      >
+        Save changes
+      </Button>
+    </ContentWrapper>
+  );
+};
+
+const radioSchema = ({ title }: { title: string }) => ({
+  type: "boolean" as "boolean",
+  title,
+  default: false,
+  oneOf: [
+    {
+      type: "boolean" as "boolean",
+      title: "Enabled",
+      enum: [true],
+    },
+    {
+      type: "boolean" as "boolean",
+      title: "Disabled",
+      enum: [false],
+    },
+  ],
+});
+
+const radioUiSchema = ({
+  dataCy,
+  isAdminEnabled,
+}: {
+  dataCy: string;
+  isAdminEnabled: boolean;
+}) => ({
+  "ui:data-cy": dataCy,
+  "ui:widget": isAdminEnabled ? "radio" : "hidden",
+  "ui:options": {
+    inline: true,
+  },
+  "ui:elementWrapperCSS": css`
+    display: flex;
+    justify-content: space-between;
+    gap: ${size.m};
+    margin-bottom: ${size.s};
+  `,
+});
+
+const DescriptionWrapper = styled.span`
+  display: flex;
+  flex-direction: column;
+  gap: ${size.s};
+  margin-bottom: ${size.s};
+`;
+
+const ContentWrapper = styled.div`
+  width: 70%;
+`;
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/newUITab/PreferenceToggles.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/newUITab/PreferenceToggles.tsx
new file mode 100644
index 000000000..d02d39d9c
--- /dev/null
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/newUITab/PreferenceToggles.tsx
@@ -0,0 +1,106 @@
+import { useMutation } from "@apollo/client";
+import styled from "@emotion/styled";
+import { ParagraphSkeleton } from "@leafygreen-ui/skeleton-loader";
+import Toggle, { Size as ToggleSize } from "@leafygreen-ui/toggle";
+import { Label } from "@leafygreen-ui/typography";
+import Cookies from "js-cookie";
+import { size } from "@evg-ui/lib/constants/tokens";
+import { usePreferencesAnalytics } from "analytics";
+import { DISABLE_QUERY_POLLING } from "constants/cookies";
+import { useToastContext } from "context/toast";
+import {
+  UpdateUserSettingsMutation,
+  UpdateUserSettingsMutationVariables,
+} from "gql/generated/types";
+import { UPDATE_USER_SETTINGS } from "gql/mutations";
+import { useUserSettings } from "hooks";
+
+export const PreferenceToggles: React.FC = () => {
+  const { sendEvent } = usePreferencesAnalytics();
+  const dispatchToast = useToastContext();
+
+  const { loading, userSettings } = useUserSettings();
+  const { spruceV1 } = userSettings?.useSpruceOptions ?? {};
+
+  const [updateUserSettings, { loading: updateLoading }] = useMutation<
+    UpdateUserSettingsMutation,
+    UpdateUserSettingsMutationVariables
+  >(UPDATE_USER_SETTINGS, {
+    onCompleted: () => {
+      dispatchToast.success("Your changes have been saved.");
+    },
+    onError: (err) => {
+      dispatchToast.error(`Error while saving settings: ${err.message}`);
+    },
+  });
+
+  const handleOnChangeNewUI = (c: boolean) => {
+    sendEvent({
+      name: "Toggled spruce",
+      value: c ? "Enabled" : "Disabled",
+    });
+    updateUserSettings({
+      variables: {
+        userSettings: {
+          useSpruceOptions: {
+            spruceV1: c,
+          },
+        },
+      },
+      refetchQueries: ["UserSettings"],
+    });
+  };
+
+  const handleOnChangePolling = () => {
+    const nextState = Cookies.get(DISABLE_QUERY_POLLING) !== "true";
+    sendEvent({
+      name: "Toggled polling",
+      value: nextState ? "Enabled" : "Disabled",
+    });
+    Cookies.set(DISABLE_QUERY_POLLING, nextState.toString());
+    window.location.reload();
+  };
+
+  return loading ? (
+    <ParagraphSkeleton />
+  ) : (
+    <>
+      <PreferenceItem>
+        <Toggle
+          aria-label="Toggle new Evergreen UI"
+          checked={spruceV1 ?? false}
+          disabled={updateLoading}
+          id="prefer-spruce"
+          onChange={handleOnChangeNewUI}
+          size={ToggleSize.Small}
+        />
+        <Label htmlFor="prefer-spruce">
+          Direct all inbound links to the new Evergreen UI, whenever possible
+          (e.g. from the CLI, GitHub, etc.).
+        </Label>
+      </PreferenceItem>
+      <PreferenceItem>
+        <Toggle
+          aria-label="Toggle background polling"
+          checked={Cookies.get(DISABLE_QUERY_POLLING) !== "true"}
+          id="polling"
+          onChange={handleOnChangePolling}
+          size={ToggleSize.Small}
+        />
+        <Label htmlFor="polling">
+          Allow background polling for active tabs in the current browser.
+        </Label>
+      </PreferenceItem>
+    </>
+  );
+};
+
+const PreferenceItem = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${size.xs};
+
+  :not(:last-of-type) {
+    margin-bottom: ${size.s};
+  }
+`;
diff --git a/apps/spruce/src/pages/preferences/preferencesTabs/profileTab/Settings.tsx b/apps/spruce/src/pages/preferences/preferencesTabs/profileTab/Settings.tsx
new file mode 100644
index 000000000..b1fd84491
--- /dev/null
+++ b/apps/spruce/src/pages/preferences/preferencesTabs/profileTab/Settings.tsx
@@ -0,0 +1,191 @@
+import { useMemo, useState } from "react";
+import { useMutation } from "@apollo/client";
+import styled from "@emotion/styled";
+import Button, { Variant as ButtonVariant } from "@leafygreen-ui/button";
+import { diff } from "deep-object-diff";
+import { usePreferencesAnalytics } from "analytics";
+import { SpruceForm } from "components/SpruceForm";
+import { listOfDateFormatStrings, timeZones, TimeFormat } from "constants/time";
+import { useToastContext } from "context/toast";
+import {
+  UpdateUserSettingsMutation,
+  UpdateUserSettingsMutationVariables,
+  UserSettings,
+} from "gql/generated/types";
+import { UPDATE_USER_SETTINGS } from "gql/mutations";
+import { getDateCopy } from "utils/string";
+
+type FormState = {
+  timezone: string;
+  region: string;
+  githubUser: { lastKnownAs?: string };
+  dateFormat: string;
+  timeFormat: string;
+};
+
+type SettingsProps = {
+  awsRegions: string[];
+  userSettings: UserSettings;
+};
+
+export const Settings: React.FC<SettingsProps> = ({
+  awsRegions,
+  userSettings,
+}) => {
+  const { sendEvent } = usePreferencesAnalytics();
+  const dispatchToast = useToastContext();
+
+  const [updateUserSettings] = useMutation<
+    UpdateUserSettingsMutation,
+    UpdateUserSettingsMutationVariables
+  >(UPDATE_USER_SETTINGS, {
+    onCompleted: () => {
+      dispatchToast.success("Your changes have been saved.");
+    },
+    onError: (err) => {
+      dispatchToast.error(`Error while saving settings: ${err.message}`);
+    },
+    refetchQueries: ["UserSettings"],
+  });
+
+  const initialState = useMemo(
+    () => ({
+      timezone: userSettings?.timezone ?? "",
+      region: userSettings?.region ?? "",
+      githubUser: { lastKnownAs: userSettings?.githubUser?.lastKnownAs || "" },
+      dateFormat: userSettings?.dateFormat ?? "",
+      timeFormat: userSettings?.timeFormat || TimeFormat.TwelveHour,
+    }),
+    [userSettings],
+  );
+  const [formState, setFormState] = useState<FormState>(initialState);
+
+  const hasChanges = useMemo(() => {
+    const changes = diff(initialState, formState);
+    return Object.entries(changes).length > 0;
+  }, [initialState, formState]);
+
+  const handleSubmit = () => {
+    updateUserSettings({
+      variables: {
+        userSettings: formState,
+      },
+    });
+    sendEvent({
+      name: "Saved profile info",
+    });
+  };
+
+  return (
+    <ContentWrapper>
+      <SpruceForm
+        formData={formState}
+        onChange={({ formData }) => {
+          setFormState(formData);
+        }}
+        schema={{
+          properties: {
+            githubUser: {
+              title: "",
+              properties: {
+                lastKnownAs: {
+                  type: "string",
+                  title: "GitHub Username",
+                },
+              },
+            },
+            timezone: {
+              type: "string" as "string",
+              title: "Timezone",
+              oneOf: [
+                ...timeZones.map(({ str, value }) => ({
+                  type: "string" as "string",
+                  title: str,
+                  enum: [value],
+                })),
+              ],
+            },
+            region: {
+              type: "string",
+              title: "AWS Region",
+              enum: awsRegions,
+            },
+            dateFormat: {
+              type: "string" as "string",
+              title: "Date Format",
+              oneOf: [
+                ...dateFormats.map(({ str, value }) => ({
+                  type: "string" as "string",
+                  title: str,
+                  enum: [value],
+                })),
+              ],
+            },
+            timeFormat: {
+              type: "string",
+              title: "Time Format",
+              oneOf: [
+                {
+                  type: "string" as "string",
+                  title: "12-hour clock",
+                  description: "Display time with AM/PM, e.g. 12:34 PM",
+                  enum: [TimeFormat.TwelveHour],
+                },
+                {
+                  type: "string" as "string",
+                  title: "24-hour clock",
+                  description: "Use 24-hour notation, e.g. 13:34",
+                  enum: [TimeFormat.TwentyFourHour],
+                },
+              ],
+            },
+          },
+        }}
+        // Ignore select errors because not making a selection is valid for this form.
+        transformErrors={(errors) =>
+          errors.filter((e) => e.name !== "oneOf" && e.name !== "enum")
+        }
+        uiSchema={{
+          timezone: {
+            "ui:placeholder": "Select a timezone",
+          },
+          region: {
+            "ui:placeholder": "Select an AWS region",
+          },
+          githubUser: {
+            lastKnownAs: {
+              "ui:placeholder": "Enter your GitHub username",
+            },
+          },
+          dateFormat: {
+            "ui:placeholder": "Select a date format",
+            "ui:hideError": true,
+          },
+          timeFormat: {
+            "ui:widget": "radio",
+          },
+        }}
+      />
+      <Button
+        data-cy="save-profile-changes-button"
+        disabled={!hasChanges}
+        onClick={handleSubmit}
+        variant={ButtonVariant.Primary}
+      >
+        Save changes
+      </Button>
+    </ContentWrapper>
+  );
+};
+
+const dateFormats = listOfDateFormatStrings.map((format) => ({
+  value: format,
+  str: `${format} - ${getDateCopy("08/31/2022", {
+    dateFormat: format,
+    dateOnly: true,
+  })}`,
+}));
+
+const ContentWrapper = styled.div`
+  max-width: 60%;
+`;