feat: add search not ready state and enhance dependency list UI

- Introduced a new 'searchNotReady' state in the internationalization files for both English and Chinese, providing user feedback when dependency search is not available due to ongoing synchronization. - Updated the DependencyList.vue component to display appropriate messages and disable the search button when dependencies are not ready, improving user experience and clarity. - Enhanced interface definitions to include the new 'search_ready' property for better state management in dependency configurations.
crawlab-team · Dec 23, 2024 · 1b60483 · 1b60483
1 parent 36c0dfd
commit 1b60483
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 7 deletions.
diff --git a/src/i18n/lang/en/views/env.ts b/src/i18n/lang/en/views/env.ts
@@ -30,6 +30,16 @@ const env: LViewsEnv = {
           label: 'Search Dependencies',
           tooltip: 'Search and install dependencies',
         },
+        searchNotReady: {
+          label: 'Search Dependencies (not ready yet)',
+          tooltip:
+            'Search dependencies is not ready because sync is in progress',
+          python: {
+            title: 'PyPI sync in progress',
+            content:
+              'Python dependency search requires all packages from pypi.org to be synced. Please wait a moment until the sync process is complete.',
+          },
+        },
         installEnvironments: {
           label: 'Install Envs',
           tooltip: 'Install dependency environments (or programming languages)',

diff --git a/src/i18n/lang/zh/views/env.ts b/src/i18n/lang/zh/views/env.ts
@@ -30,6 +30,15 @@ const env: LViewsEnv = {
           label: '搜索依赖',
           tooltip: '搜索并安装依赖',
         },
+        searchNotReady: {
+          label: '搜索依赖 (暂不可用)',
+          tooltip: '搜索依赖未准备好，因为同步正在进行中',
+          python: {
+            title: 'PyPI 同步进行中',
+            content:
+              'Python 依赖搜索需要从 pypi.org 同步所有包。请稍等片刻，直到同步过程完成。',
+          },
+        },
         installEnvironments: {
           label: '安装环境',
           tooltip: '安装依赖环境（或编程语言）',

diff --git a/src/interfaces/i18n/views/env.d.ts b/src/interfaces/i18n/views/env.d.ts
@@ -20,6 +20,14 @@ interface LViewsEnv {
           label: string;
           tooltip: string;
         };
+        searchNotReady: {
+          label: string;
+          tooltip: string;
+          python: {
+            title: string;
+            content: string;
+          };
+        };
         installEnvironments: {
           label: string;
           tooltip: string;

diff --git a/src/interfaces/models/dependency.d.ts b/src/interfaces/models/dependency.d.ts
@@ -7,6 +7,8 @@ export declare global {
     pkg_cmd?: string;
     proxy?: string;
     setup?: boolean;
+    search_ready?: boolean;
+    total_dependencies?: number;
   }
 
   interface DependencyConfigSetup extends BaseModel {

diff --git a/src/views/dependency/list/DependencyList.vue b/src/views/dependency/list/DependencyList.vue
@@ -53,8 +53,10 @@ defineOptions({ name: 'ClDependencyList' });
       />
     </template>
     <template #table-empty>
+      <!-- Empty table for installed and search tabs -->
       <template v-if="['installed', 'search'].includes(repoTabName!)">
         <template v-if="!config?.setup">
+          <!-- Config not setup -->
           <h3>{{ t('views.env.deps.repos.empty.configNotSetup.title') }}</h3>
           <p>{{ t('views.env.deps.repos.empty.configNotSetup.content') }}</p>
           <cl-label-button
@@ -67,6 +69,9 @@ defineOptions({ name: 'ClDependencyList' });
             @click="onClickTableEmptyConfigNotSetup"
           />
         </template>
+        <!-- ./Config not setup -->
+
+        <!-- Java -->
         <template v-else-if="repoTabName === 'installed' && lang === 'java'">
           <h3>{{ t('views.env.deps.repos.empty.java.title') }}</h3>
           <p>{{ t('views.env.deps.repos.empty.java.content') }}</p>
@@ -78,16 +83,53 @@ defineOptions({ name: 'ClDependencyList' });
             @click="onClickTableEmptyJava"
           />
         </template>
+        <!-- ./Java -->
+
+        <!-- Search -->
         <template v-else>
-          <cl-label-button
-            size="large"
-            :icon="getIconByAction(ACTION_FILTER_SEARCH)"
-            :label="t('views.env.deps.repos.actions.search.label')"
-            :tooltip="t('views.env.deps.repos.actions.search.tooltip')"
-            @click="onClickTableEmptySearch"
-          />
+          <template v-if="!config.search_ready">
+            <template v-if="lang === 'python'">
+              <h3>
+                {{
+                  t('views.env.deps.repos.actions.searchNotReady.python.title')
+                }}
+              </h3>
+              <p>
+                {{
+                  t(
+                    'views.env.deps.repos.actions.searchNotReady.python.content'
+                  )
+                }}
+              </p>
+            </template>
+            <cl-label-button
+              disabled
+              size="large"
+              :icon="getIconByAction(ACTION_FILTER_SEARCH)"
+              :label="t('views.env.deps.repos.actions.searchNotReady.label')"
+              :tooltip="
+                t('views.env.deps.repos.actions.searchNotReady.tooltip')
+              "
+            />
+          </template>
+          <template v-else>
+            <cl-label-button
+              size="large"
+              :icon="getIconByAction(ACTION_FILTER_SEARCH)"
+              :label="
+                t('views.env.deps.repos.actions.search.label') +
+                (config.total_dependencies
+                  ? ` (${config.total_dependencies.toLocaleString()})`
+                  : '')
+              "
+              :tooltip="t('views.env.deps.repos.actions.search.tooltip')"
+              @click="onClickTableEmptySearch"
+            />
+          </template>
         </template>
+        <!-- ./Search -->
       </template>
+      <!-- ./Empty table for installed and search tabs -->
     </template>
     <template #extra>
       <!-- Dialogs (handled by store) -->