chore: add setting to enable multi-organization ui (#13266)

site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx

@@ -1,6 +1,8 @@
-import type { FC } from "react";
+import Button from "@mui/material/Button";
+import { type FC, useEffect, useState } from "react";
 import { useQuery } from "react-query";
 import { groupsForUser } from "api/queries/groups";
+import { DisabledBadge, EnabledBadge } from "components/Badges/Badges";
 import { Stack } from "components/Stack/Stack";
 import { useAuthContext } from "contexts/auth/AuthProvider";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
@@ -13,7 +15,7 @@ export const AccountPage: FC = () => {
   const { user: me, permissions, organizationId } = useAuthenticated();
   const { updateProfile, updateProfileError, isUpdatingProfile } =
     useAuthContext();
-  const { entitlements } = useDashboard();
+  const { entitlements, experiments } = useDashboard();
 
   const hasGroupsFeature = entitlements.features.user_role_management.enabled;
   const groupsQuery = useQuery({
@@ -21,6 +23,21 @@ export const AccountPage: FC = () => {
     enabled: hasGroupsFeature,
   });
 
+  const multiOrgExperimentEnabled = experiments.includes("multi-organization");
+  const [multiOrgUiEnabled, setMultiOrgUiEnabled] = useState(
+    () =>
+      multiOrgExperimentEnabled &&
+      Boolean(localStorage.getItem("enableMultiOrganizationUi")),
+  );
+
+  useEffect(() => {
+    if (multiOrgUiEnabled) {
+      localStorage.setItem("enableMultiOrganizationUi", "true");
+    } else {
+      localStorage.removeItem("enableMultiOrganizationUi");
+    }
+  }, [multiOrgUiEnabled]);
+
   return (
     <Stack spacing={6}>
       <Section title="Account" description="Update your account info">
@@ -41,6 +58,23 @@ export const AccountPage: FC = () => {
           error={groupsQuery.error}
         />
       )}
+
+      {multiOrgExperimentEnabled && (
+        <Section
+          title="Organizations"
+          description={
+            <span>Danger: enabling will break things in the UI.</span>
+          }
+        >
+          <Stack>
+            {multiOrgUiEnabled ? <EnabledBadge /> : <DisabledBadge />}
+            <Button onClick={() => setMultiOrgUiEnabled((enabled) => !enabled)}>
+              {multiOrgUiEnabled ? "Disable" : "Enable"} frontend
+              multi-organization support
+            </Button>
+          </Stack>
+        </Section>
+      )}
     </Stack>
   );
 };