diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx index 80700f20fb..ff60715cd9 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx @@ -13,8 +13,8 @@ import { STRATEGY_FORM_REMOVE_ID } from 'utils/testIds'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; import { Delete } from '@mui/icons-material'; -import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig'; -import { useChangeRequestApi } from '../../../../hooks/api/actions/useChangeRequestApi/useChangeRequestApi'; +import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi'; +import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; interface IFeatureStrategyRemoveProps { projectId: string; @@ -162,8 +162,7 @@ export const FeatureStrategyRemove = ({ }: IFeatureStrategyRemoveProps) => { const [openDialogue, setOpenDialogue] = useState(false); - const { uiConfig } = useUiConfig(); - const suggestChangesEnabled = Boolean(uiConfig?.flags?.changeRequests); + const changeRequestsEnabled = useChangeRequestsEnabled(); const onRemove = useOnRemove({ featureId, @@ -213,7 +212,7 @@ export const FeatureStrategyRemove = ({ } /> { - if (uiConfig?.flags?.changeRequests && env.name === 'production') { + if (changeRequestsEnabled && env.name === 'production') { 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 4c8fb64884..02b09abcaa 100644 --- a/frontend/src/component/feature/FeatureView/FeatureView.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx @@ -33,13 +33,14 @@ import { FeatureArchiveDialog } from '../../common/FeatureArchiveDialog/FeatureA import { DraftBanner } from 'component/changeRequest/DraftBanner/DraftBanner'; import { MainLayout } from 'component/layout/MainLayout/MainLayout'; 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 { uiConfig } = useUiConfig(); + const changeRequestsEnabled = useChangeRequestsEnabled(); const [openTagDialog, setOpenTagDialog] = useState(false); const [showDelDialog, setShowDelDialog] = useState(false); @@ -84,13 +85,11 @@ export const FeatureView = () => { return ; } - console.log(uiConfig?.flags); - return ( ) : null } diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index 335a6228b1..d5362a29c1 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -28,6 +28,7 @@ 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'; const StyledDiv = styled('div')(() => ({ display: 'flex', @@ -57,13 +58,13 @@ 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 [showDelDialog, setShowDelDialog] = useState(false); - const changeRequestsEnabled = uiConfig?.flags?.changeRequests; + const changeRequestsEnabled = useChangeRequestsEnabled(); const tabs = useMemo(() => { const tabArray = [ @@ -134,7 +135,7 @@ const Project = () => { ) : null } @@ -248,7 +249,7 @@ const Project = () => { path="change-requests" element={ } /> } @@ -257,7 +258,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 4a47964ea3..868d763882 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -38,6 +38,7 @@ import { useMediaQuery } from '@mui/material'; import { Search } from 'component/common/Search/Search'; import { useChangeRequestToggle } from 'hooks/useChangeRequestToggle'; import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog'; +import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; interface IProjectFeatureTogglesProps { features: IProject['features']; @@ -93,6 +94,7 @@ export const ProjectFeatureToggles = ({ const navigate = useNavigate(); const [searchParams, setSearchParams] = useSearchParams(); const { uiConfig } = useUiConfig(); + const changeRequestsEnabled = useChangeRequestsEnabled(); const environments = useEnvironmentsRef( loading ? ['a', 'b', 'c'] : newEnvironments ); @@ -115,10 +117,7 @@ export const ProjectFeatureToggles = ({ environment: string, enabled: boolean ) => { - if ( - uiConfig?.flags?.changeRequests && - environment === 'production' - ) { + if (changeRequestsEnabled && environment === 'production') { onChangeRequestToggle(featureName, environment, enabled); throw new Error('Additional approval required'); } diff --git a/frontend/src/hooks/useChangeRequestsEnabled.ts b/frontend/src/hooks/useChangeRequestsEnabled.ts new file mode 100644 index 0000000000..cb9ee90d79 --- /dev/null +++ b/frontend/src/hooks/useChangeRequestsEnabled.ts @@ -0,0 +1,7 @@ +import useUiConfig from './api/getters/useUiConfig/useUiConfig'; + +export const useChangeRequestsEnabled = () => { + // it can be swapped with proper settings instead of feature flag + const { uiConfig } = useUiConfig(); + return Boolean(uiConfig?.flags?.changeRequests); +};