feat/TanStack-Form (#18346)

web/app/components/datasets/documents/detail/completed/index.tsx

@@ -220,13 +220,11 @@ const Completed: FC<ICompletedProps> = ({
   const resetList = useCallback(() => {
     setSelectedSegmentIds([])
     invalidSegmentList()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [invalidSegmentList])
 
   const resetChildList = useCallback(() => {
     invalidChildSegmentList()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [invalidChildSegmentList])
 
   const onClickCard = (detail: SegmentDetailModel, isEditMode = false) => {
     setCurrSegment({ segInfo: detail, showModal: true, isEditMode })
@@ -253,7 +251,7 @@ const Completed: FC<ICompletedProps> = ({
   const invalidChunkListEnabled = useInvalid(useChunkListEnabledKey)
   const invalidChunkListDisabled = useInvalid(useChunkListDisabledKey)
 
-  const refreshChunkListWithStatusChanged = () => {
+  const refreshChunkListWithStatusChanged = useCallback(() => {
     switch (selectedStatus) {
       case 'all':
         invalidChunkListDisabled()
@@ -262,7 +260,7 @@ const Completed: FC<ICompletedProps> = ({
       default:
         invalidSegmentList()
     }
-  }
+  }, [selectedStatus, invalidChunkListDisabled, invalidChunkListEnabled, invalidSegmentList])
 
   const onChangeSwitch = useCallback(async (enable: boolean, segId?: string) => {
     const operationApi = enable ? enableSegment : disableSegment
@@ -280,8 +278,7 @@ const Completed: FC<ICompletedProps> = ({
         notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
       },
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [datasetId, documentId, selectedSegmentIds, segments])
+  }, [datasetId, documentId, selectedSegmentIds, segments, disableSegment, enableSegment, t, notify, refreshChunkListWithStatusChanged])
 
   const { mutateAsync: deleteSegment } = useDeleteSegment()
 
@@ -296,12 +293,11 @@ const Completed: FC<ICompletedProps> = ({
         notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
       },
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [datasetId, documentId, selectedSegmentIds])
+  }, [datasetId, documentId, selectedSegmentIds, deleteSegment, resetList, t, notify])
 
   const { mutateAsync: updateSegment } = useUpdateSegment()
 
-  const refreshChunkListDataWithDetailChanged = () => {
+  const refreshChunkListDataWithDetailChanged = useCallback(() => {
     switch (selectedStatus) {
       case 'all':
         invalidChunkListDisabled()
@@ -316,7 +312,7 @@ const Completed: FC<ICompletedProps> = ({
         invalidChunkListEnabled()
         break
     }
-  }
+  }, [selectedStatus, invalidChunkListDisabled, invalidChunkListEnabled, invalidChunkListAll])
 
   const handleUpdateSegment = useCallback(async (
     segmentId: string,
@@ -375,17 +371,18 @@ const Completed: FC<ICompletedProps> = ({
         eventEmitter?.emit('update-segment-done')
       },
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segments, datasetId, documentId])
+  }, [segments, datasetId, documentId, updateSegment, docForm, notify, eventEmitter, onCloseSegmentDetail, refreshChunkListDataWithDetailChanged, t])
 
   useEffect(() => {
     resetList()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathname])
 
   useEffect(() => {
     if (importStatus === ProcessStatus.COMPLETED)
       resetList()
-  }, [importStatus, resetList])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importStatus])
 
   const onCancelBatchOperation = useCallback(() => {
     setSelectedSegmentIds([])
@@ -430,8 +427,7 @@ const Completed: FC<ICompletedProps> = ({
       const count = segmentListData?.total || 0
       return `${total} ${t('datasetDocuments.segment.searchResults', { count })}`
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segmentListData?.total, mode, parentMode, searchValue, selectedStatus])
+  }, [segmentListData, mode, parentMode, searchValue, selectedStatus, t])
 
   const toggleFullScreen = useCallback(() => {
     setFullScreen(!fullScreen)
@@ -449,8 +445,7 @@ const Completed: FC<ICompletedProps> = ({
       resetList()
       currentPage !== totalPages && setCurrentPage(totalPages)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segmentListData, limit, currentPage])
+  }, [segmentListData, limit, currentPage, resetList])
 
   const { mutateAsync: deleteChildSegment } = useDeleteChildSegment()
 
@@ -470,8 +465,7 @@ const Completed: FC<ICompletedProps> = ({
         },
       },
     )
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [datasetId, documentId, parentMode])
+  }, [datasetId, documentId, parentMode, deleteChildSegment, resetList, resetChildList, t, notify])
 
   const handleAddNewChildChunk = useCallback((parentChunkId: string) => {
     setShowNewChildSegmentModal(true)
@@ -490,8 +484,7 @@ const Completed: FC<ICompletedProps> = ({
     else {
       resetChildList()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [parentMode, currChunkId, segments])
+  }, [parentMode, currChunkId, segments, refreshChunkListDataWithDetailChanged, resetChildList])
 
   const viewNewlyAddedChildChunk = useCallback(() => {
     const totalPages = childChunkListData?.total_pages || 0
@@ -505,8 +498,7 @@ const Completed: FC<ICompletedProps> = ({
       resetChildList()
       currentPage !== totalPages && setCurrentPage(totalPages)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [childChunkListData, limit, currentPage])
+  }, [childChunkListData, limit, currentPage, resetChildList])
 
   const onClickSlice = useCallback((detail: ChildChunkDetail) => {
     setCurrChildChunk({ childChunkInfo: detail, showModal: true })
@@ -560,8 +552,7 @@ const Completed: FC<ICompletedProps> = ({
         eventEmitter?.emit('update-child-segment-done')
       },
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segments, childSegments, datasetId, documentId, parentMode])
+  }, [segments, datasetId, documentId, parentMode, updateChildSegment, notify, eventEmitter, onCloseChildSegmentDetail, refreshChunkListDataWithDetailChanged, resetChildList, t])
 
   const onClearFilter = useCallback(() => {
     setInputValue('')
@@ -570,6 +561,12 @@ const Completed: FC<ICompletedProps> = ({
     setCurrentPage(1)
   }, [])
 
+  const selectDefaultValue = useMemo(() => {
+    if (selectedStatus === 'all')
+      return 'all'
+    return selectedStatus ? 1 : 0
+  }, [selectedStatus])
+
   return (
     <SegmentListContext.Provider value={{
       isCollapsed,
@@ -583,7 +580,7 @@ const Completed: FC<ICompletedProps> = ({
         <Checkbox
           className='shrink-0'
           checked={isAllSelected}
-          mixed={!isAllSelected && isSomeSelected}
+          indeterminate={!isAllSelected && isSomeSelected}
           onCheck={onSelectedAll}
           disabled={isLoadingSegmentList}
         />
@@ -591,7 +588,7 @@ const Completed: FC<ICompletedProps> = ({
         <SimpleSelect
           onSelect={onChangeStatus}
           items={statusList.current}
-          defaultValue={selectedStatus === 'all' ? 'all' : selectedStatus ? 1 : 0}
+          defaultValue={selectDefaultValue}
           className={s.select}
           wrapperClassName='h-fit mr-2'
           optionWrapClassName='w-[160px]'

web/app/components/datasets/documents/detail/completed/segment-card/index.tsx

@@ -106,13 +106,11 @@ const SegmentCard: FC<ISegmentCardProps> = ({
   const wordCountText = useMemo(() => {
     const total = formatNumber(word_count)
     return `${total} ${t('datasetDocuments.segment.characters', { count: word_count })}`
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [word_count])
+  }, [word_count, t])
 
   const labelPrefix = useMemo(() => {
     return isParentChildMode ? t('datasetDocuments.segment.parentChunk') : t('datasetDocuments.segment.chunk')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isParentChildMode])
+  }, [isParentChildMode, t])
 
   if (loading)
     return <ParentChunkCardSkeleton />

web/app/components/datasets/documents/detail/completed/segment-detail.tsx

@@ -86,8 +86,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
 
   const titleText = useMemo(() => {
     return isEditMode ? t('datasetDocuments.segment.editChunk') : t('datasetDocuments.segment.chunkDetail')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isEditMode])
+  }, [isEditMode, t])
 
   const isQAModel = useMemo(() => {
     return docForm === ChunkingMode.qa
@@ -98,13 +97,11 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
     const total = formatNumber(isEditMode ? contentLength : segInfo!.word_count as number)
     const count = isEditMode ? contentLength : segInfo!.word_count as number
     return `${total} ${t('datasetDocuments.segment.characters', { count })}`
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isEditMode, question.length, answer.length, segInfo?.word_count, isQAModel])
+  }, [isEditMode, question.length, answer.length, isQAModel, segInfo, t])
 
   const labelPrefix = useMemo(() => {
     return isParentChildMode ? t('datasetDocuments.segment.parentChunk') : t('datasetDocuments.segment.chunk')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isParentChildMode])
+  }, [isParentChildMode, t])
 
   return (
     <div className={'flex h-full flex-col'}>

web/app/components/datasets/documents/detail/completed/segment-list.tsx

@@ -42,7 +42,7 @@ const SegmentList = (
     embeddingAvailable,
     onClearFilter,
   }: ISegmentListProps & {
-    ref: React.RefObject<unknown>;
+    ref: React.LegacyRef<HTMLDivElement>
   },
 ) => {
   const mode = useDocumentContext(s => s.mode)

web/app/components/datasets/documents/list.tsx

@@ -202,7 +202,7 @@ export const OperationAction: FC<{
   const isListScene = scene === 'list'
 
   const onOperate = async (operationName: OperationName) => {
-    let opApi = deleteDocument
+    let opApi
     switch (operationName) {
       case 'archive':
         opApi = archiveDocument
@@ -490,7 +490,7 @@ const DocumentList: FC<IDocumentListProps> = ({
 
   const handleAction = (actionName: DocumentActionType) => {
     return async () => {
-      let opApi = deleteDocument
+      let opApi
       switch (actionName) {
         case DocumentActionType.archive:
           opApi = archiveDocument
@@ -527,7 +527,7 @@ const DocumentList: FC<IDocumentListProps> = ({
                     <Checkbox
                       className='mr-2 shrink-0'
                       checked={isAllSelected}
-                      mixed={!isAllSelected && isSomeSelected}
+                      indeterminate={!isAllSelected && isSomeSelected}
                       onCheck={onSelectedAll}
                     />
                   )}