Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01: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",
"test": "tsc && NODE_OPTIONS=\"${NODE_OPTIONS} --no-experimental-fetch\" vitest run",
"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:check": "eslint ./src",
"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 PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch';
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 { UpdateEnabledMessage } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage';
import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog';
import {
FeatureStrategyProdGuard,
useFeatureStrategyProdGuard,
} from '../../../../feature/FeatureStrategy/FeatureStrategyProdGuard/FeatureStrategyProdGuard';
const StyledBoxContainer = styled(Box)<{ 'data-testid': string }>(() => ({
mx: 'auto',
@ -42,7 +46,7 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
onToggle,
onError,
}) => {
const { toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } =
const { loading, toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } =
useFeatureApi();
const { setToastData, setToastApiError } = useToast();
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
@ -57,6 +61,11 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
const [showEnabledDialog, setShowEnabledDialog] = useState(false);
const { feature } = useFeature(projectId, featureId);
const enableProdGuard = useFeatureStrategyProdGuard(
feature,
environmentName
);
const [showProdGuard, setShowProdGuard] = useState(false);
const disabledStrategiesCount =
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)) {
e.preventDefault();
if (featureHasOnlyDisabledStrategies()) {
setShowEnabledDialog(true);
} 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 () => {
if (isChangeRequestConfigured(environmentName)) {
onChangeRequestToggle(
@ -199,6 +220,7 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
permission={UPDATE_FEATURE_ENVIRONMENT}
inputProps={{ 'aria-label': environmentName }}
onClick={onClick}
data-testId={'permission-switch'}
/>
</StyledBoxContainer>
<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`}
/>
</>
);
};