feat: change requests UI for activate disabled strategies (#3787)

<!-- Thanks for creating a PR! To make it easier for reviewers and
everyone else to understand what your changes relate to, please add some
relevant content to the headings below. Feel free to ignore or delete
sections that you don't think are relevant. Thank you! ❤️ -->
Change request UI fix for `shouldActivateDisabledStrategies`
## About the changes
<!-- Describe the changes introduced. What are they and why are they
being introduced? Feel free to also add screenshots or steps to view the
changes if they're visual. -->

<!-- Does it close an issue? Multiple? -->
Closes #

<!-- (For internal contributors): Does it relate to an issue on public
roadmap? -->
<!--
Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#
-->

### Important files
<!-- PRs can contain a lot of changes, but not all changes are equally
important. Where should a reviewer start looking to get an overview of
the changes? Are any files particularly important? -->


## Discussion points
<!-- Anything about the PR you'd like to discuss before it gets merged?
Got any questions or doubts? -->

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

frontend/cypress/integration/import/import.spec.ts

@@ -120,8 +120,8 @@ describe('imports', () => {
         cy.get(
             "[data-testid='feature-toggle-status'] input[type='checkbox']:checked"
         )
-            .closest('div')
+            .invoke('attr', 'aria-label')
-            .contains('development');
+            .should('eq', 'development');
         cy.contains('50%');
     });
 });

frontend/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx

