Re-add missing props

Author: ColinMcNeil

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

@@ -216,9 +216,16 @@ 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={catalogItems}
                         client={client}
+                        ddVersion={ddVersion}
+                        canRegister={canRegister}
+                        register={registerCatalogItem}
+                        unregister={unregisterCatalogItem}
+                        onSecretChange={loadSecrets}
+                        secrets={secrets}
                     />
                 )}
                 {tab === 1 && (
@@ -236,6 +243,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                     <YourEnvironment
                         secrets={secrets}
                         ddVersion={ddVersion}
+                        config={config}
                     />
                 )}
             </Suspense>

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

@@ -4,14 +4,22 @@ import { CatalogItemCard, CatalogItemWithName } from '../PromptCard';
 import AddIcon from '@mui/icons-material/Add';
 import { Ref } from '../../Refs';
 import { v1 } from "@docker/extension-api-client-types";
+import Secrets from '../../Secrets';
 
 interface ToolCatalogProps {
     search: string;
     catalogItems: CatalogItemWithName[];
     client: v1.DockerDesktopClient;
+    ddVersion: { version: string, build: number };
+    canRegister: boolean;
+    register: (item: CatalogItemWithName) => Promise<void>;
+    unregister: (item: CatalogItemWithName) => Promise<void>;
+    onSecretChange: (secret: { name: string, value: string }) => Promise<void>;
+    secrets: Secrets.Secret[];
+    registryItems: { [key: string]: { ref: string, config: any } };
 }
 
-const ToolCatalog: React.FC<ToolCatalogProps> = ({ search, catalogItems, client }) => {
+const ToolCatalog: React.FC<ToolCatalogProps> = ({ search, catalogItems, client, ddVersion, canRegister, register, unregister, onSecretChange, secrets, registryItems }) => {
     const filteredCatalogItems = catalogItems.filter(item =>
         item.name.toLowerCase().includes(search.toLowerCase())
     );
@@ -27,13 +35,13 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({ search, catalogItems, client
                             client.host.openExternal(Ref.fromRef(catalogItem.ref).toURL(true));
                         }}
                         item={catalogItem}
-                        ddVersion={{ version: '0.0.0', build: 0 }}
-                        canRegister={false}
-                        registered={false}
-                        register={async () => { }}
-                        unregister={async () => { }}
-                        onSecretChange={async () => { }}
-                        secrets={[]}
+                        ddVersion={ddVersion}
+                        canRegister={canRegister}
+                        registered={registryItems[catalogItem.name]?.ref !== undefined}
+                        register={register}
+                        unregister={unregister}
+                        onSecretChange={onSecretChange}
+                        secrets={secrets}
                     />
                 </Grid2>
             ))}

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

@@ -6,32 +6,37 @@ import { DD_BUILD_WITH_SECRET_SUPPORT, getUnsupportedSecretMessage } from '../..
 interface YourEnvironmentProps {
     secrets: Secrets.Secret[];
     ddVersion: { version: string, build: number };
+    config: { [key: string]: { [key: string]: any } };
 }
 
-const YourEnvironment: React.FC<YourEnvironmentProps> = ({ secrets, ddVersion }) => {
+const YourEnvironment: React.FC<YourEnvironmentProps> = ({ secrets, ddVersion, config }) => {
     const hasDDVersionWithSecretSupport = ddVersion && ddVersion.build >= DD_BUILD_WITH_SECRET_SUPPORT;
 
     if (!hasDDVersionWithSecretSupport) {
         return <Alert severity="error" sx={{ fontSize: '1.2rem', maxWidth: 600 }}>{getUnsupportedSecretMessage(ddVersion)}</Alert>
     }
 
     return (
-        <List subheader={
-            <Stack direction="column" spacing={2} alignItems="center">
-                <Alert title="Docker Secret Management" severity="info" sx={{ fontSize: '1.2rem', maxWidth: 600 }}>
-                    Docker Secret Management is a new feature in Docker Desktop that allows you to securely inject secrets into your containers.
-                </Alert>
-                <Typography variant="h2">
-                    The following secrets are available to use in your prompts:
-                </Typography>
-            </Stack>
-        }>
-            {secrets.map((secret) => (
-                <ListItem key={secret.name}>
-                    <ListItemText primary={<Typography variant="h6">{secret.name}</Typography>} />
-                </ListItem>
-            ))}
-        </List>
+        <Stack direction="column" spacing={2}>
+            <List subheader={
+                <Stack direction="column" spacing={2} alignItems="center">
+                    <Alert title="Docker Secret Management" severity="info" sx={{ fontSize: '1.2rem', maxWidth: 600 }}>
+                        Docker Secret Management is a new feature in Docker Desktop that allows you to securely inject secrets into your containers.
+                    </Alert>
+                    <Typography variant="h2">
+                        The following secrets are available to use in your prompts:
+                    </Typography>
+                </Stack>
+            }>
+                {secrets.map((secret) => (
+                    <ListItem key={secret.name}>
+                        <ListItemText primary={<Typography variant="h6">{secret.name}</Typography>} />
+                    </ListItem>
+                ))}
+            </List>
+            <Typography variant="h2">The following configurations are available to use in your prompts:</Typography>
+            <pre>{JSON.stringify(config, null, 2)}</pre>
+        </Stack>
     );
 };