Fix config toggle button

Author: ColinMcNeil

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

@@ -217,6 +217,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                 {tab === 0 && (
                     <ToolCatalog
                         registryItems={registryItems}
+                        config={config}
                         search={search}
                         catalogItems={catalogItems}
                         client={client}
@@ -226,6 +227,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                         unregister={unregisterCatalogItem}
                         onSecretChange={loadSecrets}
                         secrets={secrets}
+                        setConfiguringItem={setConfiguringItem}
                     />
                 )}
                 {tab === 1 && (

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

@@ -5,6 +5,7 @@ import AddIcon from '@mui/icons-material/Add';
 import { Ref } from '../../Refs';
 import { v1 } from "@docker/extension-api-client-types";
 import Secrets from '../../Secrets';
+import { config } from 'process';
 
 interface ToolCatalogProps {
     search: string;
@@ -17,34 +18,40 @@ interface ToolCatalogProps {
     onSecretChange: (secret: { name: string, value: string }) => Promise<void>;
     secrets: Secrets.Secret[];
     registryItems: { [key: string]: { ref: string, config: any } };
+    setConfiguringItem: (item: CatalogItemWithName) => void;
+    config: { [key: string]: { [key: string]: any } };
 }
 
-const ToolCatalog: React.FC<ToolCatalogProps> = ({ search, catalogItems, client, ddVersion, canRegister, register, unregister, onSecretChange, secrets, registryItems }) => {
+const ToolCatalog: React.FC<ToolCatalogProps> = ({ config, setConfiguringItem, search, catalogItems, client, ddVersion, canRegister, register, unregister, onSecretChange, secrets, registryItems }) => {
     const filteredCatalogItems = catalogItems.filter(item =>
         item.name.toLowerCase().includes(search.toLowerCase())
     );
 
     return (
         <Grid2 container spacing={1} width='90vw' maxWidth={1000}>
-            {filteredCatalogItems.map((catalogItem) => (
-                <Grid2 size={{ xs: 12, sm: 6, md: 4 }} key={catalogItem.name}>
-                    <CatalogItemCard
-                        hasAllConfig={true}
-                        setConfiguringItem={() => { }}
-                        openUrl={() => {
-                            client.host.openExternal(Ref.fromRef(catalogItem.ref).toURL(true));
-                        }}
-                        item={catalogItem}
-                        ddVersion={ddVersion}
-                        canRegister={canRegister}
-                        registered={registryItems[catalogItem.name]?.ref !== undefined}
-                        register={register}
-                        unregister={unregister}
-                        onSecretChange={onSecretChange}
-                        secrets={secrets}
-                    />
-                </Grid2>
-            ))}
+            {filteredCatalogItems.map((catalogItem) => {
+                const expectedKeys = catalogItem.config?.map((c: any) => Object.keys(c.parameters)).flat() || [];
+                const hasAllConfig = !catalogItem.config || expectedKeys?.every((c: any) => config[catalogItem.name]?.[c] !== undefined);
+                return (
+                    <Grid2 size={{ xs: 12, sm: 6, md: 4 }} key={catalogItem.name}>
+                        <CatalogItemCard
+                            hasAllConfig={hasAllConfig}
+                            setConfiguringItem={setConfiguringItem}
+                            openUrl={() => {
+                                client.host.openExternal(Ref.fromRef(catalogItem.ref).toURL(true));
+                            }}
+                            item={catalogItem}
+                            ddVersion={ddVersion}
+                            canRegister={canRegister}
+                            registered={registryItems[catalogItem.name]?.ref !== undefined}
+                            register={register}
+                            unregister={unregister}
+                            onSecretChange={onSecretChange}
+                            secrets={secrets}
+                        />
+                    </Grid2>
+                )
+            })}
             <Grid2 size={12}>
                 <Card sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                     <CardContent>