Fix: Improve some functional issues with the data source. #10703 (#11081)

### What problem does this PR solve?

Fix: Improve some functional issues with the data source. #10703

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/user-setting/data-source/component/added-source-card.tsx

@@ -1,9 +1,9 @@
-import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { Settings, Trash2 } from 'lucide-react';
 import { useDeleteDataSource } from '../hooks';
 import { IDataSorceInfo, IDataSourceBase } from '../interface';
+import { delSourceModal } from './delete-source-modal';
 
 export type IAddedSourceCardProps = IDataSorceInfo & {
   list: IDataSourceBase[];
@@ -19,7 +19,7 @@ export const AddedSourceCard = (props: IAddedSourceCardProps) => {
     <Card className="bg-transparent border border-border-button px-5 pt-[10px] pb-5 rounded-md">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 p-0 pb-3">
         {/* <Users className="mr-2 h-5 w-5 text-[#1677ff]" /> */}
-        <CardTitle className="text-base flex gap-1 font-normal">
+        <CardTitle className="text-base items-center flex gap-1 font-normal">
           {icon}
           {name}
         </CardTitle>
@@ -28,7 +28,7 @@ export const AddedSourceCard = (props: IAddedSourceCardProps) => {
         {list.map((item) => (
           <div
             key={item.id}
-            className="flex flex-row items-center justify-between rounded-md bg-bg-input px-[10px] py-4"
+            className="flex flex-row items-center justify-between rounded-md bg-bg-card px-[10px] py-4"
           >
             <div className="text-sm text-text-secondary ">{item.name}</div>
             <div className="text-sm text-text-secondary  flex gap-2">
@@ -39,9 +39,20 @@ export const AddedSourceCard = (props: IAddedSourceCardProps) => {
                   toDetail(item.id);
                 }}
               />
-              <ConfirmDeleteDialog onOk={() => handleDelete(item)}>
-                <Trash2 className="cursor-pointer" size={14} />
-              </ConfirmDeleteDialog>
+              {/* <ConfirmDeleteDialog onOk={() => handleDelete(item)}> */}
+              <Trash2
+                className="cursor-pointer"
+                size={14}
+                onClick={() =>
+                  delSourceModal({
+                    data: item,
+                    onOk: () => {
+                      handleDelete(item);
+                    },
+                  })
+                }
+              />
+              {/* </ConfirmDeleteDialog> */}
             </div>
           </div>
         ))}

web/src/pages/user-setting/data-source/component/delete-source-modal.tsx

@@ -0,0 +1,80 @@
+import { Button } from '@/components/ui/button';
+import { Modal, ModalType } from '@/components/ui/modal/modal';
+import { t } from 'i18next';
+import { DataSourceInfo } from '../contant';
+import { IDataSourceBase } from '../interface';
+
+export type IDelSourceModalProps<T> = Partial<ModalType> & {
+  data?: T;
+  type?: 'delete' | 'unlink';
+  onOk?: (data?: T) => void;
+};
+
+export const delSourceModal = <T extends IDataSourceBase>(
+  props: IDelSourceModalProps<T>,
+) => {
+  const { data, onOk, type = 'delete', ...otherProps } = props;
+  console.log('data', data);
+  const config = {
+    title:
+      type === 'delete'
+        ? t('setting.deleteSourceModalTitle')
+        : t('dataflowParser.unlinkSourceModalTitle'),
+    content: (
+      <div className="px-2 py-6">
+        <div className="flex items-center gap-1 p-2 border border-border-button rounded-md mb-3">
+          <div className="w-6 h-6 flex-shrink-0">
+            {data?.source ? DataSourceInfo[data?.source].icon : ''}
+          </div>
+          <div>{data?.name}</div>
+        </div>
+        {type === 'delete' ? (
+          <div
+            className="text-sm text-text-secondary"
+            dangerouslySetInnerHTML={{
+              __html: t('setting.deleteSourceModalContent'),
+            }}
+          ></div>
+        ) : (
+          <div
+            className="text-sm text-text-secondary"
+            dangerouslySetInnerHTML={{
+              __html: t('dataflowParser.unlinkSourceModalContent'),
+            }}
+          />
+        )}
+      </div>
+    ),
+    confirmText:
+      type === 'delete'
+        ? t('setting.deleteSourceModalConfirmText')
+        : t('dataflowParser.unlinkSourceModalConfirmText'),
+  };
+  Modal.show({
+    visible: true,
+    className: '!w-[560px]',
+    ...otherProps,
+    title: config.title,
+    children: config.content,
+    onVisibleChange: () => {
+      Modal.hide();
+    },
+    footer: (
+      <div className="flex justify-end gap-2">
+        <Button variant={'outline'} onClick={() => Modal.hide()}>
+          {t('dataflowParser.changeStepModalCancelText')}
+        </Button>
+        <Button
+          variant={'secondary'}
+          className="!bg-state-error text-text-base"
+          onClick={() => {
+            onOk?.(data);
+            Modal.hide();
+          }}
+        >
+          {config.confirmText}
+        </Button>
+      </div>
+    ),
+  });
+};