♻️ refactor: create change state to production dialog reusable component

packages/frontend/src/components/projects/Dialog/ChangeStateToProductionDialog.tsx

@@ -0,0 +1,90 @@
+import ConfirmDialog, {
+  ConfirmDialogProps,
+} from 'components/shared/ConfirmDialog';
+import { Deployment, Domain } from 'gql-client';
+import React from 'react';
+import DeploymentDialogBodyCard from 'components/projects/project/deployments/DeploymentDialogBodyCard';
+import { Button } from 'components/shared/Button';
+import {
+  ChevronDoubleDownIcon,
+  LinkChainIcon,
+} from 'components/shared/CustomIcon';
+import { TagProps } from 'components/shared/Tag';
+
+interface ChangeStateToProductionDialogProps extends ConfirmDialogProps {
+  deployment: Deployment;
+  newDeployment?: Deployment;
+  domains: Domain[];
+}
+
+export const ChangeStateToProductionDialog = ({
+  deployment,
+  newDeployment,
+  domains,
+  open,
+  handleCancel,
+  handleConfirm,
+  ...props
+}: ChangeStateToProductionDialogProps) => {
+  const currentChip = {
+    value: 'Live Deployment',
+    type: 'positive' as TagProps['type'],
+  };
+  const newChip = {
+    value: 'New Deployment',
+    type: 'attention' as TagProps['type'],
+  };
+
+  return (
+    <ConfirmDialog
+      {...props}
+      handleCancel={handleCancel}
+      open={open}
+      handleConfirm={handleConfirm}
+    >
+      <div className="flex flex-col gap-7">
+        <div className="flex flex-col gap-3">
+          <p className="text-sm text-elements-high-em tracking-[-0.006em]">
+            Upon confirmation, this deployment will be changed to production.
+          </p>
+          <DeploymentDialogBodyCard
+            deployment={deployment}
+            chip={newDeployment ? currentChip : undefined}
+          />
+          {newDeployment && (
+            <>
+              <div className="flex items-center justify-between w-full text-elements-info">
+                {Array.from({ length: 7 }).map((_, index) => (
+                  <ChevronDoubleDownIcon key={index} />
+                ))}
+              </div>
+              <DeploymentDialogBodyCard
+                deployment={newDeployment}
+                chip={newChip}
+              />
+            </>
+          )}
+        </div>
+        <div className="flex flex-col items-start gap-3">
+          <p className="text-sm text-elements-high-em tracking-[-0.006em]">
+            The new deployment will be associated with these domains:
+          </p>
+          {domains.length > 0 &&
+            domains.map((value) => {
+              return (
+                <Button
+                  as="a"
+                  href={value.name}
+                  leftIcon={<LinkChainIcon size={18} />}
+                  variant="link"
+                  key={value.id}
+                >
+                  {value.name}
+                </Button>
+              );
+            })}
+        </div>
+      </div>
+    </ConfirmDialog>
+  );
+};

packages/frontend/src/components/projects/project/deployments/DeploymentMenu.tsx

@@ -17,12 +17,10 @@ import {
   MenuList,
 } from '@material-tailwind/react';
 import { ComponentPropsWithRef } from 'react';
-import ConfirmDialog from '../../../shared/ConfirmDialog';
 import AssignDomainDialog from './AssignDomainDialog';
-import DeploymentDialogBodyCard from './DeploymentDialogBodyCard';
-import { Typography } from '@material-tailwind/react';
-import { useGQLClient } from '../../../../context/GQLClientContext';
+import { useGQLClient } from 'context/GQLClientContext';
 import { cn } from 'utils/classnames';
