Merge pull request #145 from docker/cm/0.2.43

ColinMcNeil · web-flow · commit 4ecd688ce430 · 2025-04-22T20:34:20.000-04:00
Optimize queries and mutations
diff --git a/src/extension/ui/src/App.tsx b/src/extension/ui/src/App.tsx
@@ -7,11 +7,11 @@ import { CatalogGrid } from './components/CatalogGrid';
 import { POLL_INTERVAL } from './Constants';
 import ConfigurationModal from './components/tile/Modal';
 import LoadingState from './components/LoadingState';
-import { useCatalogAll } from './hooks/useCatalog';
-import { useRequiredImages } from './hooks/useRequiredImages';
-import { useMCPClient } from './hooks/useMCPClient';
-import { useConfig } from './hooks/useConfig';
-import { useSecrets } from './hooks/useSecrets';
+import { useCatalogAll } from './queries/useCatalog';
+import { useRequiredImages } from './queries/useRequiredImages';
+import { useMCPClient } from './queries/useMCPClient';
+import { useConfig } from './queries/useConfig';
+import { useSecrets } from './queries/useSecrets';
 
 export const client = createDockerDesktopClient();
 
diff --git a/src/extension/ui/src/components/tabs/ToolCatalog.tsx b/src/extension/ui/src/components/tabs/ToolCatalog.tsx
@@ -3,7 +3,7 @@ import { Grid2 } from '@mui/material';
 import Tile from '../tile/Index';
 import { v1 } from "@docker/extension-api-client-types";
 import { CATALOG_LAYOUT_SX } from '../../Constants';
