Add build step to pull all catalog images and cache them as static assets

Author: colinmcneil

src/extension/Dockerfile

@@ -42,6 +42,7 @@ COPY host-binary/dist/windows-${TARGETARCH}/host-binary.exe /windows/host-binary
 COPY host-binary/dist/darwin-${TARGETARCH}/host-binary /darwin/host-binary
 COPY host-binary/dist/linux-${TARGETARCH}/host-binary /linux/host-binary
 COPY --from=client-builder /ui/build ui
+COPY ui/static-assets ui/static-assets
 #COPY data /data
 
 #CMD ["/service", "-socket", "/run/guest-services/backend.sock"]

src/extension/Makefile

@@ -14,7 +14,14 @@ bin:
 cross:
 	cd host-binary && $(MAKE) cross
 
-build-extension: cross ## Build service image to be deployed as a desktop extension
+pull-catalog-images: ## Pull all icons from the catalog into static-assets with base64 filenames
+	cat ../../prompts/catalog.yaml | yq -r '.registry[].icon' | while read -r iconUrl; do \
+		iconName=$$( echo "$$iconUrl" | xxd -p -u | tr -d '\n' ); \
+		iconPath="ui/static-assets/$$iconName.png"; \
+		[ -f "$$iconPath" ] || curl -o "$$iconPath" "$$iconUrl"; \
+	done
+
+build-extension: cross pull-catalog-images ## Build service image to be deployed as a desktop extension
 	docker buildx build --load --tag=$(IMAGE):$(TAG) .
 
 install-extension: build-extension ## Install the extension

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

@@ -45,6 +45,8 @@ import { useSecrets } from '../../queries/useSecrets';
 import { CatalogItemRichened } from '../../types/catalog';
 import ConfigEditor from './ConfigEditor';
 import { isEmpty } from 'lodash-es';
+import { encode } from 'js-base64';
+import CatalogIconPath from '../../utils/CatalogIconPath';
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -172,16 +174,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={CatalogIconPath(catalogItem.icon)}
+              alt={catalogItem.name}
+              sx={{
+                width: 40,
+                height: 40,
+                borderRadius: 1,
+              }}
+            />
+          }
           {catalogItem.title ?? catalogItem.name}
           <Tooltip
             placement="right"
@@ -386,7 +391,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/src/components/tile/Top.tsx

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

src/extension/ui/src/utils/CatalogIconPath.ts

@@ -0,0 +1,6 @@
+const CatalogIconPath = (iconUrl: string) => {
+    const iconFilename = [...iconUrl].map(c => c.charCodeAt(0).toString(16).padStart(2, '0')).join('').toUpperCase() + '0A.png';
+    return new URL(`/static-assets/${iconFilename}`, import.meta.url).href;
+}
+
+export default CatalogIconPath;

src/extension/ui/static-assets/.gitignore

@@ -0,0 +1,2 @@
+*.png
+*.svg

src/extension/ui/vite.config.ts

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