Implement checks for all required secrets on tiles

colinmcneil · colinmcneil · commit aae8ce720c5d · 2025-03-04T17:50:36.000-05:00
diff --git a/src/extension/ui/src/App.tsx b/src/extension/ui/src/App.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import AddIcon from '@mui/icons-material/Add';
 import { createDockerDesktopClient } from '@docker/extension-api-client';
 import { Stack, Typography, Button, ButtonGroup, Grid, debounce, Card, CardContent, IconButton, Alert, DialogTitle, Dialog, DialogContent, FormControlLabel, Checkbox, CircularProgress, Paper, DialogActions, Box } from '@mui/material';
 import { CatalogItemWithName } from './components/PromptCard';
diff --git a/src/extension/ui/src/Constants.ts b/src/extension/ui/src/Constants.ts
@@ -3,6 +3,7 @@ import { getUser, readFileInPromptsVolume } from "./FileWatcher";
 
 export const POLL_INTERVAL = 1000 * 30;
 export const MCP_POLICY_NAME = 'MCP=*';
+export const DD_BUILD_WITH_SECRET_SUPPORT = 184396;
 export const CATALOG_URL = 'https://raw.githubusercontent.com/docker/labs-ai-tools-for-devs/refs/heads/main/prompts/catalog.yaml'
 export const DOCKER_MCP_CONFIG = {
     "command": "docker",
@@ -23,7 +24,9 @@ export type MCPClient = {
     disconnect: (client: v1.DockerDesktopClient) => Promise<void>;
     validateConfig: (content: string) => boolean;
 }
-
+export const getUnsupportedSecretMessage = (ddVersion: { version: string, build: number }) => {
+    return `Secret support is not available in this version of Docker Desktop. You are on version ${ddVersion.version}, but the minimum required version is 4.40.0.`
+}
 export const SUPPORTED_MCP_CLIENTS: MCPClient[] = [
     {
         name: 'Claude Desktop',
diff --git a/src/extension/ui/src/components/CatalogGrid.tsx b/src/extension/ui/src/components/CatalogGrid.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Card, CardContent, IconButton, Alert, Stack, Button, Typography, Grid2, Select, MenuItem, FormControl, InputLabel, Switch, FormGroup, FormControlLabel, Dialog, DialogTitle, DialogContent, Checkbox, Badge, BadgeProps, Link, TextField, Tabs, Tab, Tooltip, InputAdornment } from '@mui/material';
+import { Card, CardContent, IconButton, Alert, Stack, Button, Typography, Grid2, Select, MenuItem, FormControl, InputLabel, Switch, FormGroup, FormControlLabel, Dialog, DialogTitle, DialogContent, Checkbox, Badge, BadgeProps, Link, TextField, Tabs, Tab, Tooltip, InputAdornment, CircularProgress } from '@mui/material';
 import { CatalogItemWithName, CatalogItemCard, CatalogItem } from './PromptCard';
 import AddIcon from '@mui/icons-material/Add';
 import { Ref } from '../Refs';
@@ -8,7 +8,7 @@ import { parse, stringify } from 'yaml';
 import { getRegistry } from '../Registry';
 import { FolderOpenRounded, Search, Settings } from '@mui/icons-material';
 import { tryRunImageSync } from '../FileWatcher';
-import { CATALOG_URL, MCP_POLICY_NAME, POLL_INTERVAL } from '../Constants';
+import { CATALOG_URL, DD_BUILD_WITH_SECRET_SUPPORT, MCP_POLICY_NAME, POLL_INTERVAL } from '../Constants';
 import { SecretList } from './SecretList';
 import Secrets from '../Secrets';
 
@@ -21,9 +21,17 @@ interface CatalogGridProps {
     settingsBadgeProps: BadgeProps;
 }
 
-const filterCatalog = (catalogItems: CatalogItemWithName[], registryItems: { [key: string]: { ref: string } }, showRegistered: boolean, showUnregistered: boolean, search: string) =>
-    catalogItems.filter((item) => (showRegistered || !Object.keys(registryItems).includes(item.name)) && (showUnregistered || Object.keys(registryItems).includes(item.name)) && (item.name.toLowerCase().includes(search.toLowerCase())));
+const filterCatalog = (catalogItems: CatalogItemWithName[], registryItems: { [key: string]: { ref: string } }, search: string) =>
+    catalogItems.filter((item) => item.name.toLowerCase().includes(search.toLowerCase()));
 
+const parseDDVersion = (ddVersion: string) => {
+    //eg: Docker Desktop 4.40.0 (184396)
+    const [, , version, build] = ddVersion.split(' ');
+    return {
+        version,
+        build: parseInt(build.replace('(', '').replace(')', ''))
+    }
+}
 const NEVER_SHOW_AGAIN_KEY = 'registry-sync-never-show-again';
 
 export const CatalogGrid: React.FC<CatalogGridProps> = ({
@@ -35,14 +43,13 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
     settingsBadgeProps
 }) => {
     const [catalogItems, setCatalogItems] = useState<CatalogItemWithName[]>([]);
-    const [showRegistered, setShowRegistered] = useState<boolean>(true);
-    const [showUnregistered, setShowUnregistered] = useState<boolean>(true);
     const [showReloadModal, setShowReloadModal] = useState<boolean>(false);
     const [search, setSearch] = useState<string>('');
     const [tab, setTab] = useState<number>(0);
     const [secrets, setSecrets] = useState<Secrets.Secret[]>([]);
+    const [ddVersion, setDdVersion] = useState<{ version: string, build: number } | null>(null);
 
-    const filteredCatalogItems = filterCatalog(catalogItems, registryItems, showRegistered, showUnregistered, search);
+    const filteredCatalogItems = filterCatalog(catalogItems, registryItems, search);
 
     const loadCatalog = async (showNotification = true) => {
         const cachedCatalog = localStorage.getItem('catalog');
@@ -51,7 +58,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
             const catalog = await response.text();
             const items = parse(catalog)['registry'] as { [key: string]: CatalogItem }
             const itemsWithName = Object.entries(items).map(([name, item]) => ({ name, ...item }));
-            const filteredItems = filterCatalog(itemsWithName, registryItems, showRegistered, showUnregistered, search);
+            const filteredItems = filterCatalog(itemsWithName, registryItems, search);
             setCatalogItems(filteredItems);
             localStorage.setItem('catalog', JSON.stringify(filteredItems));
             if (showNotification) {
@@ -73,7 +80,12 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
         setSecrets(response || []);
     }
 
-    const registerCatalogItem = async (item: CatalogItemWithName) => {
+    const loadDDVersion = async () => {
+        const ddVersionResult = await client.docker.cli.exec('version', ['--format', 'json'])
+        setDdVersion(parseDDVersion(JSON.parse(ddVersionResult.stdout).Server.Platform.Name));
+    }
+
+    const registerCatalogItem = async (item: CatalogItemWithName, showNotification = true) => {
         try {
             const currentRegistry = await getRegistry(client);
             const newRegistry = { ...currentRegistry, [item.name]: { ref: item.ref } };
@@ -84,12 +96,18 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                 }]
             })
             await tryRunImageSync(client, ['--rm', '-v', 'docker-prompts:/docker-prompts', '--workdir', '/docker-prompts', 'vonwig/function_write_files:latest', `'${payload}'`])
-            client.desktopUI.toast.success('Prompt registered successfully. Restart Claude Desktop to apply.');
+            if (showNotification) {
+                client.desktopUI.toast.success('Prompt registered successfully. Restart Claude Desktop to apply.');
+            }
             onRegistryChange();
-            setShowReloadModal(!localStorage.getItem(NEVER_SHOW_AGAIN_KEY));
+            if (showNotification) {
+                setShowReloadModal(!localStorage.getItem(NEVER_SHOW_AGAIN_KEY));
+            }
         }
         catch (error) {
-            client.desktopUI.toast.error('Failed to register prompt: ' + error);
+            if (showNotification) {
+                client.desktopUI.toast.error('Failed to register prompt: ' + error);
+            }
         }
     }
 
@@ -116,6 +134,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
     useEffect(() => {
         loadCatalog(false);
         loadSecrets();
+        loadDDVersion();
         const interval = setInterval(() => {
             loadCatalog(false);
             loadSecrets();
@@ -129,6 +148,10 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
         catalogItems.some((c) => c.name === i)
     )
 
+    if (!ddVersion) {
+        return <CircularProgress />
+    }
+
 
     return (
         <Stack spacing={2} justifyContent='center' alignItems='center'>
@@ -188,6 +211,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                                 client.host.openExternal(Ref.fromRef(item.ref).toURL(true));
                             }}
                             item={item}
+                            ddVersion={ddVersion}
                             canRegister={canRegister}
                             registered={Object.keys(registryItems).some((i) => i === item.name)}
                             register={registerCatalogItem}
@@ -215,7 +239,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
             {tab === 1 && <Grid2 container spacing={1} width='90vw' maxWidth={1000}>
                 {Object.entries(registryItems).map(([name, item]) => (
                     name.toLowerCase().includes(search.toLowerCase()) && <Grid2 size={{ xs: 12, sm: 6, md: 4 }} key={name}>
-                        <CatalogItemCard item={catalogItems.find((i) => i.name === name)!} openUrl={() => {
+                        <CatalogItemCard ddVersion={ddVersion} item={catalogItems.find((i) => i.name === name)!} openUrl={() => {
                             client.host.openExternal(Ref.fromRef(item.ref).toURL(true));
                         }} canRegister={canRegister} registered={true} register={registerCatalogItem} unregister={unregisterCatalogItem} onSecretChange={async (secret) => {
                             await Secrets.addSecret(client, { name: secret.name, value: secret.value, policies: [MCP_POLICY_NAME] })
@@ -224,7 +248,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                     </Grid2>
                 ))}
             </Grid2>}
-            {tab === 2 && <SecretList secrets={secrets} />}
+            {tab === 2 && ddVersion && <SecretList secrets={secrets} ddVersion={ddVersion} />}
         </Stack >
     );
 };
diff --git a/src/extension/ui/src/components/PromptCard.tsx b/src/extension/ui/src/components/PromptCard.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import { trackEvent } from "../Usage";
 import { Article, AttachFile, Build, CheckBox, Delete, LockReset, LockRounded, Save } from "@mui/icons-material";
 import Secrets from "../Secrets";
+import { DD_BUILD_WITH_SECRET_SUPPORT, getUnsupportedSecretMessage } from "../Constants";
 
 const iconSize = 16
 
@@ -23,7 +24,7 @@ export interface CatalogItemWithName extends CatalogItem {
     name: string;
 }
 
-export function CatalogItemCard({ openUrl, item, canRegister, registered, register, unregister, onSecretChange, secrets }: { openUrl: () => void, item: CatalogItemWithName, canRegister: boolean, registered: boolean, register: (item: CatalogItemWithName) => Promise<void>, unregister: (item: CatalogItemWithName) => Promise<void>, onSecretChange: (secret: { name: string, value: string }) => Promise<void>, secrets: Secrets.Secret[] }) {
+export function CatalogItemCard({ openUrl, item, canRegister, registered, register, unregister, onSecretChange, secrets, ddVersion }: { openUrl: () => void, item: CatalogItemWithName, canRegister: boolean, registered: boolean, register: (item: CatalogItemWithName) => Promise<void>, unregister: (item: CatalogItemWithName, showNotification?: boolean) => Promise<void>, onSecretChange: (secret: { name: string, value: string }) => Promise<void>, secrets: Secrets.Secret[], ddVersion: { version: string, build: number } }) {
     const loadAssignedSecrets = () => {
         const assignedSecrets = Secrets.getAssignedSecrets(item, secrets);
         setAssignedSecrets(assignedSecrets)
@@ -38,6 +39,15 @@ export function CatalogItemCard({ openUrl, item, canRegister, registered, regist
         loadAssignedSecrets()
     }, [secrets])
 
+    useEffect(() => {
+        if (registered && !hasAllSecrets) {
+            unregister(item, false)
+        }
+    }, [registered])
+
+    const hasAllSecrets = assignedSecrets.every(s => s.assigned)
+    const hasDDVersionWithSecretSupport = ddVersion && ddVersion.build >= DD_BUILD_WITH_SECRET_SUPPORT;
+
     return (
         <>
             <Dialog open={showSecretDialog} onClose={() => setShowSecretDialog(false)}>
@@ -111,7 +121,7 @@ export function CatalogItemCard({ openUrl, item, canRegister, registered, regist
                                         <Build sx={{ fontSize: iconSize }} />
                                     </Badge>
                                 </Tooltip>
-                                {item.secrets?.length && (
+                                {item.secrets?.length && (hasDDVersionWithSecretSupport ? (
                                     <Tooltip title={
                                         <Stack sx={{ pr: 1 }} direction="column" spacing={1}>
                                             <List subheader={<Typography sx={{ fontWeight: 'bold' }}>Expected secrets:</Typography>} dense sx={{ p: 0 }}>
@@ -130,13 +140,19 @@ export function CatalogItemCard({ openUrl, item, canRegister, registered, regist
                                             </Badge>
                                         </IconButton>
                                     </Tooltip>
-                                )}
+                                ) : (
+                                    <Tooltip title={getUnsupportedSecretMessage(ddVersion)}>
+                                        <IconButton>
+                                            <LockRounded sx={{ fontSize: iconSize }} />
+                                        </IconButton>
+                                    </Tooltip>
+                                ))}
                             </Stack>
-                            <Tooltip title={registered ? "Blocking this tile will remove its tools, resources and prompts from being used in any MCP clients you have connected." : "Allowing this tile will expose its tools, resources and prompts to any MCP clients you have connected."}>
-                                {isRegistering ? <CircularProgress size={20} /> : <Switch
+                            <Tooltip title={hasAllSecrets ? registered ? "Blocking this tile will remove its tools, resources and prompts from being used in any MCP clients you have connected." : "Allowing this tile will expose its tools, resources and prompts to any MCP clients you have connected." : "You need to set all expected secrets to allow this tile."}>
+                                {!hasAllSecrets ? <LockRounded /> : isRegistering ? <CircularProgress size={20} /> : <Switch
                                     size="small"
                                     color={registered ? 'success' : 'primary'}
-                                    checked={registered}
+                                    checked={registered && hasAllSecrets}
                                     onChange={(event, checked) => {
                                         trackEvent('registry-changed', { name: item.name, ref: item.ref, action: registered ? 'remove' : 'add' });
                                         setIsRegistering(true)
diff --git a/src/extension/ui/src/components/SecretList.tsx b/src/extension/ui/src/components/SecretList.tsx
@@ -1,9 +1,16 @@
 // Secret list for the tab
 
-import { List, ListItem, ListItemText, Typography } from "@mui/material";
+import { Alert, List, ListItem, ListItemText, Typography } from "@mui/material";
 import Secrets from "../Secrets";
+import { DD_BUILD_WITH_SECRET_SUPPORT, getUnsupportedSecretMessage } from "../Constants";
+
+export const SecretList = ({ secrets, ddVersion }: { secrets: Secrets.Secret[], ddVersion: { version: string, build: number } }) => {
+    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>
+    }
 
-export const SecretList = ({ secrets }: { secrets: Secrets.Secret[] }) => {
     return <List subheader={<Typography variant="h2">The following secrets are available to use in your prompts:</Typography>} sx={{ fontSize: '1.2rem' }}>
         {secrets.map((secret) => (
             <ListItem key={secret.name}>

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import React, { useEffect, useState } from 'react';`
`2`		`-import AddIcon from '@mui/icons-material/Add';`
`3`	`2`	`import { createDockerDesktopClient } from '@docker/extension-api-client';`
`4`	`3`	`import { Stack, Typography, Button, ButtonGroup, Grid, debounce, Card, CardContent, IconButton, Alert, DialogTitle, Dialog, DialogContent, FormControlLabel, Checkbox, CircularProgress, Paper, DialogActions, Box } from '@mui/material';`
`5`	`4`	`import { CatalogItemWithName } from './components/PromptCard';`