diff --git a/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx b/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx index 6cfc2fe13f..9045fe05d4 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx +++ b/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx @@ -19,7 +19,7 @@ import { import { formatStrategyName, GetFeatureStrategyIcon, -} from '../../../utils/strategyNames'; +} from 'utils/strategyNames'; import { IChangeRequestEnabled } from '../changeRequest.types'; interface IChangeRequestProps { diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx index 231db097be..a9274bce9e 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx @@ -29,6 +29,7 @@ import { IFeatureToggle } from 'interfaces/featureToggle'; import { comparisonModerator } from '../featureStrategy.utils'; import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi'; import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; +import { useChangeRequestOpen } from 'hooks/api/getters/useChangeRequestOpen/useChangeRequestOpen'; export const FeatureStrategyCreate = () => { const projectId = useRequiredPathParam('projectId'); @@ -51,6 +52,7 @@ export const FeatureStrategyCreate = () => { const { feature, refetchFeature } = useFeature(projectId, featureId); const ref = useRef(feature); const isChangeRequestEnabled = useChangeRequestsEnabled(); + const { refetch: refetchChangeRequests } = useChangeRequestOpen(projectId); const isChangeRequest = isChangeRequestEnabled && environmentId === 'production'; // FIXME: get from API - is it enabled @@ -106,20 +108,19 @@ export const FeatureStrategyCreate = () => { }); }; - const onAddStrategySuggestion = async ( - payload: IFeatureStrategyPayload - ) => { + const onStrategyRequestAdd = async (payload: IFeatureStrategyPayload) => { await addChangeRequest(projectId, environmentId, { action: 'addStrategy', feature: featureId, payload, }); - // TODO: segments in change requests + // FIXME: segments in change requests setToastData({ title: 'Strategy added to draft', type: 'success', confetti: true, }); + refetchChangeRequests(); }; const onSubmit = async () => { @@ -127,7 +128,7 @@ export const FeatureStrategyCreate = () => { try { if (isChangeRequest) { - await onAddStrategySuggestion(payload); + await onStrategyRequestAdd(payload); } else { await onAddStrategy(payload); } diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx index 0ae2eec373..a46662a804 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { FeatureStrategyForm } from 'component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm'; import FormTemplate from 'component/common/FormTemplate/FormTemplate'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; @@ -25,6 +25,9 @@ import { useCollaborateData } from 'hooks/useCollaborateData'; import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; import { IFeatureToggle } from 'interfaces/featureToggle'; import { comparisonModerator } from '../featureStrategy.utils'; +import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; +import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi'; +import { useChangeRequestOpen } from 'hooks/api/getters/useChangeRequestOpen/useChangeRequestOpen'; export const FeatureStrategyEdit = () => { const projectId = useRequiredPathParam('projectId'); @@ -42,6 +45,12 @@ export const FeatureStrategyEdit = () => { const { uiConfig } = useUiConfig(); const { unleashUrl } = uiConfig; const navigate = useNavigate(); + const { addChangeRequest } = useChangeRequestApi(); + const isChangeRequestEnabled = useChangeRequestsEnabled(); + const { refetch: refetchChangeRequests } = useChangeRequestOpen(projectId); + + const isChangeRequest = + isChangeRequestEnabled && environmentId === 'production'; // FIXME: get from API - is it enabled const { feature, refetchFeature } = useFeature(projectId, featureId); @@ -87,29 +96,54 @@ export const FeatureStrategyEdit = () => { savedStrategySegments && setSegments(savedStrategySegments); }, [savedStrategySegments]); - const onSubmit = async () => { - try { - await updateStrategyOnFeature( - projectId, - featureId, + const onStrategyEdit = async (payload: IFeatureStrategyPayload) => { + await updateStrategyOnFeature( + projectId, + featureId, + environmentId, + strategyId, + payload + ); + if (uiConfig.flags.SE) { + await setStrategySegments({ environmentId, + projectId, strategyId, - createStrategyPayload(strategy) - ); - if (uiConfig.flags.SE) { - await setStrategySegments({ - environmentId, - projectId, - strategyId, - segmentIds: segments.map(s => s.id), - }); - await refetchSavedStrategySegments(); - } - setToastData({ - title: 'Strategy updated', - type: 'success', - confetti: true, + segmentIds: segments.map(s => s.id), }); + await refetchSavedStrategySegments(); + } + setToastData({ + title: 'Strategy updated', + type: 'success', + confetti: true, + }); + }; + + const onStrategyRequestEdit = async (payload: IFeatureStrategyPayload) => { + await addChangeRequest(projectId, environmentId, { + action: 'updateStrategy', + feature: featureId, + payload: { ...payload, id: strategyId }, + }); + // FIXME: segments in change requests + setToastData({ + title: 'Change added to draft', + type: 'success', + confetti: true, + }); + refetchChangeRequests(); + }; + + const onSubmit = async () => { + const payload = createStrategyPayload(strategy); + + try { + if (isChangeRequest) { + await onStrategyRequestEdit(payload); + } else { + await onStrategyEdit(payload); + } refetchFeature(); navigate(formatFeaturePath(projectId, featureId)); } catch (error: unknown) { @@ -152,6 +186,7 @@ export const FeatureStrategyEdit = () => { loading={loading} permission={UPDATE_FEATURE_STRATEGY} errors={errors} + isChangeRequest={isChangeRequest} /> {staleDataNotification} @@ -160,13 +195,11 @@ export const FeatureStrategyEdit = () => { export const createStrategyPayload = ( strategy: Partial -): IFeatureStrategyPayload => { - return { - name: strategy.name, - constraints: strategy.constraints ?? [], - parameters: strategy.parameters ?? {}, - }; -}; +): IFeatureStrategyPayload => ({ + name: strategy.name, + constraints: strategy.constraints ?? [], + parameters: strategy.parameters ?? {}, +}); export const formatFeaturePath = ( projectId: string, diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyChangeRequestAlert/FeatureStrategyChangeRequestAlert.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyChangeRequestAlert/FeatureStrategyChangeRequestAlert.tsx index 498a54d9cd..ff03eee0e6 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyChangeRequestAlert/FeatureStrategyChangeRequestAlert.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyChangeRequestAlert/FeatureStrategyChangeRequestAlert.tsx @@ -9,9 +9,9 @@ export const FeatureStrategyChangeRequestAlert: VFC< IFeatureStrategyChangeRequestAlertProps > = ({ environment }) => ( - Change requests are enabled{environment ? ` for ${environment}` : ''}. - Your changes needs to be approved before they will be live. All the - changes you do now will be added into a draft that you can submit for - review. + Change requests are enabled + {environment ? ` for ${environment}` : ''}. Your changes needs to be + approved before they will be live. All the changes you do now will be + added into a draft that you can submit for review. ); diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx index da2d6c0931..7525265cb5 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx @@ -1,4 +1,6 @@ import React, { useState, useContext } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { Button } from '@mui/material'; import { IFeatureStrategy, IFeatureStrategyParameters, @@ -7,15 +9,8 @@ import { import { FeatureStrategyType } from '../FeatureStrategyType/FeatureStrategyType'; import { FeatureStrategyEnabled } from './FeatureStrategyEnabled/FeatureStrategyEnabled'; import { FeatureStrategyConstraints } from '../FeatureStrategyConstraints/FeatureStrategyConstraints'; -import { Button } from '@mui/material'; -import { - FeatureStrategyProdGuard, - useFeatureStrategyProdGuard, -} from '../FeatureStrategyProdGuard/FeatureStrategyProdGuard'; import { IFeatureToggle } from 'interfaces/featureToggle'; import { useStyles } from './FeatureStrategyForm.styles'; -import { formatFeaturePath } from '../FeatureStrategyEdit/FeatureStrategyEdit'; -import { useNavigate } from 'react-router-dom'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { STRATEGY_FORM_SUBMIT_ID } from 'utils/testIds'; @@ -28,6 +23,11 @@ import { IFormErrors } from 'hooks/useFormErrors'; import { validateParameterValue } from 'utils/validateParameterValue'; import { useStrategy } from 'hooks/api/getters/useStrategy/useStrategy'; import { FeatureStrategyChangeRequestAlert } from './FeatureStrategyChangeRequestAlert/FeatureStrategyChangeRequestAlert'; +import { + FeatureStrategyProdGuard, + useFeatureStrategyProdGuard, +} from '../FeatureStrategyProdGuard/FeatureStrategyProdGuard'; +import { formatFeaturePath } from '../FeatureStrategyEdit/FeatureStrategyEdit'; interface IFeatureStrategyFormProps { feature: IFeatureToggle; @@ -129,23 +129,19 @@ export const FeatureStrategyForm = ({ return (
-
- - } - elseShow={ - - } - /> -
+ + } + /> +