Merge pull request #142 from docker/cm/0.2.41

Cm/0.2.41

Author: ColinMcNeil

src/extension/ui/src/App.tsx

@@ -1,16 +1,17 @@
 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';
-import { CatalogProvider, useCatalogContext } from './context/CatalogContext';
-import { ConfigProvider } from './context/ConfigContext';
-import { MCPClientProvider, useMCPClientContext } from './context/MCPClientContext';
-import { RequiredImagesProvider, useRequiredImagesContext } from './context/RequiredImageContext';
 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';
 
 export const client = createDockerDesktopClient();
 
@@ -21,47 +22,42 @@ 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);
-  // Wrap the entire application with our providers
-  return (
-    <ConfigProvider client={client}>
-      <RequiredImagesProvider client={client}>
-        <CatalogProvider client={client}>
-          <MCPClientProvider client={client}>
-            <AppContent
-              settings={settings}
-              setSettings={setSettings}
-              configuringItem={configuringItem}
-              setConfiguringItem={setConfiguringItem}
-            />
-          </MCPClientProvider>
-        </CatalogProvider>
-      </RequiredImagesProvider>
-    </ConfigProvider>
-  );
-}
+  const [configuringItem, setConfiguringItem] = useState<CatalogItemRichened | null>(null);
 
-interface AppContentProps {
-  settings: { showModal: boolean, pollIntervalSeconds: number };
-  setSettings: React.Dispatch<React.SetStateAction<{ showModal: boolean, pollIntervalSeconds: number }>>;
-  configuringItem: CatalogItemWithName | null;
-  setConfiguringItem: React.Dispatch<React.SetStateAction<CatalogItemWithName | 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 = {
+    // Catalog related props
+    ...catalogAll,
+
+    // Required images props
+    ...requiredImages,
+
+    // MCP Client props
+    ...mcpClient,
 
-function AppContent({ settings, setSettings, setConfiguringItem }: AppContentProps) {
-  const { secretsLoading, catalogLoading, registryLoading } = useCatalogContext();
-  const { isLoading: imagesLoading } = useRequiredImagesContext();
+    // Config props
+    ...config
+  };
 
-  const isLoading = secretsLoading || catalogLoading || registryLoading || imagesLoading;
+  const isLoading = catalogAll.catalogLoading ||
+    catalogAll.registryLoading ||
+    requiredImages.isLoading ||
+    secrets.isLoading;
 
   return (
     <>
       {isLoading ? (
-        <LoadingState />
+        <LoadingState appProps={appProps} />
       ) : (
         <CatalogGrid
-          setConfiguringItem={setConfiguringItem}
-          showSettings={() => setSettings({ ...settings, showModal: true })}
+          appProps={appProps}
         />
       )}
     </>

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, CatalogItemWithName } from "./types/catalog";
 import { Secret, StoredSecret, Policy } from "./types/secrets";
 
 namespace Secrets {
@@ -38,13 +38,15 @@ namespace Secrets {
     export async function deleteSecret(client: v1.DockerDesktopClient, name: string): Promise<void> {
         try {
             const response = await client.extension.host?.cli.exec('host-binary', ['delete', '--name', name]);
-            client.desktopUI.toast.success('Secret deleted successfully')
             if (!response) {
                 client.desktopUI.toast.error('Failed to delete secret. Could not get response from host-binary.')
+                throw new Error('Failed to delete secret. Could not get response from host-binary.')
             }
             if (response?.stderr) {
                 client.desktopUI.toast.error('Failed to delete secret: ' + JSON.stringify(response))
+                throw new Error('Failed to delete secret: ' + JSON.stringify(response))
             }
+            client.desktopUI.toast.success('Secret deleted successfully')
         } catch (error) {
             if ((error as any).stderr) {
                 client.desktopUI.toast.error('Failed to delete secret: ' + JSON.stringify(error))

src/extension/ui/src/Secrets.ts

@@ -1,24 +1,21 @@
 import React, { Suspense, useEffect, useState } from 'react';
 import { IconButton, Alert, AlertTitle, Stack, Button, Typography, FormGroup, FormControlLabel, Dialog, DialogTitle, DialogContent, Checkbox, Badge, TextField, Tabs, Tab, CircularProgress, Box, Menu, Divider, Switch, MenuItem } from '@mui/material';
 import { SwapVert, FolderOpenRounded } from '@mui/icons-material';
-import { useCatalogContext } from '../context/CatalogContext';
-import { useMCPClientContext } from '../context/MCPClientContext';
-import { useConfigContext } from '../context/ConfigContext';
 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';
 
 const ToolCatalog = React.lazy(() => import('./tabs/ToolCatalog'));
-const YourEnvironment = React.lazy(() => import('./tabs/YourEnvironment'));
+const YourTools = React.lazy(() => import('./tabs/YourTools'));
 
 // Initialize the Docker Desktop client
 const client = createDockerDesktopClient();
 
 interface CatalogGridProps {
-    showSettings: () => void;
-    setConfiguringItem: (item: CatalogItemWithName) => void;
+    appProps: any; // We'll use this to pass all our hook data
 }
 
 const parseDDVersion = (ddVersion: string) => {
@@ -32,26 +29,15 @@ const parseDDVersion = (ddVersion: string) => {
 const NEVER_SHOW_AGAIN_KEY = 'registry-sync-never-show-again';
 
 export const CatalogGrid: React.FC<CatalogGridProps> = ({
-    setConfiguringItem,
+    appProps,
 }) => {
+    // Extract all the values we need from appProps
     const {
         catalogItems,
         registryItems,
-        canRegister,
-        registerCatalogItem,
-        unregisterCatalogItem,
-        tryUpdateSecrets,
-        secrets
-    } = useCatalogContext();
-
-    const {
         mcpClientStates,
-        isLoading: mcpLoading
-    } = useMCPClientContext();
-
-    const {
-        config
-    } = useConfigContext();
+        isLoading: mcpLoading,
+    } = appProps;
 
     const [showReloadModal, setShowReloadModal] = useState<boolean>(false);
     const [search, setSearch] = useState<string>('');
@@ -91,27 +77,21 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
     }
 
     const hasOutOfCatalog = catalogItems.length > 0 && Object.keys(registryItems).length > 0 && !Object.keys(registryItems).every((i) =>
-        catalogItems.some((c) => c.name === i)
+        catalogItems.some((c: CatalogItemRichened) => c.name === i)
     )
 
-    const sortedCatalogItems = sort !== 'date-desc' ? [...catalogItems].sort((a, b) => {
-        if (sort === 'name-asc') {
-            return a.name.localeCompare(b.name);
-        }
-        if (sort === 'name-desc') {
-            return b.name.localeCompare(a.name);
-        }
-        return 0;
-    }) : catalogItems;
-
     if (!ddVersion) {
         return <>
             <CircularProgress />
             <Typography>Loading Docker Desktop version...</Typography>
         </>
     }
 
-    const noConfiguredClients = !mcpLoading && !Object.values(mcpClientStates || {}).some(state => state.exists && state.configured);
+    // Check if there are any configured clients
+    const noConfiguredClients = !mcpLoading && mcpClientStates ?
+        !Object.values(mcpClientStates as Record<string, MCPClientState>).some(state =>
+            state.exists && state.configured
+        ) : false;
 
     return (
         <>
@@ -186,12 +166,6 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                                 }} disableRipple>
                                     ⏰ Most Recent
                                 </MenuItem>
-                                {/* <MenuItem onClick={() => setOpenMenus({ ...openMenus, 'demo-customized-menu': { anchorEl: null, open: false } })} disableRipple>
-                            ️‍🔥 Trending
-                        </MenuItem>
-                        <MenuItem onClick={() => setOpenMenus({ ...openMenus, 'demo-customized-menu': { anchorEl: null, open: false } })} disableRipple>
-                            ⬇️ Most Downloads
-                        </MenuItem> */}
                                 <Divider sx={{ my: 0.5 }} />
                                 <MenuItem sx={{ fontWeight: sort === 'name-asc' ? 'bold' : 'normal' }} onClick={() => {
                                     setOpenMenus({ ...openMenus, 'demo-customized-menu': { anchorEl: null, open: false } })
@@ -213,49 +187,19 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                 <Suspense fallback={<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>}>
                     {tab === 0 && (
                         <ToolCatalog
-                            registryItems={registryItems}
                             search={search}
-                            catalogItems={sortedCatalogItems}
                             showMine={showMine}
                             client={client}
-                            ddVersion={ddVersion}
-                            canRegister={canRegister}
-                            register={registerCatalogItem}
-                            unregister={unregisterCatalogItem}
-                            onSecretChange={tryUpdateSecrets}
-                            secrets={secrets}
-                            setConfiguringItem={setConfiguringItem}
-                            config={config || {}}
-                        />
-                    )}
-                    {/* {tab === 1 && (
-                    <YourTools
-                        registryItems={registryItems}
-                        search={search}
-                        catalogItems={sortedCatalogItems}
-                        unregister={unregisterCatalogItem}
-                        onSecretChange={tryLoadSecrets}
-                        secrets={secrets}
-                        setConfiguringItem={setConfiguringItem}
-                        canRegister={canRegister}
-                        ddVersion={ddVersion}
-                        config={config || {}}
-                    />
-                )} */}
-                    {tab === 2 && ddVersion && (
-                        <YourEnvironment
-                            secrets={secrets}
-                            ddVersion={ddVersion}
-                            config={config || {}}
                         />
                     )}
                     {tab === 1 && (
                         <YourClients
-                            client={client}
+                            appProps={appProps}
+                            ddVersion={ddVersion}
                         />
                     )}
                 </Suspense>
             </Stack>
         </>
     );
-};
+}