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

Co-authored-by: jyong <jyong@dify.ai>
2025-12-10 03:16:51 +08:00 · 2023-08-30 17:27:19 +08:00
parent 8b8e510bfe
commit c67f345d0e
16 changed files with 401 additions and 287 deletions
--- a/web/app/components/datasets/settings/form/index.tsx
+++ b/web/app/components/datasets/settings/form/index.tsx
@@ -5,6 +5,7 @@ import useSWR from 'swr'
 import { useContext } from 'use-context-selector'
 import { BookOpenIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
 import PermissionsRadio from '../permissions-radio'
 import IndexMethodRadio from '../index-method-radio'
 import { ToastContext } from '@/app/components/base/toast'
@@ -88,7 +89,8 @@ const Form = ({
          <div>{t('datasetSettings.form.name')}</div>
        </div>
        <input
-          className={inputClass}
+          disabled={!currentDataset?.embedding_available}
+          className={cn(inputClass, !currentDataset?.embedding_available && 'opacity-60')}
          value={name}
          onChange={e => setName(e.target.value)}
        />
@@ -99,7 +101,8 @@ const Form = ({
        </div>
        <div>
          <textarea
-            className={`${inputClass} block mb-2 h-[120px] py-2 resize-none`}
+            disabled={!currentDataset?.embedding_available}
+            className={cn(`${inputClass} block mb-2 h-[120px] py-2 resize-none`, !currentDataset?.embedding_available && 'opacity-60')}
            placeholder={t('datasetSettings.form.descPlaceholder') || ''}
            value={description}
            onChange={e => setDescription(e.target.value)}
@@ -116,61 +119,67 @@ const Form = ({
        </div>
        <div className='w-[480px]'>
          <PermissionsRadio
+            disable={!currentDataset?.embedding_available}
            value={permission}
            onChange={v => setPermission(v)}
          />
        </div>
      </div>
-      <div className='w-full h-0 border-b-[0.5px] border-b-gray-200 my-2' />
-      <div className={rowClass}>
-        <div className={labelClass}>
-          <div>{t('datasetSettings.form.indexMethod')}</div>
+      {currentDataset && currentDataset.indexing_technique && (
+        <>
+          <div className='w-full h-0 border-b-[0.5px] border-b-gray-200 my-2' />
+          <div className={rowClass}>
+            <div className={labelClass}>
+              <div>{t('datasetSettings.form.indexMethod')}</div>
+            </div>
+            <div className='w-[480px]'>
+              <IndexMethodRadio
+                disable={!currentDataset?.embedding_available}
+                value={indexMethod}
+                onChange={v => setIndexMethod(v)}
+              />
+            </div>
+          </div>
+        </>
+      )}
+      {currentDataset && currentDataset.indexing_technique === 'high_quality' && (
+        <div className={rowClass}>
+          <div className={labelClass}>
+            <div>{t('datasetSettings.form.embeddingModel')}</div>
+          </div>
+          <div className='w-[480px]'>
+            <div className='w-full h-9 rounded-lg bg-gray-100 opacity-60'>
+              <ModelSelector
+                readonly
+                value={{
+                  providerName: currentDataset.embedding_model_provider as ProviderEnum,
+                  modelName: currentDataset.embedding_model,
+                }}
+                modelType={ModelType.embeddings}
+                onChange={() => {}}
+              />
+            </div>
+            <div className='mt-2 w-full text-xs leading-6 text-gray-500'>
+              {t('datasetSettings.form.embeddingModelTip')}
+              <span className='text-[#155eef] cursor-pointer' onClick={() => setShowSetAPIKeyModal(true)}>{t('datasetSettings.form.embeddingModelTipLink')}</span>
+            </div>
+          </div>
        </div>
-        <div className='w-[480px]'>
-          <IndexMethodRadio
-            value={indexMethod}
-            onChange={v => setIndexMethod(v)}
-          />
+      )}
+      {currentDataset?.embedding_available && (
+        <div className={rowClass}>
+          <div className={labelClass} />
+          <div className='w-[480px]'>
+            <Button
+              className='min-w-24 text-sm'
+              type='primary'
+              onClick={handleSave}
+            >
+              {t('datasetSettings.form.save')}
+            </Button>
+          </div>
        </div>
-      </div>
-      <div className={rowClass}>
-        <div className={labelClass}>
-          <div>{t('datasetSettings.form.embeddingModel')}</div>
-        </div>
-        <div className='w-[480px]'>
-          {currentDataset && (
-            <>
-              <div className='w-full h-9 rounded-lg bg-gray-100 opacity-60'>
-                <ModelSelector
-                  readonly
-                  value={{
-                    providerName: currentDataset.embedding_model_provider as ProviderEnum,
-                    modelName: currentDataset.embedding_model,
-                  }}
-                  modelType={ModelType.embeddings}
-                  onChange={() => {}}
-                />
-              </div>
-              <div className='mt-2 w-full text-xs leading-6 text-gray-500'>
-                {t('datasetSettings.form.embeddingModelTip')}
-                <span className='text-[#155eef] cursor-pointer' onClick={() => setShowSetAPIKeyModal(true)}>{t('datasetSettings.form.embeddingModelTipLink')}</span>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-      <div className={rowClass}>
-        <div className={labelClass} />
-        <div className='w-[480px]'>
-          <Button
-            className='min-w-24 text-sm'
-            type='primary'
-            onClick={handleSave}
-          >
-            {t('datasetSettings.form.save')}
-          </Button>
-        </div>
-      </div>
+      )}
      {showSetAPIKeyModal && (
        <AccountSetting activeTab="provider" onCancel={async () => {
          setShowSetAPIKeyModal(false)
--- a/web/app/components/datasets/settings/index-method-radio/index.module.css
+++ b/web/app/components/datasets/settings/index-method-radio/index.module.css
@@ -35,4 +35,20 @@
  border-width: 1.5px;
  border-color: #528BFF;
  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
-}
+}
+
+.wrapper .item.disable {
+  @apply opacity-60;
+}
+.wrapper .item-active.disable {
+  @apply opacity-60;
+}
+.wrapper .item.disable:hover {
+  @apply bg-gray-25 border border-gray-100 shadow-none cursor-default opacity-60;
+}
+.wrapper .item-active.disable:hover {
+  @apply cursor-default opacity-60;
+  border-width: 1.5px;
+  border-color: #528BFF;
+  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
+}
--- a/web/app/components/datasets/settings/index-method-radio/index.tsx
+++ b/web/app/components/datasets/settings/index-method-radio/index.tsx
@@ -2,7 +2,7 @@
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import s from './index.module.css'
-import { DataSet } from '@/models/datasets'
+import type { DataSet } from '@/models/datasets'

 const itemClass = `
  w-[234px] p-3 rounded-xl bg-gray-25 border border-gray-100 cursor-pointer
@@ -13,11 +13,13 @@ const radioClass = `
 type IIndexMethodRadioProps = {
  value?: DataSet['indexing_technique']
  onChange: (v?: DataSet['indexing_technique']) => void
+  disable?: boolean
 }

 const IndexMethodRadio = ({
  value,
-  onChange
+  onChange,
+  disable,
 }: IIndexMethodRadioProps) => {
  const { t } = useTranslation()
  const options = [
@@ -25,28 +27,32 @@ const IndexMethodRadio = ({
      key: 'high_quality',
      text: t('datasetSettings.form.indexMethodHighQuality'),
      desc: t('datasetSettings.form.indexMethodHighQualityTip'),
-      icon: 'high-quality'
+      icon: 'high-quality',
    },
    {
      key: 'economy',
      text: t('datasetSettings.form.indexMethodEconomy'),
      desc: t('datasetSettings.form.indexMethodEconomyTip'),
-      icon: 'economy'
-    }
+      icon: 'economy',
+    },
  ]

  return (
    <div className={classNames(s.wrapper, 'flex justify-between w-full')}>
      {
        options.map(option => (
-          <div 
-            key={option.key} 
+          <div
+            key={option.key}
            className={classNames(
-              option.key === value && s['item-active'], 
+              itemClass,
              s.item,
-              itemClass
+              option.key === value && s['item-active'],
+              disable && s.disable,
            )}
-            onClick={() => onChange(option.key as DataSet['indexing_technique'])}
+            onClick={() => {
+              if (!disable)
+                onChange(option.key as DataSet['indexing_technique'])
+            }}
          >
            <div className='flex items-center mb-1'>
              <div className={classNames(s.icon, s[`${option.icon}-icon`])} />
--- a/web/app/components/datasets/settings/permissions-radio/index.module.css
+++ b/web/app/components/datasets/settings/permissions-radio/index.module.css
@@ -27,4 +27,20 @@
  border-width: 1.5px;
  border-color: #528BFF;
  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
+}
+
+.wrapper .item.disable {
+  @apply opacity-60;
+}
+.wrapper .item-active.disable {
+  @apply opacity-60;
+}
+.wrapper .item.disable:hover {
+  @apply bg-gray-25 border border-gray-100 shadow-none cursor-default opacity-60;
+}
+.wrapper .item-active.disable:hover {
+  @apply cursor-default opacity-60;
+  border-width: 1.5px;
+  border-color: #528BFF;
+  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
 }
--- a/web/app/components/datasets/settings/permissions-radio/index.tsx
+++ b/web/app/components/datasets/settings/permissions-radio/index.tsx
@@ -2,7 +2,7 @@
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import s from './index.module.css'
-import { DataSet } from '@/models/datasets'
+import type { DataSet } from '@/models/datasets'

 const itemClass = `
  flex items-center w-[234px] h-12 px-3 rounded-xl bg-gray-25 border border-gray-100 cursor-pointer
@@ -13,36 +13,42 @@ const radioClass = `
 type IPermissionsRadioProps = {
  value?: DataSet['permission']
  onChange: (v?: DataSet['permission']) => void
+  disable?: boolean
 }

 const PermissionsRadio = ({
  value,
-  onChange
+  onChange,
+  disable,
 }: IPermissionsRadioProps) => {
  const { t } = useTranslation()
  const options = [
    {
      key: 'only_me',
-      text: t('datasetSettings.form.permissionsOnlyMe')
+      text: t('datasetSettings.form.permissionsOnlyMe'),
    },
    {
      key: 'all_team_members',
-      text: t('datasetSettings.form.permissionsAllMember')
-    }
+      text: t('datasetSettings.form.permissionsAllMember'),
+    },
  ]

  return (
    <div className={classNames(s.wrapper, 'flex justify-between w-full')}>
      {
        options.map(option => (
-          <div 
-            key={option.key} 
+          <div
+            key={option.key}
            className={classNames(
-              option.key === value && s['item-active'], 
-              itemClass, 
-              s.item
+              itemClass,
+              s.item,
+              option.key === value && s['item-active'],
+              disable && s.disable,
            )}
-            onClick={() => onChange(option.key as DataSet['permission'])}
+            onClick={() => {
+              if (!disable)
+                onChange(option.key as DataSet['permission'])
+            }}
          >
            <div className={classNames(s['user-icon'], 'mr-3')} />
            <div className='grow text-sm text-gray-900'>{option.text}</div>