Optimize config cache (#82)

* Bring contrast fix to `expectedConfig` field

* Move config to context provider and reat query

* Move client updates to query store

* Use new catalog state

* Remove placeholder types

Author: ColinMcNeil

src/extension/ui/src/App.tsx

@@ -6,6 +6,7 @@ import { Close } from '@mui/icons-material';
 import { CatalogGrid } from './components/CatalogGrid';
 import { POLL_INTERVAL } from './Constants';
 import { CatalogProvider, useCatalogContext } from './context/CatalogContext';
+import { ConfigProvider } from './context/ConfigContext';
 import { MCPClientProvider, useMCPClientContext } from './context/MCPClientContext';
 import ConfigurationModal from './components/ConfigurationModal';
 import { Settings as SettingsIcon } from '@mui/icons-material';
@@ -42,16 +43,18 @@ export function App() {
   const [configuringItem, setConfiguringItem] = useState<CatalogItemWithName | null>(null);
   // Wrap the entire application with our providers
   return (
-    <CatalogProvider client={client}>
-      <MCPClientProvider client={client}>
-        <AppContent
-          settings={settings}
-          setSettings={setSettings}
-          configuringItem={configuringItem}
-          setConfiguringItem={setConfiguringItem}
-        />
-      </MCPClientProvider>
-    </CatalogProvider>
+    <ConfigProvider client={client}>
+      <CatalogProvider client={client}>
+        <MCPClientProvider client={client}>
+          <AppContent
+            settings={settings}
+            setSettings={setSettings}
+            configuringItem={configuringItem}
+            setConfiguringItem={setConfiguringItem}
+          />
+        </MCPClientProvider>
+      </CatalogProvider>
+    </ConfigProvider>
   );
 }
 

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

@@ -4,6 +4,7 @@ import { CatalogItemWithName } from './tile/Tile';
 import { Archive, ArrowDropDown, Edit, FileCopy, FolderOpenRounded, MoreHoriz, Search, Settings, Sort, SortByAlpha, SwapVert } from '@mui/icons-material';
 import { useCatalogContext } from '../context/CatalogContext';
 import { useMCPClientContext } from '../context/MCPClientContext';
+import { useConfigContext } from '../context/ConfigContext';
 import { createDockerDesktopClient } from '@docker/extension-api-client';
 import { ExecResult } from '@docker/extension-api-client-types/dist/v0';
 import YourClients from './tabs/YourClients';
@@ -38,7 +39,6 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
         catalogItems,
         registryItems,
         canRegister,
-        config,
         registerCatalogItem,
         unregisterCatalogItem,
         tryLoadSecrets,
@@ -53,6 +53,9 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
         isLoading: mcpLoading
     } = useMCPClientContext();
 
+    const {
+        config
+    } = useConfigContext();
 
     const [showReloadModal, setShowReloadModal] = useState<boolean>(false);
     const [search, setSearch] = useState<string>('');
@@ -104,11 +107,6 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
         return <CircularProgress />
     }
 
