From 5668bfb7d47b83161de780562136e45134774922 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 1 Aug 2024 11:59:35 +0200
Subject: [PATCH] feat: preview changes button (#7722)

---
 .../ChangeRequestOverview.test.tsx            |  6 +++++
 .../ChangeRequestOverview.tsx                 | 26 +++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.test.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.test.tsx
index 692ebc2913..21464fd35c 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.test.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.test.tsx
@@ -145,6 +145,9 @@ const uiConfig = () => {
         versionInfo: {
             current: { oss: 'version', enterprise: 'version' },
         },
+        flags: {
+            changeRequestPlayground: true,
+        },
     });
 };
 
@@ -223,6 +226,8 @@ test('should allow scheduling of approved change request and show the schedule d
     fireEvent.click(scheduleChangesButton);
 
     await screen.findByRole('dialog', { name: 'Schedule changes' });
+
+    await screen.findByText('Preview changes');
 });
 
 test('should show a reschedule dialog when change request is scheduled and update schedule is selected', async () => {
@@ -249,6 +254,7 @@ test('should show a reschedule dialog when change request is scheduled and updat
     const scheduleChangesButton = await screen.findByRole('menuitem', {
         name: 'Update schedule',
     });
+    await screen.findByText('Preview changes');
 
     fireEvent.click(scheduleChangesButton);
 
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
index 7f55751a39..95fb3b9910 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
@@ -32,6 +32,8 @@ import {
 } from './ChangeRequestScheduledDialogs/changeRequestScheduledDialogs';
 import { ScheduleChangeRequestDialog } from './ChangeRequestScheduledDialogs/ScheduleChangeRequestDialog';
 import type { PlausibleChangeRequestState } from '../changeRequest.types';
+import { useNavigate } from 'react-router-dom';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledAsideBox = styled(Box)(({ theme }) => ({
     width: '30%',
@@ -101,6 +103,8 @@ export const ChangeRequestOverview: FC = () => {
     const { isChangeRequestConfiguredForReview } =
         useChangeRequestsEnabled(projectId);
     const [disabled, setDisabled] = useState(false);
+    const navigate = useNavigate();
+    const changeRequestPlaygroundEnabled = useUiFlag('changeRequestPlayground');
 
     if (!changeRequest) {
         return null;
@@ -376,6 +380,7 @@ export const ChangeRequestOverview: FC = () => {
                                     </ReviewButton>
                                 }
                             />
+
                             <ConditionallyRender
                                 condition={changeRequest.state === 'Approved'}
                                 show={
@@ -414,6 +419,27 @@ export const ChangeRequestOverview: FC = () => {
                                 }
                             />
 
+                            <ConditionallyRender
+                                condition={
+                                    changeRequestPlaygroundEnabled &&
+                                    (changeRequest.state === 'In review' ||
+                                        changeRequest.state === 'Approved' ||
+                                        changeRequest.state === 'Scheduled')
+                                }
+                                show={
+                                    <StyledButton
+                                        variant='outlined'
+                                        onClick={() => {
+                                            navigate(
+                                                `/playground?changeRequest=${changeRequest.id}`,
+                                            );
+                                        }}
+                                    >
+                                        Preview changes
+                                    </StyledButton>
+                                }
+                            />
+
                             <ConditionallyRender
                                 condition={
                                     changeRequest.state !== 'Applied' &&