1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00

feat: Bulk enable hints (#3802)

This commit is contained in:
Mateusz Kwasniewski 2023-05-18 12:24:31 +02:00 committed by GitHub
parent 980332a074
commit 92ffc387f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 72 additions and 8 deletions

View File

@ -1,5 +1,5 @@
import { useState } from 'react';
import { Box, styled, Typography } from '@mui/material';
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';
@ -11,10 +11,11 @@ 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'>[];
data: Pick<FeatureSchema, 'name' | 'environments'>[];
onClose: () => void;
onConfirm?: () => void;
environments: string[];
@ -22,8 +23,13 @@ interface IExportDialogProps {
}
const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
minWidth: '250px',
minWidth: '450px',
marginTop: theme.spacing(2),
marginBottom: theme.spacing(1.5),
}));
const SpacedAlert = styled(Alert)(({ theme }) => ({
marginBottom: theme.spacing(1.5),
}));
export const BulkDisableDialog = ({
@ -42,6 +48,12 @@ export const BulkDisableDialog = ({
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 => ({
@ -113,6 +125,26 @@ export const BulkDisableDialog = ({
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>
);

View File

@ -1,5 +1,5 @@
import { useState } from 'react';
import { Box, styled, Typography } from '@mui/material';
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';
@ -11,10 +11,11 @@ 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'>[];
data: Pick<FeatureSchema, 'name' | 'environments'>[];
onClose: () => void;
onConfirm?: () => void;
environments: string[];
@ -22,8 +23,13 @@ interface IExportDialogProps {
}
const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
minWidth: '250px',
minWidth: '450px',
marginTop: theme.spacing(2),
marginBottom: theme.spacing(1.5),
}));
const SpacedAlert = styled(Alert)(({ theme }) => ({
marginBottom: theme.spacing(1.5),
}));
export const BulkEnableDialog = ({
@ -42,6 +48,12 @@ export const BulkEnableDialog = ({
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
const { refetch: refetchChangeRequests } =
usePendingChangeRequests(projectId);
const alreadyEnabledCount = data.filter(
feature =>
feature.environments?.find(
environment => selected === environment.name
)?.enabled === true
).length;
const getOptions = () =>
environments.map(env => ({
@ -114,6 +126,26 @@ export const BulkEnableDialog = ({
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={alreadyEnabledCount > 0}
show={
<SpacedAlert severity="info">
{alreadyEnabledCount} feature{' '}
{alreadyEnabledCount > 1
? 'toggles are '
: 'toggle is '}
already enabled.
</SpacedAlert>
}
/>
</Box>
</Dialogue>
);