0.2.35 (#86)

* UI Alignment p1

* Redesign catalog tiles

* Adjust client settings and tile UI

* Redesign tabs, add title

* Cleanup some CSS vars

* bumped version + saying yes

Signed-off-by: Jean-Laurent de Morlhon <[email protected]>

* Add final changes for 0.2.35

---------

Signed-off-by: Jean-Laurent de Morlhon <[email protected]>
Co-authored-by: Jean-Laurent de Morlhon <[email protected]>

Author: ColinMcNeil

src/extension/Makefile

@@ -1,6 +1,6 @@
 # IMAGE?=docker/labs-ai-tools-for-devs
 IMAGE?=docker/labs-ai-tools-for-devs
-TAG?=0.2.34
+TAG?=0.2.35
 
 BUILDER=buildx-multi-arch
 
@@ -18,10 +18,10 @@ build-extension: cross ## Build service image to be deployed as a desktop extens
 	docker buildx build --load --tag=$(IMAGE):$(TAG) .
 
 install-extension: build-extension ## Install the extension
-	docker extension install $(IMAGE):$(TAG)
+	echo y | docker extension install $(IMAGE):$(TAG)
 
 update-extension: build-extension ## Update the extension
-	docker extension update $(IMAGE):$(TAG)
+	echo y | docker extension update $(IMAGE):$(TAG)
 
 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

src/extension/host-binary/cmd/main.go

@@ -49,6 +49,10 @@ type addOptions struct {
 	Value string
 }
 
+type deleteOptions struct {
+	Name string
+}
+
 func AddSecret(ctx context.Context) *cobra.Command {
 	opts := &addOptions{}
 	cmd := &cobra.Command{
@@ -79,6 +83,19 @@ func ListSecrets(ctx context.Context) *cobra.Command {
 	return cmd
 }
 
+func DeleteSecret(ctx context.Context) *cobra.Command {
+	opts := &deleteOptions{}
+	cmd := &cobra.Command{
+		Use:   "delete",
+		Short: "Delete a secret",
+		Args:  cobra.NoArgs,
+	}
+	flags := cmd.Flags()
+	flags.StringVarP(&opts.Name, "name", "n", "", "Name of the secret")
+	_ = cmd.MarkFlagRequired("name")
+	return cmd
+}
+
 const mcpPolicyName = "MCP"
 
 func runAddSecret(ctx context.Context, opts addOptions) error {
@@ -104,6 +121,14 @@ func runListSecrets(ctx context.Context) error {
 	return json.NewEncoder(os.Stdout).Encode(secrets)
 }
 
+func runDeleteSecret(ctx context.Context, opts deleteOptions) error {
+	c, err := newApiClient()
+	if err != nil {
+		return err
+	}
+	return c.DeleteSecret(ctx, opts.Name)
+}
+
 func assertMcpPolicyExists(ctx context.Context, apiClient client.ApiClient) error {
 	return apiClient.SetPolicy(ctx, secretsapi.Policy{Name: mcpPolicyName, Images: []string{"*"}})
 }

src/extension/ui/src/App.tsx

@@ -1,36 +1,17 @@
-import React, { useEffect, useState, Suspense } from 'react';
+import React, { useState, Suspense } from 'react';
 import { createDockerDesktopClient } from '@docker/extension-api-client';
-import { Stack, Typography, Button, IconButton, Alert, DialogTitle, Dialog, DialogContent, CircularProgress, Paper, Box, SvgIcon, useTheme } from '@mui/material';
-import { CatalogItemWithName } from './components/tile/Tile';
+import { Typography, Button, IconButton, Alert, DialogTitle, Dialog, DialogContent, CircularProgress, Paper, Box, SvgIcon, useTheme } from '@mui/material';
+import { CatalogItemWithName } from './types/catalog';
 import { Close } from '@mui/icons-material';
 import { CatalogGrid } from './components/CatalogGrid';
 import { POLL_INTERVAL } from './Constants';
 import { CatalogProvider, useCatalogContext } from './context/CatalogContext';
 import { ConfigProvider } from './context/ConfigContext';
 import { MCPClientProvider, useMCPClientContext } from './context/MCPClientContext';
 import ConfigurationModal from './components/ConfigurationModal';
-import { Settings as SettingsIcon } from '@mui/icons-material';
 
 const Settings = React.lazy(() => import('./components/Settings'));
 
-// Create lazy-loaded logo components
-const LazyDarkLogo = React.lazy(() => import('./components/DarkLogo'));
-const LazyLightLogo = React.lazy(() => import('./components/LightLogo'));
-
-// Logo component that uses Suspense for conditional loading
-const Logo = () => {
-  const theme = useTheme();
-  const isDarkMode = theme.palette.mode === 'dark';
-
-  return (
-    <Suspense fallback={<Box sx={{ height: '5em', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CircularProgress size={24} /></Box>}>
-      <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-        {isDarkMode ? <LazyDarkLogo /> : <LazyLightLogo />}
-      </Box>
-    </Suspense>
-  );
-}
-
 export const client = createDockerDesktopClient();
 
 const DEFAULT_SETTINGS = {
@@ -112,7 +93,7 @@ function AppContent({ settings, setSettings, configuringItem, setConfiguringItem
       </Paper>
     );
   }
-
+  const isDataFetching = imagesIsFetching || secretsLoading || catalogLoading || registryLoading || mcpFetching;
   return (
     <>
       {settings.showModal && (
@@ -147,39 +128,10 @@ function AppContent({ settings, setSettings, configuringItem, setConfiguringItem
         />
       )}
 
-      {/* Show a small loading indicator in the corner during background refetching */}
-      {(imagesIsFetching || secretsLoading || catalogLoading || registryLoading || mcpFetching) && (
-        <Box
-          sx={{
-            position: 'fixed',
-            bottom: 16,
-            right: 16,
-            zIndex: 9999,
-            display: 'flex',
-            alignItems: 'center',
-            backgroundColor: 'background.paper',
-            borderRadius: 2,
-            padding: 1,
-            boxShadow: 3
-          }}
-        >
-          <CircularProgress size={20} sx={{ mr: 1 }} />
-          <Typography variant="caption">Refreshing data...</Typography>
-        </Box>
-      )}
-
-      <Stack direction="column" spacing={1} justifyContent='center' alignItems='center'>
-        <Stack direction="row" spacing={1} justifyContent='space-evenly' alignItems='center' sx={{ width: '100%', maxWidth: '1000px' }}>
-          <Logo />
-          <IconButton sx={{ ml: 2, alignSelf: 'flex-end', justifyContent: 'flex-end' }} onClick={() => setSettings({ ...settings, showModal: true })}>
-            <SettingsIcon sx={{ fontSize: '1.5em' }} />
-          </IconButton>
-        </Stack>
-        <CatalogGrid
-          setConfiguringItem={setConfiguringItem}
-          showSettings={() => setSettings({ ...settings, showModal: true })}
-        />
-      </Stack>
+      <CatalogGrid
+        setConfiguringItem={setConfiguringItem}
+        showSettings={() => setSettings({ ...settings, showModal: true })}
+      />
     </>
   );
 }

src/extension/ui/src/Constants.ts

@@ -1,11 +1,18 @@
 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 CATALOG_URL = localStorage.getItem('catalogUrl') || 'https://raw.githubusercontent.com/docker/labs-ai-tools-for-devs/refs/heads/main/prompts/catalog.yaml'
+
+export const getUnsupportedSecretMessage = (ddVersion: { version: string, build: number }) =>
+    `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 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 DOCKER_MCP_IMAGE = 'alpine/socat'
 export const DOCKER_MCP_CONTAINER_ARGS = 'STDIO TCP:host.docker.internal:8811'
-export const DOCKER_MCP_COMMAND = `docker run -i --rm ${DOCKER_MCP_IMAGE} ${DOCKER_MCP_CONTAINER_ARGS}`
+export const DOCKER_MCP_COMMAND = `docker run -i --rm ${DOCKER_MCP_IMAGE} ${DOCKER_MCP_CONTAINER_ARGS}`
+
+export const TILE_DESCRIPTION_MAX_LENGTH = 80;
+
+export const CATALOG_LAYOUT_SX = {
+    width: '90vw',
+    maxWidth: '1200px',
+}

src/extension/ui/src/MCP Catalog_dark.svg

@@ -1,6 +1,6 @@
 import { v1 } from "@docker/extension-api-client-types";
 import { SUPPORTED_MCP_CLIENTS } from "./mcp-clients";
-import { MCPClient } from "./mcp-clients/MCPTypes";
+import { MCPClient } from "./types/mcp";
 
 export type MCPClientState = {
     client: MCPClient;

src/extension/ui/src/MCP Catalog_light.svg

@@ -1,7 +1,4 @@
-/**
- * Type for any object with string keys
- */
-export type DeepObject = { [key: string]: any };
+import { DeepObject } from './types/utils';
 
 /**
  * Simple object check.

src/extension/ui/src/MCPClients.ts

@@ -1,8 +1,8 @@
 import { v1 } from "@docker/extension-api-client-types";
 import { parse, stringify } from "yaml";
 import { readFileInPromptsVolume, writeFileToPromptsVolume } from "./FileWatcher";
-import { ParsedParameters } from "./components/ConfigurationModal";
 import { mergeDeep } from "./MergeDeep";
+import { ParsedParameters } from "./types/config";
 
 export const getRegistry = async (client: v1.DockerDesktopClient) => {
     const parseRegistry = async () => {

src/extension/ui/src/MergeDeep.ts

@@ -1,25 +1,10 @@
 // From secrets.yaml
 
 import { v1 } from "@docker/extension-api-client-types";
-import { CatalogItemWithName } from "./components/tile/Tile";
+import { CatalogItemWithName } from "./types/catalog";
+import { Secret, StoredSecret, Policy } from "./types/secrets";
 
 namespace Secrets {
-    export type Secret = {
-        name: string;
-        value: string;
-        policies: string[];
-    }
-
-    export type StoredSecret = {
-        name: string;
-        policies: string[];
-    }
-
-    export type Policy = {
-        name: string;
-        images: string[];
-    }
-
     export async function getSecrets(client: v1.DockerDesktopClient): Promise<Secret[]> {
         const response = await client.extension.host?.cli.exec('host-binary', ['list']);
         if (!response) {