Move workspace classes feature flag into context

Author: Andrew Farries

components/dashboard/src/contexts/FeatureFlagContext.tsx

@@ -11,8 +11,9 @@ import { ProjectContext } from "../projects/project-context";
 import { getCurrentTeam, TeamsContext } from "../teams/teams-context";
 import { UserContext } from "../user-context";
 
-const FeatureFlagContext = createContext<{ showUsageBasedPricingUI: boolean }>({
+const FeatureFlagContext = createContext<{ showUsageBasedPricingUI: boolean; showWorkspaceClassesUI: boolean }>({
     showUsageBasedPricingUI: false,
+    showWorkspaceClassesUI: false,
 });
 
 const FeatureFlagContextProvider: React.FC = ({ children }) => {
@@ -22,6 +23,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
     const [showUsageBasedPricingUI, setShowUsageBasedPricingUI] = useState<boolean>(false);
+    const [showWorkspaceClassesUI, setShowWorkspaceClassesUI] = useState<boolean>(false);
 
     useEffect(() => {
         if (!user) {
@@ -40,10 +42,19 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
                 },
             );
             setShowUsageBasedPricingUI(isUsageBasedBillingEnabled);
+
+            const showWorkspaceClasses = await getExperimentsClient().getValueAsync("workspace_classes", true, {
+                user,
+            });
+            setShowWorkspaceClassesUI(showWorkspaceClasses);
         })();
     }, [user, teams, team, project]);
 
-    return <FeatureFlagContext.Provider value={{ showUsageBasedPricingUI }}>{children}</FeatureFlagContext.Provider>;
+    return (
+        <FeatureFlagContext.Provider value={{ showUsageBasedPricingUI, showWorkspaceClassesUI }}>
+            {children}
+        </FeatureFlagContext.Provider>
+    );
 };
 
 export { FeatureFlagContext, FeatureFlagContextProvider };

components/dashboard/src/settings/Preferences.tsx

@@ -11,15 +11,16 @@ import { ThemeContext } from "../theme-context";
 import { UserContext } from "../user-context";
 import { trackEvent } from "../Analytics";
 import SelectIDE from "./SelectIDE";
-import { getExperimentsClient } from "../experiments/client";
 import SelectWorkspaceClass from "./selectClass";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
+import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
 
 type Theme = "light" | "dark" | "system";
 
 export default function Preferences() {
     const { user } = useContext(UserContext);
     const { setIsDark } = useContext(ThemeContext);
+    const { showWorkspaceClassesUI } = useContext(FeatureFlagContext);
 
     const [theme, setTheme] = useState<Theme>(localStorage.theme || "system");
     const actuallySetTheme = (theme: Theme) => {
@@ -49,24 +50,13 @@ export default function Preferences() {
         }
     };
 
-    const [isShowWorkspaceClasses, setIsShowWorkspaceClasses] = useState<boolean>(false);
-    (async () => {
-        if (!user) {
-            return;
-        }
-        const showWorkspaceClasses = await getExperimentsClient().getValueAsync("workspace_classes", true, {
-            user,
-        });
-        setIsShowWorkspaceClasses(showWorkspaceClasses);
-    })();
-
     return (
         <div>
             <PageWithSettingsSubMenu title="Preferences" subtitle="Configure user preferences.">
                 <h3>Editor</h3>
                 <p className="text-base text-gray-500 dark:text-gray-400">Choose the editor for opening workspaces.</p>
                 <SelectIDE location="preferences" />
-                <SelectWorkspaceClass enabled={isShowWorkspaceClasses} />
+                <SelectWorkspaceClass enabled={showWorkspaceClassesUI} />
                 <h3 className="mt-12">Theme</h3>
                 <p className="text-base text-gray-500 dark:text-gray-400">Early bird or night owl? Choose your side.</p>
                 <div className="mt-4 space-x-3 flex">