Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: Bulk enable hints (#3802)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/component/feature/FeatureToggleList/BulkDisableDialog.tsx
View File

@ -1,5 +1,5 @@
import { useState } from 'react'; import React, { useState } from 'react';
import { Box, styled, Typography } from '@mui/material'; import { Alert, Box, styled, Typography } from '@mui/material';
import { Dialogue } from 'component/common/Dialogue/Dialogue'; import { Dialogue } from 'component/common/Dialogue/Dialogue';
import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
import useToast from 'hooks/useToast'; import useToast from 'hooks/useToast';
@ -11,10 +11,11 @@ import useProject from 'hooks/api/getters/useProject/useProject';
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi'; import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests'; import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
interface IExportDialogProps { interface IExportDialogProps {
showExportDialog: boolean; showExportDialog: boolean;
data: Pick<FeatureSchema, 'name'>[]; data: Pick<FeatureSchema, 'name' | 'environments'>[];
onClose: () => void; onClose: () => void;
onConfirm?: () => void; onConfirm?: () => void;
environments: string[]; environments: string[];
@ -22,8 +23,13 @@ interface IExportDialogProps {
} }
const StyledSelect = styled(GeneralSelect)(({ theme }) => ({ const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
minWidth: '250px', minWidth: '450px',
marginTop: theme.spacing(2), marginTop: theme.spacing(2),
marginBottom: theme.spacing(1.5),
}));
const SpacedAlert = styled(Alert)(({ theme }) => ({
marginBottom: theme.spacing(1.5),
})); }));
export const BulkDisableDialog = ({ export const BulkDisableDialog = ({
@ -42,6 +48,12 @@ export const BulkDisableDialog = ({
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
const { refetch: refetchChangeRequests } = const { refetch: refetchChangeRequests } =
usePendingChangeRequests(projectId); usePendingChangeRequests(projectId);
const alreadyDisabledCount = data.filter(
feature =>
feature.environments?.find(
environment => selected === environment.name
)?.enabled === false
).length;
const getOptions = () => const getOptions = () =>
environments.map(env => ({ environments.map(env => ({
@ -113,6 +125,26 @@ export const BulkDisableDialog = ({
value={selected} value={selected}
onChange={(option: string) => setSelected(option)} 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> </Box>
</Dialogue> </Dialogue>
); );

40
frontend/src/component/feature/FeatureToggleList/BulkEnableDialog.tsx
View File

@ -1,5 +1,5 @@
import { useState } from 'react'; import React, { useState } from 'react';
import { Box, styled, Typography } from '@mui/material'; import { Alert, Box, styled, Typography } from '@mui/material';
import { Dialogue } from 'component/common/Dialogue/Dialogue'; import { Dialogue } from 'component/common/Dialogue/Dialogue';
import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
import useToast from 'hooks/useToast'; import useToast from 'hooks/useToast';
@ -11,10 +11,11 @@ import useProject from 'hooks/api/getters/useProject/useProject';
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi'; import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests'; import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
interface IExportDialogProps { interface IExportDialogProps {
showExportDialog: boolean; showExportDialog: boolean;
data: Pick<FeatureSchema, 'name'>[]; data: Pick<FeatureSchema, 'name' | 'environments'>[];
onClose: () => void; onClose: () => void;
onConfirm?: () => void; onConfirm?: () => void;
environments: string[]; environments: string[];
@ -22,8 +23,13 @@ interface IExportDialogProps {
} }
const StyledSelect = styled(GeneralSelect)(({ theme }) => ({ const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
minWidth: '250px', minWidth: '450px',
marginTop: theme.spacing(2), marginTop: theme.spacing(2),
marginBottom: theme.spacing(1.5),
}));
const SpacedAlert = styled(Alert)(({ theme }) => ({
marginBottom: theme.spacing(1.5),
})); }));
export const BulkEnableDialog = ({ export const BulkEnableDialog = ({
@ -42,6 +48,12 @@ export const BulkEnableDialog = ({
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
const { refetch: refetchChangeRequests } = const { refetch: refetchChangeRequests } =
usePendingChangeRequests(projectId); usePendingChangeRequests(projectId);
const alreadyEnabledCount = data.filter(
feature =>
feature.environments?.find(
environment => selected === environment.name
)?.enabled === true
).length;
const getOptions = () => const getOptions = () =>
environments.map(env => ({ environments.map(env => ({
@ -114,6 +126,26 @@ export const BulkEnableDialog = ({
value={selected} value={selected}
onChange={(option: string) => setSelected(option)} 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> </Box>
</Dialogue> </Dialogue>
); );