Merge pull request #242 from docker/remove-pull-image

Remove Busy box pull

Author: trungutt

src/extension/ui/src/App.tsx

@@ -6,7 +6,6 @@ import LoadingState from './components/LoadingState';
 import { useCatalogAll } from './queries/useCatalog';
 import { useConfig } from './queries/useConfig';
 import { useMCPClient } from './queries/useMCPClient';
-import { useRequiredImages } from './queries/useRequiredImages';
 import { useSecrets } from './queries/useSecrets';
 import { syncRegistryWithConfig } from './Registry';
 export const client = createDockerDesktopClient();
@@ -18,7 +17,6 @@ const MemoizedLoadingState = memo(LoadingState);
 export function App() {
   // Use hooks directly in the component
   const catalogAll = useCatalogAll(client);
-  const requiredImages = useRequiredImages(client);
   const config = useConfig(client);
   const secrets = useSecrets(client);
   const mcpClient = useMCPClient(client);
@@ -32,7 +30,6 @@ export function App() {
 
   // Create a context-like combined props object to pass to children
   const appProps = {
-    imagesLoading: requiredImages.imagesLoading,
     configLoading: config.configLoading,
     secretsLoading: secrets.isLoading,
     catalogLoading: catalogAll.catalogLoading,
@@ -45,7 +42,6 @@ export function App() {
   };
 
   const isLoading =
-    requiredImages.imagesLoading ||
     config.configLoading ||
     secrets.isLoading ||
     catalogAll.catalogLoading ||

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

@@ -7,14 +7,12 @@ import {
   Box,
   Button,
   CircularProgress,
-  FormControlLabel,
   FormGroup,
   IconButton,
   Menu,
   MenuItem,
   OutlinedInput,
   Stack,
-  Switch,
   Tab,
   Tabs,
   Typography,
@@ -23,9 +21,9 @@ import React, { Suspense, useMemo, useState } from 'react';
 
 import { CATALOG_LAYOUT_SX } from '../Constants';
 import { CatalogItemRichened } from '../types/catalog';
-import YourClients from './tabs/YourClients';
 import OAuthProviders from './tabs/OAuthProviders';
 import ToolCatalog from './tabs/ToolCatalog';
+import YourClients from './tabs/YourClients';
 
 // Initialize the Docker Desktop client
 const client = createDockerDesktopClient();
@@ -45,9 +43,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({ appProps }) => {
   }>({
     'demo-customized-menu': { anchorEl: null, open: false },
   });
-  const [sort, setSort] = useState<'name-asc' | 'name-desc'>(
-    'name-asc'
-  );
+  const [sort, setSort] = useState<'name-asc' | 'name-desc'>('name-asc');
 
   // Only calculate hasOutOfCatalog when relevant data changes
   const hasOutOfCatalog = useMemo(() => {
@@ -82,7 +78,8 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({ appProps }) => {
       >
         <Typography variant="h3">Docker MCP Toolkit</Typography>
         <Typography sx={{ color: 'text.secondary' }}>
-          Browse the Docker MCP Catalog and connect Dockerized MCP servers to your favorite MCP Client
+          Browse the Docker MCP Catalog and connect Dockerized MCP servers to
+          your favorite MCP Client
         </Typography>
       </Stack>
       {hasOutOfCatalog && (
@@ -226,11 +223,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({ appProps }) => {
         }
       >
         {tab === 0 && (
-          <ToolCatalog
-            search={search}
-            client={client}
-            sort={sort}
-          />
+          <ToolCatalog search={search} client={client} sort={sort} />
         )}
         {tab === 1 && <YourClients appProps={appProps} />}
       </Suspense>

src/extension/ui/src/components/LoadingState.tsx

@@ -14,24 +14,14 @@ interface LoadingStateProps {
 }
 
 const LoadingState: React.FC<LoadingStateProps> = ({ appProps }) => {
-  const {
-    imagesLoading,
-    configLoading,
-    secretsLoading,
-    catalogLoading,
-    registryLoading,
-  } = appProps;
+  const { configLoading, secretsLoading, catalogLoading, registryLoading } =
+    appProps;
   const [progress, setProgress] = useState(0);
   const isLoading =
-    imagesLoading ||
-    configLoading ||
-    secretsLoading ||
-    catalogLoading ||
-    registryLoading;
+    configLoading || secretsLoading || catalogLoading || registryLoading;
 
   useEffect(() => {
     const progress = [
-      imagesLoading ? 0 : 100,
       configLoading ? 0 : 100,
       secretsLoading ? 0 : 100,
       catalogLoading ? 0 : 100,
@@ -43,18 +33,11 @@ const LoadingState: React.FC<LoadingStateProps> = ({ appProps }) => {
     );
 
     setProgress(progressPercent);
-  }, [
-    imagesLoading,
-    configLoading,
-    secretsLoading,
-    catalogLoading,
-    registryLoading,
-  ]);
+  }, [configLoading, secretsLoading, catalogLoading, registryLoading]);
 
   if (!isLoading) return null;
 
   const getLoadingText = () => {
-    if (imagesLoading) return 'Loading required Docker images';
     if (configLoading) return 'Loading configuration';
     if (secretsLoading) return 'Loading secrets';
     if (catalogLoading) return 'Loading catalog';