From c7b1889537d6f3ae226ab9617dc29dde887114bd Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Mon, 13 May 2024 18:49:02 +0000
Subject: [PATCH 1/2] chore: add setting to enabled multi-organization ui

---
 .../AccountPage/AccountPage.tsx               | 38 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
index da461e6193c28..1ccf475987834 100644
--- a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
+++ b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
@@ -1,4 +1,5 @@
-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 { Stack } from "components/Stack/Stack";
@@ -8,12 +9,13 @@ import { useDashboard } from "modules/dashboard/useDashboard";
 import { Section } from "../Section";
 import { AccountForm } from "./AccountForm";
 import { AccountUserGroups } from "./AccountUserGroups";
+import { DisabledBadge, EnabledBadge } from "components/Badges/Badges";
 
 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>
   );
 };

From 45545c4bbe83e57fc5a0a0c67eb4406b9d69311c Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Mon, 13 May 2024 19:12:13 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=A7=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
index 1ccf475987834..38bac36ef6ed4 100644
--- a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
+++ b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
@@ -2,6 +2,7 @@ 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";
@@ -9,7 +10,6 @@ import { useDashboard } from "modules/dashboard/useDashboard";
 import { Section } from "../Section";
 import { AccountForm } from "./AccountForm";
 import { AccountUserGroups } from "./AccountUserGroups";
-import { DisabledBadge, EnabledBadge } from "components/Badges/Badges";
 
 export const AccountPage: FC = () => {
   const { user: me, permissions, organizationId } = useAuthenticated();