Decouple improve optimistic mutates

Author: colinmcneil

src/extension/ui/src/queries/useCatalog.ts

@@ -253,9 +253,28 @@ export function useCatalogOperations(client: v1.DockerDesktopClient) {
                 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);
@@ -285,9 +304,21 @@ export function useCatalogOperations(client: v1.DockerDesktopClient) {
                 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);

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.');