Add configuration (#69)

* Implement prompt configs

* Finalize UI for config changing with `config.yaml`

* Include sync in config change

* Refactor build for smaller bundle

* Re-add missing props

* Fix config toggle button

* Implement tile config

* Fix issues after performance profiling

* Improve how config gets written and synced

* Fix build for config

* Add badge to config icon

* Fix bug with failing to save config

* Get `Your Tools` working

* Make sure config changes yield diff before writing

* Make config badge subtle color

* Move secrets to provider layer

* Fix notif messages mentoning claude

Author: ColinMcNeil

src/extension/Makefile

@@ -1,5 +1,5 @@
 IMAGE?=docker/labs-ai-tools-for-devs
-TAG?=0.2.25
+TAG?=0.2.27
 
 BUILDER=buildx-multi-arch
 

src/extension/ui/package-lock.json

@@ -11,6 +11,7 @@
     "@mui/icons-material": "6.4.5",
     "@mui/material": "6.4.5",
     "ansi-to-html": "^0.7.2",
+    "json-edit-react": "^1.23.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "yaml": "^2.3.1"

src/extension/ui/package.json

@@ -1,15 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, Suspense } 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 { Close, FolderOpenRounded, } from '@mui/icons-material';
-import { ExecResult } from '@docker/extension-api-client-types/dist/v0';
+import { Stack, Typography, Button, IconButton, Alert, DialogTitle, Dialog, DialogContent, CircularProgress, Paper, Box } from '@mui/material';
+import { CatalogItemWithName } from './components/tile/Tile';
+import { Close } from '@mui/icons-material';
 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 { CatalogProvider, useCatalogContext } from './context/CatalogContext';
+import ConfigurationModal from './components/ConfigurationModal';
+
+const Settings = React.lazy(() => import('./components/Settings'));
 
 export const client = createDockerDesktopClient();
 
