refactor: hook for change requests (#2331)

* refactor: hook for change requests

* Update frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx

Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>

* Update frontend/src/component/project/Project/Project.tsx

Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>

* Update frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx

Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>

* Update frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx

Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>

* fix: fix imports

Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>

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 changeRequestsEnabled = useChangeRequestsEnabled();
-    const suggestChangesEnabled = Boolean(uiConfig?.flags?.changeRequests);
 
     const onRemove = useOnRemove({
         featureId,
@@ -213,7 +212,7 @@ export const FeatureStrategyRemove = ({
                 }
             />
             <ConditionallyRender
-                condition={suggestChangesEnabled}
+                condition={changeRequestsEnabled}
                 show={
                     <SuggestFeatureStrategyRemoveDialogue
                         isOpen={openDialogue}

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx

@@ -13,6 +13,7 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useChangeRequestToggle } from 'hooks/useChangeRequestToggle';
 import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog';
+import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 
 interface IFeatureOverviewEnvSwitchProps {
     env: IFeatureEnvironment;
@@ -34,7 +35,7 @@ const FeatureOverviewEnvSwitch = ({
     const { refetchFeature } = useFeature(projectId, featureId);
     const { setToastData, setToastApiError } = useToast();
     const { classes: styles } = useStyles();
-    const { uiConfig } = useUiConfig();
+    const changeRequestsEnabled = useChangeRequestsEnabled();
     const {
         onChangeRequestToggle,
         onChangeRequestToggleClose,
@@ -84,7 +85,7 @@ const FeatureOverviewEnvSwitch = ({
     };
 
     const toggleEnvironment = async (e: React.ChangeEvent) => {
-        if (uiConfig?.flags?.changeRequests && env.name === 'production') {
+        if (changeRequestsEnabled && env.name === 'production') {
             e.preventDefault();
             onChangeRequestToggle(featureId, env.name, !env.enabled);
             return;

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 <FeatureNotFound />;
     }
 
-    console.log(uiConfig?.flags);
-
     return (
         <MainLayout
             ref={ref}
             subheader={
-                uiConfig?.flags?.changeRequests ? (
+                changeRequestsEnabled ? (
                     <DraftBanner project={projectId} />
                 ) : null
             }

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 = () => {
         <MainLayout
             ref={ref}
             subheader={
-                uiConfig?.flags?.changeRequests ? (
+                changeRequestsEnabled ? (
                     <DraftBanner project={projectId} />
                 ) : null
             }
@@ -248,7 +249,7 @@ const Project = () => {
                     path="change-requests"
                     element={
                         <ConditionallyRender
-                            condition={Boolean(uiConfig?.flags?.changeRequests)}
+                            condition={changeRequestsEnabled}
                             show={<ProjectChangeRequests />}
                         />
                     }
@@ -257,7 +258,7 @@ const Project = () => {
                     path="change-requests/:id"
                     element={
                         <ConditionallyRender
-                            condition={Boolean(uiConfig?.flags?.changeRequests)}
+                            condition={changeRequestsEnabled}
                             show={<ChangeRequestOverview />}
                         />
                     }

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 (
+            if (changeRequestsEnabled && environment === 'production') {
-                uiConfig?.flags?.changeRequests &&
-                environment === 'production'
-            ) {
                 onChangeRequestToggle(featureName, environment, enabled);
                 throw new Error('Additional approval required');
             }

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);
+};