diff --git a/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx b/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx index 16608978b7..1db7298605 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx +++ b/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 = ({ 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; diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx index 135198a5e4..07932179b5 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx +++ b/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 }) => ( <> @@ -28,16 +27,7 @@ export const AddCommentField: FC<{ /> - + {children} ); diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx index 6533629984..da721698c8 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx +++ b/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 = () => { + > + + { changeRequest.state === 'In review' && !hasApprovedAlready } - show={} + show={ + + } /> { environmentId={ changeRequest.environment } + disabled={!allowChangeRequestActions} > Apply changes diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx index f8e3673c0c..a6d579b13d 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx +++ b/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 = () => { { 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),