Finalize UI for config changing with config.yaml

ColinMcNeil · ColinMcNeil · commit e2d5d39cbabd · 2025-03-12T20:12:59.000-04:00
diff --git a/src/extension/ui/src/App.tsx b/src/extension/ui/src/App.tsx
@@ -2,15 +2,15 @@ import React, { useEffect, useState } from 'react';
 import { createDockerDesktopClient } from '@docker/extension-api-client';
 import { Stack, Typography, Button, ButtonGroup, Grid, debounce, Card, CardContent, IconButton, Alert, DialogTitle, Dialog, DialogContent, FormControlLabel, Checkbox, CircularProgress, Paper, DialogActions, Box } from '@mui/material';
 import { CatalogItemWithName } from './components/PromptCard';
-import { getRegistry } from './Registry';
+import { getRegistry, getStoredConfig, syncConfigWithRegistry, syncRegistryWithConfig } from './Registry';
 import { Close, FolderOpenRounded, } from '@mui/icons-material';
 import { ExecResult } from '@docker/extension-api-client-types/dist/v0';
 import { CatalogGrid } from './components/CatalogGrid';
 import { POLL_INTERVAL } from './Constants';
 import MCPCatalogLogo from './MCP Catalog.svg'
 import Settings from './components/Settings';
 import { getMCPClientStates, MCPClientState } from './MCPClients';
-import PromptConfig from './components/PromptConfig';
+import PromptConfig, { ParsedParameters } from './components/PromptConfig';
 
 export const client = createDockerDesktopClient();
 
