support clone datasource

oceanbase · Nov 9, 2023 · 3134899 · 3134899
1 parent 5835aa6
commit 3134899
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 5 deletions.
diff --git a/src/page/Datasource/Datasource/Content/List/MoreBtn/index.tsx b/src/page/Datasource/Datasource/Content/List/MoreBtn/index.tsx
@@ -20,6 +20,7 @@ import { ModalStore } from '@/store/modal';
 import { formatMessage } from '@/util/intl';
 import { getFormatDateTime } from '@/util/utils';
 import {
+  CopyOutlined,
   DeleteOutlined,
   EditOutlined,
   EllipsisOutlined,
@@ -39,6 +40,7 @@ enum Actions {
   EDIT = 'edit',
   COPY = 'copy',
   REMOVE = 'remove',
+  CLONE = 'clone',
 }
 const MoreBtn: React.FC<IProps> = function ({ connection, modalStore }) {
   const context = useContext(ParamContext);
@@ -103,6 +105,13 @@ const MoreBtn: React.FC<IProps> = function ({ connection, modalStore }) {
           icon: <EditOutlined />,
         }
       : null,
+    connection.permittedActions?.includes(actionTypes.update)
+      ? {
+          label: '克隆',
+          key: Actions.CLONE,
+          icon: <CopyOutlined />,
+        }
+      : null,
     connection.permittedActions?.includes(actionTypes.delete)
       ? {
           label: formatMessage({
@@ -146,6 +155,10 @@ const MoreBtn: React.FC<IProps> = function ({ connection, modalStore }) {
               remove();
               return;
             }
+            case Actions.CLONE: {
+              context.setCopyDatasourceId?.(connection?.id);
+              return;
+            }
           }
         },
       }}

diff --git a/src/page/Datasource/Datasource/NewDatasourceDrawer/index.tsx b/src/page/Datasource/Datasource/NewDatasourceDrawer/index.tsx
@@ -26,9 +26,9 @@ import { formatMessage } from '@/util/intl';
 import { useRequest } from 'ahooks';
 import { Button, Drawer, Input, message, Modal, Space, Spin } from 'antd';
 import copy from 'copy-to-clipboard';
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import DatasourceForm, { IFormRef } from './Form';
-import { ConnectType } from '@/d.ts';
+import { ConnectType, IConnection } from '@/d.ts';
 
 interface IProps {
   visible: boolean;
@@ -37,13 +37,15 @@ interface IProps {
   id?: number;
   disableTheme?: boolean;
   type?: ConnectType;
+  isCopy?: boolean;
   close: () => void;
   onSuccess: () => void;
 }
 
 export default function NewDatasourceDrawer({
   visible,
   isEdit,
+  isCopy,
   type,
   id,
   disableTheme,
@@ -56,12 +58,22 @@ export default function NewDatasourceDrawer({
     manual: true,
   });
 
+  function getOriginDatasource(data: IConnection, isCopy: boolean) {
+    return isCopy
+      ? { ...data, id: null, creatorId: null, name: null, password: '', sysTenantPassword: '' }
+      : data;
+  }
+
+  const originDatasource = useMemo(() => {
+    return getOriginDatasource(data, isCopy);
+  }, [data, isCopy]);
+
   async function getDataSource(id: number) {
     const data = await run(id);
     if (!data) {
       return;
     }
-    formRef.current?.form?.setFieldsValue(data);
+    formRef.current?.form?.setFieldsValue(getOriginDatasource(data, isCopy));
   }
 
   useEffect(() => {
@@ -194,8 +206,8 @@ export default function NewDatasourceDrawer({
       <Spin spinning={loading}>
         <DatasourceForm
           disableTheme={disableTheme}
-          type={data?.type || type}
-          originDatasource={data}
+          type={originDatasource?.type || type}
+          originDatasource={originDatasource}
           isEdit={isEdit}
           key={visible + ''}
           ref={formRef}

diff --git a/src/page/Datasource/Datasource/ParamContext.tsx b/src/page/Datasource/Datasource/ParamContext.tsx
@@ -67,6 +67,7 @@ interface IParamContext {
   setConnectType?: (v: ConnectType[]) => void;
   reloadTable?: () => Promise<boolean>;
   editDatasource?: (id: number) => void;
+  setCopyDatasourceId?: (id: number) => void;
 }
 
 const ParamContext: React.Context<IParamContext> = React.createContext({

diff --git a/src/page/Datasource/Datasource/index.tsx b/src/page/Datasource/Datasource/index.tsx
@@ -31,6 +31,7 @@ const Datasource: React.FC<IProps> = function ({ modalStore }) {
   const [sortType, setSortType] = useState<SortType>(null);
   const [connectType, setConnectType] = useState([]);
   const [editDatasourceId, setEditDatasourceId] = useState(null);
+  const [copyDatasourceId, setCopyDatasourceId] = useState<number>(null);
   const contentRef = useRef<any>();
   const _searchValue = useMemo(() => {
     return {
@@ -57,6 +58,7 @@ const Datasource: React.FC<IProps> = function ({ modalStore }) {
           editDatasource(id: number) {
             setEditDatasourceId(id);
           },
+          setCopyDatasourceId,
         }}
       >
         <div style={{ height: '100%' }}>
@@ -72,6 +74,18 @@ const Datasource: React.FC<IProps> = function ({ modalStore }) {
             contentRef.current?.reload();
           }}
         />
+        <NewDatasourceDrawer
+          key="copy"
+          isEdit={false}
+          isCopy={true}
+          disableTheme
+          visible={!!copyDatasourceId}
+          id={copyDatasourceId}
+          close={() => setCopyDatasourceId(null)}
+          onSuccess={() => {
+            contentRef.current?.reload();
+          }}
+        />
       </ParamContext.Provider>
     </div>
   );

diff --git a/src/page/Workspace/SideBar/ResourceTree/SelectPanel/Datasource/index.tsx b/src/page/Workspace/SideBar/ResourceTree/SelectPanel/Datasource/index.tsx
@@ -69,6 +69,7 @@ interface IProps {
 
 export default forwardRef(function DatasourceTree({ filters, closeSelectPanel }: IProps, ref) {
   const [editDatasourceId, setEditDatasourceId] = useState(null);
+  const [copyDatasourceId, setCopyDatasourceId] = useState<number>(null);
   const [addDSVisiable, setAddDSVisiable] = useState(false);
   const [searchKey, setSearchKey] = useState('');
   const [wrapperHeight, setWrapperHeight] = useState(0);
@@ -246,6 +247,14 @@ export default forwardRef(function DatasourceTree({ filters, closeSelectPanel }:
                             trigger={login.isPrivateSpace() ? ['contextMenu'] : []}
                             menu={{
                               items: [
+                                {
+                                  label: '克隆',
+                                  key: 'clone',
+                                  onClick: (e) => {
+                                    e.domEvent?.stopPropagation();
+                                    setCopyDatasourceId(toInteger(node.key));
+                                  },
+                                },
                                 {
                                   label: formatMessage({
                                     id: 'odc.ResourceTree.Datasource.Edit',
@@ -287,6 +296,14 @@ export default forwardRef(function DatasourceTree({ filters, closeSelectPanel }:
                           {login.isPrivateSpace() && (
                             <div className={styles.actions}>
                               <Action.Group ellipsisIcon="vertical" size={0}>
+                                <Action.Link
+                                  onClick={() => {
+                                    setCopyDatasourceId(toInteger(node.key));
+                                  }}
+                                  key={'clone'}
+                                >
+                                  克隆
+                                </Action.Link>
                                 <Action.Link
                                   onClick={() => {
                                     setEditDatasourceId(node.key);
@@ -351,6 +368,18 @@ export default forwardRef(function DatasourceTree({ filters, closeSelectPanel }:
               context?.reloadDatasourceList();
             }}
           />
+          <NewDatasourceDrawer
+            isEdit={false}
+            isCopy={true}
+            id={copyDatasourceId}
+            visible={!!copyDatasourceId}
+            close={() => {
+              setCopyDatasourceId(null);
+            }}
+            onSuccess={() => {
+              context?.reloadDatasourceList();
+            }}
+          />
         </div>
       }
       bottomLoading={false}