lowcoder-org · FalkWolsky · May 27, 2025 · May 27, 2025 · May 27, 2025 · May 27, 2025
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx
@@ -1,11 +1,13 @@
 // 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';
+import { showFirstCredentialOverwriteConfirm, showSecondCredentialOverwriteConfirm } from './credentialConfirmations';
 
 interface DeployItemModalProps {
   visible: boolean;
@@ -27,10 +29,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 +43,40 @@ 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) {
+      showFirstCredentialOverwriteConfirm({
+        onOk: () => {
+          setCredentialConfirmationStep(1);
+          // Show second confirmation immediately
+          showSecondCredentialOverwriteConfirm({
+            onOk: () => {
+              setCredentialConfirmationStep(2);
+              form.setFieldsValue({ [fieldName]: true });
+            },
+            onCancel: () => {
+              setCredentialConfirmationStep(0);
+              form.setFieldsValue({ [fieldName]: false });
+            }
+          });
+        },
+        onCancel: () => {
+          setCredentialConfirmationStep(0);
+          form.setFieldsValue({ [fieldName]: false });
+        }
+      });
+    }
+  };
+
   const handleDeploy = async () => {
       if (!config.deploy || !item) return;
 
@@ -50,6 +88,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 +168,36 @@ 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="red" 
+                          style={{ marginLeft: 8 }}
+                          icon={<ExclamationCircleOutlined />}
+                        >
+                          Confirmed
+                        </Tag>
+                      )}
+                    </Checkbox>
                   </Form.Item>
                 );
               case 'select':
@@ -168,7 +234,7 @@ function DeployItemModal({
                 return null;
             }
           })}
-
+           
           <Form.Item>
             <Button type="default" onClick={onClose} style={{ marginRight: 8 }}>
               Cancel

diff --git a/...t/packages/lowcoder/src/pages/setting/environments/components/credentialConfirmations.tsx b/...t/packages/lowcoder/src/pages/setting/environments/components/credentialConfirmations.tsx
@@ -0,0 +1,111 @@
+
+import { Modal, Alert } from 'antd';
+import { ExclamationCircleOutlined, WarningOutlined } from '@ant-design/icons';
+
+interface ConfirmHandlers {
+  onOk: () => void;
+  onCancel: () => void;
+}
+
+/**
+ * First-step confirmation modal (orange / warning).
+ */
+export function showFirstCredentialOverwriteConfirm({ onOk, onCancel }: ConfirmHandlers) {
+  Modal.confirm({
+    title: (
+      <div style={{ display: 'flex', alignItems: 'center', color: '#ff7a00' }}>
+        <WarningOutlined style={{ marginRight: 8, fontSize: 18 }} />
+        <span style={{ fontSize: 16, fontWeight: 600 }}>Overwrite Credentials Warning</span>
+      </div>
+    ),
+    icon: null,
+    content: (
+      <div style={{ padding: '16px 0' }}>
+        <Alert
+          message="This action will overwrite existing credentials in the target environment."
+          description={
+            <div style={{ marginTop: 8 }}>
+              <p style={{ margin: 0, fontWeight: 500 }}>
+                This is a serious operation that may affect other applications and users.
+              </p>
+              <p style={{ margin: '8px 0 0 0', color: '#8c8c8c' }}>
+                Are you sure you want to proceed?
+              </p>
+            </div>
+          }
+          type="warning"
+          showIcon
+          style={{ marginBottom: 0, border: '1px solid #fff2e8', borderRadius: 8 }}
+        />
+      </div>
+    ),
+    okText: 'Continue',
+    cancelText: 'Cancel',
+    okButtonProps: {
+      style: { backgroundColor: '#ff7a00', borderColor: '#ff7a00', fontWeight: 500 }
+    },
+    cancelButtonProps: {
+      style: { fontWeight: 500 }
+    },
+    width: 520,
+    centered: false,
+    onOk,
+    onCancel
+  });
+}
+
+/**
+ * Second-step (final) confirmation modal (red / danger).
+ */
+export function showSecondCredentialOverwriteConfirm({ onOk, onCancel }: ConfirmHandlers) {
+  Modal.confirm({
+    title: (
+      <div style={{ display: 'flex', alignItems: 'center', color: '#ff4d4f' }}>
+        <ExclamationCircleOutlined style={{ marginRight: 8, fontSize: 18 }} />
+        <span style={{ fontSize: 16, fontWeight: 600 }}>Final Confirmation Required</span>
+      </div>
+    ),
+    icon: null,
+    content: (
+      <div style={{ padding: '16px 0' }}>
+        <Alert
+          message="Final Warning: Credential Overwrite"
+          description={
+            <div style={{ marginTop: 8 }}>
+              <p style={{ margin: 0, fontWeight: 500 }}>
+                You are about to overwrite credentials in the target environment. This action cannot be undone and may break existing integrations.
+              </p>
+              <p style={{ margin: '8px 0 0 0', color: '#8c8c8c' }}>
+                Please confirm one more time.
+              </p>
+            </div>
+          }
+          type="error"
+          showIcon
+          style={{ marginBottom: 16, border: '1px solid #ffebee', borderRadius: 8 }}
+        />
+        <div
+          style={{
+            padding: '12px 16px',
+            backgroundColor: '#fff2f0',
+            borderRadius: 8,
+            border: '1px solid #ffccc7'
+          }}
+        >
+          <p style={{ margin: 0, fontWeight: 600, color: '#cf1322', fontSize: 14 }}>
+            Are you absolutely certain you want to overwrite the credentials?
+          </p>
+        </div>
+      </div>
+    ),
+    okText: 'Yes, Overwrite Credentials',
+    okType: 'danger',
+    cancelText: 'Cancel',
+    okButtonProps: { style: { fontWeight: 500 } },
+    cancelButtonProps: { style: { fontWeight: 500 } },
+    width: 520,
+    centered: false,
+    onOk,
+    onCancel
+  });
+} 
diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/apps.config.tsx
@@ -39,6 +39,12 @@ export const appsConfig: DeployableItemConfig = {
         label: 'Public To Marketplace',
         type: 'checkbox',
         defaultValue: false
+      },
+      {
+        name: 'deployCredential',
+        label: 'Overwrite Credentials',
+        type: 'checkbox',
+        defaultValue: false
       }
     ],
     prepareParams: (item: App, values: any, sourceEnv: Environment, targetEnv: Environment) => {
@@ -51,6 +57,7 @@ export const appsConfig: DeployableItemConfig = {
         publicToAll: values.publicToAll,
         publicToMarketplace: values.publicToMarketplace,
         applicationGid: item.applicationGid,
+        deployCredential: values.deployCredential ?? false
       };
     },
     execute: (params: any) => deployApp(params)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/data-sources.config.tsx
