disable change request overview actions when CR are disabled (#2527)

frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx

@@ -19,6 +19,7 @@ import {
 } from 'utils/strategyNames';
 import { hasNameField } from '../changeRequest.types';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 
 interface IChangeRequestProps {
     changeRequest: IChangeRequest;
@@ -91,8 +92,15 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
             setToastApiError(formatUnknownError(error));
         }
     };
+    const { isChangeRequestConfigured } = useChangeRequestsEnabled(
+        changeRequest.project
+    );
+    const allowChangeRequestActions = isChangeRequestConfigured(
+        changeRequest.environment
+    );
 
     const showDiscard =
+        allowChangeRequestActions &&
         !['Cancelled', 'Applied'].includes(changeRequest.state) &&
         changeRequest.features.flatMap(feature => feature.changes).length > 1;
 

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx

@@ -11,9 +11,8 @@ const AddCommentWrapper = styled(Box)(({ theme }) => ({
 export const AddCommentField: FC<{
     imageUrl: string;
     commentText: string;
-    onAddComment: () => void;
     onTypeComment: (text: string) => void;
-}> = ({ imageUrl, commentText, onTypeComment, onAddComment }) => (
+}> = ({ imageUrl, commentText, onTypeComment, children }) => (
     <>
         <AddCommentWrapper>
             <StyledAvatar src={imageUrl} />
@@ -28,16 +27,7 @@ export const AddCommentField: FC<{
             />
         </AddCommentWrapper>
         <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <Button
-                variant="outlined"
-                onClick={onAddComment}
-                disabled={
-                    commentText.trim().length === 0 ||
-                    commentText.trim().length > 1000
-                }
-            >
-                Comment
-            </Button>
+            {children}
         </Box>
     </>
 );

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx

@@ -22,6 +22,7 @@ import AccessContext from 'contexts/AccessContext';
 import { ChangeRequestComment } from './ChangeRequestComments/ChangeRequestComment';
 import { AddCommentField } from './ChangeRequestComments/AddCommentField';
 import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
+import { useChangeRequestsEnabled } from '../../../hooks/useChangeRequestsEnabled';
 
 const StyledAsideBox = styled(Box)(({ theme }) => ({
     width: '30%',
@@ -62,11 +63,16 @@ export const ChangeRequestOverview: FC = () => {
     const { refetch: refetchChangeRequestOpen } =
         usePendingChangeRequests(projectId);
     const { setToastData, setToastApiError } = useToast();
+    const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
 
     if (!changeRequest) {
         return null;
     }
 
+    const allowChangeRequestActions = isChangeRequestConfigured(
+        changeRequest.environment
+    );
+
     const onApplyChanges = async () => {
         try {
             await changeState(projectId, Number(id), {
@@ -163,9 +169,20 @@ export const ChangeRequestOverview: FC = () => {
                         <AddCommentField
                             imageUrl={user?.imageUrl || ''}
                             commentText={commentText}
-                            onAddComment={onAddComment}
                             onTypeComment={setCommentText}
-                        />
+                        >
+                            <Button
+                                variant="outlined"
+                                onClick={onAddComment}
+                                disabled={
+                                    !allowChangeRequestActions ||
+                                    commentText.trim().length === 0 ||
+                                    commentText.trim().length > 1000
+                                }
+                            >
+                                Comment
+                            </Button>
+                        </AddCommentField>
                         <ConditionallyRender
                             condition={isSelfReview}
                             show={
@@ -189,7 +206,11 @@ export const ChangeRequestOverview: FC = () => {
                                     changeRequest.state === 'In review' &&
                                     !hasApprovedAlready
                                 }
-                                show={<ReviewButton />}
+                                show={
+                                    <ReviewButton
+                                        disabled={!allowChangeRequestActions}
+                                    />
+                                }
                             />
                             <ConditionallyRender
                                 condition={changeRequest.state === 'Approved'}
@@ -202,6 +223,7 @@ export const ChangeRequestOverview: FC = () => {
                                         environmentId={
                                             changeRequest.environment
                                         }
+                                        disabled={!allowChangeRequestActions}
                                     >
                                         Apply changes
                                     </PermissionButton>

frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { FC, useContext } from 'react';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useChangeRequest } from 'hooks/api/getters/useChangeRequest/useChangeRequest';
 import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
@@ -22,7 +22,7 @@ import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import AccessContext from 'contexts/AccessContext';
 import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
 
-export const ReviewButton = () => {
+export const ReviewButton: FC<{ disabled: boolean }> = ({ disabled }) => {
     const { isAdmin } = useContext(AccessContext);
     const projectId = useRequiredPathParam('projectId');
     const id = useRequiredPathParam('id');
@@ -73,7 +73,9 @@ export const ReviewButton = () => {
         <React.Fragment>
             <PermissionButton
                 variant="contained"
-                disabled={data?.createdBy.id === user?.id && !isAdmin}
+                disabled={
+                    disabled || (data?.createdBy.id === user?.id && !isAdmin)
+                }
                 aria-controls={open ? 'review-options-menu' : undefined}
                 aria-expanded={open ? 'true' : undefined}
                 aria-label="review changes"

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

@@ -261,7 +261,7 @@ export const ProjectFeatureToggles = ({
                 disableSortBy: true,
             },
         ],
-        [projectId, environments, loading]
+        [projectId, environments, loading, onToggle]
     );
 
     const [searchValue, setSearchValue] = useState(

frontend/src/hooks/useChangeRequestsEnabled.ts

@@ -17,7 +17,7 @@ export const useChangeRequestsEnabled = (projectId: string) => {
 
             return Boolean(uiConfig?.flags.changeRequests) && enabled;
         },
-        [data]
+        [JSON.stringify(data)]
     );
 
     const isChangeRequestConfiguredInAnyEnv = React.useCallback((): boolean => {
@@ -25,7 +25,7 @@ export const useChangeRequestsEnabled = (projectId: string) => {
             Boolean(uiConfig?.flags.changeRequests) &&
             data.some(draft => draft.changeRequestEnabled)
         );
-    }, [data]);
+    }, [JSON.stringify(data)]);
 
     return {
         isChangeRequestFlagEnabled: Boolean(uiConfig?.flags.changeRequests),