From 4689705f45808f2fcc90b489e6049c529d84934e Mon Sep 17 00:00:00 2001 From: Fredrik Strand Oseberg Date: Mon, 14 Nov 2022 12:34:38 +0100 Subject: [PATCH] feat: update hook to use change request settings (#2406) * Refactors the hook to use the change request settings from the API --- .../FeatureStrategyCreate.tsx | 6 ++-- .../FeatureStrategyEdit.tsx | 6 ++-- .../AddFromTemplateCard.tsx | 5 +-- .../FeatureStrategyEmpty.tsx | 4 +-- .../FeatureStrategyRemove.tsx | 4 +-- .../FeatureOverviewEnvSwitch.tsx | 4 +-- .../feature/FeatureView/FeatureView.tsx | 8 +++-- .../src/component/project/Project/Project.tsx | 22 ++++++------ .../ProjectFeatureToggles.tsx | 4 +-- .../src/hooks/useChangeRequestsEnabled.ts | 35 ++++++++++++++++--- 10 files changed, 63 insertions(+), 35 deletions(-) diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx index 1c595e07f6..39dc5cdb4a 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx @@ -51,7 +51,7 @@ export const FeatureStrategyCreate = () => { const { feature, refetchFeature } = useFeature(projectId, featureId); const ref = useRef(feature); - const isChangeRequestEnabled = useChangeRequestsEnabled(environmentId); + const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); const { refetch: refetchChangeRequests } = useChangeRequestOpen(projectId); const { data, staleDataNotification, forceRefreshCache } = @@ -124,7 +124,7 @@ export const FeatureStrategyCreate = () => { const payload = createStrategyPayload(strategy); try { - if (isChangeRequestEnabled) { + if (isChangeRequestConfigured(environmentId)) { await onStrategyRequestAdd(payload); } else { await onAddStrategy(payload); @@ -166,7 +166,7 @@ export const FeatureStrategyCreate = () => { loading={loading} permission={CREATE_FEATURE_STRATEGY} errors={errors} - isChangeRequest={isChangeRequestEnabled} + isChangeRequest={isChangeRequestConfigured(environmentId)} /> {staleDataNotification} diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx index 68c64471a6..083a849646 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit.tsx @@ -46,7 +46,7 @@ export const FeatureStrategyEdit = () => { const { unleashUrl } = uiConfig; const navigate = useNavigate(); const { addChangeRequest } = useChangeRequestApi(); - const isChangeRequestEnabled = useChangeRequestsEnabled(environmentId); + const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); const { refetch: refetchChangeRequests } = useChangeRequestOpen(projectId); const { feature, refetchFeature } = useFeature(projectId, featureId); @@ -136,7 +136,7 @@ export const FeatureStrategyEdit = () => { const payload = createStrategyPayload(strategy); try { - if (isChangeRequestEnabled) { + if (isChangeRequestConfigured(environmentId)) { await onStrategyRequestEdit(payload); } else { await onStrategyEdit(payload); @@ -183,7 +183,7 @@ export const FeatureStrategyEdit = () => { loading={loading} permission={UPDATE_FEATURE_STRATEGY} errors={errors} - isChangeRequest={isChangeRequestEnabled} + isChangeRequest={isChangeRequestConfigured(environmentId)} /> {staleDataNotification} diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/AddFromTemplateCard/AddFromTemplateCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/AddFromTemplateCard/AddFromTemplateCard.tsx index ecbd489a2c..7292f21c14 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/AddFromTemplateCard/AddFromTemplateCard.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/AddFromTemplateCard/AddFromTemplateCard.tsx @@ -10,6 +10,7 @@ import { formatUnknownError } from 'utils/formatUnknownError'; import PermissionButton from 'component/common/PermissionButton/PermissionButton'; import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions'; import { IFeatureStrategyPayload } from 'interfaces/strategy'; +import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; interface IAddFromTemplateCardProps { title: string; @@ -40,7 +41,7 @@ export const AddFromTemplateCard: FC = ({ const { addStrategyToFeature } = useFeatureStrategyApi(); const { setToastApiError } = useToast(); - const isChangeRequestEnabled = useChangeRequestsEnabled(environmentId); + const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); const { changeRequestDialogDetails, @@ -51,7 +52,7 @@ export const AddFromTemplateCard: FC = ({ const onStrategyAdd = async () => { try { - if (isChangeRequestEnabled) { + if (isChangeRequestConfigured(environmentId)) { onChangeRequestAddStrategy(environmentId, strategy); } else { await addStrategyToFeature( diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx index 72ca972566..e0277a9fe0 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx @@ -43,7 +43,7 @@ export const FeatureStrategyEmpty = ({ environment.strategies && environment.strategies.length > 0 ); - const isChangeRequestEnabled = useChangeRequestsEnabled(environmentId); + const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); const { changeRequestDialogDetails, @@ -71,7 +71,7 @@ export const FeatureStrategyEmpty = ({ environment => environment.name === fromEnvironmentName )?.strategies || []; - if (isChangeRequestEnabled) { + if (isChangeRequestConfigured(environmentId)) { await onChangeRequestAddStrategies( environmentId, strategies, diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx index fa624361a4..5d6911c355 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx @@ -165,7 +165,7 @@ export const FeatureStrategyRemove = ({ }: IFeatureStrategyRemoveProps) => { const [openDialogue, setOpenDialogue] = useState(false); - const changeRequestsEnabled = useChangeRequestsEnabled(environmentId); + const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); const onRemove = useOnRemove({ featureId, @@ -215,7 +215,7 @@ export const FeatureStrategyRemove = ({ } /> { - if (changeRequestsEnabled) { + if (isChangeRequestConfigured(env.name)) { e.preventDefault(); onChangeRequestToggle(featureId, env.name, !env.enabled); return; diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx index c4f0fa4a56..f260bc2860 100644 --- a/frontend/src/component/feature/FeatureView/FeatureView.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx @@ -32,14 +32,16 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { FeatureArchiveDialog } from '../../common/FeatureArchiveDialog/FeatureArchiveDialog'; import { DraftBanner } from 'component/changeRequest/DraftBanner/DraftBanner'; import { MainLayout } from 'component/layout/MainLayout/MainLayout'; -import { useChangeRequestsEnabled } from '../../../hooks/useChangeRequestsEnabled'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; +import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; export const FeatureView = () => { const projectId = useRequiredPathParam('projectId'); const featureId = useRequiredPathParam('featureId'); const { refetch: projectRefetch } = useProject(projectId); const { refetchFeature } = useFeature(projectId, featureId); - const changeRequestsEnabled = useChangeRequestsEnabled(); + const { isChangeRequestConfiguredInAnyEnv } = + useChangeRequestsEnabled(projectId); const [openTagDialog, setOpenTagDialog] = useState(false); const [showDelDialog, setShowDelDialog] = useState(false); @@ -88,7 +90,7 @@ export const FeatureView = () => { ) : null } diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index d6ebf237e1..f8d2924193 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -28,8 +28,8 @@ import { ChangeRequestOverview } from 'component/changeRequest/ChangeRequestOver import { DraftBanner } from 'component/changeRequest/DraftBanner/DraftBanner'; import { MainLayout } from 'component/layout/MainLayout/MainLayout'; import { ProjectChangeRequests } from '../../changeRequest/ProjectChangeRequests/ProjectChangeRequests'; -import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; import { ProjectSettings } from './ProjectSettings/ProjectSettings'; +import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; const StyledDiv = styled('div')(() => ({ display: 'flex', @@ -59,14 +59,14 @@ const Project = () => { const { classes: styles } = useStyles(); const navigate = useNavigate(); const { pathname } = useLocation(); - const { isOss, uiConfig } = useUiConfig(); + const { isOss } = useUiConfig(); const basePath = `/projects/${projectId}`; const projectName = project?.name || projectId; + const { isChangeRequestConfiguredInAnyEnv, isChangeRequestFlagEnabled } = + useChangeRequestsEnabled(projectId); const [showDelDialog, setShowDelDialog] = useState(false); - const changeRequestsEnabled = useChangeRequestsEnabled(); - const tabs = useMemo(() => { const tabArray = [ { @@ -79,7 +79,7 @@ const Project = () => { path: `${basePath}/health`, name: 'health', }, - ...(!uiConfig?.flags?.changeRequests + ...(!isChangeRequestFlagEnabled ? [ { title: 'Access', @@ -98,7 +98,7 @@ const Project = () => { path: `${basePath}/archive`, name: 'archive', }, - ...(uiConfig?.flags?.changeRequests + ...(isChangeRequestFlagEnabled ? [ { title: 'Project settings', @@ -120,11 +120,11 @@ const Project = () => { name: 'change-request' + '', }; - if (changeRequestsEnabled) { + if (isChangeRequestFlagEnabled) { tabArray.splice(tabArray.length - 2, 0, changeRequestTab); } return tabArray; - }, [changeRequestsEnabled]); + }, [isChangeRequestFlagEnabled]); const activeTab = [...tabs] .reverse() @@ -149,7 +149,7 @@ const Project = () => { ) : null } @@ -263,7 +263,7 @@ const Project = () => { path="change-requests" element={ } /> } @@ -272,7 +272,7 @@ const Project = () => { path="change-requests/:id" element={ } /> } diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx index 1b89cb61cf..400d053260 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -96,7 +96,7 @@ export const ProjectFeatureToggles = ({ const navigate = useNavigate(); const [searchParams, setSearchParams] = useSearchParams(); const { uiConfig } = useUiConfig(); - const changeRequestsEnabled = useChangeRequestsEnabled(); + const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); const environments = useEnvironmentsRef( loading ? ['a', 'b', 'c'] : newEnvironments ); @@ -119,7 +119,7 @@ export const ProjectFeatureToggles = ({ environment: string, enabled: boolean ) => { - if (changeRequestsEnabled) { + if (isChangeRequestConfigured(environment)) { onChangeRequestToggle(featureName, environment, enabled); throw new Error('Additional approval required'); } diff --git a/frontend/src/hooks/useChangeRequestsEnabled.ts b/frontend/src/hooks/useChangeRequestsEnabled.ts index b44e7d2432..34fe6a27c7 100644 --- a/frontend/src/hooks/useChangeRequestsEnabled.ts +++ b/frontend/src/hooks/useChangeRequestsEnabled.ts @@ -1,10 +1,35 @@ +import React from 'react'; import useUiConfig from './api/getters/useUiConfig/useUiConfig'; +import { useChangeRequestConfig } from './api/getters/useChangeRequestConfig/useChangeRequestConfig'; -export const useChangeRequestsEnabled = (environment?: string) => { - // it can be swapped with proper settings instead of feature flag +export const useChangeRequestsEnabled = (projectId: string) => { const { uiConfig } = useUiConfig(); - return ( - Boolean(uiConfig?.flags?.changeRequests) && - (environment === 'production' || typeof environment === 'undefined') + const { data } = useChangeRequestConfig(projectId); + + const isChangeRequestConfigured = React.useCallback( + (environment: string): boolean => { + const enabled = data.some(draft => { + return ( + draft.environment === environment && + draft.changeRequestEnabled + ); + }); + + return Boolean(uiConfig?.flags.changeRequests) && enabled; + }, + [data] ); + + const isChangeRequestConfiguredInAnyEnv = React.useCallback((): boolean => { + return ( + Boolean(uiConfig?.flags.changeRequests) && + data.some(draft => draft.changeRequestEnabled) + ); + }, [data]); + + return { + isChangeRequestFlagEnabled: Boolean(uiConfig?.flags.changeRequests), + isChangeRequestConfigured, + isChangeRequestConfiguredInAnyEnv, + }; };