Start on query migration

Author: colinmcneil

src/extension/ui/src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useState, Suspense } from 'react';
 import { createDockerDesktopClient } from '@docker/extension-api-client';
 import { Typography, Button, IconButton, Alert, DialogTitle, Dialog, DialogContent, CircularProgress, Paper, Box, SvgIcon, useTheme } from '@mui/material';
-import { CatalogItemWithName } from './types/catalog';
+import { CatalogItemRichened } from './types/catalog';
 import { Close } from '@mui/icons-material';
 import { CatalogGrid } from './components/CatalogGrid';
 import { POLL_INTERVAL } from './Constants';
@@ -11,6 +11,7 @@ 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';
 
 export const client = createDockerDesktopClient();
 
@@ -21,13 +22,14 @@ const DEFAULT_SETTINGS = {
 
 export function App() {
   const [settings, setSettings] = useState<{ showModal: boolean, pollIntervalSeconds: number }>(localStorage.getItem('settings') ? JSON.parse(localStorage.getItem('settings') || '{}') : DEFAULT_SETTINGS);
-  const [configuringItem, setConfiguringItem] = useState<CatalogItemWithName | null>(null);
+  const [configuringItem, setConfiguringItem] = useState<CatalogItemRichened | null>(null);
 
   // Use hooks directly in the component
   const catalogAll = useCatalogAll(client);
   const requiredImages = useRequiredImages(client);
   const mcpClient = useMCPClient(client);
   const config = useConfig(client);
+  const secrets = useSecrets(client);
 
   // Create a context-like combined props object to pass to children
   const appProps = {
@@ -44,10 +46,10 @@ export function App() {
     ...config
   };
 
-  const isLoading = catalogAll.secretsLoading ||
-    catalogAll.catalogLoading ||
+  const isLoading = catalogAll.catalogLoading ||
     catalogAll.registryLoading ||
-    requiredImages.isLoading;
+    requiredImages.isLoading ||
+    secrets.isLoading;
 
   return (
     <>

src/extension/ui/src/FileWatcher.ts renamed to src/extension/ui/src/FileUtils.ts

@@ -1,6 +1,6 @@
 import { v1 } from "@docker/extension-api-client-types";
 import { parse, stringify } from "yaml";
-import { readFileInPromptsVolume, writeFileToPromptsVolume } from "./FileWatcher";
+import { readFileInPromptsVolume, writeFileToPromptsVolume } from "./FileUtils";
 import { mergeDeep } from "./MergeDeep";
 import { ParsedParameters } from "./types/config";
 

src/extension/ui/src/Registry.ts

@@ -1,7 +1,7 @@
 // From secrets.yaml
 
 import { v1 } from "@docker/extension-api-client-types";
-import { CatalogItemWithName } from "./types/catalog";
+import { CatalogItemRichened } from "./types/catalog";
 import { Secret, StoredSecret, Policy } from "./types/secrets";
 
 namespace Secrets {
@@ -55,12 +55,12 @@ namespace Secrets {
     }
 
     // Get all relevant secrets for a given set of catalog items
-    export function getAllSecretNames(catalogItems: CatalogItemWithName[]): string[] {
+    export function getAllSecretNames(catalogItems: CatalogItemRichened[]): string[] {
         return catalogItems.map((item) => item.secrets || []).flat().map((secret) => secret.name);
     }
 
     // Whether or not each secret has been assigned for a given catalog item
-    export function getSecretsWithAssignment(catalogItem: CatalogItemWithName, secrets: Secret[]): { name: string, assigned: boolean }[] {
+    export function getSecretsWithAssignment(catalogItem: CatalogItemRichened, secrets: Secret[]): { name: string, assigned: boolean }[] {
         return catalogItem.secrets?.map((secret) => ({ name: secret.name, assigned: secrets.some((s) => s.name === secret.name) })) || [];
     }
 }

src/extension/ui/src/Secrets.ts

@@ -4,7 +4,7 @@ import { SwapVert, FolderOpenRounded } from '@mui/icons-material';
 import { createDockerDesktopClient } from '@docker/extension-api-client';
 import { ExecResult } from '@docker/extension-api-client-types/dist/v0';
 import YourClients from './tabs/YourClients';
-import { CatalogItemWithName } from '../types/catalog';
+import { CatalogItemRichened } from '../types/catalog';
 import { CATALOG_LAYOUT_SX } from '../Constants';
 import { MCPClientState } from '../MCPClients';
 
@@ -17,7 +17,7 @@ const client = createDockerDesktopClient();
 interface CatalogGridProps {
     appProps: any; // We'll use this to pass all our hook data
     showSettings: () => void;
-    setConfiguringItem: (item: CatalogItemWithName) => void;
+    setConfiguringItem: (item: CatalogItemRichened) => void;
 }
 
 const parseDDVersion = (ddVersion: string) => {
@@ -86,7 +86,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
     }
 
     const hasOutOfCatalog = catalogItems.length > 0 && Object.keys(registryItems).length > 0 && !Object.keys(registryItems).every((i) =>
-        catalogItems.some((c: CatalogItemWithName) => c.name === i)
+        catalogItems.some((c: CatalogItemRichened) => c.name === i)
     )
 
     const sortedCatalogItems = sort !== 'date-desc' ? [...catalogItems].sort((a, b) => {

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

@@ -3,34 +3,31 @@ import { Card, CardContent, Grid2, IconButton } from '@mui/material';
 import Tile from '../tile/Index';
 import AddIcon from '@mui/icons-material/Add';
 import { v1 } from "@docker/extension-api-client-types";
-import { CatalogItemWithName } from '../../types/catalog';
+import { CatalogItemRichened } from '../../types/catalog';
 import { Secret } from '../../types/secrets';
 import { CATALOG_LAYOUT_SX } from '../../Constants';
 
 interface ToolCatalogProps {
     search: string;
-    catalogItems: CatalogItemWithName[];
+    catalogItems: CatalogItemRichened[];
     client: v1.DockerDesktopClient;
     ddVersion: { version: string, build: number };
     canRegister: boolean;
-    register: (item: CatalogItemWithName) => Promise<void>;
-    unregister: (item: CatalogItemWithName) => Promise<void>;
+    register: (item: CatalogItemRichened) => Promise<void>;
+    unregister: (item: CatalogItemRichened) => Promise<void>;
     onSecretChange: (secret: { name: string, value: string }) => Promise<void>;
     secrets: Secret[];
     registryItems: { [key: string]: { ref: string, config: any } };
-    setConfiguringItem: (item: CatalogItemWithName) => void;
+    setConfiguringItem: (item: CatalogItemRichened) => void;
     config: { [key: string]: { [key: string]: any } };
     showMine: boolean;
 }
 
-const ToolCatalog: React.FC<ToolCatalogProps> = ({ config, search, catalogItems, client, onSecretChange, secrets, registryItems, showMine }) => {
-
-    const tileIsRegistered = (item: CatalogItemWithName) => registryItems[item.name]?.ref !== undefined;
+const ToolCatalog: React.FC<ToolCatalogProps> = ({ config, search, catalogItems, client, registryItems, showMine }) => {
 
     const filteredCatalogItems = catalogItems.filter(item => {
-        const isRegistered = tileIsRegistered(item);
         const matchesSearch = item.name.toLowerCase().includes(search.toLowerCase());
-        const hideBecauseItsNotMine = showMine && !isRegistered;
+        const hideBecauseItsNotMine = showMine && !item.registered;
         return matchesSearch && !hideBecauseItsNotMine;
     });
 
@@ -43,9 +40,6 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({ config, search, catalogItems,
                     <Grid2 size={{ xs: 12, sm: 6, md: 4 }} key={catalogItem.name}>
                         <Tile
                             item={catalogItem}
-                            registered={tileIsRegistered(catalogItem)}
-                            onSecretChange={onSecretChange}
-                            secrets={secrets}
                             unAssignedConfig={unAssignedConfig}
                             client={client}
                         />

src/extension/ui/src/components/tabs/ToolCatalog.tsx

@@ -5,7 +5,7 @@ import { CATALOG_LAYOUT_SX, MCP_POLICY_NAME } from '../../Constants';
 import TileActions from '../tile/Bottom';
 import { v1 } from '@docker/extension-api-client-types';
 import { createDockerDesktopClient } from '@docker/extension-api-client';
-import { CatalogItemWithName } from '../../types/catalog';
+import { CatalogItemRichened } from '../../types/catalog';
 import { Secret } from '../../types/secrets';
 // Initialize the Docker Desktop client
 const client = createDockerDesktopClient();
@@ -15,10 +15,10 @@ interface YourToolsProps {
     registryItems: { [key: string]: { ref: string, config: any } };
     config: { [key: string]: { [key: string]: any } };
     canRegister: boolean;
-    unregister: (item: CatalogItemWithName) => Promise<void>;
-    setConfiguringItem: (item: CatalogItemWithName) => void;
+    unregister: (item: CatalogItemRichened) => Promise<void>;
+    setConfiguringItem: (item: CatalogItemRichened) => void;
     secrets: Secret[];
-    catalogItems: CatalogItemWithName[];
+    catalogItems: CatalogItemRichened[];
     onSecretChange: (secret: { name: string, value: string }) => Promise<void>;
     ddVersion: { version: string, build: number };
 }
@@ -52,9 +52,6 @@ const YourTools: React.FC<YourToolsProps> = ({
                     <Grid2 size={{ xs: 12, sm: 6, md: 4 }} key={name}>
                         <Tile
                             item={catalogItem}
-                            registered={true}
-                            onSecretChange={onSecretChange}
-                            secrets={secrets}
                             client={client}
                             unAssignedConfig={unassignedConfig}
                         />

src/extension/ui/src/components/tabs/YourTools.tsx

@@ -1,9 +1,9 @@
 import { Tooltip, Typography } from "@mui/material";
-import { CatalogItemWithName } from "../../types"
+import { CatalogItemRichened } from "../../types"
 import { TILE_DESCRIPTION_MAX_LENGTH } from "../../Constants";
 
 type CenterProps = {
-    item: CatalogItemWithName;
+    item: CatalogItemRichened;
 }
 
 export default function Center({ item }: CenterProps) {

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

@@ -1,11 +1,12 @@
 import { Button, CircularProgress, IconButton, TextField, Typography } from "@mui/material";
 import { Alert, Stack } from "@mui/material";
-import { CatalogItemWithName } from "../../types/catalog";
+import { CatalogItemRichened } from "../../types/catalog";
 import { useEffect, useState, useCallback, useMemo } from "react";
 import * as JsonSchema from "json-schema-library";
-import { getTemplateForItem, useConfigContext } from "../../context/ConfigContext";
+import { getTemplateForItem, useConfig } from "../../hooks/useConfig";
 import { deepFlattenObject, deepSet } from "../../MergeDeep";
 import { CheckOutlined, CloseOutlined } from "@mui/icons-material";
+import { v1 } from "@docker/extension-api-client-types";
 
 JsonSchema.settings.GET_TEMPLATE_RECURSION_LIMIT = 1000;
 JsonSchema.settings.templateDefaultOptions.addOptionalProps = true;
@@ -25,10 +26,10 @@ const LoadingState = () => {
     )
 }
 
-const ConfigEditor = ({ catalogItem }: { catalogItem: CatalogItemWithName }) => {
+const ConfigEditor = ({ catalogItem, client }: { catalogItem: CatalogItemRichened, client: v1.DockerDesktopClient }) => {
     const configSchema = catalogItem.config;
 
-    const { config: existingConfig, saveConfig: updateExistingConfig, configLoading, tryLoadConfig } = useConfigContext();
+    const { config: existingConfig, saveConfig: updateExistingConfig, configLoading, tryLoadConfig } = useConfig(client);
 
     const existingConfigForItem = existingConfig?.[catalogItem.name];
 

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

@@ -1,44 +1,36 @@
 import { CircularProgress, Dialog, DialogContent, DialogTitle, Divider, IconButton, Stack, TextField, Typography } from "@mui/material";
 import { Card, CardContent } from "@mui/material";
 import { useEffect, useState } from "react";
-import { CatalogItemWithName } from "../../types/catalog";
+import { CatalogItemRichened } from "../../types/catalog";
 import { Save, LockReset } from "@mui/icons-material";
 import Secrets from "../../Secrets";
 import ConfigurationModal from "./Modal";
 import Top from "./Top";
 import Center from "./Center";
 import Bottom from "./Bottom";
-import { Secret } from "../../types";
 import { v1 } from "@docker/extension-api-client-types";
+import { useSecrets } from "../../hooks/useSecrets";
+import { useCatalog, useCatalogOperations, useRegistry } from "../../hooks/useCatalog";
+import { MCP_POLICY_NAME } from "../../Constants";
 
 type TileProps = {
-    item: CatalogItemWithName;
-    registered: boolean;
-    onSecretChange: (secret: { name: string, value: string }) => Promise<void>;
-    secrets: Secret[];
+    item: CatalogItemRichened;
     client: v1.DockerDesktopClient;
     unAssignedConfig: { name: string; assigned: boolean }[];
 }
 
-const Tile = ({ item, registered, onSecretChange, secrets, client, unAssignedConfig }: TileProps) => {
-    const loadAssignedSecrets = () => {
-        const assignedSecrets = Secrets.getSecretsWithAssignment(item, secrets);
-        setAssignedSecrets(assignedSecrets)
-    }
+const Tile = ({ item, client, unAssignedConfig }: TileProps) => {
 
     const [showSecretDialog, setShowSecretDialog] = useState(false)
-    const [assignedSecrets, setAssignedSecrets] = useState<{ name: string, assigned: boolean }[]>([])
+    const [assignedSecrets] = useState<{ name: string, assigned: boolean }[]>([])
     const [changedSecrets, setChangedSecrets] = useState<{ [key: string]: string | undefined }>({})
     const [secretLoading, setSecretLoading] = useState(false)
-
-    const { registryLoading, registerCatalogItem, unregisterCatalogItem } = useCatalogContext()
     const [showConfigModal, setShowConfigModal] = useState(false)
+    const { isLoading: secretsLoading, mutate: mutateSecret } = useSecrets(client)
+    const { registryLoading } = useRegistry(client)
+    const { registerCatalogItem, unregisterCatalogItem } = useCatalogOperations(client)
 
-    useEffect(() => {
-        loadAssignedSecrets()
-    }, [secrets])
-
-    if (registryLoading) {
+    if (registryLoading || secretsLoading) {
         return <>
             <CircularProgress size={20} />
             <Typography>Loading registry...</Typography>
@@ -47,10 +39,6 @@ const Tile = ({ item, registered, onSecretChange, secrets, client, unAssignedCon
 
     const unAssignedSecrets = assignedSecrets.filter(s => !s.assigned)
 
-    useEffect(() => {
-        loadAssignedSecrets()
-    }, [secrets])
-
     return (
         <>
             <Dialog open={showSecretDialog} onClose={() => setShowSecretDialog(false)}>
@@ -72,7 +60,7 @@ const Tile = ({ item, registered, onSecretChange, secrets, client, unAssignedCon
                                     </IconButton>}
                                     {changedSecrets[secret.name] && <IconButton onClick={() => {
                                         setSecretLoading(true)
-                                        onSecretChange({ name: secret.name, value: changedSecrets[secret.name] || '' }).then(() => {
+                                        mutateSecret.mutateAsync({ name: secret.name, value: changedSecrets[secret.name] || '', policies: [MCP_POLICY_NAME] }).then(() => {
                                             setSecretLoading(false)
                                             const newChangedSecrets = { ...changedSecrets }
                                             delete newChangedSecrets[secret.name]
@@ -92,15 +80,6 @@ const Tile = ({ item, registered, onSecretChange, secrets, client, unAssignedCon
                 onClose={() => setShowConfigModal(false)}
                 catalogItem={item}
                 client={client}
-                registered={registered}
-                onToggleRegister={(checked) => {
-                    if (checked) {
-                        registerCatalogItem(item)
-                    } else {
-                        unregisterCatalogItem(item)
-                    }
-                }}
-                onSecretChange={onSecretChange}
             />
             <Card onClick={(e) => {
                 if ((e.target as HTMLElement).tagName !== 'INPUT') {
@@ -115,7 +94,7 @@ const Tile = ({ item, registered, onSecretChange, secrets, client, unAssignedCon
                             } else {
                                 unregisterCatalogItem(item)
                             }
-                        }} item={item} unAssignedConfig={unAssignedConfig} unAssignedSecrets={unAssignedSecrets} registered={registered} />
+                        }} item={item} unAssignedConfig={unAssignedConfig} unAssignedSecrets={unAssignedSecrets} registered={true} />
                         <Center item={item} />
                         <Divider sx={{ marginBottom: 1 }} />
                         <Bottom item={item} needsConfiguration={Boolean(unAssignedSecrets.length || unAssignedConfig.length)} />