feat: enhance dependency setup dialog and utility functions

- Improved the logic in DependencySetupDialog.vue to better handle single and multiple node installations, providing clearer comments for maintainability.
- Updated the getRepoExternalPath function in dependency.ts to include browser-specific repository paths for Google Chrome and Chromedriver, enhancing the utility's functionality.
- Refined the useDependencyList.tsx to streamline the creation of repository tab items, ensuring proper handling of search and nodes tabs while improving readability.

These changes enhance the user experience and maintainability of the dependency management components.

src/components/core/dependency/DependencySetupDialog.vue

@@ -17,10 +17,17 @@ const activeNodes = computed(() => nodeState.allList.filter(n => n.active));
 
 const toInstallNodes = computed(() => {
   const { mode, node_ids, node_id } = state.setupForm;
+
   if (node_id) {
+    // Single node
     return activeNodes.value.filter(n => n._id === node_id);
   } else {
-    if (mode === 'all') return activeNodes.value;
+    // Multiple nodes
+    if (mode === 'all') {
+      // All nodes
+      return activeNodes.value;
+    }
+    // Selected nodes
     return activeNodes.value.filter(n => node_ids?.includes(n._id!));
   }
 });
@@ -36,11 +43,23 @@ const confirmButtonDisabled = computed(() => {
   return toInstallNodes.value.length === 0;
 });
 const onConfirm = async () => {
+  // Skip if the confirm button is disabled
   if (confirmButtonDisabled.value) return;
+
+  // Install config setup
   await store.dispatch(`${ns}/installConfigSetup`, {
     id: activeConfigSetup.value?._id,
   });
+
+  // Hide dialog
   store.commit(`${ns}/hideDialog`);
+
+  // Switch to nodes tab
+  if (state.repoTabName !== 'nodes') {
+    store.commit(`${ns}/setRepoTabName`, 'nodes');
+  }
+
+  // Refresh config setup list
   await store.dispatch(`${ns}/getConfigSetupList`);
 };
 

src/utils/dependency.ts

@@ -8,9 +8,20 @@ export const getRepoExternalPath = (repo: DependencyRepo) => {
       return `https://pkg.go.dev/${repo.name}`;
     case 'java':
       return `https://mvnrepository.com/artifact/${getRepoName(repo)}`;
+    case 'browser':
+      return getBrowserRepoExternalPath(repo);
     default:
       return '';
   }
+
+  function getBrowserRepoExternalPath(repo: DependencyRepo) {
+    switch (repo.name) {
+      case 'google-chrome':
+        return 'https://www.chromium.org/getting-involved/download-chromium/';
+      case 'chromedriver':
+        return 'https://developer.chrome.com/docs/chromedriver/';
+    }
+  }
 };
 
 export const getRepoName = (repo: DependencyRepo) => {

src/views/dependency/list/useDependencyList.tsx

@@ -628,19 +628,20 @@ const useDependencyList = () => {
 
   // repo tabs
   const repoTabItems = computed<NavItem[]>(() => {
+    const items: NavItem[] = [];
+
+    // installed tab
     const installedItem = {
       id: 'installed',
       title: `${t('views.env.deps.repos.tabs.installed')} (${state.tableTotal})`,
       icon: ['fas', 'cubes'],
     };
-    let searchItem: NavItem = {
+    items.push(installedItem);
+
+    // search tab
+    let searchItem: NavItem | undefined = {
       id: 'search',
     };
-    const nodesItem: NavItem = {
-      id: 'nodes',
-      title: t('views.env.deps.repos.tabs.nodes'),
-      icon: ['fas', 'server'],
-    };
     switch (lang.value) {
       case 'python':
         searchItem = {
@@ -671,11 +672,7 @@ const useDependencyList = () => {
         };
         break;
       case 'browser':
-        searchItem = {
-          ...searchItem,
-          title: t('views.env.deps.repos.tabs.search.chromium'),
-          icon: ['svg', 'chromium'],
-        };
+        searchItem = undefined;
         break;
       default:
         searchItem = {
@@ -684,10 +681,22 @@ const useDependencyList = () => {
           icon: ['fas', 'search'],
         };
     }
-    if (state.searchQuery) {
-      searchItem.title = `${searchItem.title} (${state.searchRepoTableTotal})`;
+    if (searchItem) {
+      if (state.searchQuery) {
+        searchItem.title = `${searchItem.title} (${state.searchRepoTableTotal})`;
+      }
+      items.push(searchItem);
     }
-    return [installedItem, searchItem, nodesItem] as NavItem[];
+
+    // nodes tab
+    const nodesItem: NavItem = {
+      id: 'nodes',
+      title: t('views.env.deps.repos.tabs.nodes'),
+      icon: ['fas', 'server'],
+    };
+    items.push(nodesItem);
+
+    return items;
   });
   const repoTabName = computed(() => state.repoTabName);