mirror of
https://github.com/Unleash/unleash.git
synced 2025-06-09 01:17:06 +02:00
Follows up on https://github.com/Unleash/unleash/pull/4853 to add Biome to the frontend as well.  Added a few `biome-ignore` to speed up the process but we may want to check and fix them in the future.
152 lines
5.4 KiB
TypeScript
152 lines
5.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Alert, Box, styled, Typography } from '@mui/material';
|
|
import { Dialogue } from 'component/common/Dialogue/Dialogue';
|
|
import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
|
|
import useToast from 'hooks/useToast';
|
|
import type { FeatureSchema } from 'openapi';
|
|
|
|
import { formatUnknownError } from 'utils/formatUnknownError';
|
|
import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
|
|
import useProject from 'hooks/api/getters/useProject/useProject';
|
|
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
|
|
import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
|
|
import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
|
|
interface IExportDialogProps {
|
|
showExportDialog: boolean;
|
|
data: Pick<FeatureSchema, 'name' | 'environments'>[];
|
|
onClose: () => void;
|
|
onConfirm?: () => void;
|
|
environments: string[];
|
|
projectId: string;
|
|
}
|
|
|
|
const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
|
|
minWidth: '450px',
|
|
marginTop: theme.spacing(2),
|
|
marginBottom: theme.spacing(1.5),
|
|
}));
|
|
|
|
const SpacedAlert = styled(Alert)(({ theme }) => ({
|
|
marginBottom: theme.spacing(1.5),
|
|
}));
|
|
|
|
export const BulkDisableDialog = ({
|
|
showExportDialog,
|
|
data,
|
|
onClose,
|
|
onConfirm,
|
|
environments,
|
|
projectId,
|
|
}: IExportDialogProps) => {
|
|
const [selected, setSelected] = useState(environments[0]);
|
|
const { bulkToggleFeaturesEnvironmentOff } = useFeatureApi();
|
|
const { addChange } = useChangeRequestApi();
|
|
const { refetch: refetchProject } = useProject(projectId);
|
|
const { setToastApiError, setToastData } = useToast();
|
|
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
|
|
const { refetch: refetchChangeRequests } =
|
|
usePendingChangeRequests(projectId);
|
|
const alreadyDisabledCount = data.filter(
|
|
(feature) =>
|
|
feature.environments?.find(
|
|
(environment) => selected === environment.name,
|
|
)?.enabled === false,
|
|
).length;
|
|
|
|
const getOptions = () =>
|
|
environments.map((env) => ({
|
|
key: env,
|
|
label: env,
|
|
}));
|
|
|
|
const onClick = async () => {
|
|
try {
|
|
if (isChangeRequestConfigured(selected)) {
|
|
await addChange(
|
|
projectId,
|
|
selected,
|
|
data.map((feature) => ({
|
|
action: 'updateEnabled',
|
|
feature: feature.name,
|
|
payload: { enabled: false },
|
|
})),
|
|
);
|
|
refetchChangeRequests();
|
|
setToastData({
|
|
text: 'Your disabled feature toggles changes have been added to change request',
|
|
type: 'success',
|
|
title: 'Changes added to a draft',
|
|
});
|
|
} else {
|
|
await bulkToggleFeaturesEnvironmentOff(
|
|
projectId,
|
|
data.map((feature) => feature.name),
|
|
selected,
|
|
);
|
|
refetchProject();
|
|
setToastData({
|
|
text: 'Your feature toggles have been disabled',
|
|
type: 'success',
|
|
title: 'Features disabled',
|
|
});
|
|
}
|
|
onClose();
|
|
onConfirm?.();
|
|
} catch (e: unknown) {
|
|
setToastApiError(formatUnknownError(e));
|
|
}
|
|
};
|
|
|
|
const buttonText = isChangeRequestConfigured(selected)
|
|
? 'Add to change request'
|
|
: 'Disable toggles';
|
|
|
|
return (
|
|
<Dialogue
|
|
open={showExportDialog}
|
|
title='Disable feature toggles'
|
|
onClose={onClose}
|
|
onClick={onClick}
|
|
primaryButtonText={buttonText}
|
|
secondaryButtonText='Cancel'
|
|
>
|
|
<Box>
|
|
You have selected <b>{data.length}</b> feature toggles to
|
|
disable.
|
|
<br />
|
|
<br />
|
|
<Typography>
|
|
Select which environment to disable the features for:
|
|
</Typography>
|
|
<StyledSelect
|
|
options={getOptions()}
|
|
value={selected}
|
|
onChange={(option: string) => setSelected(option)}
|
|
/>
|
|
<ConditionallyRender
|
|
condition={isChangeRequestConfigured(selected)}
|
|
show={
|
|
<SpacedAlert severity='warning'>
|
|
Change requests are enabled for this environment.
|
|
</SpacedAlert>
|
|
}
|
|
/>
|
|
<ConditionallyRender
|
|
condition={alreadyDisabledCount > 0}
|
|
show={
|
|
<SpacedAlert severity='info'>
|
|
{alreadyDisabledCount} feature{' '}
|
|
{alreadyDisabledCount > 1
|
|
? 'toggles are '
|
|
: 'toggle is '}
|
|
already disabled.
|
|
</SpacedAlert>
|
|
}
|
|
/>
|
|
</Box>
|
|
</Dialogue>
|
|
);
|
|
};
|