@@ -26,6 +26,7 @@ export function App() {
   const [settings, setSettings] = useState<{ showModal: boolean, pollIntervalSeconds: number }>(localStorage.getItem('settings') ? JSON.parse(localStorage.getItem('settings') || '{}') : DEFAULT_SETTINGS);
   const [mcpClientStates, setMcpClientStates] = useState<{ [name: string]: MCPClientState }>({});
   const [configuringItem, setConfiguringItem] = useState<CatalogItemWithName | null>(null);
+  const [config, setConfig] = useState<{ [key: string]: { [key: string]: ParsedParameters } }>({});
 
   const loadRegistry = async () => {
     setCanRegister(false);
@@ -72,23 +73,28 @@ export function App() {
     }
   }
 
-  useEffect(() => {
-    let interval: NodeJS.Timeout | null = null;
+  const loadConfig = async () => {
+    const config = await getStoredConfig(client);
+    setConfig(config);
+  }
+
+  const startSyncing = async () => {
+    await updateMCPClientStates();
+    await syncConfigWithRegistry(client);
+    await syncRegistryWithConfig(client);
+    await loadRegistry();
+    await loadConfig();
+  }
 
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
     startImagesLoading().then(() => {
-      loadRegistry();
-      updateMCPClientStates();
+      startSyncing();
       interval = setInterval(() => {
-        loadRegistry();
-        updateMCPClientStates();
+        startSyncing();
       }, POLL_INTERVAL);
     })
-
-    return () => {
-      if (interval) {
-        clearInterval(interval)
-      }
-    }
+    return () => clearInterval(interval);
   }, []);
 
   if (!imagesLoadingResults || imagesLoadingResults.stderr) {
@@ -115,7 +121,7 @@ export function App() {
       {configuringItem && <Dialog open={configuringItem !== null} onClose={() => setConfiguringItem(null)}>
         <DialogTitle>
           <Typography variant="h6">
-            Config
+            Config for {configuringItem.name}
           </Typography>
         </DialogTitle>
         <DialogContent>
@@ -142,7 +148,9 @@ export function App() {
           registryItems={registryItems}
           canRegister={canRegister}
           client={client}
-          onRegistryChange={loadRegistry} />
+          onRegistryChange={loadRegistry}
+          config={config}
+        />
       </Stack>
     </>
   )
diff --git a/src/extension/ui/src/FileWatcher.ts b/src/extension/ui/src/FileWatcher.ts
@@ -7,15 +7,15 @@ import { ExecResult } from "@docker/extension-api-client-types/dist/v0"
 
 const allWatches: { [key: string]: any } = {}
 
-export const tryRunImageSync = async (client: v1.DockerDesktopClient, args: string[]) => {
-    const showError = client.desktopUI.toast.error
+export const tryRunImageSync = async (client: v1.DockerDesktopClient, args: string[], ignoreError = false) => {
+    const showError = ignoreError ? () => { } : client.desktopUI.toast.error
     try {
         const result = await client.docker.cli.exec('run', args)
         if (result.stderr) {
             console.error(result.stderr)
             showError(result.stderr)
         }
-        return result.stdout
+        return result.stdout || ''
     }
     catch (e) {
         if (e instanceof Error) {
@@ -34,7 +34,7 @@ export const getUser = async (client: v1.DockerDesktopClient) => {
 }
 
 export const readFileInPromptsVolume = async (client: v1.DockerDesktopClient, path: string) => {
-    return tryRunImageSync(client, ['--rm', '-v', 'docker-prompts:/docker-prompts', '--workdir', '/docker-prompts', 'alpine:latest', 'sh', '-c', `"cat ${path}"`])
+    return tryRunImageSync(client, ['--rm', '-v', 'docker-prompts:/docker-prompts', '--workdir', '/docker-prompts', 'alpine:latest', 'sh', '-c', `"cat ${path}"`], true)
 }
 
 export const writeFileToPromptsVolume = async (client: v1.DockerDesktopClient, content: string) => {
diff --git a/src/extension/ui/src/Registry.ts b/src/extension/ui/src/Registry.ts
@@ -1,18 +1,23 @@
 import { v1 } from "@docker/extension-api-client-types";
-import { parse } from "yaml";
+import { parse, stringify } from "yaml";
 import { readFileInPromptsVolume, writeFileToPromptsVolume } from "./FileWatcher";
+import { ParsedParameters } from "./components/PromptConfig";
+import { mergeDeep } from "./MergeDeep";
 
 export const getRegistry = async (client: v1.DockerDesktopClient) => {
     const parseRegistry = async () => {
         const registry = await readFileInPromptsVolume(client, 'registry.yaml')
         if (registry) {
-            return parse(registry)['registry'] as Promise<{ [key: string]: { ref: string; config: any } }>;
+            const value = parse(registry)['registry'] as { [key: string]: { ref: string, config: any } }
+            if (!value) {
+                client.desktopUI.toast.error('Failed to get parse registry.yaml.registry: ' + registry)
+            }
+            return value;
         }
         return {};
     }
     const writeRegistryIfNotExists = async () => {
         const registry = await readFileInPromptsVolume(client, 'registry.yaml')
-
         if (!registry) {
             console.log('writeRegistryIfNotExists: no registry')
             await writeFileToPromptsVolume(client, JSON.stringify({ files: [{ path: 'registry.yaml', content: 'registry: {}' }] }))
@@ -26,4 +31,64 @@ export const getRegistry = async (client: v1.DockerDesktopClient) => {
         client.desktopUI.toast.error('Failed to get prompt registry: ' + error)
         return {};
     }
-}
+}
+
+export const getStoredConfig = async (client: v1.DockerDesktopClient) => {
+    const parseConfig = async () => {
+        const config = await readFileInPromptsVolume(client, 'config.yaml')
+        if (config) {
+            return parse(config) as Promise<{ [key: string]: { [key: string]: ParsedParameters } }>;
+        }
+        return {};
+    }
+    const writeConfigIfNotExists = async () => {
+        const config = await readFileInPromptsVolume(client, 'config.yaml')
+        if (!config) {
+            console.log('writeConfigIfNotExists: no config')
+            await writeFileToPromptsVolume(client, JSON.stringify({ files: [{ path: 'config.yaml', content: '{}' }] }))
+        }
+    }
+    try {
+        await writeConfigIfNotExists()
+        return await parseConfig()
+    }
+    catch (error) {
+        client.desktopUI.toast.error('Failed to get stored configs: ' + error)
+        return {};
+    }
+}
+
+// if registry.yaml has a config, it must be the same as what you have stored
+// if that’s not true and the registry.yaml value is valid then you should sync with it
+// if it’s not true and the registry.yaml is invalid then the catalog item needs user assistance because the catalog has probably been updated with a breaking change
+
+// Replace conflicting config values with registry values
+export const syncConfigWithRegistry = async (client: v1.DockerDesktopClient) => {
+    const registry = await getRegistry(client) || {}
+    const storedConfig = await getStoredConfig(client) || {}
+
+    for (const [key, item] of Object.entries(registry)) {
+        const itemConfig = item.config || {}
+        const storedConfigItem = storedConfig[key]
+        if (storedConfigItem) {
+            const mergedConfig = mergeDeep(storedConfigItem, itemConfig)
+            storedConfig[key] = mergedConfig
+        }
+    }
+    await writeFileToPromptsVolume(client, JSON.stringify({ files: [{ path: 'config.yaml', content: stringify(storedConfig) }] }))
+}
+
+//  Replace conflicting registry values with config values
+export const syncRegistryWithConfig = async (client: v1.DockerDesktopClient) => {
+    const storedRegistry = await getRegistry(client) || {}
+    const storedConfig = await getStoredConfig(client) || {}
+    for (const [key, item] of Object.entries(storedConfig)) {
+        const itemConfig = item || {}
+        const registryItem = storedRegistry[key]
+        if (registryItem) {
+            const mergedConfig = mergeDeep(registryItem.config, itemConfig)
+            storedRegistry[key].config = mergedConfig
+        }
+    }
+    await writeFileToPromptsVolume(client, JSON.stringify({ files: [{ path: 'registry.yaml', content: stringify({ registry: storedRegistry }) }] }))
+}
diff --git a/src/extension/ui/src/components/CatalogGrid.tsx b/src/extension/ui/src/components/CatalogGrid.tsx
@@ -5,21 +5,23 @@ import AddIcon from '@mui/icons-material/Add';
 import { Ref } from '../Refs';
 import { v1 } from "@docker/extension-api-client-types";
 import { parse, stringify } from 'yaml';
-import { getRegistry } from '../Registry';
+import { getRegistry, syncConfigWithRegistry, syncRegistryWithConfig } from '../Registry';
 import { FolderOpenRounded, Search, Settings } from '@mui/icons-material';
 import { tryRunImageSync } from '../FileWatcher';
 import { CATALOG_URL, DD_BUILD_WITH_SECRET_SUPPORT, MCP_POLICY_NAME, POLL_INTERVAL } from '../Constants';
 import { SecretList } from './SecretList';
 import Secrets from '../Secrets';
+import { ParsedParameters } from './PromptConfig';
 
 interface CatalogGridProps {
-    registryItems: { [key: string]: { ref: string } };
+    registryItems: { [key: string]: { ref: string, config: any } };
     canRegister: boolean;
     client: v1.DockerDesktopClient;
     onRegistryChange: () => void;
     showSettings: () => void;
     settingsBadgeProps: BadgeProps;
     setConfiguringItem: (item: CatalogItemWithName) => void;
+    config: { [key: string]: { [key: string]: ParsedParameters } };
 }
 
 const filterCatalog = (catalogItems: CatalogItemWithName[], registryItems: { [key: string]: { ref: string } }, search: string) =>
@@ -42,7 +44,8 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
     onRegistryChange,
     showSettings,
     settingsBadgeProps,
-    setConfiguringItem
+    setConfiguringItem,
+    config
 }) => {
     const [catalogItems, setCatalogItems] = useState<CatalogItemWithName[]>([]);
     const [showReloadModal, setShowReloadModal] = useState<boolean>(false);
@@ -105,6 +108,8 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
             if (showNotification) {
                 setShowReloadModal(!localStorage.getItem(NEVER_SHOW_AGAIN_KEY));
             }
+            await syncConfigWithRegistry(client);
+            await syncRegistryWithConfig(client);
         }
         catch (error) {
             if (showNotification) {
@@ -127,6 +132,8 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
             client.desktopUI.toast.success('Prompt unregistered successfully. Restart Claude Desktop to apply.');
             onRegistryChange();
             setShowReloadModal(!localStorage.getItem(NEVER_SHOW_AGAIN_KEY));
+            await syncConfigWithRegistry(client);
+            await syncRegistryWithConfig(client);
         }
         catch (error) {
             client.desktopUI.toast.error('Failed to unregister prompt: ' + error)
@@ -206,27 +213,32 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
             </FormGroup >
 
             {tab === 0 && <Grid2 container spacing={1} width='90vw' maxWidth={1000}>
-                {filteredCatalogItems.map((item) => (
-                    <Grid2 size={{ xs: 12, sm: 6, md: 4 }} key={item.name}>
-                        <CatalogItemCard
-                            setConfiguringItem={setConfiguringItem}
-                            openUrl={() => {
-                                client.host.openExternal(Ref.fromRef(item.ref).toURL(true));
-                            }}
-                            item={item}
-                            ddVersion={ddVersion}
-                            canRegister={canRegister}
-                            registered={Object.keys(registryItems).some((i) => i === item.name)}
-                            register={registerCatalogItem}
-                            unregister={unregisterCatalogItem}
-                            onSecretChange={async (secret) => {
-                                await Secrets.addSecret(client, { name: secret.name, value: secret.value, policies: [MCP_POLICY_NAME] })
-                                loadSecrets();
-                            }}
-                            secrets={secrets}
-                        />
-                    </Grid2>
-                ))}
+                {filteredCatalogItems.map((catalogItem) => {
+                    const expectedProperties = catalogItem.config?.map((c: { name: string, parameters: ParsedParameters }) => Object.keys(c.parameters)).flat() || []
+                    const hasAllConfig = !expectedProperties.length || expectedProperties.every((p: string) => config[catalogItem.name]?.[p])
+                    return (
+                        <Grid2 size={{ xs: 12, sm: 6, md: 4 }} key={catalogItem.name}>
+                            <CatalogItemCard
+                                hasAllConfig={hasAllConfig}
+                                setConfiguringItem={setConfiguringItem}
+                                openUrl={() => {
+                                    client.host.openExternal(Ref.fromRef(catalogItem.ref).toURL(true));
+                                }}
+                                item={catalogItem}
+                                ddVersion={ddVersion}
+                                canRegister={canRegister}
+                                registered={Object.keys(registryItems).some((i) => i === catalogItem.name)}
+                                register={registerCatalogItem}
+                                unregister={unregisterCatalogItem}
+                                onSecretChange={async (secret) => {
+                                    await Secrets.addSecret(client, { name: secret.name, value: secret.value, policies: [MCP_POLICY_NAME] })
+                                    loadSecrets();
+                                }}
+                                secrets={secrets}
+                            />
+                        </Grid2>
+                    )
+                })}
                 <Grid2 size={12}>
                     <Card sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                         <CardContent>
@@ -240,16 +252,19 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                 </Grid2>
             </Grid2>}
             {tab === 1 && <Grid2 container spacing={1} width='90vw' maxWidth={1000}>
-                {Object.entries(registryItems).map(([name, item]) => (
-                    name.toLowerCase().includes(search.toLowerCase()) && <Grid2 size={{ xs: 12, sm: 6, md: 4 }} key={name}>
-                        <CatalogItemCard ddVersion={ddVersion} item={catalogItems.find((i) => i.name === name)!} openUrl={() => {
-                            client.host.openExternal(Ref.fromRef(item.ref).toURL(true));
-                        }} canRegister={canRegister} registered={true} register={registerCatalogItem} unregister={unregisterCatalogItem} onSecretChange={async (secret) => {
-                            await Secrets.addSecret(client, { name: secret.name, value: secret.value, policies: [MCP_POLICY_NAME] })
-                            loadSecrets();
-                        }} secrets={secrets} setConfiguringItem={setConfiguringItem} />
-                    </Grid2>
-                ))}
+                {Object.entries(registryItems).map(([name, item]) => {
+                    const hasAllConfig = item.config?.map((c: any) => c.name).every((c: any) => config[name]?.[c])
+                    return (
+                        name.toLowerCase().includes(search.toLowerCase()) && <Grid2 size={{ xs: 12, sm: 6, md: 4 }} key={name}>
+                            <CatalogItemCard hasAllConfig={hasAllConfig} ddVersion={ddVersion} item={catalogItems.find((i) => i.name === name)!} openUrl={() => {
+                                client.host.openExternal(Ref.fromRef(item.ref).toURL(true));
+                            }} canRegister={canRegister} registered={true} register={registerCatalogItem} unregister={unregisterCatalogItem} onSecretChange={async (secret) => {
+                                await Secrets.addSecret(client, { name: secret.name, value: secret.value, policies: [MCP_POLICY_NAME] })
+                                loadSecrets();
+                            }} secrets={secrets} setConfiguringItem={setConfiguringItem} />
+                        </Grid2>
+                    )
+                })}
             </Grid2>}
             {tab === 2 && ddVersion && <SecretList secrets={secrets} ddVersion={ddVersion} />}
         </Stack >
diff --git a/src/extension/ui/src/components/PromptCard.tsx b/src/extension/ui/src/components/PromptCard.tsx
diff --git a/src/extension/ui/src/components/PromptConfig.tsx b/src/extension/ui/src/components/PromptConfig.tsx

Original file line number	Diff line number	Diff line change
`@@ -7,15 +7,15 @@ import { ExecResult } from "@docker/extension-api-client-types/dist/v0"`
`7`	`7`
`8`	`8`	`const allWatches: { [key: string]: any } = {}`
`9`	`9`
`10`		`-export const tryRunImageSync = async (client: v1.DockerDesktopClient, args: string[]) => {`
`11`		`- const showError = client.desktopUI.toast.error`
	`10`	`+export const tryRunImageSync = async (client: v1.DockerDesktopClient, args: string[], ignoreError = false) => {`
	`11`	`+ const showError = ignoreError ? () => { } : client.desktopUI.toast.error`
`12`	`12`	`try {`
`13`	`13`	`const result = await client.docker.cli.exec('run', args)`
`14`	`14`	`if (result.stderr) {`
`15`	`15`	`console.error(result.stderr)`
`16`	`16`	`showError(result.stderr)`
`17`	`17`	`}`
`18`		`- return result.stdout`
	`18`	`+ return result.stdout \|\| ''`
`19`	`19`	`}`
`20`	`20`	`catch (e) {`
`21`	`21`	`if (e instanceof Error) {`
`@@ -34,7 +34,7 @@ export const getUser = async (client: v1.DockerDesktopClient) => {`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`export const readFileInPromptsVolume = async (client: v1.DockerDesktopClient, path: string) => {`
`37`		- return tryRunImageSync(client, ['--rm', '-v', 'docker-prompts:/docker-prompts', '--workdir', '/docker-prompts', 'alpine:latest', 'sh', '-c', `"cat ${path}"`])
	`37`	+ return tryRunImageSync(client, ['--rm', '-v', 'docker-prompts:/docker-prompts', '--workdir', '/docker-prompts', 'alpine:latest', 'sh', '-c', `"cat ${path}"`], true)
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`export const writeFileToPromptsVolume = async (client: v1.DockerDesktopClient, content: string) => {`