@@ -86,8 +86,6 @@ export const StrategyTooltipLink: FC<IStrategyTooltipLinkProps> = ({
                     <Truncated>
                         <Typography component="s" color="text.secondary">
                             {previousTitle}
-                            PREVIOUS consectetur adipiscing elit, sed do eiusmod
-                            tempor incididunt ut labore et dolore magna aliqua.
                         </Typography>{' '}
                     </Truncated>
                 }
@@ -103,9 +101,6 @@ export const StrategyTooltipLink: FC<IStrategyTooltipLinkProps> = ({
                     <Typography component="span">
                         {change.payload.title ||
                             formatStrategyName(change.payload.name)}
-                        lorem ipsum dolor sit amet, consectetur adipiscing elit,
-                        sed do eiusmod tempor incididunt ut labore et dolore
-                        magna aliqua.
                     </Typography>
                 </TooltipLink>
             </Truncated>

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/MenuStrategyRemove/MenuStrategyRemove.tsx

@@ -20,7 +20,10 @@ import {
     UPDATE_FEATURE_STRATEGY,
 } from '@server/types/permissions';
 import { useHasProjectEnvironmentAccess } from 'hooks/useHasAccess';
-import { STRATEGY_FORM_REMOVE_ID } from 'utils/testIds';
+import {
+    STRATEGY_FORM_REMOVE_ID,
+    STRATEGY_REMOVE_MENU_BTN,
+} from 'utils/testIds';
 
 export interface IRemoveStrategyMenuProps {
     projectId: string;
@@ -74,6 +77,7 @@ const MenuStrategyRemove = ({
                         aria-controls={open ? 'actions-menu' : undefined}
                         aria-haspopup="true"
                         aria-expanded={open ? 'true' : undefined}
+                        data-testid={STRATEGY_REMOVE_MENU_BTN}
                     >
                         <MoreVertIcon sx={{ width: 32, height: 32 }} />
                     </IconButton>

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

@@ -1,21 +1,10 @@
-import { ENVIRONMENT_STRATEGY_ERROR } from 'constants/apiErrors';
-import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
-import useToast from 'hooks/useToast';
 import { IFeatureEnvironment } from 'interfaces/featureToggle';
-import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch';
-import { UPDATE_FEATURE_ENVIRONMENT } from 'component/providers/AccessProvider/permissions';
-import { formatUnknownError } from 'utils/formatUnknownError';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
-import { useChangeRequestToggle } from 'hooks/useChangeRequestToggle';
-import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog';
-import { UpdateEnabledMessage } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage';
-import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { styled } from '@mui/material';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { FeatureOverviewSidePanelEnvironmentHider } from './FeatureOverviewSidePanelEnvironmentHider';
-import { useState } from 'react';
+import { FeatureToggleSwitch } from 'component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch';
-import { EnableEnvironmentDialog } from './EnableEnvironmentDialog';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     marginLeft: theme.spacing(-1.5),
@@ -53,98 +42,7 @@ export const FeatureOverviewSidePanelEnvironmentSwitch = ({
 
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
-    const { toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } =
-        useFeatureApi();
     const { feature, refetchFeature } = useFeature(projectId, featureId);
-    const { setToastData, setToastApiError } = useToast();
-    const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
-    const {
-        onChangeRequestToggle,
-        onChangeRequestToggleClose,
-        onChangeRequestToggleConfirm,
-        changeRequestDialogDetails,
-    } = useChangeRequestToggle(projectId);
-
-    const [showEnabledDialog, setShowEnabledDialog] = useState(false);
-    const disabledStrategiesCount = environment.strategies.filter(
-        strategy => strategy.disabled
-    ).length;
-    const handleToggleEnvironmentOn = async (
-        shouldActivateDisabled = false
-    ) => {
-        try {
-            await toggleFeatureEnvironmentOn(
-                projectId,
-                featureId,
-                name,
-                shouldActivateDisabled
-            );
-            setToastData({
-                type: 'success',
-                title: `Available in ${name}`,
-                text: `${featureId} is now available in ${name} based on its defined strategies.`,
-            });
-            refetchFeature();
-            if (callback) {
-                callback();
-            }
-        } catch (error: unknown) {
-            if (
-                error instanceof Error &&
-                error.message === ENVIRONMENT_STRATEGY_ERROR
-            ) {
-                showInfoBox();
-            } else {
-                setToastApiError(formatUnknownError(error));
-            }
-        }
-    };
-
-    const handleToggleEnvironmentOff = async () => {
-        try {
-            await toggleFeatureEnvironmentOff(projectId, featureId, name);
-            setToastData({
-                type: 'success',
-                title: `Unavailable in ${name}`,
-                text: `${featureId} is unavailable in ${name} and its strategies will no longer have any effect.`,
-            });
-            refetchFeature();
-            if (callback) {
-                callback();
-            }
-        } catch (error: unknown) {
-            setToastApiError(formatUnknownError(error));
-        }
-    };
-
-    const toggleEnvironment = async (e: React.ChangeEvent) => {
-        if (isChangeRequestConfigured(name)) {
-            e.preventDefault();
-            onChangeRequestToggle(featureId, name, !enabled);
-            return;
-        }
-        if (enabled) {
-            await handleToggleEnvironmentOff();
-            return;
-        }
-
-        if (featureHasOnlyDisabledStrategies()) {
-            setShowEnabledDialog(true);
-        } else {
-            await handleToggleEnvironmentOn();
-        }
-    };
-
-    const featureHasOnlyDisabledStrategies = () => {
-        const featureEnvironment = feature?.environments?.find(
-            env => env.name === name
-        );
-        return (
-            featureEnvironment?.strategies &&
-            featureEnvironment?.strategies?.length > 0 &&
-            featureEnvironment?.strategies?.every(strategy => strategy.disabled)
-        );
-    };
 
     const defaultContent = (
         <>
@@ -155,30 +53,21 @@ export const FeatureOverviewSidePanelEnvironmentSwitch = ({
         </>
     );
 
-    const onActivateStrategies = async () => {
+    const handleToggle = () => {
-        await handleToggleEnvironmentOn(true);
+        refetchFeature();
-        setShowEnabledDialog(false);
+        if (callback) callback();
-    };
-
-    const onAddDefaultStrategy = async () => {
-        await handleToggleEnvironmentOn();
-        setShowEnabledDialog(false);
     };
 
     return (
         <StyledContainer>
             <StyledLabel>
-                <PermissionSwitch
+                <FeatureToggleSwitch
-                    tooltip={
+                    featureId={feature.name}
-                        enabled
-                            ? `Disable feature in ${name}`
-                            : `Enable feature in ${name}`
-                    }
-                    permission={UPDATE_FEATURE_ENVIRONMENT}
                     projectId={projectId}
-                    checked={enabled}
+                    environmentName={environment.name}
-                    onChange={toggleEnvironment}
+                    onToggle={() => handleToggle()}
-                    environmentId={name}
+                    showInfoBox={showInfoBox}
+                    value={enabled}
                 />
                 {children ?? defaultContent}
             </StyledLabel>
@@ -187,27 +76,6 @@ export const FeatureOverviewSidePanelEnvironmentSwitch = ({
                 hiddenEnvironments={hiddenEnvironments}
                 setHiddenEnvironments={setHiddenEnvironments}
             />
-            <ChangeRequestDialogue
-                isOpen={changeRequestDialogDetails.isOpen}
-                onClose={onChangeRequestToggleClose}
-                environment={changeRequestDialogDetails?.environment}
-                onConfirm={onChangeRequestToggleConfirm}
-                messageComponent={
-                    <UpdateEnabledMessage
-                        enabled={changeRequestDialogDetails?.enabled!}
-                        featureName={changeRequestDialogDetails?.featureName!}
-                        environment={changeRequestDialogDetails.environment!}
-                    />
-                }
-            />
-            <EnableEnvironmentDialog
-                isOpen={showEnabledDialog}
-                onClose={() => setShowEnabledDialog(false)}
-                environment={name}
-                disabledStrategiesCount={disabledStrategiesCount}
-                onActivateDisabledStrategies={onActivateStrategies}
-                onAddDefaultStrategy={onAddDefaultStrategy}
-            />
         </StyledContainer>
     );
 };

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

@@ -1,9 +1,19 @@
-import { VFC } from 'react';
+import { useState, VFC } from 'react';
 import { Box, styled } from '@mui/material';
 import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch';
 import { UPDATE_FEATURE_ENVIRONMENT } from 'component/providers/AccessProvider/permissions';
 import { useOptimisticUpdate } from './hooks/useOptimisticUpdate';
 import { flexRow } from 'themes/themeStyles';
+import { ENVIRONMENT_STRATEGY_ERROR } from 'constants/apiErrors';
+import { formatUnknownError } from 'utils/formatUnknownError';
+import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
+import useToast from 'hooks/useToast';
+import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
+import { useChangeRequestToggle } from 'hooks/useChangeRequestToggle';
+import { EnableEnvironmentDialog } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/EnableEnvironmentDialog';
+import { UpdateEnabledMessage } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage';
+import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog';
 
 const StyledBoxContainer = styled(Box)<{ 'data-testid': string }>(() => ({
     mx: 'auto',
@@ -11,51 +21,203 @@ const StyledBoxContainer = styled(Box)<{ 'data-testid': string }>(() => ({
 }));
 
 interface IFeatureToggleSwitchProps {
-    featureName: string;
+    featureId: string;
     environmentName: string;
     projectId: string;
     value: boolean;
-    onToggle: (
+    showInfoBox?: () => void;
+    onToggle?: (
         projectId: string,
         feature: string,
         env: string,
         state: boolean
-    ) => Promise<void>;
+    ) => void;
 }
 
 export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
     projectId,
-    featureName,
+    featureId,
     environmentName,
     value,
     onToggle,
+    showInfoBox,
 }) => {
+    const { toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } =
+        useFeatureApi();
+    const { setToastData, setToastApiError } = useToast();
+    const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
+    const {
+        onChangeRequestToggle,
+        onChangeRequestToggleClose,
+        onChangeRequestToggleConfirm,
+        changeRequestDialogDetails,
+    } = useChangeRequestToggle(projectId);
     const [isChecked, setIsChecked, rollbackIsChecked] =
         useOptimisticUpdate<boolean>(value);
 
-    const onClick = () => {
+    const [showEnabledDialog, setShowEnabledDialog] = useState(false);
-        setIsChecked(!isChecked);
+    const { feature } = useFeature(projectId, featureId);
-        onToggle(projectId, featureName, environmentName, !isChecked).catch(
+
-            rollbackIsChecked
+    const disabledStrategiesCount =
+        feature?.environments
+            .find(env => env.name === environmentName)
+            ?.strategies.filter(strategy => strategy.disabled).length ?? 0;
+
+    const callback = () => {
+        onToggle &&
+            onToggle(projectId, feature.name, environmentName, !isChecked);
+    };
+
+    const handleToggleEnvironmentOn = async (
+        shouldActivateDisabled = false
+    ) => {
+        try {
+            setIsChecked(!isChecked);
+            await toggleFeatureEnvironmentOn(
+                projectId,
+                feature.name,
+                environmentName,
+                shouldActivateDisabled
+            );
+            setToastData({
+                type: 'success',
+                title: `Available in ${environmentName}`,
+                text: `${feature.name} is now available in ${environmentName} based on its defined strategies.`,
+            });
+            callback();
+        } catch (error: unknown) {
+            if (
+                error instanceof Error &&
+                error.message === ENVIRONMENT_STRATEGY_ERROR
+            ) {
+                showInfoBox && showInfoBox();
+            } else {
+                setToastApiError(formatUnknownError(error));
+            }
+            rollbackIsChecked();
+        }
+    };
+
+    const handleToggleEnvironmentOff = async () => {
+        try {
+            setIsChecked(!isChecked);
+            await toggleFeatureEnvironmentOff(
+                projectId,
+                feature.name,
+                environmentName
+            );
+            setToastData({
+                type: 'success',
+                title: `Unavailable in ${environmentName}`,
+                text: `${feature.name} is unavailable in ${environmentName} and its strategies will no longer have any effect.`,
+            });
+            callback();
+        } catch (error: unknown) {
+            setToastApiError(formatUnknownError(error));
+            rollbackIsChecked();
+        }
+    };
+
+    const onClick = async (e: React.MouseEvent) => {
+        if (isChangeRequestConfigured(environmentName)) {
+            e.preventDefault();
+            if (featureHasOnlyDisabledStrategies()) {
+                setShowEnabledDialog(true);
+            } else {
+                onChangeRequestToggle(
+                    feature.name,
+                    environmentName,
+                    !value,
+                    false
+                );
+            }
+            return;
+        }
+        if (value) {
+            await handleToggleEnvironmentOff();
+            return;
+        }
+
+        if (featureHasOnlyDisabledStrategies()) {
+            setShowEnabledDialog(true);
+        } else {
+            await handleToggleEnvironmentOn();
+        }
+    };
+
+    const onActivateStrategies = async () => {
+        if (isChangeRequestConfigured(environmentName)) {
+            onChangeRequestToggle(feature.name, environmentName, !value, true);
+        } else {
+            await handleToggleEnvironmentOn(true);
+        }
+        setShowEnabledDialog(false);
+    };
+
+    const onAddDefaultStrategy = async () => {
+        if (isChangeRequestConfigured(environmentName)) {
+            onChangeRequestToggle(feature.name, environmentName, !value, false);
+        } else {
+            await handleToggleEnvironmentOn();
+        }
+        setShowEnabledDialog(false);
+    };
+
+    const featureHasOnlyDisabledStrategies = () => {
+        const featureEnvironment = feature?.environments?.find(
+            env => env.name === environmentName
+        );
+        return (
+            featureEnvironment?.strategies &&
+            featureEnvironment?.strategies?.length > 0 &&
+            featureEnvironment?.strategies?.every(strategy => strategy.disabled)
         );
     };
 
-    const key = `${featureName}-${environmentName}`;
+    const key = `${feature.name}-${environmentName}`;
 
     return (
-        <StyledBoxContainer
+        <>
-            key={key} // Prevent animation when archiving rows
+            <StyledBoxContainer
-            data-testid={`TOGGLE-${key}`}
+                key={key} // Prevent animation when archiving rows
-        >
+                data-testid={`TOGGLE-${key}`}
-            <PermissionSwitch
+            >
-                checked={value}
+                <PermissionSwitch
-                environmentId={environmentName}
+                    tooltip={
-                projectId={projectId}
+                        value
-                permission={UPDATE_FEATURE_ENVIRONMENT}
+                            ? `Disable feature in ${environmentName}`
-                inputProps={{ 'aria-label': environmentName }}
+                            : `Enable feature in ${environmentName}`
-                onClick={onClick}
+                    }
-                disabled={isChecked !== value}
+                    checked={value}
+                    environmentId={environmentName}
+                    projectId={projectId}
+                    permission={UPDATE_FEATURE_ENVIRONMENT}
+                    inputProps={{ 'aria-label': environmentName }}
+                    onClick={onClick}
+                    disabled={isChecked !== value}
+                />
+            </StyledBoxContainer>
+            <EnableEnvironmentDialog
+                isOpen={showEnabledDialog}
+                onClose={() => setShowEnabledDialog(false)}
+                environment={environmentName}
+                disabledStrategiesCount={disabledStrategiesCount}
+                onActivateDisabledStrategies={onActivateStrategies}
+                onAddDefaultStrategy={onAddDefaultStrategy}
             />
-        </StyledBoxContainer>
+            <ChangeRequestDialogue
+                isOpen={changeRequestDialogDetails.isOpen}
+                onClose={onChangeRequestToggleClose}
+                environment={changeRequestDialogDetails?.environment}
+                onConfirm={onChangeRequestToggleConfirm}
+                messageComponent={
+                    <UpdateEnabledMessage
+                        enabled={changeRequestDialogDetails?.enabled!}
+                        featureName={changeRequestDialogDetails?.featureName!}
+                        environment={changeRequestDialogDetails.environment!}
+                    />
+                }
+            />
+        </>
     );
 };

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

@@ -12,8 +12,8 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import {
     SortingRule,
     useFlexLayout,
-    useSortBy,
     useRowSelect,
+    useSortBy,
     useTable,
 } from 'react-table';
 import type { FeatureSchema } from 'openapi';
@@ -28,14 +28,11 @@ import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
 import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
 import { FeatureSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureSeenCell';
 import { FeatureTypeCell } from 'component/common/Table/cells/FeatureTypeCell/FeatureTypeCell';
-import { formatUnknownError } from 'utils/formatUnknownError';
 import { IProject } from 'interfaces/project';
 import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import useProject from 'hooks/api/getters/useProject/useProject';
 import { createLocalStorage } from 'utils/createLocalStorage';
-import useToast from 'hooks/useToast';
-import { ENVIRONMENT_STRATEGY_ERROR } from 'constants/apiErrors';
 import EnvironmentStrategyDialog from 'component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog';
 import { FeatureStaleDialog } from 'component/common/FeatureStaleDialog/FeatureStaleDialog';
 import { FeatureArchiveDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveDialog';
@@ -44,7 +41,6 @@ import { Search } from 'component/common/Search/Search';
 import { useChangeRequestToggle } from 'hooks/useChangeRequestToggle';
 import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog';
 import { UpdateEnabledMessage } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage';
-import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { IFeatureToggleListItem } from 'interfaces/featureToggle';
 import { FavoriteIconHeader } from 'component/common/Table/FavoriteIconHeader/FavoriteIconHeader';
 import { FavoriteIconCell } from 'component/common/Table/cells/FavoriteIconCell/FavoriteIconCell';
@@ -52,7 +48,6 @@ import {
     ProjectEnvironmentType,
     useEnvironmentsRef,
 } from './hooks/useEnvironmentsRef';
-import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import { FeatureToggleSwitch } from './FeatureToggleSwitch/FeatureToggleSwitch';
 import { ActionsCell } from './ActionsCell/ActionsCell';
 import { ColumnsMenu } from './ColumnsMenu/ColumnsMenu';
@@ -146,25 +141,20 @@ export const ProjectFeatureToggles = ({
         useGlobalLocalStorage();
     const navigate = useNavigate();
     const [searchParams, setSearchParams] = useSearchParams();
-    const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
     const environments = useEnvironmentsRef(
         loading
             ? [{ environment: 'a' }, { environment: 'b' }, { environment: 'c' }]
             : newEnvironments
     );
     const { refetch } = useProject(projectId);
-    const { setToastData, setToastApiError } = useToast();
     const { isFavoritesPinned, sortTypes, onChangeIsFavoritePinned } =
         usePinnedFavorites(
             searchParams.has('favorites')
                 ? searchParams.get('favorites') === 'true'
                 : globalStore.favorites
         );
-    const { toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } =
-        useFeatureApi();
     const { favorite, unfavorite } = useFavoriteFeaturesApi();
     const {
-        onChangeRequestToggle,
         onChangeRequestToggleClose,
         onChangeRequestToggleConfirm,
         changeRequestDialogDetails,
@@ -172,60 +162,6 @@ export const ProjectFeatureToggles = ({
     const [showExportDialog, setShowExportDialog] = useState(false);
     const { uiConfig } = useUiConfig();
 
-    const onToggle = useCallback(
-        async (
-            projectId: string,
-            featureName: string,
-            environment: string,
-            enabled: boolean
-        ) => {
-            if (isChangeRequestConfigured(environment)) {
-                onChangeRequestToggle(featureName, environment, enabled);
-                throw new Error('Additional approval required');
-            }
-            try {
-                if (enabled) {
-                    await toggleFeatureEnvironmentOn(
-                        projectId,
-                        featureName,
-                        environment
-                    );
-                } else {
-                    await toggleFeatureEnvironmentOff(
-                        projectId,
-                        featureName,
-                        environment
-                    );
-                }
-                refetch();
-            } catch (error) {
-                const message = formatUnknownError(error);
-                if (message === ENVIRONMENT_STRATEGY_ERROR) {
-                    setStrategiesDialogState({
-                        open: true,
-                        featureId: featureName,
-                        environmentName: environment,
-                    });
-                } else {
-                    setToastApiError(message);
-                }
-                throw error; // caught when reverting optimistic update
-            }
-
-            setToastData({
-                type: 'success',
-                title: 'Updated toggle status',
-                text: 'Successfully updated toggle status.',
-            });
-            refetch();
-        },
-        [
-            toggleFeatureEnvironmentOff,
-            toggleFeatureEnvironmentOn,
-            isChangeRequestConfigured,
-        ]
-    );
-
     const onFavorite = useCallback(
         async (feature: IFeatureToggleListItem) => {
             if (feature?.favorite) {
@@ -355,9 +291,8 @@ export const ProjectFeatureToggles = ({
                                 <FeatureToggleSwitch
                                     value={value}
                                     projectId={projectId}
-                                    featureName={feature?.name}
+                                    featureId={feature.name}
                                     environmentName={name}
-                                    onToggle={onToggle}
                                 />
                                 <ConditionallyRender
                                     condition={hasWarning}
@@ -389,7 +324,7 @@ export const ProjectFeatureToggles = ({
                 hideInMenu: true,
             },
         ],
-        [projectId, environments, loading, onToggle]
+        [projectId, environments, loading]
     );
 
     const [searchValue, setSearchValue] = useState(

frontend/src/hooks/useChangeRequestToggle.ts

@@ -13,17 +13,24 @@ export const useChangeRequestToggle = (project: string) => {
     const [changeRequestDialogDetails, setChangeRequestDialogDetails] =
         useState<{
             enabled?: boolean;
+            shouldActivateDisabledStrategies?: boolean;
             featureName?: string;
             environment?: string;
             isOpen: boolean;
         }>({ isOpen: false });
 
     const onChangeRequestToggle = useCallback(
-        (featureName: string, environment: string, enabled: boolean) => {
+        (
+            featureName: string,
+            environment: string,
+            enabled: boolean,
+            shouldActivateDisabledStrategies: boolean
+        ) => {
             setChangeRequestDialogDetails({
                 featureName,
                 environment,
                 enabled,
+                shouldActivateDisabledStrategies,
                 isOpen: true,
             });
         },
@@ -41,6 +48,9 @@ export const useChangeRequestToggle = (project: string) => {
                 action: 'updateEnabled',
                 payload: {
                     enabled: Boolean(changeRequestDialogDetails.enabled),
+                    shouldActivateDisabledStrategies: Boolean(
+                        changeRequestDialogDetails.shouldActivateDisabledStrategies
+                    ),
                 },
             });
             refetchChangeRequests();

frontend/src/utils/testIds.ts

@@ -63,6 +63,7 @@ export const ADD_TO_STRATEGY_INPUT_LIST = 'ADD_TO_STRATEGY_INPUT_LIST';
 export const STRATEGY_FORM_SUBMIT_ID = 'STRATEGY_FORM_SUBMIT_ID';
 export const STRATEGY_FORM_REMOVE_ID = 'STRATEGY_FORM_REMOVE_ID';
 export const STRATEGY_FORM_COPY_ID = 'STRATEGY_FORM_COPY_ID';
+export const STRATEGY_REMOVE_MENU_BTN = 'STRATEGY_REMOVE_MENU_BTN';
 
 /* SPLASH */
 export const CLOSE_SPLASH = 'CLOSE_SPLASH';