feat: update hook to use change request settings (#2406)

* Refactors the hook to use the change request settings from the API

frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx

@@ -51,7 +51,7 @@ export const FeatureStrategyCreate = () => {
 
     const { feature, refetchFeature } = useFeature(projectId, featureId);
     const ref = useRef<IFeatureToggle>(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}
         </FormTemplate>

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}
         </FormTemplate>

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<IAddFromTemplateCardProps> = ({
     const { addStrategyToFeature } = useFeatureStrategyApi();
     const { setToastApiError } = useToast();
 
-    const isChangeRequestEnabled = useChangeRequestsEnabled(environmentId);
+    const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
 
     const {
         changeRequestDialogDetails,
@@ -51,7 +52,7 @@ export const AddFromTemplateCard: FC<IAddFromTemplateCardProps> = ({
 
     const onStrategyAdd = async () => {
         try {
-            if (isChangeRequestEnabled) {
+            if (isChangeRequestConfigured(environmentId)) {
                 onChangeRequestAddStrategy(environmentId, strategy);
             } else {
                 await addStrategyToFeature(

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,

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 = ({
                 }
             />
             <ConditionallyRender
-                condition={changeRequestsEnabled}
+                condition={isChangeRequestConfigured(environmentId)}
                 show={
                     <SuggestFeatureStrategyRemoveDialogue
                         isOpen={openDialogue}

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

@@ -35,7 +35,7 @@ const FeatureOverviewEnvSwitch = ({
     const { refetchFeature } = useFeature(projectId, featureId);
     const { setToastData, setToastApiError } = useToast();
     const { classes: styles } = useStyles();
-    const changeRequestsEnabled = useChangeRequestsEnabled(env.name);
+    const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
     const {
         onChangeRequestToggle,
         onChangeRequestToggleClose,
@@ -85,7 +85,7 @@ const FeatureOverviewEnvSwitch = ({
     };
 
     const toggleEnvironment = async (e: React.ChangeEvent) => {
-        if (changeRequestsEnabled) {
+        if (isChangeRequestConfigured(env.name)) {
             e.preventDefault();
             onChangeRequestToggle(featureId, env.name, !env.enabled);
             return;

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 = () => {
         <MainLayout
             ref={ref}
             subheader={
-                changeRequestsEnabled ? (
+                isChangeRequestConfiguredInAnyEnv() ? (
                     <DraftBanner project={projectId} />
                 ) : null
             }

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 = () => {
         <MainLayout
             ref={ref}
             subheader={
-                changeRequestsEnabled ? (
+                isChangeRequestConfiguredInAnyEnv() ? (
                     <DraftBanner project={projectId} />
                 ) : null
             }
@@ -263,7 +263,7 @@ const Project = () => {
                     path="change-requests"
                     element={
                         <ConditionallyRender
-                            condition={changeRequestsEnabled}
+                            condition={isChangeRequestFlagEnabled}
                             show={<ProjectChangeRequests />}
                         />
                     }
@@ -272,7 +272,7 @@ const Project = () => {
                     path="change-requests/:id"
                     element={
                         <ConditionallyRender
-                            condition={changeRequestsEnabled}
+                            condition={isChangeRequestFlagEnabled}
                             show={<ChangeRequestOverview />}
                         />
                     }

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

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