Merge pull request #254 from dgageot/bundle-icons

Bundle icons

Author: dgageot

src/extension/Dockerfile

@@ -1,47 +1,45 @@
-## syntax=docker/dockerfile:1.4
-#FROM golang:1.24-alpine AS builder
-#ENV CGO_ENABLED=0
-#WORKDIR /backend
-#COPY backend/go.* .
-#RUN --mount=type=cache,target=/go/pkg/mod \
-#--mount=type=cache,target=/root/.cache/go-build \
-#go mod download
-#COPY backend/. .
-#RUN --mount=type=cache,target=/go/pkg/mod \
-#--mount=type=cache,target=/root/.cache/go-build \
-#go build -trimpath -ldflags="-s -w" -o bin/service
+# syntax=docker/dockerfile:1
 
-FROM --platform=$BUILDPLATFORM node:23-alpine3.20 AS client-builder
+FROM alpine:3.21@sha256:a8560b36e8b8210634f77d9f7f9efd7ffa463e380b75e2e74aff4511df3ef88c AS alpine
+
+FROM --platform=$BUILDPLATFORM node:23-alpine3.21@sha256:86703151a18fcd06258e013073508c4afea8e19cd7ed451554221dd00aea83fc AS client-builder
 WORKDIR /ui
 COPY ui/package.json ui/package-lock.json ./
-RUN --mount=type=cache,target=/usr/src/app/.npm \
-    npm set cache /usr/src/app/.npm && \
-    npm ci
+RUN --mount=type=cache,target=/root/.npm npm ci
 COPY ui/. .
-RUN npm run build
+RUN --mount=type=cache,target=/root/.npm npm run build
+
+FROM alpine AS pull-catalog-images
+RUN apk add --no-cache curl yq
+COPY --from=prompts catalog.yaml /
+RUN <<EOT
+    set -eo pipefail
 
-FROM alpine:3.20
+    mkdir -p /icons
+    cat /catalog.yaml | yq -r '.registry[].icon' | while read -r iconUrl; do
+        name=$(echo -n "$iconUrl" | md5sum | cut -d' ' -f1)
+        echo "${iconUrl} -> ${name}"
+        curl -fSl "$iconUrl" -o "/icons/${name}"
+    done
+EOT
+
+FROM alpine
 ARG TARGETARCH
 LABEL org.opencontainers.image.title="Docker MCP Toolkit" \
-    org.opencontainers.image.description="Docker MCP Toolkit is a Docker Desktop Extension allowing to connect dockerized MCP servers to MCP Clients" \
+    org.opencontainers.image.description="Docker MCP Toolkit is a Docker Desktop Extension allowing to connect dockerized MCP servers to MCP clients" \
     org.opencontainers.image.vendor="Docker Inc" \
     com.docker.desktop.extension.api.version="0.3.4" \
     com.docker.extension.screenshots='[{"alt":"screenshot of the extension UI", "url":"https://raw.githubusercontent.com/docker/labs-ai-tools-for-devs/refs/heads/main/src/extension/ui/src/assets/screenshots/screenshot1.png"}, {"alt":"Screenshot of Tile configuration", "url":"https://raw.githubusercontent.com/docker/labs-ai-tools-for-devs/refs/heads/main/src/extension/ui/src/assets/screenshots/screenshot2.png"}, {"alt":"Screenshot of MCP Client configuration", "url":"https://raw.githubusercontent.com/docker/labs-ai-tools-for-devs/refs/heads/main/src/extension/ui/src/assets/screenshots/screenshot3.png"}]' \
     com.docker.desktop.extension.icon="https://raw.githubusercontent.com/docker/labs-ai-tools-for-devs/main/src/extension/ui/src/assets/extension-icon.png" \
-    com.docker.extension.detailed-description="Browse the Docker MCP Catalog and connect Dockerized MCP servers to your favorite MCP Client" \
+    com.docker.extension.detailed-description="Browse and connect Dockerized MCP servers to your favorite MCP clients" \
     com.docker.extension.publisher-url="https://www.docker.com/" \
     com.docker.extension.additional-urls="https://hub.docker.com/catalogs/mcp" \
     com.docker.extension.categories="utility-tools" \
     com.docker.extension.changelog="Added MCP catalog"
 
-#COPY --from=builder /backend/bin/service /
-COPY docker-compose.yaml .
-COPY metadata.json .
-COPY extension-icon.svg /extension-icon.svg
+COPY docker-compose.yaml metadata.json extension-icon.svg /
 COPY host-binary/dist/windows-${TARGETARCH}/host-binary.exe /windows/host-binary.exe
 COPY host-binary/dist/darwin-${TARGETARCH}/host-binary /darwin/host-binary
 COPY host-binary/dist/linux-${TARGETARCH}/host-binary /linux/host-binary
+COPY --from=pull-catalog-images /icons ui/static-assets
 COPY --from=client-builder /ui/build ui
-#COPY data /data
-
-#CMD ["/service", "-socket", "/run/guest-services/backend.sock"]

src/extension/Makefile

@@ -1,4 +1,3 @@
-# IMAGE?=docker/labs-ai-tools-for-devs
 IMAGE?=docker/labs-ai-tools-for-devs
 TAG?=0.2.60
 
@@ -15,7 +14,7 @@ cross:
 	cd host-binary && $(MAKE) cross
 
 build-extension: cross ## Build service image to be deployed as a desktop extension
-	docker buildx build --load --tag=$(IMAGE):$(TAG) .
+	docker buildx build --build-context prompts=../../prompts --load --tag=$(IMAGE):$(TAG) .
 
 install-extension: build-extension ## Install the extension
 	echo y | docker extension install $(IMAGE):$(TAG)
