Reduce cloned object counts

Author: colinmcneil

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 '../../queries/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;

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 '../../queries/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) => {

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

@@ -9,7 +9,7 @@ import Center from "./Center";
 import Bottom from "./Bottom";
 import { v1 } from "@docker/extension-api-client-types";
 import { useSecrets } from "../../queries/useSecrets";
-import { useCatalogOperations, useRegistry } from "../../queries/useCatalog";
+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 <>

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

@@ -6,7 +6,7 @@ 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 "../../queries/useSecrets";
-import { useCatalogOperations, useRegistry } from "../../queries/useCatalog";
+import { useCatalogAll, useCatalogOperations } from "../../queries/useCatalog";
 import { useConfig } from "../../queries/useConfig";
 
 interface TabPanelProps {
@@ -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)
 

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({