+import { ChangeStateToProductionDialog } from 'components/projects/Dialog/ChangeStateToProductionDialog';
 
 interface DeploymentMenuProps extends ComponentPropsWithRef<'div'> {
   deployment: Deployment;
@@ -158,106 +156,44 @@ export const DeploymentMenu = ({
         </Menu>
       </div>
       {/* Dialogs */}
-      <ConfirmDialog
+      <ChangeStateToProductionDialog
         dialogTitle="Change to production?"
-        handleOpen={() => setChangeToProduction((preVal) => !preVal)}
-        open={changeToProduction}
         confirmButtonTitle="Change"
-        color="blue"
+        handleCancel={() => setChangeToProduction((preVal) => !preVal)}
+        open={changeToProduction}
         handleConfirm={async () => {
           await updateDeployment();
           setChangeToProduction((preVal) => !preVal);
         }}
-      >
-        <div className="flex flex-col gap-2">
-          <Typography variant="small" placeholder={''}>
-            Upon confirmation, this deployment will be changed to production.
-          </Typography>
-          <DeploymentDialogBodyCard deployment={deployment} />
-          <Typography variant="small" placeholder={''}>
-            The new deployment will be associated with these domains:
-          </Typography>
-          {prodBranchDomains.length > 0 &&
-            prodBranchDomains.map((value) => {
-              return (
-                <Typography
-                  variant="small"
-                  color="blue"
-                  key={value.id}
-                  placeholder={''}
-                >
-                  ^ {value.name}
-                </Typography>
-              );
-            })}
-        </div>
-      </ConfirmDialog>
-      <ConfirmDialog
+        deployment={deployment}
+        domains={prodBranchDomains}
+      />
+      <ChangeStateToProductionDialog
         dialogTitle="Redeploy to production?"
-        handleOpen={() => setRedeployToProduction((preVal) => !preVal)}
+        handleCancel={() => setRedeployToProduction((preVal) => !preVal)}
         open={redeployToProduction}
         confirmButtonTitle="Redeploy"
-        color="blue"
         handleConfirm={async () => {
           await redeployToProd();
           setRedeployToProduction((preVal) => !preVal);
         }}
-      >
-        <div className="flex flex-col gap-2">
-          <Typography variant="small" placeholder={''}>
-            Upon confirmation, new deployment will be created with the same
-            source code as current deployment.
-          </Typography>
-          <DeploymentDialogBodyCard deployment={deployment} />
-          <Typography variant="small" placeholder={''}>
-            These domains will point to your new deployment:
-          </Typography>
-          {deployment.domain?.name && (
-            <Typography variant="small" color="blue" placeholder={''}>
-              {deployment.domain?.name}
-            </Typography>
-          )}
-        </div>
-      </ConfirmDialog>
+        deployment={deployment}
+        domains={deployment.domain ? [deployment.domain] : []}
+      />
       {Boolean(currentDeployment) && (
-        <ConfirmDialog
+        <ChangeStateToProductionDialog
           dialogTitle="Rollback to this deployment?"
-          handleOpen={() => setRollbackDeployment((preVal) => !preVal)}
+          handleCancel={() => setRollbackDeployment((preVal) => !preVal)}
           open={rollbackDeployment}
           confirmButtonTitle="Rollback"
-          color="blue"
           handleConfirm={async () => {
             await rollbackDeploymentHandler();
             setRollbackDeployment((preVal) => !preVal);
           }}
-        >
-          <div className="flex flex-col gap-2">
-            <Typography variant="small" placeholder={''}>
-              Upon confirmation, this deployment will replace your current
-              deployment
-            </Typography>
-            <DeploymentDialogBodyCard
           deployment={currentDeployment}
-              chip={{
-                value: 'Live Deployment',
-                color: 'green',
-              }}
+          newDeployment={deployment}
+          domains={currentDeployment.domain ? [currentDeployment.domain] : []}
         />
-            <DeploymentDialogBodyCard
-              deployment={deployment}
-              chip={{
-                value: 'New Deployment',
-                color: 'orange',
-              }}
-            />
-            <Typography variant="small" placeholder={''}>
-              These domains will point to your new deployment:
-            </Typography>
-            <Typography variant="small" color="blue" placeholder={''}>
-              ^ {currentDeployment.domain?.name}
-            </Typography>
-          </div>
-        </ConfirmDialog>
       )}
       <AssignDomainDialog
         open={assignDomainDialog}