Fix: disable operations of dataset when embedding unavailable (#1055)

Co-authored-by: jyong <jyong@dify.ai>

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

@@ -15,7 +15,7 @@ type IInfiniteVirtualListProps = {
   onChangeSwitch: (segId: string, enabled: boolean) => Promise<void>
   onDelete: (segId: string) => Promise<void>
   archived?: boolean
-
+  embeddingAvailable: boolean
 }
 
 const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
@@ -27,6 +27,7 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
   onChangeSwitch,
   onDelete,
   archived,
+  embeddingAvailable,
 }) => {
   // If there are more items to be loaded then add an extra row to hold a loading indicator.
   const itemCount = hasNextPage ? items.length + 1 : items.length
@@ -45,7 +46,7 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
       content = (
         <>
           {[1, 2, 3].map(v => (
-            <SegmentCard loading={true} detail={{ position: v } as any} />
+            <SegmentCard key={v} loading={true} detail={{ position: v } as any} />
           ))}
         </>
       )
@@ -60,6 +61,7 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
           onDelete={onDelete}
           loading={false}
           archived={archived}
+          embeddingAvailable={embeddingAvailable}
         />
       ))
     }

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

@@ -43,6 +43,7 @@ type ISegmentCardProps = {
   scene?: UsageScene
   className?: string
   archived?: boolean
+  embeddingAvailable: boolean
 }
 
 const SegmentCard: FC<ISegmentCardProps> = ({
@@ -55,6 +56,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
   scene = 'doc',
   className = '',
   archived,
+  embeddingAvailable,
 }) => {
   const { t } = useTranslation()
   const {
@@ -115,24 +117,26 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                 : (
                   <>
                     <StatusItem status={enabled ? 'enabled' : 'disabled'} reverse textCls="text-gray-500 text-xs" />
-                    <div className="hidden group-hover:inline-flex items-center">
-                      <Divider type="vertical" className="!h-2" />
-                      <div
-                        onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
-                          e.stopPropagation()
-                        }
-                        className="inline-flex items-center"
-                      >
-                        <Switch
-                          size='md'
-                          disabled={archived}
-                          defaultValue={enabled}
-                          onChange={async (val) => {
-                            await onChangeSwitch?.(id, val)
-                          }}
-                        />
+                    {embeddingAvailable && (
+                      <div className="hidden group-hover:inline-flex items-center">
+                        <Divider type="vertical" className="!h-2" />
+                        <div
+                          onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+                            e.stopPropagation()
+                          }
+                          className="inline-flex items-center"
+                        >
+                          <Switch
+                            size='md'
+                            disabled={archived}
+                            defaultValue={enabled}
+                            onChange={async (val) => {
+                              await onChangeSwitch?.(id, val)
+                            }}
+                          />
+                        </div>
                       </div>
-                    </div>
+                    )}
                   </>
                 )}
             </div>
@@ -173,7 +177,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                   <div className={cn(s.commonIcon, s.bezierCurveIcon)} />
                   <div className={s.segDataText}>{index_node_hash}</div>
                 </div>
-                {!archived && (
+                {!archived && embeddingAvailable && (
                   <div className='shrink-0 w-6 h-6 flex items-center justify-center rounded-md hover:bg-red-100 hover:text-red-600 cursor-pointer group/delete' onClick={(e) => {
                     e.stopPropagation()
                     setShowModal(true)

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

@@ -46,6 +46,7 @@ export const SegmentIndexTag: FC<{ positionId: string | number; className?: stri
 }
 
 type ISegmentDetailProps = {
+  embeddingAvailable: boolean
   segInfo?: Partial<SegmentDetailModel> & { id: string }
   onChangeSwitch?: (segId: string, enabled: boolean) => Promise<void>
   onUpdate: (segmentId: string, q: string, a: string, k: string[]) => void
@@ -56,6 +57,7 @@ type ISegmentDetailProps = {
  * Show all the contents of the segment
  */
 const SegmentDetailComponent: FC<ISegmentDetailProps> = ({
+  embeddingAvailable,
   segInfo,
   archived,
   onChangeSwitch,
@@ -146,7 +148,7 @@ const SegmentDetailComponent: FC<ISegmentDetailProps> = ({
             </Button>
           </>
         )}
-        {!isEditing && !archived && (
+        {!isEditing && !archived && embeddingAvailable && (
           <>
             <div className='group relative flex justify-center items-center w-6 h-6 hover:bg-gray-100 rounded-md cursor-pointer'>
               <div className={cn(s.editTip, 'hidden items-center absolute -top-10 px-3 h-[34px] bg-white rounded-lg whitespace-nowrap text-xs font-semibold text-gray-700 group-hover:flex')}>{t('common.operation.edit')}</div>
@@ -183,15 +185,19 @@ const SegmentDetailComponent: FC<ISegmentDetailProps> = ({
         </div>
         <div className='flex items-center'>
           <StatusItem status={segInfo?.enabled ? 'enabled' : 'disabled'} reverse textCls='text-gray-500 text-xs' />
-          <Divider type='vertical' className='!h-2' />
-          <Switch
-            size='md'
-            defaultValue={segInfo?.enabled}
-            onChange={async (val) => {
-              await onChangeSwitch?.(segInfo?.id || '', val)
-            }}
-            disabled={archived}
-          />
+          {embeddingAvailable && (
+            <>
+              <Divider type='vertical' className='!h-2' />
+              <Switch
+                size='md'
+                defaultValue={segInfo?.enabled}
+                onChange={async (val) => {
+                  await onChangeSwitch?.(segInfo?.id || '', val)
+                }}
+                disabled={archived}
+              />
+            </>
+          )}
         </div>
       </div>
     </div>
@@ -209,6 +215,7 @@ export const splitArray = (arr: any[], size = 3) => {
 }
 
 type ICompletedProps = {
+  embeddingAvailable: boolean
   showNewSegmentModal: boolean
   onNewSegmentModalChange: (state: boolean) => void
   importStatus: ProcessStatus | string | undefined
@@ -220,6 +227,7 @@ type ICompletedProps = {
  * Support search and filter
  */
 const Completed: FC<ICompletedProps> = ({
+  embeddingAvailable,
   showNewSegmentModal,
   onNewSegmentModalChange,
   importStatus,
@@ -384,6 +392,7 @@ const Completed: FC<ICompletedProps> = ({
         <Input showPrefix wrapperClassName='!w-52' className='!h-8' onChange={debounce(setSearchValue, 500)} />
       </div>
       <InfiniteVirtualList
+        embeddingAvailable={embeddingAvailable}
         hasNextPage={lastSegmentsRes?.has_more ?? true}
         isNextPageLoading={loading}
         items={allSegments}
@@ -395,6 +404,7 @@ const Completed: FC<ICompletedProps> = ({
       />
       <Modal isShow={currSegment.showModal} onClose={() => {}} className='!max-w-[640px] !overflow-visible'>
         <SegmentDetail
+          embeddingAvailable={embeddingAvailable}
           segInfo={currSegment.segInfo ?? { id: '' }}
           onChangeSwitch={onChangeSwitch}
           onUpdate={handleUpdateSegment}