-
-    if (!config) {
-        return <CircularProgress />
-    }
-
     const noConfiguredClients = !mcpLoading && !Object.values(mcpClientStates || {}).some(state => state.exists && state.configured);
 
     return (
@@ -215,7 +213,6 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                 {tab === 0 && (
                     <ToolCatalog
                         registryItems={registryItems}
-                        config={config}
                         search={search}
                         catalogItems={sortedCatalogItems}
                         client={client}
@@ -226,12 +223,12 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                         onSecretChange={tryLoadSecrets}
                         secrets={secrets}
                         setConfiguringItem={setConfiguringItem}
+                        config={config || {}}
                     />
                 )}
                 {tab === 1 && (
                     <YourTools
                         registryItems={registryItems}
-                        config={config}
                         search={search}
                         catalogItems={sortedCatalogItems}
                         unregister={unregisterCatalogItem}
@@ -240,21 +237,18 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                         setConfiguringItem={setConfiguringItem}
                         canRegister={canRegister}
                         ddVersion={ddVersion}
+                        config={config || {}}
                     />
                 )}
                 {tab === 2 && ddVersion && (
                     <YourEnvironment
                         secrets={secrets}
                         ddVersion={ddVersion}
-                        config={config}
+                        config={config || {}}
                     />
                 )}
                 {tab === 3 && (
                     <YourClients
-                        mcpClientStates={mcpClientStates || {}}
-                        onUpdate={updateMCPClientStates}
-                        setButtonsLoading={setButtonsLoading}
-                        buttonsLoading={buttonsLoading}
                         client={client}
                     />
                 )}

src/extension/ui/src/components/ConfigurationModal.tsx

@@ -4,12 +4,10 @@ import { useEffect, useState } from "react";
 import { CatalogItemWithName } from "./tile/Tile";
 import Secrets from "../Secrets";
 import { v1 } from "@docker/extension-api-client-types";
-import { getStoredConfig, syncRegistryWithConfig } from "../Registry";
-import { stringify } from "yaml";
-import { escapeJSONForPlatformShell, tryRunImageSync } from "../FileWatcher";
+import { githubLightTheme, NodeData, githubDarkTheme, JsonEditor } from "json-edit-react";
 import { useCatalogContext } from "../context/CatalogContext";
+import { useConfigContext } from "../context/ConfigContext";
 import { DeepObject, mergeDeep } from "../MergeDeep";
-import { githubLightTheme, NodeData, githubDarkTheme, JsonEditor } from "json-edit-react";
 
 // Styles for the tab panel
 interface TabPanelProps {
@@ -142,7 +140,8 @@ const ConfigurationModal = ({
     catalogItem,
     client,
 }: ConfigurationModalProps) => {
-    const { config, startPull, registryItems, tryUpdateSecrets, secrets } = useCatalogContext();
+    const { startPull, registryItems, tryUpdateSecrets, secrets } = useCatalogContext();
+    const { config, configLoading, saveConfig } = useConfigContext();
     const theme = useTheme();
 
     // State for tabs
@@ -154,7 +153,6 @@ const ConfigurationModal = ({
     const [secretLoading, setSecretLoading] = useState(false);
 
     // State for config
-    const [configLoading, setConfigLoading] = useState(true);
     const [loadedConfig, setLoadedConfig] = useState<{ [key: string]: any }>({});
 
     // Load assigned secrets
@@ -171,7 +169,6 @@ const ConfigurationModal = ({
         } catch (error) {
             console.error(error);
         }
-        setConfigLoading(false);
     }, [catalogItem, config]);
 
     // Handle tab change
@@ -181,33 +178,14 @@ const ConfigurationModal = ({
 
     // Save config to YAML
     const saveConfigToYaml = async (newConfig: { [key: string]: any }) => {
-        if (!registryItems || !config) {
+        if (!registryItems) {
             return;
         }
         try {
-            setConfigLoading(true);
-            const currentStoredConfig = config;
-            console.log('currentStoredConfig', currentStoredConfig);
-            currentStoredConfig[catalogItem.name] = newConfig;
-            console.log('newConfig', newConfig);
-            const payload = escapeJSONForPlatformShell({
-                files: [{
-                    path: 'config.yaml',
-                    content: stringify(currentStoredConfig)
-                }]
-            }, client.host.platform);
-            await tryRunImageSync(client, ['--rm', '-v', 'docker-prompts:/docker-prompts', '--workdir', '/docker-prompts', 'vonwig/function_write_files:latest', payload]);
-            console.log('Config saved successfully, syncing');
-            await syncRegistryWithConfig(client, registryItems, currentStoredConfig);
+            await saveConfig(catalogItem.name, newConfig);
             await startPull();
-            console.log('Syncing complete');
-            client.desktopUI.toast.success('Config saved successfully.');
-            setTimeout(() => {
-                setConfigLoading(false);
-            }, 500);
         } catch (error) {
             client.desktopUI.toast.error('Failed to update config: ' + error);
-            setConfigLoading(false);
         }
     };