@@ -19,106 +20,147 @@ const DEFAULT_SETTINGS = {
 }
 
 export function App() {
-  const [canRegister, setCanRegister] = useState(false);
-  const [registryItems, setRegistryItems] = useState<{ [key: string]: { ref: string } }>({});
-  const [imagesLoadingResults, setImagesLoadingResults] = useState<ExecResult | null>(null);
   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 loadRegistry = async () => {
-    setCanRegister(false);
-    try {
-      const result = await getRegistry(client)
-      setRegistryItems(result || {});
-    }
-    catch (error) {
-      if (error instanceof Error) {
-        client.desktopUI.toast.error('Failed to get prompt registry: ' + error.message);
-      } else {
-        client.desktopUI.toast.error('Failed to get prompt registry: ' + JSON.stringify(error));
-      }
-    }
-    setCanRegister(true);
-  }
-
-  const startImagesLoading = async () => {
-    setImagesLoadingResults(null);
-    try {
-      const result = await client.docker.cli.exec('pull', ['vonwig/function_write_files:latest'])
-      await client.docker.cli.exec('pull', ['alpine:latest'])
-      await client.docker.cli.exec('pull', ['keinos/sqlite3:latest'])
-      setImagesLoadingResults(result);
-    }
-    catch (error) {
-      console.error(error)
-      if (error) {
-        setImagesLoadingResults(error as ExecResult)
-      }
-    }
-  }
+  const [configuringItem, setConfiguringItem] = useState<CatalogItemWithName | null>(null);
 
   const updateMCPClientStates = async () => {
     const oldStates = mcpClientStates;
     const states = await getMCPClientStates(client)
     setMcpClientStates(states);
     // Whenever a client connection changes, show toast to user
     if (Object.values(oldStates).some(state => state.exists && !state.configured) && Object.values(states).every(state => state.configured)) {
-      client.desktopUI.toast.success('MCP Client Connected. Restart Claude Desktop to use the MCP Catalog.');
+      client.desktopUI.toast.success('MCP Client Connected. Restart it to load the Catalog.');
     }
     if (Object.values(oldStates).some(state => state.exists && state.configured) && Object.values(states).every(state => !state.configured)) {
-      client.desktopUI.toast.error('MCP Client Disconnected. Restart Claude Desktop to remove the MCP Catalog.');
+      client.desktopUI.toast.error('MCP Client Disconnected. Restart it to remove the Catalog.');
     }
   }
 
   useEffect(() => {
-    startImagesLoading();
-    loadRegistry();
+    let interval: NodeJS.Timeout;
     updateMCPClientStates();
-    const interval = setInterval(() => {
-      loadRegistry();
+    interval = setInterval(() => {
       updateMCPClientStates();
     }, POLL_INTERVAL);
-    return () => {
-      clearInterval(interval)
-    }
+    return () => clearInterval(interval);
   }, []);
 
+  // Wrap the entire application with our CatalogProvider
+  return (
+    <CatalogProvider client={client}>
+      <AppContent
+        settings={settings}
+        setSettings={setSettings}
+        mcpClientStates={mcpClientStates}
+        configuringItem={configuringItem}
+        setConfiguringItem={setConfiguringItem}
+        updateMCPClientStates={updateMCPClientStates}
+      />
+    </CatalogProvider>
+  );
+}
+
+interface AppContentProps {
+  settings: { showModal: boolean, pollIntervalSeconds: number };
+  setSettings: React.Dispatch<React.SetStateAction<{ showModal: boolean, pollIntervalSeconds: number }>>;
+  mcpClientStates: { [name: string]: MCPClientState };
+  configuringItem: CatalogItemWithName | null;
+  setConfiguringItem: React.Dispatch<React.SetStateAction<CatalogItemWithName | null>>;
+  updateMCPClientStates: () => Promise<void>;
+}
+
+function AppContent({ settings, setSettings, mcpClientStates, configuringItem, setConfiguringItem, updateMCPClientStates }: AppContentProps) {
+  const { imagesLoadingResults, loadImagesIfNeeded, secrets, catalogItems, registryItems, tryLoadSecrets } = useCatalogContext();
+
   if (!imagesLoadingResults || imagesLoadingResults.stderr) {
     return <Paper sx={{ padding: 2, height: '90vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
       {!imagesLoadingResults && <CircularProgress sx={{ marginBottom: 2 }} />}
       {!imagesLoadingResults && <Typography>Loading images...</Typography>}
-      {imagesLoadingResults && <Alert sx={{ fontSize: '1.5em' }} action={<Button variant='outlined' color='secondary' onClick={() => startImagesLoading()}>Retry</Button>} title="Error loading images" severity="error">{imagesLoadingResults.stderr}</Alert>}
+      {imagesLoadingResults && <Alert sx={{ fontSize: '1.5em' }} action={<Button variant='outlined' color='secondary' onClick={() => loadImagesIfNeeded()}>Retry</Button>} title="Error loading images" severity="error">{imagesLoadingResults.stderr}</Alert>}
       <Typography>{imagesLoadingResults?.stdout}</Typography>
     </Paper>
   }
 
-  const hasMCPConfigured = Object.values(mcpClientStates).some(state => state.exists && state.configured)
+  if (!secrets) {
+    return <Paper sx={{ padding: 2, height: '90vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
+      <CircularProgress />
+      <Typography>Loading secrets...</Typography>
+    </Paper>
+  }
+
+  if (!catalogItems) {
+    return <Paper sx={{ padding: 2, height: '90vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
+      <CircularProgress />
+      <Typography>Loading catalog...</Typography>
+    </Paper>
+  }
+
+  if (!registryItems) {
+    return <Paper sx={{ padding: 2, height: '90vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
+      <CircularProgress />
+      <Typography>Loading registry...</Typography>
+    </Paper>
+  }
+
+  const hasMCPConfigured = Object.values(mcpClientStates).some(state => state.exists && state.configured);
 
   return (
     <>
-      <Dialog open={settings.showModal} onClose={() => setSettings({ ...settings, showModal: false })} fullWidth maxWidth='md'>
-        <DialogTitle>
-          <Typography variant='h2' sx={{ fontWeight: 'bold', m: 2 }}>Catalog Settings</Typography>
-        </DialogTitle>
-        <DialogContent>
-          <Settings onUpdate={updateMCPClientStates} mcpClientStates={mcpClientStates} settings={settings} setSettings={setSettings} />
-        </DialogContent>
-      </Dialog>
+      {settings.showModal && (
+        <Dialog open={settings.showModal} fullWidth maxWidth="xl">
+          <DialogTitle>
+            Settings
+            <IconButton
+              aria-label="close"
+              onClick={() => setSettings({ ...settings, showModal: false })}
+              sx={{ position: 'absolute', right: 8, top: 8 }}
+            >
+              <Close />
+            </IconButton>
+          </DialogTitle>
+          <DialogContent>
+            <Suspense fallback={<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>}>
+              <Settings
+                settings={settings}
+                setSettings={setSettings}
+                mcpClientStates={mcpClientStates}
+                onUpdate={updateMCPClientStates}
+              />
+            </Suspense>
+          </DialogContent>
+        </Dialog>
+      )}
+
+      {/* Replace the old PromptConfig dialog with our new ConfigurationModal */}
+      {configuringItem && (
+        <ConfigurationModal
+          open={configuringItem !== null}
+          onClose={() => setConfiguringItem(null)}
+          catalogItem={configuringItem}
+          client={client}
+        />
+      )}
+
       <Stack direction="column" spacing={1} justifyContent='center' alignItems='center'>
         <img src={MCPCatalogLogo} alt="MCP Catalog" height={100} />
         {hasMCPConfigured ? <></> : <Alert action={<Button variant='outlined' color='secondary' onClick={() => setSettings({ ...settings, showModal: true })}>Configure</Button>} severity="error" sx={{ fontWeight: 'bold' }}>MCP Clients are not configured.  Please configure MCP Clients to use the MCP Catalog.</Alert>}
-        <CatalogGrid settingsBadgeProps={hasMCPConfigured ? {} : {
-          color: hasMCPConfigured ? 'default' : 'error',
-          badgeContent: '0 MCP Clients',
-          sx: {
-            width: 80,
-            height: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          },
-        }} showSettings={() => setSettings({ ...settings, showModal: true })} registryItems={registryItems} canRegister={canRegister} client={client} onRegistryChange={loadRegistry} />
+        <CatalogGrid
+          settingsBadgeProps={hasMCPConfigured ? {} : {
+            color: hasMCPConfigured ? 'default' : 'error',
+            badgeContent: '0 MCP Clients',
+            sx: {
+              width: 80,
+              height: '100%',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            },
+          }}
+          setConfiguringItem={setConfiguringItem}
+          showSettings={() => setSettings({ ...settings, showModal: true })}
+        />
       </Stack>
     </>
-  )
-
+  );
 }

src/extension/ui/src/App.tsx

@@ -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) => {

src/extension/ui/src/FileWatcher.ts

@@ -0,0 +1,37 @@
+/**
+ * Type for any object with string keys
+ */
+export type DeepObject = { [key: string]: any };
+
+/**
+ * Simple object check.
+ * @param item
+ * @returns {boolean}
+ */
+export function isObject(item: unknown): item is DeepObject {
+    return Boolean(item && typeof item === 'object' && !Array.isArray(item));
+}
+
+/**
+ * Deep merge two objects.
+ * @param target The target object to merge into
+ * @param sources The source objects to merge from
+ * @returns The merged object
+ */
+export function mergeDeep<T extends DeepObject>(target: T, ...sources: DeepObject[]): T {
+    if (!sources.length) return target;
+    const source = sources.shift();
+
+    if (isObject(target) && isObject(source)) {
+        for (const key in source) {
+            if (isObject(source[key])) {
+                if (!target[key]) Object.assign(target, { [key]: {} });
+                mergeDeep(target[key], source[key]);
+            } else {
+                Object.assign(target, { [key]: source[key] });
+            }
+        }
+    }
+
+    return mergeDeep(target, ...sources);
+}