2022-11-03 12:26:35 +01:00
|
|
|
import React, { FC, useState } from 'react';
|
2022-03-09 14:59:24 +01:00
|
|
|
import useFeatureStrategyApi from 'hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi';
|
2022-03-25 12:34:20 +01:00
|
|
|
import { formatUnknownError } from 'utils/formatUnknownError';
|
2022-05-05 13:42:18 +02:00
|
|
|
import { useNavigate } from 'react-router-dom';
|
2022-03-09 14:59:24 +01:00
|
|
|
import useToast from 'hooks/useToast';
|
|
|
|
import { formatFeaturePath } from '../FeatureStrategyEdit/FeatureStrategyEdit';
|
2022-05-02 12:52:33 +02:00
|
|
|
import { Dialogue } from 'component/common/Dialogue/Dialogue';
|
2022-11-03 12:26:35 +01:00
|
|
|
import { Alert, styled, Typography } from '@mui/material';
|
2022-03-28 10:49:59 +02:00
|
|
|
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
|
|
|
|
import { DELETE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
|
2022-03-09 14:59:24 +01:00
|
|
|
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
|
2022-04-01 10:28:15 +02:00
|
|
|
import { STRATEGY_FORM_REMOVE_ID } from 'utils/testIds';
|
2022-05-02 12:52:33 +02:00
|
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
2022-03-09 14:59:24 +01:00
|
|
|
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
|
2022-05-02 15:52:41 +02:00
|
|
|
import { Delete } from '@mui/icons-material';
|
2022-11-04 09:50:00 +01:00
|
|
|
import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
|
|
|
|
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
|
2022-11-04 12:52:47 +01:00
|
|
|
import { useChangeRequestOpen } from 'hooks/api/getters/useChangeRequestOpen/useChangeRequestOpen';
|
2022-03-09 14:59:24 +01:00
|
|
|
|
|
|
|
interface IFeatureStrategyRemoveProps {
|
|
|
|
projectId: string;
|
|
|
|
featureId: string;
|
|
|
|
environmentId: string;
|
|
|
|
strategyId: string;
|
|
|
|
disabled?: boolean;
|
|
|
|
icon?: boolean;
|
|
|
|
}
|
|
|
|
|
2022-11-03 12:26:35 +01:00
|
|
|
interface IFeatureStrategyRemoveDialogueProps {
|
|
|
|
onRemove: (event: React.FormEvent) => Promise<void>;
|
|
|
|
onClose: () => void;
|
|
|
|
isOpen: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
const RemoveAlert: FC = () => (
|
|
|
|
<Alert severity="error">
|
|
|
|
Removing the strategy will change which users receive access to the
|
|
|
|
feature.
|
|
|
|
</Alert>
|
|
|
|
);
|
|
|
|
|
|
|
|
const FeatureStrategyRemoveDialogue: FC<
|
|
|
|
IFeatureStrategyRemoveDialogueProps
|
|
|
|
> = ({ onRemove, onClose, isOpen }) => {
|
|
|
|
return (
|
|
|
|
<Dialogue
|
|
|
|
title="Are you sure you want to delete this strategy?"
|
|
|
|
open={isOpen}
|
|
|
|
primaryButtonText="Remove strategy"
|
|
|
|
secondaryButtonText="Cancel"
|
|
|
|
onClick={onRemove}
|
|
|
|
onClose={onClose}
|
|
|
|
>
|
|
|
|
<RemoveAlert />
|
|
|
|
</Dialogue>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const MsgContainer = styled('div')(({ theme }) => ({
|
|
|
|
marginTop: theme.spacing(3),
|
|
|
|
marginBottom: theme.spacing(1),
|
|
|
|
}));
|
|
|
|
|
|
|
|
const SuggestFeatureStrategyRemoveDialogue: FC<
|
|
|
|
IFeatureStrategyRemoveDialogueProps
|
|
|
|
> = ({ onRemove, onClose, isOpen }) => {
|
|
|
|
return (
|
|
|
|
<Dialogue
|
|
|
|
title="Suggest changes"
|
|
|
|
open={isOpen}
|
|
|
|
primaryButtonText="Add suggestion to draft"
|
|
|
|
secondaryButtonText="Cancel"
|
|
|
|
onClick={onRemove}
|
|
|
|
onClose={onClose}
|
|
|
|
>
|
|
|
|
<RemoveAlert />
|
|
|
|
<MsgContainer>
|
|
|
|
<Typography variant="body2" color="text.secondary">
|
|
|
|
Your suggestion:
|
|
|
|
</Typography>
|
|
|
|
</MsgContainer>
|
|
|
|
<Typography fontWeight="bold">Remove strategy</Typography>
|
|
|
|
</Dialogue>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
interface IRemoveProps {
|
|
|
|
projectId: string;
|
|
|
|
featureId: string;
|
|
|
|
environmentId: string;
|
|
|
|
strategyId: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
const useOnRemove = ({
|
2022-03-09 14:59:24 +01:00
|
|
|
projectId,
|
|
|
|
featureId,
|
|
|
|
environmentId,
|
|
|
|
strategyId,
|
2022-11-03 12:26:35 +01:00
|
|
|
}: IRemoveProps) => {
|
2022-03-09 14:59:24 +01:00
|
|
|
const { deleteStrategyFromFeature } = useFeatureStrategyApi();
|
|
|
|
const { setToastData, setToastApiError } = useToast();
|
2022-05-05 13:42:18 +02:00
|
|
|
const navigate = useNavigate();
|
2022-11-03 12:26:35 +01:00
|
|
|
const { refetchFeature } = useFeature(projectId, featureId);
|
2022-03-09 14:59:24 +01:00
|
|
|
|
|
|
|
const onRemove = async (event: React.FormEvent) => {
|
|
|
|
try {
|
|
|
|
event.preventDefault();
|
|
|
|
await deleteStrategyFromFeature(
|
|
|
|
projectId,
|
|
|
|
featureId,
|
|
|
|
environmentId,
|
|
|
|
strategyId
|
|
|
|
);
|
|
|
|
setToastData({
|
|
|
|
title: 'Strategy deleted',
|
|
|
|
type: 'success',
|
|
|
|
});
|
|
|
|
refetchFeature();
|
2022-05-05 13:42:18 +02:00
|
|
|
navigate(formatFeaturePath(projectId, featureId));
|
2022-03-09 14:59:24 +01:00
|
|
|
} catch (error: unknown) {
|
|
|
|
setToastApiError(formatUnknownError(error));
|
|
|
|
}
|
|
|
|
};
|
2022-11-03 12:26:35 +01:00
|
|
|
return onRemove;
|
|
|
|
};
|
|
|
|
|
|
|
|
const useOnSuggestRemove = ({
|
|
|
|
projectId,
|
|
|
|
featureId,
|
|
|
|
environmentId,
|
|
|
|
strategyId,
|
|
|
|
}: IRemoveProps) => {
|
|
|
|
const { addChangeRequest } = useChangeRequestApi();
|
2022-11-04 12:52:47 +01:00
|
|
|
const { refetch: refetchChangeRequests } = useChangeRequestOpen(projectId);
|
2022-11-03 12:26:35 +01:00
|
|
|
const { setToastData, setToastApiError } = useToast();
|
|
|
|
const onSuggestRemove = async (event: React.FormEvent) => {
|
|
|
|
try {
|
|
|
|
event.preventDefault();
|
|
|
|
await addChangeRequest(projectId, environmentId, {
|
|
|
|
action: 'deleteStrategy',
|
|
|
|
feature: featureId,
|
|
|
|
payload: {
|
|
|
|
id: strategyId,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
setToastData({
|
|
|
|
title: 'Changes added to the draft!',
|
|
|
|
type: 'success',
|
|
|
|
});
|
2022-11-04 12:52:47 +01:00
|
|
|
await refetchChangeRequests();
|
2022-11-03 12:26:35 +01:00
|
|
|
} catch (error: unknown) {
|
|
|
|
setToastApiError(formatUnknownError(error));
|
|
|
|
}
|
|
|
|
};
|
|
|
|
return onSuggestRemove;
|
|
|
|
};
|
|
|
|
|
|
|
|
export const FeatureStrategyRemove = ({
|
|
|
|
projectId,
|
|
|
|
featureId,
|
|
|
|
environmentId,
|
|
|
|
strategyId,
|
|
|
|
disabled,
|
|
|
|
icon,
|
|
|
|
}: IFeatureStrategyRemoveProps) => {
|
|
|
|
const [openDialogue, setOpenDialogue] = useState(false);
|
|
|
|
|
2022-11-07 09:16:29 +01:00
|
|
|
const changeRequestsEnabled = useChangeRequestsEnabled(environmentId);
|
2022-11-03 12:26:35 +01:00
|
|
|
|
|
|
|
const onRemove = useOnRemove({
|
|
|
|
featureId,
|
|
|
|
projectId,
|
|
|
|
strategyId,
|
|
|
|
environmentId,
|
|
|
|
});
|
|
|
|
const onSuggestRemove = useOnSuggestRemove({
|
|
|
|
featureId,
|
|
|
|
projectId,
|
|
|
|
strategyId,
|
|
|
|
environmentId,
|
|
|
|
});
|
2022-03-09 14:59:24 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<ConditionallyRender
|
|
|
|
condition={Boolean(icon)}
|
|
|
|
show={
|
|
|
|
<PermissionIconButton
|
|
|
|
onClick={() => setOpenDialogue(true)}
|
|
|
|
projectId={projectId}
|
|
|
|
environmentId={environmentId}
|
|
|
|
disabled={disabled}
|
|
|
|
permission={DELETE_FEATURE_STRATEGY}
|
2022-04-08 13:13:45 +02:00
|
|
|
data-testid={STRATEGY_FORM_REMOVE_ID}
|
2022-05-09 15:17:20 +02:00
|
|
|
tooltipProps={{ title: 'Remove strategy' }}
|
2022-03-09 14:59:24 +01:00
|
|
|
type="button"
|
|
|
|
>
|
2022-04-21 08:26:49 +02:00
|
|
|
<Delete />
|
2022-03-09 14:59:24 +01:00
|
|
|
</PermissionIconButton>
|
|
|
|
}
|
|
|
|
elseShow={
|
|
|
|
<PermissionButton
|
|
|
|
onClick={() => setOpenDialogue(true)}
|
|
|
|
projectId={projectId}
|
|
|
|
environmentId={environmentId}
|
|
|
|
disabled={disabled}
|
|
|
|
permission={DELETE_FEATURE_STRATEGY}
|
2022-04-08 13:13:45 +02:00
|
|
|
data-testid={STRATEGY_FORM_REMOVE_ID}
|
2022-03-09 14:59:24 +01:00
|
|
|
color="secondary"
|
|
|
|
variant="text"
|
|
|
|
type="button"
|
|
|
|
>
|
2022-04-21 11:01:42 +02:00
|
|
|
Remove strategy
|
2022-03-09 14:59:24 +01:00
|
|
|
</PermissionButton>
|
|
|
|
}
|
|
|
|
/>
|
2022-11-03 12:26:35 +01:00
|
|
|
<ConditionallyRender
|
2022-11-04 09:50:00 +01:00
|
|
|
condition={changeRequestsEnabled}
|
2022-11-03 12:26:35 +01:00
|
|
|
show={
|
|
|
|
<SuggestFeatureStrategyRemoveDialogue
|
|
|
|
isOpen={openDialogue}
|
|
|
|
onClose={() => setOpenDialogue(false)}
|
|
|
|
onRemove={async e => {
|
|
|
|
await onSuggestRemove(e);
|
|
|
|
setOpenDialogue(false);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
elseShow={
|
|
|
|
<FeatureStrategyRemoveDialogue
|
|
|
|
isOpen={openDialogue}
|
|
|
|
onClose={() => setOpenDialogue(false)}
|
|
|
|
onRemove={onRemove}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
/>
|
2022-03-09 14:59:24 +01:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|