add featureSwitchRefactor flag

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentSwitch.tsx

@@ -4,8 +4,7 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { styled } from '@mui/material';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { FeatureOverviewSidePanelEnvironmentHider } from './FeatureOverviewSidePanelEnvironmentHider';
-import { FeatureToggleSwitch } from 'component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch';
+import { FeatureToggleSwitch } from 'component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/LegacyFeatureToggleSwitch';
-import { useMemo } from 'react';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     marginLeft: theme.spacing(-1.5),
@@ -59,20 +58,6 @@ export const FeatureOverviewSidePanelEnvironmentSwitch = ({
         if (callback) callback();
     };
 
-    const featureEnvironment = feature?.environments?.find(
-        (env) => env.name === environment.name,
-    );
-
-    const hasStrategies =
-        featureEnvironment?.strategies &&
-        featureEnvironment?.strategies?.length > 0;
-
-    const hasEnabledStrategies =
-        hasStrategies &&
-        featureEnvironment?.strategies?.some(
-            (strategy) => strategy.disabled !== true,
-        );
-
     return (
         <StyledContainer>
             <StyledLabel>
@@ -80,12 +65,9 @@ export const FeatureOverviewSidePanelEnvironmentSwitch = ({
                     featureId={feature.name}
                     projectId={projectId}
                     environmentName={environment.name}
-                    type={featureEnvironment?.type || ''}
                     onToggle={handleToggle}
                     onError={showInfoBox}
                     value={enabled}
-                    hasStrategies={hasStrategies}
-                    hasEnabledStrategies={hasEnabledStrategies}
                 />
                 {children ?? defaultContent}
             </StyledLabel>

frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/LegacyFeatureToggleSwitch.tsx

@@ -39,7 +39,7 @@ interface IFeatureToggleSwitchProps {
 }
 
 /**
- * @deprecated
+ * @deprecated remove when flag `featureSwitchRefactor` is removed
  */
 export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
     projectId,

frontend/src/component/project/Project/ProjectFeatureToggles/LegacyProjectFeatureToggles.tsx

@@ -112,7 +112,7 @@ const defaultSort: SortingRule<string> & {
 } = { id: 'createdAt' };
 
 /**
- * @deprecated
+ * @deprecated remove when flag `featureSwitchRefactor` is removed
  */
 export const ProjectFeatureToggles = ({
     features,

frontend/src/component/project/Project/ProjectOverview.tsx

@@ -4,11 +4,13 @@ import useProject, {
 } from 'hooks/api/getters/useProject/useProject';
 import { Box, styled } from '@mui/material';
 import { ProjectFeatureToggles as LegacyProjectFeatureToggles } from './ProjectFeatureToggles/LegacyProjectFeatureToggles';
+import { ProjectFeatureToggles } from './ProjectFeatureToggles/ProjectFeatureToggles';
 import ProjectInfo from './ProjectInfo/ProjectInfo';
 import { usePageTitle } from 'hooks/usePageTitle';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useLastViewedProject } from 'hooks/useLastViewedProject';
 import { ProjectStats } from './ProjectStats/ProjectStats';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 const refreshInterval = 15 * 1000;
 
@@ -59,11 +61,24 @@ const ProjectOverview = () => {
             <StyledContentContainer>
                 <ProjectStats stats={project.stats} />
                 <StyledProjectToggles>
-                    <LegacyProjectFeatureToggles
+                    <ConditionallyRender
-                        key={loading ? 'loading' : 'ready'}
+                        condition={true}
-                        features={features}
+                        show={() => (
-                        environments={environments}
+                            <ProjectFeatureToggles
-                        loading={loading}
+                                key={loading ? 'loading' : 'ready'}
+                                features={features}
+                                environments={environments}
+                                loading={loading}
+                            />
+                        )}
+                        elseShow={() => (
+                            <LegacyProjectFeatureToggles
+                                key={loading ? 'loading' : 'ready'}
+                                features={features}
+                                environments={environments}
+                                loading={loading}
+                            />
+                        )}
                     />
                 </StyledProjectToggles>
             </StyledContentContainer>

frontend/src/interfaces/uiConfig.ts

@@ -72,6 +72,7 @@ export type UiFlags = {
     internalMessageBanners?: boolean;
     disableEnvsOnRevive?: boolean;
     playgroundImprovements?: boolean;
+    featureSwitchRefactor?: boolean;
 };
 
 export interface IVersionInfo {

src/lib/features/feature-toggle/feature-toggle-strategies-store.ts

@@ -601,15 +601,17 @@ class FeatureStrategiesStore implements IFeatureStrategiesStore {
             ];
         }
 
-        selectColumns = [
+        if (this.flagResolver.isEnabled('featureSwitchRefactor')) {
-            ...selectColumns,
+            selectColumns = [
-            this.db.raw(
+                ...selectColumns,
-                'EXISTS (SELECT 1 FROM feature_strategies WHERE feature_strategies.feature_name = features.name AND feature_strategies.environment = feature_environments.environment) as has_strategies',
+                this.db.raw(
-            ),
+                    'EXISTS (SELECT 1 FROM feature_strategies WHERE feature_strategies.feature_name = features.name AND feature_strategies.environment = feature_environments.environment) as has_strategies',
-            this.db.raw(
+                ),
-                'EXISTS (SELECT 1 FROM feature_strategies WHERE feature_strategies.feature_name = features.name AND feature_strategies.environment = feature_environments.environment AND (feature_strategies.disabled IS NULL OR feature_strategies.disabled = false)) as has_enabled_strategies',
+                this.db.raw(
-            ),
+                    'EXISTS (SELECT 1 FROM feature_strategies WHERE feature_strategies.feature_name = features.name AND feature_strategies.environment = feature_environments.environment AND (feature_strategies.disabled IS NULL OR feature_strategies.disabled = false)) as has_enabled_strategies',
-        ];
+                ),
+            ];
+        }
 
         query = query.select(selectColumns);
         const rows = await query;

src/lib/types/experimental.ts

@@ -38,7 +38,8 @@ export type IFlagKey =
     | 'internalMessageBanner'
     | 'separateAdminClientApi'
     | 'disableEnvsOnRevive'
-    | 'playgroundImprovements';
+    | 'playgroundImprovements'
+    | 'featureSwitchRefactor';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -178,6 +179,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_PLAYGROUND_IMPROVEMENTS,
         false,
     ),
+    featureSwitchRefactor: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_FEATURE_SWITCH_REFACTOR,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {

src/lib/types/model.ts

@@ -194,8 +194,8 @@ export interface IEnvironmentBase {
 
 export interface IEnvironmentOverview extends IEnvironmentBase {
     variantCount: number;
-    hasStrategies: boolean;
+    hasStrategies?: boolean;
-    hasEnabledStrategies: boolean;
+    hasEnabledStrategies?: boolean;
 }
 
 export interface IFeatureOverview {

src/server-dev.ts

@@ -49,6 +49,7 @@ process.nextTick(async () => {
                         useLastSeenRefactor: true,
                         separateAdminClientApi: true,
                         playgroundImprovements: true,
+                        featureSwitchRefactor: true,
                     },
                 },
                 authentication: {