@@ -16,6 +16,12 @@ export const dataSourcesConfig: DeployableItemConfig = {
         label: 'Update Dependencies If Needed',
         type: 'checkbox',
         defaultValue: false
+      },
+      {
+        name: 'deployCredential',
+        label: 'Overwrite Credentials',
+        type: 'checkbox',
+        defaultValue: false
       }
     ],
     prepareParams: (item: DataSource, values: any, sourceEnv: Environment, targetEnv: Environment) => {
@@ -24,7 +30,8 @@ export const dataSourcesConfig: DeployableItemConfig = {
         targetEnvId: targetEnv.environmentId,
         datasourceId: item.id,
         updateDependenciesIfNeeded: values.updateDependenciesIfNeeded,
-        datasourceGid: item.gid
+        datasourceGid: item.gid,
+        deployCredential: values.deployCredential ?? false
       };
     },
     execute: (params: any) => deployDataSource(params)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/config/workspace.config.tsx b/client/packages/lowcoder/src/pages/setting/environments/config/workspace.config.tsx
@@ -12,7 +12,14 @@ export const workspaceConfig: DeployableItemConfig = {
   // Deploy configuration
   deploy: {
     singularLabel: 'Workspace',
-    fields: [],
+    fields: [
+      {
+        name: 'deployCredential',
+        label: 'Overwrite Credentials',
+        type: 'checkbox',
+        defaultValue: false
+      }
+    ],
     prepareParams: (item: Workspace, values: any, sourceEnv: Environment, targetEnv: Environment) => {
       if (!item.gid) {
         console.error('Missing workspace.gid when deploying workspace:', item);
@@ -22,7 +29,8 @@ export const workspaceConfig: DeployableItemConfig = {
       return {
         envId: sourceEnv.environmentId,
         targetEnvId: targetEnv.environmentId,
-        workspaceId: item.gid
+        workspaceId: item.gid,
+        deployCredential: values.deployCredential ?? false
       };
     },
     execute: (params: any) => deployWorkspace(params)

diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/apps.service.ts
@@ -23,6 +23,7 @@ export interface DeployAppParams {
   publishOnTarget?: boolean;
   publicToAll?: boolean;
   publicToMarketplace?: boolean;
+  deployCredential: boolean;
 }
 
 
@@ -119,7 +120,8 @@ export const deployApp = async (params: DeployAppParams): Promise<boolean> => {
           updateDependenciesIfNeeded: params.updateDependenciesIfNeeded ?? false,
           publishOnTarget: params.publishOnTarget ?? false,
           publicToAll: params.publicToAll ?? false,
-          publicToMarketplace: params.publicToMarketplace ?? false
+          publicToMarketplace: params.publicToMarketplace ?? false,
+          deployCredential: params.deployCredential
         }
       }
     );

diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/datasources.service.ts
@@ -22,7 +22,7 @@ export interface DeployDataSourceParams {
   datasourceId: string;
   datasourceGid: string;
   updateDependenciesIfNeeded?: boolean;
-
+  deployCredential: boolean;
 }
 // Get data sources for a workspace - using your correct implementation
 export async function getWorkspaceDataSources(
@@ -159,6 +159,7 @@ export async function deployDataSource(params: DeployDataSourceParams): Promise<
         targetEnvId: params.targetEnvId,
         datasourceId: params.datasourceId,
         updateDependenciesIfNeeded: params.updateDependenciesIfNeeded ?? false,
+        deployCredential: params.deployCredential
       }
     });
     if (response.status === 200) {

diff --git a/client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts b/client/packages/lowcoder/src/pages/setting/environments/services/workspace.service.ts
@@ -84,14 +84,16 @@ export async function deployWorkspace(params: {
   envId: string;
   targetEnvId: string;
   workspaceId: string;
+  deployCredential: boolean; // Mandatory parameter
 }): Promise<boolean> {
   try {
     // Use the new endpoint format with only essential parameters
     const response = await axios.post('/api/plugins/enterprise/org/deploy', null, {
       params: {
         orgGid: params.workspaceId, // Using workspaceId as orgGid
         envId: params.envId,
-        targetEnvId: params.targetEnvId
+        targetEnvId: params.targetEnvId,
+        deployCredential: params.deployCredential
       }
     });