Add overwrite credential in the Deploy Modal

Author: iamfaran

client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx

@@ -1,11 +1,12 @@
 // components/DeployItemModal.tsx
 import React, { useState, useEffect } from 'react';
-import { Modal, Form, Select, Checkbox, Button, Spin, Input, Tag, Space } from 'antd';
+import { Modal, Form, Select, Checkbox, Button, Spin, Input, Tag, Space, Alert } from 'antd';
 import { messageInstance } from 'lowcoder-design/src/components/GlobalInstances';
 import { Environment } from '../types/environment.types';
 import { DeployableItemConfig } from '../types/deployable-item.types';
 import { useEnvironmentContext } from '../context/EnvironmentContext';
 import { getEnvironmentTagColor, formatEnvironmentType } from '../utils/environmentUtils';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
 
 interface DeployItemModalProps {
   visible: boolean;
@@ -27,10 +28,12 @@ function DeployItemModal({
   const [form] = Form.useForm();
   const { environments, isLoading } = useEnvironmentContext();
   const [deploying, setDeploying] = useState(false);
+  const [credentialConfirmationStep, setCredentialConfirmationStep] = useState(0); // 0: not started, 1: first confirmation, 2: confirmed
 
   useEffect(() => {
     if (visible) {
       form.resetFields();
+      setCredentialConfirmationStep(0);
     }
   }, [visible, form]);
 
@@ -39,6 +42,76 @@ function DeployItemModal({
     (env: Environment) => env.environmentId !== sourceEnvironment.environmentId && env.isLicensed !== false
   );
 
+  // Handle credential checkbox change with double confirmation
+  const handleCredentialCheckboxChange = (checked: boolean, fieldName: string) => {
+    if (!checked) {
+      // If unchecking, reset confirmation and update form
+      setCredentialConfirmationStep(0);
+      form.setFieldsValue({ [fieldName]: false });
+      return;
+    }
+
+    // First confirmation
+    if (credentialConfirmationStep === 0) {
+      Modal.confirm({
+        title: 'Overwrite Credentials Warning',
+        icon: <ExclamationCircleOutlined />,
+        content: (
+          <div>
+            <Alert
+              message="This action will overwrite existing credentials in the target environment."
+              description="This is a serious operation that may affect other applications and users. Are you sure you want to proceed?"
+              type="warning"
+              showIcon
+              style={{ marginBottom: 16 }}
+            />
+          </div>
+        ),
+        okText: 'Continue',
+        cancelText: 'Cancel',
+        onOk: () => {
+          setCredentialConfirmationStep(1);
+          // Show second confirmation immediately
+          showSecondConfirmation(fieldName);
+        },
+        onCancel: () => {
+          setCredentialConfirmationStep(0);
+          form.setFieldsValue({ [fieldName]: false });
+        }
+      });
+    }
+  };
+
+  const showSecondConfirmation = (fieldName: string) => {
+    Modal.confirm({
+      title: 'Final Confirmation Required',
+      icon: <ExclamationCircleOutlined />,
+      content: (
+        <div>
+          <Alert
+            message="Final Warning: Credential Overwrite"
+            description="You are about to overwrite credentials in the target environment. This action cannot be undone and may break existing integrations. Please confirm one more time."
+            type="error"
+            showIcon
+            style={{ marginBottom: 16 }}
+          />
+          <p><strong>Are you absolutely certain you want to overwrite the credentials?</strong></p>
+        </div>
+      ),
+      okText: 'Yes, Overwrite Credentials',
+      okType: 'danger',
+      cancelText: 'Cancel',
+      onOk: () => {
+        setCredentialConfirmationStep(2);
+        form.setFieldsValue({ [fieldName]: true });
+      },
+      onCancel: () => {
+        setCredentialConfirmationStep(0);
+        form.setFieldsValue({ [fieldName]: false });
+      }
+    });
+  };
+
   const handleDeploy = async () => {
       if (!config.deploy || !item) return;
 
@@ -50,6 +123,12 @@ function DeployItemModal({
         messageInstance.error('Target environment not found');
         return;
       }
+
+      // Additional check for credential overwrite
+      if (values.deployCredential && credentialConfirmationStep !== 2) {
+        messageInstance.error('Please confirm credential overwrite before deploying');
+        return;
+      }
 
       setDeploying(true);
 
@@ -124,14 +203,32 @@ function DeployItemModal({
           {config.deploy?.fields.map(field => {
             switch (field.type) {
               case 'checkbox':
+                // Special handling for credential-related checkboxes
+                const isCredentialField = field.name === 'deployCredential';
                 return (
                   <Form.Item
                     key={field.name}
                     name={field.name}
                     valuePropName="checked"
                     initialValue={field.defaultValue}
                   >
-                    <Checkbox>{field.label}</Checkbox>
+                    <Checkbox
+                      onChange={(e) => {
+                        if (isCredentialField) {
+                          handleCredentialCheckboxChange(e.target.checked, field.name);
+                        } else {
+                          // For non-credential checkboxes, handle normally
+                          form.setFieldsValue({ [field.name]: e.target.checked });
+                        }
+                      }}
+                    >
+                      {field.label}
+                      {isCredentialField && credentialConfirmationStep === 2 && (
+                        <Tag color="orange" style={{ marginLeft: 8 }}>
+                          Confirmed
+                        </Tag>
+                      )}
+                    </Checkbox>
                   </Form.Item>
                 );
               case 'select':