From 81e32bdba2540c6f6f44778481a07caf0f331e0d Mon Sep 17 00:00:00 2001 From: Douglas Date: Tue, 24 Mar 2026 14:08:04 +0000 Subject: [PATCH 1/8] update error loading unwrapped ui bugs --- .storybook/preview.tsx | 2 +- src/App.tsx | 6 +- src/components/AddWorker/ToolSelect.tsx | 52 +-- src/components/AddWorker/index.tsx | 30 +- src/components/IntegrationList/index.tsx | 280 +++++++++---- src/components/ui/button.stories.tsx | 16 +- src/components/ui/button.tsx | 38 +- src/components/ui/dialog.tsx | 27 +- src/components/ui/input-select.tsx | 396 ++++++++++-------- src/components/ui/input.tsx | 18 +- src/components/ui/sonner.tsx | 6 +- src/hooks/useIntegrationManagement.ts | 15 +- src/i18n/locales/en-us/layout.json | 2 + src/i18n/locales/en-us/setting.json | 4 + src/pages/Browser/CDP.tsx | 32 +- .../Connectors/components/MCPAddDialog.tsx | 48 ++- .../Connectors/components/MCPEnvDialog.tsx | 2 + .../Connectors/components/MCPListItem.tsx | 11 +- src/pages/Connectors/components/MCPMarket.tsx | 88 ++-- src/style/index.css | 5 + 20 files changed, 651 insertions(+), 427 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 7e36a17d8..61cec4890 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -18,7 +18,7 @@ import '@fontsource/inter/600.css'; import '@fontsource/inter/700.css'; import '@fontsource/inter/800.css'; import type { Preview } from '@storybook/react-vite'; -import { Toaster } from 'sonner'; +import { Toaster } from '../src/components/ui/sonner'; import '../src/style/index.css'; import './storybook.css'; // Storybook-specific overrides diff --git a/src/App.tsx b/src/App.tsx index ebfca2717..9a931207c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,6 +12,7 @@ // limitations under the License. // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. ========= +import { Toaster } from '@/components/ui/sonner'; import { queryClient } from '@/lib/queryClient'; import AppRoutes from '@/routers/index'; import { stackClientApp } from '@/stack/client'; @@ -19,7 +20,6 @@ import { StackProvider, StackTheme } from '@stackframe/react'; import { QueryClientProvider } from '@tanstack/react-query'; import React, { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; -import { Toaster } from 'sonner'; import { useBackgroundTaskProcessor } from './hooks/useBackgroundTaskProcessor'; import { useExecutionSubscription } from './hooks/useExecutionSubscription'; import { useTriggerTaskExecutor } from './hooks/useTriggerTaskExecutor'; @@ -88,14 +88,14 @@ function App() { return ( {content} - + ); } return ( <> {content} - + ); }; diff --git a/src/components/AddWorker/ToolSelect.tsx b/src/components/AddWorker/ToolSelect.tsx index 5bc863484..ba4b2171f 100644 --- a/src/components/AddWorker/ToolSelect.tsx +++ b/src/components/AddWorker/ToolSelect.tsx @@ -76,6 +76,7 @@ const ToolSelect = forwardRef< const [installed, setInstalled] = useState<{ [id: number]: boolean }>({}); const [installing, setInstalling] = useState<{ [id: number]: boolean }>({}); const [installedIds, setInstalledIds] = useState([]); + const [userMcpsHydrated, setUserMcpsHydrated] = useState(false); const { email } = useAuthStore(); // add: integration service list const [integrations, setIntegrations] = useState([]); @@ -357,22 +358,22 @@ const ToolSelect = forwardRef< console.error('Error fetching installed MCPs:', error); setInstalledIds([]); setCustomMcpList([]); - }); + }) + .finally(() => setUserMcpsHydrated(true)); }, []); // only surface installed MCPs from the market list useEffect(() => { - // Add defensive check and fix logic: should filter when installedIds has items + if (!userMcpsHydrated) return; if (Array.isArray(allMcpList) && installedIds.length > 0) { const filtered = allMcpList.filter((item) => installedIds.includes(item.id) ); setMcpList(filtered); } else if (Array.isArray(allMcpList)) { - // If no installed IDs, show empty list instead of all setMcpList([]); } - }, [allMcpList, installedIds]); + }, [allMcpList, installedIds, userMcpsHydrated]); // public save env/config logic const saveEnvAndConfig = async ( @@ -705,6 +706,7 @@ const ToolSelect = forwardRef< }; const getInstallButtonText = (itemId: number) => { + if (!userMcpsHydrated) return t('setting.loading'); if (installedIds.includes(itemId)) return t('layout.installed'); if (installing[itemId]) return t('layout.installing'); if (installed[itemId]) return t('layout.installed'); @@ -757,12 +759,12 @@ const ToolSelect = forwardRef< {(initialSelectedTools || []).map((item: any) => ( {item.name || item.mcp_name || item.key || `tool_${item.id}`} -
+
removeOption(item)} />
@@ -775,7 +777,7 @@ const ToolSelect = forwardRef<
{ - // check if already installed + if (!userMcpsHydrated) return; const isAlreadyInstalled = installedIds.includes(item.id) || installed[item.id]; @@ -788,21 +790,21 @@ const ToolSelect = forwardRef< checkEnv(item.id); } }} - className="flex cursor-pointer justify-between px-3 py-2 hover:bg-surface-hover-subtle" + className="px-3 py-2 hover:bg-surface-hover-subtle flex cursor-pointer justify-between" > -
+
{getCategoryIcon(item.category?.name)} -
+
{item.name}
e.stopPropagation()} />
-
+
{getGithubRepoName(item.home_page) && (
- + {getGithubRepoName(item.home_page)}
@@ -824,7 +826,9 @@ const ToolSelect = forwardRef<