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,8 +105,18 @@ export const AuctionCard = ({ project }: { project: Project }) => {
           </span>
         </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>
+
+        {auctionStatus === 'completed' && (
+          <>
             {deployers?.length > 0 ? (
-          <div className="mt-3">
+              <div>
                 <span className="text-elements-high-em text-sm font-medium tracking-tight">
                   Deployer LRNs
                 </span>
@@ -141,6 +144,9 @@ export const AuctionCard = ({ project }: { project: Project }) => {
                 </Tag>
               </div>
             </div>
+          </>
+        )}
+
       </div>
 
       <Dialog