adding new flag and refactor flag type

Author: selfcontained

components/dashboard/src/contexts/FeatureFlagContext.tsx

@@ -4,7 +4,7 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import React, { createContext, useContext, useState, useEffect } from "react";
+import React, { createContext, useContext, useState, useEffect, useMemo } from "react";
 import { getExperimentsClient } from "../experiments/client";
 import { ProjectContext } from "../projects/project-context";
 import { useCurrentTeam, useTeams } from "../teams/teams-context";
@@ -14,16 +14,11 @@ interface FeatureFlagConfig {
     [flagName: string]: { defaultValue: boolean; setter: React.Dispatch<React.SetStateAction<boolean>> };
 }
 
-const FeatureFlagContext = createContext<{
-    startWithOptions: boolean;
-    showUsageView: boolean;
-    isUsageBasedBillingEnabled: boolean;
-    showUseLastSuccessfulPrebuild: boolean;
-    usePublicApiWorkspacesService: boolean;
-    enablePersonalAccessTokens: boolean;
-    oidcServiceEnabled: boolean;
-    orgGitAuthProviders: boolean;
-}>({
+type FeatureFlagsType = {
+    [k in keyof typeof defaultFeatureFlags]: boolean;
+};
+
+const defaultFeatureFlags = {
     startWithOptions: false,
     showUsageView: false,
     isUsageBasedBillingEnabled: false,
@@ -32,7 +27,10 @@ const FeatureFlagContext = createContext<{
     enablePersonalAccessTokens: false,
     oidcServiceEnabled: false,
     orgGitAuthProviders: false,
-});
+    newSignupFlow: false,
+};
+
+const FeatureFlagContext = createContext<FeatureFlagsType>(defaultFeatureFlags);
 
 const FeatureFlagContextProvider: React.FC = ({ children }) => {
     const { user } = useContext(UserContext);
@@ -47,6 +45,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
     const [usePublicApiWorkspacesService, setUsePublicApiWorkspacesService] = useState<boolean>(false);
     const [oidcServiceEnabled, setOidcServiceEnabled] = useState<boolean>(false);
     const [orgGitAuthProviders, setOrgGitAuthProviders] = useState<boolean>(false);
+    const [newSignupFlow, setNewSignupFlow] = useState<boolean>(false);
 
     useEffect(() => {
         if (!user) return;
@@ -63,6 +62,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
                 },
                 oidcServiceEnabled: { defaultValue: false, setter: setOidcServiceEnabled },
                 orgGitAuthProviders: { defaultValue: false, setter: setOrgGitAuthProviders },
+                newSignupFlow: { defaultValue: false, setter: setNewSignupFlow },
             };
 
             for (const [flagName, config] of Object.entries(featureFlags)) {
@@ -99,22 +99,31 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
         })();
     }, [user, teams, team, project]);
 
-    return (
-        <FeatureFlagContext.Provider
-            value={{
-                startWithOptions,
-                showUsageView,
-                isUsageBasedBillingEnabled,
-                showUseLastSuccessfulPrebuild,
-                enablePersonalAccessTokens,
-                usePublicApiWorkspacesService,
-                oidcServiceEnabled,
-                orgGitAuthProviders,
-            }}
-        >
-            {children}
-        </FeatureFlagContext.Provider>
-    );
+    const flags = useMemo(() => {
+        return {
+            startWithOptions,
+            showUsageView,
+            isUsageBasedBillingEnabled,
+            showUseLastSuccessfulPrebuild,
+            enablePersonalAccessTokens,
+            usePublicApiWorkspacesService,
+            oidcServiceEnabled,
+            orgGitAuthProviders,
+            newSignupFlow,
+        };
+    }, [
+        enablePersonalAccessTokens,
+        isUsageBasedBillingEnabled,
+        newSignupFlow,
+        oidcServiceEnabled,
+        orgGitAuthProviders,
+        showUsageView,
+        showUseLastSuccessfulPrebuild,
+        startWithOptions,
+        usePublicApiWorkspacesService,
+    ]);
+
+    return <FeatureFlagContext.Provider value={flags}>{children}</FeatureFlagContext.Provider>;
 };
 
 export { FeatureFlagContext, FeatureFlagContextProvider };