Display confirm dialog on deleting deployment

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

@@ -0,0 +1,26 @@
+import ConfirmDialog, {
+  ConfirmDialogProps,
+} from 'components/shared/ConfirmDialog';
+
+export const DeleteDeploymentDialog = ({
+  open,
+  handleCancel,
+  handleConfirm,
+  ...props
+}: ConfirmDialogProps) => {
+  return (
+    <ConfirmDialog
+      {...props}
+      dialogTitle="Delete deployment?"
+      handleCancel={handleCancel}
+      open={open}
+      confirmButtonTitle="Yes, delete deployment"
+      handleConfirm={handleConfirm}
+      confirmButtonProps={{ variant: 'danger' }}
+    >
+      <p className="text-sm text-elements-high-em">
+        Once deleted, the deployment will not be accessible.
+      </p>
+    </ConfirmDialog>
+  );
+};

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

@@ -23,6 +23,7 @@ import { useGQLClient } from 'context/GQLClientContext';
 import { cn } from 'utils/classnames';
 import { ChangeStateToProductionDialog } from 'components/projects/Dialog/ChangeStateToProductionDialog';
 import { useToast } from 'components/shared/Toast';
+import { DeleteDeploymentDialog } from 'components/projects/Dialog/DeleteDeploymentDialog';
 
 interface DeploymentMenuProps extends ComponentPropsWithRef<'div'> {
   deployment: Deployment;
@@ -46,6 +47,7 @@ export const DeploymentMenu = ({
 
   const [changeToProduction, setChangeToProduction] = useState(false);
   const [redeployToProduction, setRedeployToProduction] = useState(false);
+  const [deleteDeploymentDialog, setDeleteDeploymentDialog] = useState(false);
   const [rollbackDeployment, setRollbackDeployment] = useState(false);
   const [assignDomainDialog, setAssignDomainDialog] = useState(false);
   const [isConfirmButtonLoading, setConfirmButtonLoadingLoading] =
@@ -123,6 +125,8 @@ export const DeploymentMenu = ({
       onDismiss: dismiss,
     });
 
+    setDeleteDeploymentDialog((preVal) => !preVal);
+
     const isDeleted = await client.deleteDeployment(deployment.id);
     if (isDeleted) {
       await onUpdate();
@@ -212,7 +216,7 @@ export const DeploymentMenu = ({
             </MenuItem>
             <MenuItem
               className="hover:bg-base-bg-emphasized flex items-center gap-3"
-              onClick={() => deleteDeployment()}
+              onClick={() => setDeleteDeploymentDialog((preVal) => !preVal)}
             >
               <CrossCircleIcon /> Delete deployment
             </MenuItem>
@@ -265,6 +269,11 @@ export const DeploymentMenu = ({
         open={assignDomainDialog}
         handleOpen={() => setAssignDomainDialog(!assignDomainDialog)}
       />
+      <DeleteDeploymentDialog
+        open={deleteDeploymentDialog}
+        handleConfirm={deleteDeployment}
+        handleCancel={() => setDeleteDeploymentDialog((preVal) => !preVal)}
+      />
     </>
   );
 };

packages/frontend/src/components/projects/project/overview/Activity/AuctionCard.tsx

@@ -96,13 +96,6 @@ export const AuctionCard = ({ project }: { project: Project }) => {
           </Button>
         </div>
 
-        <div className="flex justify-between items-center mt-1">
-          <span className="text-elements-high-em text-sm font-medium tracking-tight">
-            Auction Status
-          </span>
-          <div className="ml-2">{renderAuctionStatus()}</div>
-        </div>
-
         <div className="flex justify-between items-center mt-2">
           <span className="text-elements-high-em text-sm font-medium tracking-tight">
             Auction Id
@@ -112,35 +105,48 @@ export const AuctionCard = ({ project }: { project: Project }) => {
           </span>
         </div>
 
-        {deployers?.length > 0 ? (
-          <div className="mt-3">
-            <span className="text-elements-high-em text-sm font-medium tracking-tight">
-              Deployer LRNs
-            </span>
-            {deployers.map((deployer, index) => (
-              <p key={index} className="text-elements-mid-em text-sm">
-                {'\u2022'} {deployer.deployerLrn}
-              </p>
-            ))}
-          </div>
-        ) : (
-          <div className="mt-3">
-            <span className="text-elements-high-em text-sm font-medium tracking-tight">
-              No winning deployers
-            </span>
-          </div>
-        )}
 
         <div className="flex justify-between items-center mt-1">
           <span className="text-elements-high-em text-sm font-medium tracking-tight">
-            Deployer Funds Status
+            Auction Status
           </span>
-          <div className="ml-2">
-            <Tag size="xs" type={fundsStatus ? 'positive' : 'emphasized'}>
-              {fundsStatus ? 'RELEASED' : 'LOCKED'}
-            </Tag>
-          </div>
+          <div className="ml-2">{renderAuctionStatus()}</div>
         </div>
+
+        {auctionStatus === 'completed' && (
+          <>
+            {deployers?.length > 0 ? (
+              <div>
+                <span className="text-elements-high-em text-sm font-medium tracking-tight">
+                  Deployer LRNs
+                </span>
+                {deployers.map((deployer, index) => (
+                  <p key={index} className="text-elements-mid-em text-sm">
+                    {'\u2022'} {deployer.deployerLrn}
+                  </p>
+                ))}
+              </div>
+            ) : (
+              <div className="mt-3">
+                <span className="text-elements-high-em text-sm font-medium tracking-tight">
+                  No winning deployers
+                </span>
+              </div>
+            )}
+
+            <div className="flex justify-between items-center mt-1">
+              <span className="text-elements-high-em text-sm font-medium tracking-tight">
+                Deployer Funds Status
+              </span>
+              <div className="ml-2">
+                <Tag size="xs" type={fundsStatus ? 'positive' : 'emphasized'}>
+                  {fundsStatus ? 'RELEASED' : 'LOCKED'}
+                </Tag>
+              </div>
+            </div>
+          </>
+        )}
+
       </div>
 
       <Dialog