Merge pull request #218 from docker/cm/make-offline-queries-offline

Make offline queries work offline

Author: ColinMcNeil

src/extension/ui/src/components/tile/Modal.tsx

@@ -160,8 +160,8 @@ const ConfigurationModal = ({
             src={catalogItem.icon}
             alt={catalogItem.name}
             sx={{
-              width: 24,
-              height: 24,
+              width: 40,
+              height: 40,
               borderRadius: 1,
             }}
           />

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

@@ -2,17 +2,11 @@ import { v1 } from "@docker/extension-api-client-types";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { parse, stringify } from "yaml";
-import {
-  CATALOG_URL,
-  REGISTRY_YAML
-} from "../Constants";
+import { CATALOG_URL, REGISTRY_YAML } from "../Constants";
 import { writeToPromptsVolume } from "../FileUtils";
 import { getRegistry, syncRegistryWithConfig } from "../Registry";
 import Secrets from "../Secrets";
-import {
-  CatalogItemRichened,
-  CatalogItemWithName
-} from "../types/catalog";
+import { CatalogItemRichened, CatalogItemWithName } from "../types/catalog";
 import { getTemplateForItem, useConfig } from "./useConfig";
 import { useSecrets } from "./useSecrets";
 
@@ -43,7 +37,7 @@ function useCatalog(client: v1.DockerDesktopClient) {
         Boolean(item.config) &&
         (neverOnceConfigured ||
           JSON.stringify(itemConfigValue) ===
-          JSON.stringify(baseConfigTemplate));
+            JSON.stringify(baseConfigTemplate));
 
       const missingASecret = secretsWithAssignment.some(
         (secret) => !secret.assigned
@@ -152,6 +146,7 @@ function useRegistry(client: v1.DockerDesktopClient) {
     isLoading: registryLoading,
   } = useQuery({
     queryKey: ["registry"],
+    networkMode: "always",
     queryFn: async () => {
       setCanRegister(false);
       try {
@@ -171,7 +166,7 @@ function useRegistry(client: v1.DockerDesktopClient) {
         setCanRegister(true);
         throw error;
       }
-    }
+    },
   });
 
   useQuery({
@@ -214,7 +209,11 @@ function useRegistry(client: v1.DockerDesktopClient) {
     mutationFn: async (newRegistry: {
       [key: string]: { ref: string; config?: any };
     }) => {
-      await writeToPromptsVolume(client, REGISTRY_YAML, stringify({ registry: newRegistry }));
+      await writeToPromptsVolume(
+        client,
+        REGISTRY_YAML,
+        stringify({ registry: newRegistry })
+      );
 
       return newRegistry;
     },
@@ -252,7 +251,11 @@ export function useCatalogOperations(client: v1.DockerDesktopClient) {
           [item.name]: { ref: item.ref },
         };
 
-        await writeToPromptsVolume(client, REGISTRY_YAML, stringify({ registry: newRegistry }));
+        await writeToPromptsVolume(
+          client,
+          REGISTRY_YAML,
+          stringify({ registry: newRegistry })
+        );
         return { success: true, newRegistry };
       } catch (error) {
         client.desktopUI.toast.error(
@@ -281,7 +284,11 @@ export function useCatalogOperations(client: v1.DockerDesktopClient) {
           delete currentRegistry[item.name];
         }
 
-        await writeToPromptsVolume(client, REGISTRY_YAML, stringify({ registry: currentRegistry }));
+        await writeToPromptsVolume(
+          client,
+          REGISTRY_YAML,
+          stringify({ registry: currentRegistry })
+        );
 
         return { success: true, newRegistry: currentRegistry };
       } catch (error) {

src/extension/ui/src/queries/useConfig.ts

@@ -28,6 +28,7 @@ export function useConfig(client: v1.DockerDesktopClient) {
     isLoading: configLoading,
   } = useQuery({
     queryKey: ["config"],
+    networkMode: "always",
     queryFn: async () => {
       try {
         const response = await getStoredConfig(client);
@@ -37,7 +38,7 @@ export function useConfig(client: v1.DockerDesktopClient) {
         client.desktopUI.toast.error("Failed to get stored config: " + error);
         throw error;
       }
-    }
+    },
   });
 
   const saveConfigMutation = useMutation({
@@ -51,10 +52,15 @@ export function useConfig(client: v1.DockerDesktopClient) {
       try {
         const updatedConfig = {
           ...((queryClient.getQueryData(["config"]) as Record<string, any>) ||
-            {}), [itemName]: newConfig
+            {}),
+          [itemName]: newConfig,
         };
 
-        await writeToPromptsVolume(client, 'config.yaml', stringify(updatedConfig));
+        await writeToPromptsVolume(
+          client,
+          "config.yaml",
+          stringify(updatedConfig)
+        );
 
         const updatedConfigRef = JSON.parse(JSON.stringify(updatedConfig));
         return { itemName, updatedConfig: updatedConfigRef };

src/extension/ui/src/queries/useDDInfo.ts

@@ -16,6 +16,7 @@ const parseDDVersion = (ddVersion: string) => {
 const useDDInfo = (client: v1.DockerDesktopClient) => {
   const { data: ddInfo, isLoading: ddInfoLoading } = useQuery({
     queryKey: ["ddInfo"],
+    networkMode: "always",
     queryFn: async () => {
       const result = await client.docker.cli.exec("version", [
         "--format",

src/extension/ui/src/queries/useMCPClient.ts

@@ -20,6 +20,7 @@ export function useMCPClient(client: v1.DockerDesktopClient) {
     isFetching,
   } = useQuery({
     queryKey: ["mcpClientStates"],
+    networkMode: "always",
     queryFn: async () => {
       const states = await getMCPClientStates(client);
 

src/extension/ui/src/queries/useSecrets.ts

@@ -1,13 +1,14 @@
-import { v1 } from '@docker/extension-api-client-types';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import Secrets from '../Secrets';
-import { Secret } from '../types';
+import { v1 } from "@docker/extension-api-client-types";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import Secrets from "../Secrets";
+import { Secret } from "../types";
 
 export function useSecrets(client: v1.DockerDesktopClient) {
   const queryClient = useQueryClient();
 
   const { data, isLoading, error } = useQuery({
-    queryKey: ['secrets'],
+    queryKey: ["secrets"],
+    networkMode: "always",
     queryFn: async () => {
       const secrets = await Secrets.getSecrets(client);
       return secrets;
@@ -22,7 +23,7 @@ export function useSecrets(client: v1.DockerDesktopClient) {
     },
     onSuccess: () => {
       // Invalidate and refetch secrets after mutation
-      queryClient.invalidateQueries({ queryKey: ['secrets'] });
+      queryClient.invalidateQueries({ queryKey: ["secrets"] });
     },
   });
   return { data, isLoading, error, mutate };