Merge pull request #221 from dgageot/ui-fixes

UI fixes

Author: trungutt

src/extension/ui/src/components/CatalogGrid.tsx

@@ -84,7 +84,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({ appProps }) => {
         sx={CATALOG_LAYOUT_SX}
       >
         <Typography variant="h3">Docker MCP Toolkit</Typography>
-        <Typography variant="caption">
+        <Typography sx={{ color: 'text.secondary' }}>
           Browse the Docker MCP Catalog and connect Dockerized MCP servers to your favorite MCP Client
         </Typography>
       </Stack>

src/extension/ui/src/components/tabs/YourClients.tsx

@@ -59,7 +59,6 @@ const MCPClientSettings = ({ appProps }: MCPClientSettingsProps) => {
 
   return (
     <Stack sx={CATALOG_LAYOUT_SX} spacing={2}>
-      <Typography>Connect to runtimes for your tools</Typography>
       <Stack direction="column" spacing={1}>
         {Object.entries(mcpClientStates).map(
           ([name, mcpClientState]: [string, any]) => {
@@ -175,19 +174,7 @@ function ClientSetting({
           )
         }
         title={
-          <Typography variant="subtitle2">
-            {name}{' '}
-            {mcpClientState.exists && (
-              <Chip
-                label={mcpClientState.configured ? 'Connected' : 'Disconnected'}
-                color={mcpClientState.configured ? 'success' : 'primary'}
-                size="small"
-              />
-            )}
-            {!mcpClientState.exists && (
-              <Chip label="No Config Found" color="warning" size="small" />
-            )}
-          </Typography>
+          <Typography variant="subtitle2">{name}</Typography>
         }
         subheader={
           <Typography
@@ -231,8 +218,15 @@ function ClientSetting({
                 size="small"
               >
                 <Stack direction="row" alignItems="center" spacing={1}>
-                  <Typography sx={{ fontSize: 12 }}>Disconnect</Typography>
-                  {buttonsLoading[name] && <CircularProgress size={12} />}
+                  {buttonsLoading[name]
+                    &&
+                    <>
+                      <Typography sx={{ fontSize: 12, width: 70 }}>Connect</Typography>
+                      <CircularProgress size={12} />
+                    </>
+                    ||
+                    <Typography sx={{ fontSize: 12, width: 90 }}>Disconnect</Typography>
+                  }
                 </Stack>
               </Button>
             )}
@@ -261,8 +255,15 @@ function ClientSetting({
                 size="small"
               >
                 <Stack direction="row" alignItems="center" spacing={1}>
-                  <Typography sx={{ fontSize: 12 }}>Connect</Typography>
-                  {buttonsLoading[name] && <CircularProgress size={12} />}
+                  {buttonsLoading[name]
+                    &&
+                    <>
+                      <Typography sx={{ fontSize: 12, width: 70 }}>Disconnect</Typography>
+                      <CircularProgress size={12} />
+                    </>
+                    ||
+                    <Typography sx={{ fontSize: 12, width: 90 }}>Connect</Typography>
+                  }
                 </Stack>
               </Button>
             )}
@@ -286,8 +287,15 @@ function ClientSetting({
                 }}
               >
                 <Stack direction="row" alignItems="center" spacing={1}>
-                  <Typography sx={{ fontSize: 12 }}>Configure</Typography>
-                  {buttonsLoading[name] && <CircularProgress size={12} />}
+                  {buttonsLoading[name]
+                    &&
+                    <>
+                      <Typography sx={{ fontSize: 12, width: 70 }}>Disconnect</Typography>
+                      <CircularProgress size={12} />
+                    </>
+                    ||
+                    <Typography sx={{ fontSize: 12, width: 90 }}>Connect</Typography>
+                  }
                 </Stack>
               </Button>
             )}

src/extension/ui/src/components/tile/ConfigEditor.tsx

@@ -49,9 +49,9 @@ const ConfigEditor = ({
     () =>
       configSchema
         ? deepFlattenObject({
-            ...catalogItem.configTemplate,
-            ...existingConfigForItem,
-          })
+          ...catalogItem.configTemplate,
+          ...existingConfigForItem,
+        })
         : {},
     [catalogItem.configTemplate, existingConfigForItem, configSchema]
   );
@@ -82,7 +82,7 @@ const ConfigEditor = ({
   return (
     <Stack spacing={1}>
       <Typography variant="subtitle2">Parameters</Typography>
-      <Stack direction="column" spacing={1}>
+      <Stack>
         {Object.keys(flattenedConfig).map((key: string) => {
           const edited = localConfig[key] !== flattenedConfig[key];
           const isSaving = savingKeys.has(key);

src/extension/ui/src/components/tile/Modal.tsx

@@ -280,6 +280,13 @@ const ConfigurationModal = ({
                     sx={toolChipStyle}
                   >
                     {tool.name}
+                    <Link
+                      onClick={() => client.host.openExternal(`${catalogItem.readme}#tool-${tool.name.replaceAll(' ', '-')}` || '')}
+                      href="#"
+                      target="_blank"
+                    >
+                      <Launch />
+                    </Link>
                   </Typography>
                 ))}
               </Stack>