From 1b60483eda8490d108d0d8e2d175ff7c74e6bc71 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq>
Date: Mon, 23 Dec 2024 15:17:25 +0800
Subject: [PATCH] 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.
---
 src/i18n/lang/en/views/env.ts                | 10 ++++
 src/i18n/lang/zh/views/env.ts                |  9 ++++
 src/interfaces/i18n/views/env.d.ts           |  8 +++
 src/interfaces/models/dependency.d.ts        |  2 +
 src/views/dependency/list/DependencyList.vue | 56 +++++++++++++++++---
 5 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/src/i18n/lang/en/views/env.ts b/src/i18n/lang/en/views/env.ts
index 155d1eae0b1ef..adc728ff4219c 100644
--- 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
index 3536fb695b329..746323569c71f 100644
--- 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
index ec80416b1f082..6d390bd709d1c 100644
--- 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
index 30ccdd6e7185a..e2d9d2a3fba51 100644
--- 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
index 72888efaa2f33..00e8ce4f62edc 100644
--- 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) -->