Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-04 13:48:56 +02:00
Code Issues Projects Releases Wiki Activity

Feat: add prod guard when toggling envs (#4774)

Browse Source 
Adds the prod guard dialog when enabling/disabling production
environment

Closes # [1-1386]
(https://linear.app/unleash/issue/1-1386/production-guard-modal-for-enablingdisabling-environment-is-gone)



https://github.com/Unleash/unleash/assets/104830839/0041bfc8-872b-455c-b4fa-e03cc160c3e9

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
andreas-unleash 2023-09-26 12:16:26 +03:00 committed by GitHub
parent 7cb471a0a4
commit e7b1e7979e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@ -20,7 +20,7 @@
"start:demo": "UNLEASH_BASE_PATH=/demo/ UNLEASH_API=https://app.unleash-hosted.com/ yarn run start", "start:demo": "UNLEASH_BASE_PATH=/demo/ UNLEASH_API=https://app.unleash-hosted.com/ yarn run start",
"test": "tsc && NODE_OPTIONS=\"${NODE_OPTIONS} --no-experimental-fetch\" vitest run", "test": "tsc && NODE_OPTIONS=\"${NODE_OPTIONS} --no-experimental-fetch\" vitest run",
"test:snapshot": "NODE_OPTIONS=\"${NODE_OPTIONS} --no-experimental-fetch\" yarn test -u", "test:snapshot": "NODE_OPTIONS=\"${NODE_OPTIONS} --no-experimental-fetch\" yarn test -u",
"test:watch": "NODE_OPTIONS=\"${NODE_OPTIONS} --no-experimental-fetch\" vitest watch", "test:watch": "NODE_OPTIONS=\"${NODE_OPTIONS} --no-experimental-fetch\" vitest watch FeatureToggleSwitch",
"lint": "eslint --fix ./src", "lint": "eslint --fix ./src",
"lint:check": "eslint ./src", "lint:check": "eslint ./src",
"fmt": "prettier src --write --loglevel warn", "fmt": "prettier src --write --loglevel warn",

37
frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.tsx
View File

@ -1,4 +1,4 @@
import { useState, VFC } from 'react'; import React, { useState, VFC } from 'react';
import { Box, styled } from '@mui/material'; import { Box, styled } from '@mui/material';
import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch'; import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch';
import { UPDATE_FEATURE_ENVIRONMENT } from 'component/providers/AccessProvider/permissions'; import { UPDATE_FEATURE_ENVIRONMENT } from 'component/providers/AccessProvider/permissions';
@ -14,6 +14,10 @@ import { useChangeRequestToggle } from 'hooks/useChangeRequestToggle';
import { EnableEnvironmentDialog } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/EnableEnvironmentDialog'; import { EnableEnvironmentDialog } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/EnableEnvironmentDialog';
import { UpdateEnabledMessage } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage'; import { UpdateEnabledMessage } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage';
import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog'; import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog';
import {
FeatureStrategyProdGuard,
useFeatureStrategyProdGuard,
} from '../../../../feature/FeatureStrategy/FeatureStrategyProdGuard/FeatureStrategyProdGuard';
const StyledBoxContainer = styled(Box)<{ 'data-testid': string }>(() => ({ const StyledBoxContainer = styled(Box)<{ 'data-testid': string }>(() => ({
mx: 'auto', mx: 'auto',
@ -42,7 +46,7 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
onToggle, onToggle,
onError, onError,
}) => { }) => {
const { toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } = const { loading, toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } =
useFeatureApi(); useFeatureApi();
const { setToastData, setToastApiError } = useToast(); const { setToastData, setToastApiError } = useToast();
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
@ -57,6 +61,11 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
const [showEnabledDialog, setShowEnabledDialog] = useState(false); const [showEnabledDialog, setShowEnabledDialog] = useState(false);
const { feature } = useFeature(projectId, featureId); const { feature } = useFeature(projectId, featureId);
const enableProdGuard = useFeatureStrategyProdGuard(
feature,
environmentName
);
const [showProdGuard, setShowProdGuard] = useState(false);
const disabledStrategiesCount = const disabledStrategiesCount =
feature?.environments feature?.environments
@ -113,9 +122,9 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
} }
}; };
const onClick = async (e: React.MouseEvent) => { const handleClick = async () => {
setShowProdGuard(false);
if (isChangeRequestConfigured(environmentName)) { if (isChangeRequestConfigured(environmentName)) {
e.preventDefault();
if (featureHasOnlyDisabledStrategies()) { if (featureHasOnlyDisabledStrategies()) {
setShowEnabledDialog(true); setShowEnabledDialog(true);
} else { } else {
@ -140,6 +149,18 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
} }
}; };
const onClick = async () => {
console.log('*********');
console.log(enableProdGuard);
console.log(isChangeRequestConfigured(environmentName));
console.log('*********');
if (enableProdGuard && !isChangeRequestConfigured(environmentName)) {
setShowProdGuard(true);
} else {
await handleClick();
}
};
const onActivateStrategies = async () => { const onActivateStrategies = async () => {
if (isChangeRequestConfigured(environmentName)) { if (isChangeRequestConfigured(environmentName)) {
onChangeRequestToggle( onChangeRequestToggle(
@ -199,6 +220,7 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
permission={UPDATE_FEATURE_ENVIRONMENT} permission={UPDATE_FEATURE_ENVIRONMENT}
inputProps={{ 'aria-label': environmentName }} inputProps={{ 'aria-label': environmentName }}
onClick={onClick} onClick={onClick}
data-testId={'permission-switch'}
/> />
</StyledBoxContainer> </StyledBoxContainer>
<EnableEnvironmentDialog <EnableEnvironmentDialog
@ -222,6 +244,13 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
/> />
} }
/> />
<FeatureStrategyProdGuard
open={showProdGuard}
onClose={() => setShowProdGuard(false)}
onClick={handleClick}
loading={loading}
label={`${isChecked ? 'Disable' : 'Enable'} Environment`}
/>
</> </>
); );
}; };