@@ -27,7 +26,7 @@ prepare-buildx: ## Create buildx builder for multi-arch build, if not exists
 	docker buildx inspect $(BUILDER) || docker buildx create --name=$(BUILDER) --driver=docker-container --driver-opt=network=host
 
 push-extension: prepare-buildx cross ## Build & Upload extension image to hub. Do not push if tag already exists: make push-extension tag=0.1
-	docker pull $(IMAGE):$(TAG) && echo "Failure: Tag already exists" || docker buildx build --push --builder=$(BUILDER) --platform=linux/amd64,linux/arm64 --build-arg TAG=$(TAG) --tag=$(IMAGE):$(TAG) .
+	docker pull $(IMAGE):$(TAG) && echo "Failure: Tag already exists" || docker buildx build --build-context prompts=../../prompts --push --builder=$(BUILDER) --platform=linux/amd64,linux/arm64 --build-arg TAG=$(TAG) --tag=$(IMAGE):$(TAG) .
 
 help: ## Show this help
 	@echo Please specify a build target. The choices are:

src/extension/package-lock.json

@@ -12,6 +12,7 @@
     "@mui/material": "6.4.5",
     "@tanstack/react-query": "^5.69.0",
     "js-base64": "^3.7.7",
+    "js-md5": "^0.8.3",
     "json-schema-library": "^10.0.0-rc7",
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",

src/extension/ui/package-lock.json

@@ -45,6 +45,7 @@ import { useSecrets } from '../../queries/useSecrets';
 import { CatalogItemRichened } from '../../types/catalog';
 import ConfigEditor from './ConfigEditor';
 import { isEmpty } from 'lodash-es';
+import getCatalogIconPath from '../../utils/getCatalogIconPath';
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -122,6 +123,15 @@ const ConfigurationModal = ({
     }
   }, [catalogItem.canRegister]);
 
+  const [image, setImage] = useState<string | undefined>(undefined);
+  useEffect(() => {
+    if (catalogItem.icon) {
+      getCatalogIconPath(catalogItem.icon).then((icon) => {
+        setImage(icon);
+      });
+    }
+  }, [catalogItem.icon]);
+
   const toolChipStyle = {
     padding: '2px 8px',
     justifyContent: 'center',
@@ -172,16 +182,19 @@ const ConfigurationModal = ({
             alignItems: 'center',
           }}
         >
-          <Avatar
-            variant="square"
-            src={catalogItem.icon}
-            alt={catalogItem.name}
-            sx={{
-              width: 40,
-              height: 40,
-              borderRadius: 1,
-            }}
-          />
+          {
+            // TODO: Figure out if catalog icon is actually optional, and if so, find a good fallback.
+            catalogItem.icon && <Avatar
+              variant="square"
+              src={image}
+              alt={catalogItem.name}
+              sx={{
+                width: 40,
+                height: 40,
+                borderRadius: 1,
+              }}
+            />
+          }
           {catalogItem.title ?? catalogItem.name}
           <Tooltip
             placement="right"
@@ -386,7 +399,7 @@ const ConfigurationModal = ({
                               const secretEdited =
                                 (secret.assigned &&
                                   localSecrets[secret.name] !==
-                                    ASSIGNED_SECRET_PLACEHOLDER) ||
+                                  ASSIGNED_SECRET_PLACEHOLDER) ||
                                 (!secret.assigned &&
                                   localSecrets[secret.name] !== '');
                               return (

src/extension/ui/package.json

@@ -2,6 +2,7 @@ import { Avatar, CardHeader, Switch, Tooltip, Typography } from '@mui/material';
 
 import { CatalogItemRichened } from '../../types/catalog';
 import { useEffect, useState } from 'react';
+import getCatalogIconPath from '../../utils/getCatalogIconPath';
 
 type TopProps = {
   onToggleRegister: (checked: boolean) => void;
@@ -20,13 +21,22 @@ export default function Top({ item, onToggleRegister }: TopProps) {
     setToggled(item.registered);
   }, [item.registered]);
 
+  const [image, setImage] = useState<string | undefined>(undefined);
+  useEffect(() => {
+    if (item.icon) {
+      getCatalogIconPath(item.icon).then((icon) => {
+        setImage(icon);
+      });
+    }
+  }, [item.icon]);
+
   return (
     <CardHeader
       sx={{ padding: 0 }}
       avatar={
         <Avatar
           variant="square"
-          src={item.icon}
+          src={image}
           alt={item.name}
           sx={{
             width: 24,

src/extension/ui/src/components/tile/Modal.tsx

@@ -0,0 +1,34 @@
+import { md5 } from "js-md5";
+
+const getCatalogIconPath = async (iconUrl: string) => {
+    try {
+        var hash = md5.hex(iconUrl);
+        const hrefIcon = new URL(import.meta.url + `/../../static-assets/${hash}`).href
+
+        await checkIfImageExists(hrefIcon);
+        return hrefIcon
+    } catch {
+        return iconUrl
+    }
+}
+
+function checkIfImageExists(url: string) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = url;
+
+        if (img.complete) {
+            resolve(true)
+        } else {
+            img.onload = () => {
+                resolve(true)
+            };
+
+            img.onerror = () => {
+                reject(false)
+            };
+        }
+    });
+}
+
+export default getCatalogIconPath;

src/extension/ui/src/components/tile/Top.tsx

@@ -23,6 +23,7 @@ export default defineConfig({
       },
     },
   },
+  assetsInclude: ['./static-assets/**/*'],
   server: {
     port: 3000,
     strictPort: true,