diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx index da461e6193c28..38bac36ef6ed4 100644 --- a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx +++ b/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 (
@@ -41,6 +58,23 @@ export const AccountPage: FC = () => { error={groupsQuery.error} /> )} + + {multiOrgExperimentEnabled && ( +
Danger: enabling will break things in the UI. + } + > + + {multiOrgUiEnabled ? : } + + +
+ )} ); };