From 385dbe5ab52ca69297a3d82e7779305ff5d370d8 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Mon, 6 May 2024 18:37:31 +0800
Subject: [PATCH] fix: add spin to parsing status icon of dataset table (#649)

### What problem does this PR solve?

fix: add spin to parsing status icon of dataset table
#648

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/hooks/documentHooks.ts                |  6 ++++
 .../components/knowledge-file/hooks.ts        | 35 +++++++++++++++++++
 .../parsing-status-cell/index.less            | 11 ++++++
 .../parsing-status-cell/index.tsx             | 20 ++++++-----
 web/src/pages/file-manager/index.less         |  2 +-
 5 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/web/src/hooks/documentHooks.ts b/web/src/hooks/documentHooks.ts
index 9f78a0044..cc74a5fa8 100644
--- a/web/src/hooks/documentHooks.ts
+++ b/web/src/hooks/documentHooks.ts
@@ -7,6 +7,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { IHighlight } from 'react-pdf-highlighter';
 import { useDispatch, useSelector } from 'umi';
 import { useGetKnowledgeSearchParams } from './routeHook';
+import { useOneNamespaceEffectsLoading } from './storeHooks';
 
 export const useGetDocumentUrl = (documentId: string) => {
   const url = useMemo(() => {
@@ -222,3 +223,8 @@ export const useRunDocument = () => {
 
   return runDocumentByIds;
 };
+
+export const useSelectRunDocumentLoading = () => {
+  const loading = useOneNamespaceEffectsLoading('kFModel', ['document_run']);
+  return loading;
+};
diff --git a/web/src/pages/add-knowledge/components/knowledge-file/hooks.ts b/web/src/pages/add-knowledge/components/knowledge-file/hooks.ts
index c81ad9301..be0649161 100644
--- a/web/src/pages/add-knowledge/components/knowledge-file/hooks.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-file/hooks.ts
@@ -2,7 +2,9 @@ import { useSetModalState, useTranslate } from '@/hooks/commonHooks';
 import {
   useCreateDocument,
   useFetchDocumentList,
+  useRunDocument,
   useSaveDocumentName,
+  useSelectRunDocumentLoading,
   useSetDocumentParser,
   useUploadDocument,
 } from '@/hooks/documentHooks';
@@ -283,3 +285,36 @@ export const useHandleUploadDocument = () => {
     showDocumentUploadModal,
   };
 };
+
+export const useHandleRunDocumentByIds = (id: string) => {
+  const loading = useSelectRunDocumentLoading();
+  const runDocumentByIds = useRunDocument();
+  const [currentId, setCurrentId] = useState<string>('');
+  const isLoading = loading && currentId !== '' && currentId === id;
+
+  const handleRunDocumentByIds = async (
+    documentId: string,
+    knowledgeBaseId: string,
+    isRunning: boolean,
+  ) => {
+    if (isLoading) {
+      return;
+    }
+    setCurrentId(documentId);
+    try {
+      await runDocumentByIds({
+        doc_ids: [documentId],
+        run: isRunning ? 2 : 1,
+        knowledgeBaseId,
+      });
+      setCurrentId('');
+    } catch (error) {
+      setCurrentId('');
+    }
+  };
+
+  return {
+    handleRunDocumentByIds,
+    loading: isLoading,
+  };
+};
diff --git a/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.less b/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.less
index c55127f26..7ca657a6c 100644
--- a/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.less
+++ b/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.less
@@ -23,3 +23,14 @@
     cursor: pointer;
   }
 }
+.operationIconSpin {
+  animation: spin 1s linear infinite;
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
diff --git a/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx b/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx
index 7e2d102a9..a135053dc 100644
--- a/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx
@@ -2,12 +2,13 @@ import { ReactComponent as CancelIcon } from '@/assets/svg/cancel.svg';
 import { ReactComponent as RefreshIcon } from '@/assets/svg/refresh.svg';
 import { ReactComponent as RunIcon } from '@/assets/svg/run.svg';
 import { useTranslate } from '@/hooks/commonHooks';
-import { useRunDocument } from '@/hooks/documentHooks';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { Badge, DescriptionsProps, Flex, Popover, Space, Tag } from 'antd';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import reactStringReplace from 'react-string-replace';
 import { RunningStatus, RunningStatusMap } from '../constant';
+import { useHandleRunDocumentByIds } from '../hooks';
 import { isParserRunning } from '../utils';
 import styles from './index.less';
 
@@ -81,7 +82,9 @@ export const ParsingStatusCell = ({ record }: IProps) => {
   const text = record.run;
   const runningStatus = RunningStatusMap[text];
   const { t } = useTranslation();
-  const runDocumentByIds = useRunDocument();
+  const { handleRunDocumentByIds, loading } = useHandleRunDocumentByIds(
+    record.id,
+  );
 
   const isRunning = isParserRunning(text);
 
@@ -90,11 +93,7 @@ export const ParsingStatusCell = ({ record }: IProps) => {
   const label = t(`knowledgeDetails.runningStatus${text}`);
 
   const handleOperationIconClick = () => {
-    runDocumentByIds({
-      doc_ids: [record.id],
-      run: isRunning ? 2 : 1,
-      knowledgeBaseId: record.kb_id,
-    });
+    handleRunDocumentByIds(record.id, record.kb_id, isRunning);
   };
 
   return (
@@ -112,7 +111,12 @@ export const ParsingStatusCell = ({ record }: IProps) => {
           )}
         </Tag>
       </Popover>
-      <div onClick={handleOperationIconClick} className={styles.operationIcon}>
+      <div
+        onClick={handleOperationIconClick}
+        className={classNames(styles.operationIcon, {
+          [styles.operationIconSpin]: loading,
+        })}
+      >
         <OperationIcon />
       </div>
     </Flex>
diff --git a/web/src/pages/file-manager/index.less b/web/src/pages/file-manager/index.less
index 7737c80cf..8f3d2f34d 100644
--- a/web/src/pages/file-manager/index.less
+++ b/web/src/pages/file-manager/index.less
@@ -1,5 +1,5 @@
 .fileManagerWrapper {
-  flex-basis: 100%;
+  width: 100%;
   padding: 32px;
 }