From e98fbf82cbf33931a55b983917536e36adb86721 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 2 Feb 2024 16:25:02 +0900
Subject: [PATCH] chore: set up context for sidebar CRs

---
 .../ChangeRequestSidebar.tsx                  | 50 ++++++++++++-------
 .../EnvironmentChangeRequest.tsx              | 16 +++---
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
index 3177cb7b07..1a28abc734 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { useState, VFC } from 'react';
 import { Box, Button, styled, Typography } from '@mui/material';
 import { DynamicSidebarModal } from 'component/common/SidebarModal/SidebarModal';
 import { PageContent } from 'component/common/PageContent/PageContent';
@@ -11,6 +11,7 @@ import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { EnvironmentChangeRequest } from './EnvironmentChangeRequest/EnvironmentChangeRequest';
 import { ReviewChangesHeader } from './ReviewChangesHeader/ReviewChangesHeader';
+import { ChangeRequestPlausibleProvider } from '../ChangeRequestContext';
 
 interface IChangeRequestSidebarProps {
     open: boolean;
@@ -76,15 +77,18 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
         loading,
         refetch: refetchChangeRequest,
     } = usePendingChangeRequests(project);
-    const { changeState, discardDraft } = useChangeRequestApi();
+    const { discardDraft } = useChangeRequestApi();
     const { setToastApiError } = useToast();
+    const [
+        changeRequestChangesWillOverwrite,
+        setChangeRequestChangesWillOverwrite,
+    ] = useState(false);
 
-    const onReview = async (draftId: number, comment?: string) => {
+    const onReview = async (
+        changeState: (project: string) => Promise<void>,
+    ) => {
         try {
-            await changeState(project, draftId, 'Draft', {
-                state: 'In review',
-                comment,
-            });
+            await changeState(project);
             refetchChangeRequest();
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
@@ -130,19 +134,29 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
                 header={<ReviewChangesHeader />}
             >
                 {data?.map((environmentChangeRequest) => (
-                    <EnvironmentChangeRequest
+                    <ChangeRequestPlausibleProvider
                         key={environmentChangeRequest.id}
-                        environmentChangeRequest={environmentChangeRequest}
-                        onClose={onClose}
-                        onReview={onReview}
-                        onDiscard={onDiscard}
+                        value={{
+                            willOverwriteStrategyChanges:
+                                changeRequestChangesWillOverwrite,
+                            registerWillOverwriteStrategyChanges: () =>
+                                setChangeRequestChangesWillOverwrite(true),
+                        }}
                     >
-                        <ChangeRequest
-                            changeRequest={environmentChangeRequest}
-                            onNavigate={onClose}
-                            onRefetch={refetchChangeRequest}
-                        />
-                    </EnvironmentChangeRequest>
+                        <EnvironmentChangeRequest
+                            key={environmentChangeRequest.id}
+                            environmentChangeRequest={environmentChangeRequest}
+                            onClose={onClose}
+                            onReview={onReview}
+                            onDiscard={onDiscard}
+                        >
+                            <ChangeRequest
+                                changeRequest={environmentChangeRequest}
+                                onNavigate={onClose}
+                                onRefetch={refetchChangeRequest}
+                            />
+                        </EnvironmentChangeRequest>
+                    </ChangeRequestPlausibleProvider>
                 ))}
             </StyledPageContent>
         </DynamicSidebarModal>
diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
index 7a38a6fe14..45a6c7973f 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
@@ -23,6 +23,7 @@ import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import Input from 'component/common/Input/Input';
 import { ChangeRequestTitle } from './ChangeRequestTitle';
 import { UpdateCount } from 'component/changeRequest/UpdateCount';
+import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
 
 const SubmitChangeRequestButton: FC<{ onClick: () => void; count: number }> = ({
     onClick,
@@ -56,7 +57,7 @@ const ChangeRequestContent = styled(Box)(({ theme }) => ({
 export const EnvironmentChangeRequest: FC<{
     environmentChangeRequest: ChangeRequestType;
     onClose: () => void;
-    onReview: (id: number, comment?: string) => void;
+    onReview: (changeState: (project: string) => Promise<void>) => void;
     onDiscard: (id: number) => void;
 }> = ({ environmentChangeRequest, onClose, onReview, onDiscard, children }) => {
     const theme = useTheme();
@@ -64,6 +65,12 @@ export const EnvironmentChangeRequest: FC<{
     const [commentText, setCommentText] = useState('');
     const { user } = useAuthUser();
     const [title, setTitle] = useState(environmentChangeRequest.title);
+    const { changeState } = useChangeRequestApi();
+    const sendToReview = async (project: string) =>
+        changeState(project, environmentChangeRequest.id, 'Draft', {
+            state: 'In review',
+            comment: commentText,
+        });
 
     return (
         <Box key={environmentChangeRequest.id}>
@@ -141,12 +148,7 @@ export const EnvironmentChangeRequest: FC<{
                         show={
                             <>
                                 <SubmitChangeRequestButton
-                                    onClick={() =>
-                                        onReview(
-                                            environmentChangeRequest.id,
-                                            commentText,
-                                        )
-                                    }
+                                    onClick={() => onReview(sendToReview)}
                                     count={changesCount(
                                         environmentChangeRequest,
                                     )}