From 980332a074fc51c84fb3e6f6248e6bec2e46ce55 Mon Sep 17 00:00:00 2001 From: Mateusz Kwasniewski Date: Thu, 18 May 2023 11:21:10 +0200 Subject: [PATCH] feat: bulk enable disable change requests (#3801) --- .../FeatureToggleList/BulkDisableDialog.tsx | 52 ++++++++++++++---- .../FeatureToggleList/BulkEnableDialog.tsx | 53 +++++++++++++++---- .../useChangeRequestApi.ts | 2 +- 3 files changed, 88 insertions(+), 19 deletions(-) diff --git a/frontend/src/component/feature/FeatureToggleList/BulkDisableDialog.tsx b/frontend/src/component/feature/FeatureToggleList/BulkDisableDialog.tsx index aaa7430bca..41f213b69b 100644 --- a/frontend/src/component/feature/FeatureToggleList/BulkDisableDialog.tsx +++ b/frontend/src/component/feature/FeatureToggleList/BulkDisableDialog.tsx @@ -8,6 +8,9 @@ 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'; interface IExportDialogProps { showExportDialog: boolean; @@ -33,8 +36,12 @@ export const BulkDisableDialog = ({ }: IExportDialogProps) => { const [selected, setSelected] = useState(environments[0]); const { bulkToggleFeaturesEnvironmentOff } = useFeatureApi(); - const { refetch } = useProject(projectId); - const { setToastApiError } = useToast(); + const { addChange } = useChangeRequestApi(); + const { refetch: refetchProject } = useProject(projectId); + const { setToastApiError, setToastData } = useToast(); + const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); + const { refetch: refetchChangeRequests } = + usePendingChangeRequests(projectId); const getOptions = () => environments.map(env => ({ @@ -44,12 +51,35 @@ export const BulkDisableDialog = ({ const onClick = async () => { try { - await bulkToggleFeaturesEnvironmentOff( - projectId, - data.map(feature => feature.name), - selected - ); - refetch(); + 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) { @@ -57,13 +87,17 @@ export const BulkDisableDialog = ({ } }; + const buttonText = isChangeRequestConfigured(selected) + ? 'Add to change request' + : 'Disable toggles'; + return ( diff --git a/frontend/src/component/feature/FeatureToggleList/BulkEnableDialog.tsx b/frontend/src/component/feature/FeatureToggleList/BulkEnableDialog.tsx index 3cdd1ffaa6..d3dca03de1 100644 --- a/frontend/src/component/feature/FeatureToggleList/BulkEnableDialog.tsx +++ b/frontend/src/component/feature/FeatureToggleList/BulkEnableDialog.tsx @@ -8,6 +8,9 @@ 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'; interface IExportDialogProps { showExportDialog: boolean; @@ -33,8 +36,12 @@ export const BulkEnableDialog = ({ }: IExportDialogProps) => { const [selected, setSelected] = useState(environments[0]); const { bulkToggleFeaturesEnvironmentOn } = useFeatureApi(); - const { refetch } = useProject(projectId); - const { setToastApiError } = useToast(); + const { addChange } = useChangeRequestApi(); + const { refetch: refetchProject } = useProject(projectId); + const { setToastApiError, setToastData } = useToast(); + const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); + const { refetch: refetchChangeRequests } = + usePendingChangeRequests(projectId); const getOptions = () => environments.map(env => ({ @@ -44,12 +51,36 @@ export const BulkEnableDialog = ({ const onClick = async () => { try { - await bulkToggleFeaturesEnvironmentOn( - projectId, - data.map(feature => feature.name), - selected - ); - refetch(); + if (isChangeRequestConfigured(selected)) { + await addChange( + projectId, + selected, + data.map(feature => ({ + action: 'updateEnabled', + feature: feature.name, + payload: { enabled: true }, + })) + ); + refetchChangeRequests(); + setToastData({ + text: 'Your enable feature toggles changes have been added to change request', + type: 'success', + title: 'Changes added to a draft', + }); + } else { + await bulkToggleFeaturesEnvironmentOn( + projectId, + data.map(feature => feature.name), + selected + ); + refetchProject(); + setToastData({ + text: 'Your feature toggles have been enabled', + type: 'success', + title: 'Features enabled', + }); + } + onClose(); onConfirm?.(); } catch (e: unknown) { @@ -57,13 +88,17 @@ export const BulkEnableDialog = ({ } }; + const buttonText = isChangeRequestConfigured(selected) + ? 'Add to change request' + : 'Enabled toggles'; + return ( diff --git a/frontend/src/hooks/api/actions/useChangeRequestApi/useChangeRequestApi.ts b/frontend/src/hooks/api/actions/useChangeRequestApi/useChangeRequestApi.ts index 3c771d8809..4fbc9569f5 100644 --- a/frontend/src/hooks/api/actions/useChangeRequestApi/useChangeRequestApi.ts +++ b/frontend/src/hooks/api/actions/useChangeRequestApi/useChangeRequestApi.ts @@ -28,7 +28,7 @@ export const useChangeRequestApi = () => { const addChange = async ( project: string, environment: string, - payload: IChangeSchema + payload: IChangeSchema | IChangeSchema[] ) => { trackEvent('change_request', { props: {