-import { useCatalog } from '../../hooks/useCatalog';
+import { useCatalogAll } from '../../queries/useCatalog';
 
 interface ToolCatalogProps {
     search: string;
@@ -12,7 +12,7 @@ interface ToolCatalogProps {
 }
 
 const ToolCatalog: React.FC<ToolCatalogProps> = ({ search, client, showMine }) => {
-    const { catalogItems } = useCatalog(client)
+    const { catalogItems } = useCatalogAll(client)
     const filteredCatalogItems = catalogItems.filter(item => {
         const matchesSearch = item.name.toLowerCase().includes(search.toLowerCase());
         const hideBecauseItsNotMine = showMine && !item.registered;
diff --git a/src/extension/ui/src/components/tabs/YourTools.tsx b/src/extension/ui/src/components/tabs/YourTools.tsx
@@ -7,7 +7,7 @@ import { v1 } from '@docker/extension-api-client-types';
 import { createDockerDesktopClient } from '@docker/extension-api-client';
 import { CatalogItemRichened } from '../../types/catalog';
 import { Secret } from '../../types/secrets';
-import { useCatalog } from '../../hooks/useCatalog';
+import { useCatalogAll } from '../../queries/useCatalog';
 // Initialize the Docker Desktop client
 const client = createDockerDesktopClient();
 
@@ -18,7 +18,7 @@ interface YourToolsProps {
 const YourTools: React.FC<YourToolsProps> = ({
     search,
 }) => {
-    const { catalogItems } = useCatalog(client)
+    const { catalogItems } = useCatalogAll(client)
     return (
         <Grid2 container spacing={1} sx={CATALOG_LAYOUT_SX}>
             {catalogItems.map((catalogItem) => {
diff --git a/src/extension/ui/src/components/tile/ConfigEditor.tsx b/src/extension/ui/src/components/tile/ConfigEditor.tsx
@@ -3,7 +3,7 @@ import { Alert, Stack } from "@mui/material";
 import { CatalogItemRichened } from "../../types/catalog";
 import { useEffect, useState, useCallback, useMemo } from "react";
 import * as JsonSchema from "json-schema-library";
-import { getTemplateForItem, useConfig } from "../../hooks/useConfig";
+import { getTemplateForItem, useConfig } from "../../queries/useConfig";
 import { buildObjectFromFlattenedObject, deepFlattenObject, deepSet } from "../../MergeDeep";
 import { CheckOutlined, CloseOutlined } from "@mui/icons-material";
 import { v1 } from "@docker/extension-api-client-types";
diff --git a/src/extension/ui/src/components/tile/Index.tsx b/src/extension/ui/src/components/tile/Index.tsx
@@ -8,8 +8,8 @@ import Top from "./Top";
 import Center from "./Center";
 import Bottom from "./Bottom";
 import { v1 } from "@docker/extension-api-client-types";
-import { useSecrets } from "../../hooks/useSecrets";
-import { useCatalogOperations, useRegistry } from "../../hooks/useCatalog";
+import { useSecrets } from "../../queries/useSecrets";
+import { useCatalogAll, useCatalogOperations } from "../../queries/useCatalog";
 import { MCP_POLICY_NAME } from "../../Constants";
 
 type TileProps = {
@@ -25,8 +25,8 @@ const Tile = ({ item, client }: TileProps) => {
     const [secretLoading, setSecretLoading] = useState(false)
     const [showConfigModal, setShowConfigModal] = useState(false)
     const { isLoading: secretsLoading, mutate: mutateSecret } = useSecrets(client)
-    const { registryLoading } = useRegistry(client)
     const { registerCatalogItem, unregisterCatalogItem } = useCatalogOperations(client)
+    const { registryLoading } = useCatalogAll(client)
 
     if (registryLoading || secretsLoading) {
         return <>
diff --git a/src/extension/ui/src/components/tile/Modal.tsx b/src/extension/ui/src/components/tile/Modal.tsx
@@ -5,9 +5,9 @@ import { CatalogItemRichened } from "../../types/catalog";
 import { v1 } from "@docker/extension-api-client-types";
 import { ASSIGNED_SECRET_PLACEHOLDER, CATALOG_LAYOUT_SX, MCP_POLICY_NAME, UNASSIGNED_SECRET_PLACEHOLDER } from "../../Constants";
 import ConfigEditor from "./ConfigEditor";
-import { useSecrets } from "../../hooks/useSecrets";
-import { useCatalogOperations, useRegistry } from "../../hooks/useCatalog";
-import { useConfig } from "../../hooks/useConfig";
+import { useSecrets } from "../../queries/useSecrets";
+import { useCatalogAll, useCatalogOperations } from "../../queries/useCatalog";
+import { useConfig } from "../../queries/useConfig";
 
 interface TabPanelProps {
     children?: React.ReactNode;
@@ -54,7 +54,7 @@ const ConfigurationModal = ({
     const theme = useTheme();
 
     const { isLoading: secretsLoading, mutate: mutateSecret } = useSecrets(client)
-    const { registryLoading } = useRegistry(client)
+    const { registryLoading } = useCatalogAll(client)
     const { registerCatalogItem, unregisterCatalogItem } = useCatalogOperations(client)
     const { configLoading } = useConfig(client)
 
diff --git a/src/extension/ui/src/queries/useCatalog.ts b/src/extension/ui/src/queries/useCatalog.ts
@@ -9,7 +9,6 @@ import { getTemplateForItem } from './useConfig';
 import { useState, useEffect } from 'react';
 import { escapeJSONForPlatformShell, tryRunImageSync } from '../FileUtils';
 import { useConfig } from './useConfig';
-import { useRequiredImages } from './useRequiredImages';
 import { useSecrets } from "./useSecrets";
 
 // Storage keys for each query type
@@ -25,7 +24,7 @@ interface QueryContextWithMeta {
     };
 }
 
-export function useCatalog(client: v1.DockerDesktopClient) {
+function useCatalog(client: v1.DockerDesktopClient) {
     const queryClient = useQueryClient();
     const { data: secrets, isLoading: secretsLoading } = useSecrets(client);
     const { registryItems, registryLoading } = useRegistry(client);
@@ -38,9 +37,7 @@ export function useCatalog(client: v1.DockerDesktopClient) {
         const configTemplate = getTemplateForItem(item, itemConfigValue);
         const baseConfigTemplate = getTemplateForItem(item, {});
         const unConfigured = Boolean(item.config) && (neverOnceConfigured || JSON.stringify(itemConfigValue) === JSON.stringify(baseConfigTemplate));
-        if (item.name === 'elevenlabs') {
-            console.log('elevenlabs', itemConfigValue, configTemplate, unConfigured)
-        }
+
         const missingASecret = secretsWithAssignment.some((secret) => !secret.assigned);
         const enrichedItem: CatalogItemRichened = {
             ...item,
@@ -80,10 +77,7 @@ export function useCatalog(client: v1.DockerDesktopClient) {
     // without causing a full catalog reload
     useEffect(() => {
         if (catalogItems.length > 0 && !secretsLoading && !configLoading && !registryLoading) {
-            const enrichedItems = catalogItems.map(item => ({
-                ...item,
-                ...enrichCatalogItem(item)
-            }));
+            const enrichedItems = catalogItems.map(enrichCatalogItem);
 
             // Use the same reference if nothing changed to prevent unnecessary re-renders
             const hasChanges = JSON.stringify(enrichedItems) !== JSON.stringify(catalogItems);
@@ -123,7 +117,7 @@ export function useCatalog(client: v1.DockerDesktopClient) {
     };
 }
 
-export function useRegistry(client: v1.DockerDesktopClient) {
+function useRegistry(client: v1.DockerDesktopClient) {
     const queryClient = useQueryClient();
     const [canRegister, setCanRegister] = useState<boolean>(false);
 
@@ -210,9 +204,8 @@ export function useRegistry(client: v1.DockerDesktopClient) {
 
 export function useCatalogOperations(client: v1.DockerDesktopClient) {
     const queryClient = useQueryClient();
-    const { registryItems, canRegister } = useRegistry(client);
-    const { config, syncConfigWithRegistry } = useConfig(client);
-    const { loadAllImages } = useRequiredImages(client);
+    const { registryItems } = useRegistry(client);
+    const { config } = useConfig(client);
 
     // Register catalog item mutation
     const registerItemMutation = useMutation({
@@ -231,32 +224,6 @@ export function useCatalogOperations(client: v1.DockerDesktopClient) {
 
                     // If there's a JSON schema configuration, validate and generate default values
                     if (Array.isArray(item.config) && item.config.length > 0) {
-                        const configSchema = item.config[0];
-
-                        // Check if we have required fields from anyOf conditions
-                        if (configSchema.anyOf) {
-                            configSchema.anyOf.forEach((condition: any) => {
-                                if (condition.required) {
-                                    condition.required.forEach((field: string) => {
-                                        if (!(field in itemConfig)) {
-                                            // Generate a default value if possible
-                                            itemConfig[field] = "";
-                                        }
-                                    });
-                                }
-                            });
-                        }
-
-                        // Handle normal required fields
-                        if (configSchema.required) {
-                            configSchema.required.forEach((field: string) => {
-                                if (!(field in itemConfig)) {
-                                    // Generate a default value if possible
-                                    itemConfig[field] = "";
-                                }
-                            });
-                        }
-
                         // Use JSON schema template for any remaining defaults
                         const template = getTemplateForItem(item, itemConfig);
                         itemConfig = { ...template, ...itemConfig };
@@ -273,18 +240,34 @@ export function useCatalogOperations(client: v1.DockerDesktopClient) {
 
                 await tryRunImageSync(client, ['--rm', '-v', 'docker-prompts:/docker-prompts', '--workdir', '/docker-prompts', 'vonwig/function_write_files:latest', 'registry.yaml', payload]);
 
-                await syncConfigWithRegistry(newRegistry);
-                await loadAllImages();
-
                 if (showNotification) {
                     client.desktopUI.toast.success(`${item.name} registered successfully.`);
                 }
                 return { success: true, newRegistry };
             } catch (error) {
                 client.desktopUI.toast.error('Failed to register catalog item: ' + error);
+                // Treat YAML file write failures as fatal, no rollback
                 throw error;
             }
         },
+        onMutate: async ({ item }) => {
+            // Optimistically update the registry data
+            const currentRegistry = queryClient.getQueryData(['registry']) as { [key: string]: { ref: string; config?: any } } || {};
+            const newRegistry: { [key: string]: { ref: string; config?: any } } = {
+                ...currentRegistry,
+                [item.name]: { ref: item.ref }
+            };
+
+            // If there's config, add it
+            if (item.config && config && config[item.name]) {
+                newRegistry[item.name] = {
+                    ...newRegistry[item.name],
+                    config: config[item.name]
+                };
+            }
+
+            queryClient.setQueryData(['registry'], newRegistry);
+        },
         onSuccess: async (data) => {
             // Update the registry data after successful registration
             queryClient.setQueryData(['registry'], data.newRegistry);
@@ -310,15 +293,25 @@ export function useCatalogOperations(client: v1.DockerDesktopClient) {
 
                 await tryRunImageSync(client, ['--rm', '-v', 'docker-prompts:/docker-prompts', '--workdir', '/docker-prompts', 'vonwig/function_write_files:latest', 'registry.yaml', payload]);
 
-                // Explicitly sync the registry with config
-                await syncConfigWithRegistry(currentRegistry);
                 client.desktopUI.toast.success(`${item.name} unregistered successfully.`);
                 return { success: true, newRegistry: currentRegistry };
             } catch (error) {
                 client.desktopUI.toast.error('Failed to unregister catalog item: ' + error);
+                // Treat YAML file write failures as fatal, no rollback
                 throw error;
             }
         },
+        onMutate: async (item) => {
+            // Optimistically update the registry data
+            const currentRegistry = { ...(queryClient.getQueryData(['registry']) as { [key: string]: { ref: string; config?: any } } || {}) };
+
+            // Remove the item
+            if (currentRegistry[item.name]) {
+                delete currentRegistry[item.name];
+            }
+
+            queryClient.setQueryData(['registry'], currentRegistry);
+        },
         onSuccess: async (data) => {
             // Update the registry data after successful unregistration
             queryClient.setQueryData(['registry'], data.newRegistry);
diff --git a/src/extension/ui/src/queries/useConfig.ts b/src/extension/ui/src/queries/useConfig.ts
@@ -67,31 +67,21 @@ export function useConfig(client: v1.DockerDesktopClient) {
                 return { itemName, updatedConfig: updatedConfigRef };
             } catch (error) {
                 client.desktopUI.toast.error('Failed to update config: ' + error);
+                // Treat YAML file write failures as fatal, no rollback
                 throw error;
             }
         },
         onMutate: async ({ itemName, newConfig }) => {
             // Cancel any outgoing refetches
             await queryClient.cancelQueries({ queryKey: ['config'] });
 
-            // Snapshot the previous value
-            const previousConfig = queryClient.getQueryData(['config']);
-
             // Optimistically update to the new value
             const updatedConfig = {
-                ...(previousConfig as Record<string, any> || {}),
+                ...(queryClient.getQueryData(['config']) as Record<string, any> || {}),
                 [itemName]: newConfig
             };
 
             queryClient.setQueryData(['config'], updatedConfig);
-
-            return { previousConfig };
-        },
-        onError: (err, variables, context) => {
-            // If the mutation fails, use the context to roll back
-            if (context?.previousConfig) {
-                queryClient.setQueryData(['config'], context.previousConfig);
-            }
         },
         onSuccess: (data) => {
             client.desktopUI.toast.success('Config saved successfully.');
diff --git a/src/extension/ui/src/queries/useMCPClient.ts b/src/extension/ui/src/queries/useMCPClient.ts
diff --git a/src/extension/ui/src/queries/useRequiredImages.ts b/src/extension/ui/src/queries/useRequiredImages.ts
diff --git a/src/extension/ui/src/queries/useSecrets.ts b/src/extension/ui/src/queries/useSecrets.ts
