From b3c324b7adbce60957a52cb6f67a8ff6090ef46b Mon Sep 17 00:00:00 2001
From: CodeSafari <codesafari10@gmail.com>
Date: Fri, 7 Jun 2024 18:04:58 +0530
Subject: [PATCH] open in visualizer

Signed-off-by: CodeSafari <codesafari10@gmail.com>
---
 ui/components/DesignLifeCycle/DeployStepper.js     | 14 ++++++++++++--
 .../DesignLifeCycle/finalizeDeployment.js          |  8 ++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/ui/components/DesignLifeCycle/DeployStepper.js b/ui/components/DesignLifeCycle/DeployStepper.js
index 76ba64f6bc7..1317d8c9c70 100644
--- a/ui/components/DesignLifeCycle/DeployStepper.js
+++ b/ui/components/DesignLifeCycle/DeployStepper.js
@@ -56,7 +56,7 @@ const StepContent = styled('div', {
   backgroundColor: backgroundColor || theme.palette.background.default,
 }));
 
-export const FinishDeploymentStep = ({ perform_deployment, deployment_type }) => {
+export const FinishDeploymentStep = ({ perform_deployment, deployment_type, autoOpenView }) => {
   const { operationsCenterActorRef } = useContext(NotificationCenterContext);
 
   const [isDeploying, setIsDeploying] = useState(false);
@@ -81,6 +81,9 @@ export const FinishDeploymentStep = ({ perform_deployment, deployment_type }) =>
         if (serverEvent.action === deployment_type) {
           setIsDeploying(false);
           setDeployEvent(serverEvent);
+          if (autoOpenView) {
+            window.open(serverEvent.metadata.viewUrl, '_blank');
+          }
         }
       },
     );
@@ -178,6 +181,7 @@ export const UpdateDeploymentStepper = ({
 }) => {
   const [includeDependencies, setIncludeDependencies] = useState(false);
   const [bypassDryRun, setBypassDryRun] = useState(false);
+  const [openInVisualizer, setOpenInVisualizer] = useState(false);
 
   const selectedEnvironments = useSelectorRtk(selectSelectedEnvs);
   const selectedEnvCount = Object.keys(selectedEnvironments).length;
@@ -250,7 +254,12 @@ export const UpdateDeploymentStepper = ({
       {
         component: (
           <StepContent backgroundColor={FinalizeBackgroundColor}>
-            <FinalizeDeployment design={design} deployment_type={deployment_type} />
+            <FinalizeDeployment
+              design={design}
+              deployment_type={deployment_type}
+              openInVisualizer={openInVisualizer}
+              setOpenInVisualizer={setOpenInVisualizer}
+            />
           </StepContent>
         ),
         helpText:
@@ -265,6 +274,7 @@ export const UpdateDeploymentStepper = ({
               design={design}
               deployment_type={deployment_type}
               perform_deployment={actionFunction}
+              autoOpenView={openInVisualizer}
             />{' '}
           </StepContent>
         ),
diff --git a/ui/components/DesignLifeCycle/finalizeDeployment.js b/ui/components/DesignLifeCycle/finalizeDeployment.js
index a3f94b686c2..bd3ee46b7b9 100644
--- a/ui/components/DesignLifeCycle/finalizeDeployment.js
+++ b/ui/components/DesignLifeCycle/finalizeDeployment.js
@@ -17,7 +17,7 @@ const StyledEnvironment = styled(Box)(({ theme }) => ({
   color: theme.palette.text.neutral.default,
 }));
 
-export const FinalizeDeployment = ({ design }) => {
+export const FinalizeDeployment = ({ design, openInVisualizer, setOpenInVisualizer }) => {
   const { configurableComponents } = processDesign(design);
   const selectedEnvironments = useSelectorRtk(selectSelectedEnvs);
   const envNames = Object.values(selectedEnvironments).map((env) => env.name);
@@ -66,7 +66,11 @@ export const FinalizeDeployment = ({ design }) => {
         </StyledSummaryItem>
       </Box>
       <Stack mt={3} gap={1}>
-        <CheckBoxField label="Open in Visualizer" checked={false} onChange={() => {}} />
+        <CheckBoxField
+          label="Open in Visualizer"
+          checked={openInVisualizer}
+          onChange={() => setOpenInVisualizer(!openInVisualizer)}
+        />
         <CheckBoxField label="Schedule Deployment" checked={false} onChange={() => {}} disabled />
       </Stack>
     </Box>