Refactor build for smaller bundle

ColinMcNeil · ColinMcNeil · commit 44e28115773a · 2025-03-12T20:55:28.000-04:00
diff --git a/src/extension/ui/src/App.tsx b/src/extension/ui/src/App.tsx
@@ -1,17 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, Suspense } from 'react';
 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 { Stack, Typography, Button, IconButton, Alert, DialogTitle, Dialog, DialogContent, CircularProgress, Paper, Box } from '@mui/material';
 import { CatalogItemWithName } from './components/PromptCard';
 import { getRegistry, getStoredConfig, syncConfigWithRegistry, syncRegistryWithConfig } from './Registry';
-import { Close, FolderOpenRounded, } from '@mui/icons-material';
+import { Close } from '@mui/icons-material';
 import { ExecResult } from '@docker/extension-api-client-types/dist/v0';
 import { CatalogGrid } from './components/CatalogGrid';
 import { POLL_INTERVAL } from './Constants';
 import MCPCatalogLogo from './MCP Catalog.svg'
-import Settings from './components/Settings';
 import { getMCPClientStates, MCPClientState } from './MCPClients';
 import PromptConfig, { ParsedParameters } from './components/PromptConfig';
 
+const Settings = React.lazy(() => import('./components/Settings'));
+
 export const client = createDockerDesktopClient();
 
 const DEFAULT_SETTINGS = {
@@ -110,14 +111,30 @@ export function App() {
 
   return (
     <>
-      <Dialog open={settings.showModal} onClose={() => setSettings({ ...settings, showModal: false })} fullWidth maxWidth='md'>
-        <DialogTitle>
-          <Typography variant='h2' sx={{ fontWeight: 'bold', m: 2 }}>Catalog Settings</Typography>
-        </DialogTitle>
-        <DialogContent>
-          <Settings onUpdate={updateMCPClientStates} mcpClientStates={mcpClientStates} settings={settings} setSettings={setSettings} />
-        </DialogContent>
-      </Dialog>
+      {settings.showModal && (
+        <Dialog open={settings.showModal} fullWidth maxWidth="xl">
+          <DialogTitle>
+            Settings
+            <IconButton
+              aria-label="close"
+              onClick={() => setSettings({ ...settings, showModal: false })}
+              sx={{ position: 'absolute', right: 8, top: 8 }}
+            >
+              <Close />
+            </IconButton>
+          </DialogTitle>
+          <DialogContent>
+            <Suspense fallback={<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>}>
+              <Settings
+                settings={settings}
+                setSettings={setSettings}
+                mcpClientStates={mcpClientStates}
+                onUpdate={loadRegistry}
+              />
+            </Suspense>
+          </DialogContent>
+        </Dialog>
+      )}
       {configuringItem && <Dialog open={configuringItem !== null} onClose={() => setConfiguringItem(null)}>
         <DialogTitle>
           <Typography variant="h6">
diff --git a/src/extension/ui/src/MergeDeep.ts b/src/extension/ui/src/MergeDeep.ts
@@ -1,18 +1,24 @@
+/**
+ * Type for any object with string keys
+ */
+export type DeepObject = { [key: string]: any };
+
 /**
  * Simple object check.
  * @param item
  * @returns {boolean}
  */
-export function isObject(item: any) {
-    return (item && typeof item === 'object' && !Array.isArray(item));
+export function isObject(item: unknown): item is DeepObject {
+    return Boolean(item && typeof item === 'object' && !Array.isArray(item));
 }
 
 /**
  * Deep merge two objects.
- * @param target
- * @param ...sources
+ * @param target The target object to merge into
+ * @param sources The source objects to merge from
+ * @returns The merged object
  */
-export function mergeDeep(target: any, ...sources: any[]) {
+export function mergeDeep<T extends DeepObject>(target: T, ...sources: DeepObject[]): T {
     if (!sources.length) return target;
     const source = sources.shift();
 
diff --git a/src/extension/ui/src/components/CatalogGrid.tsx b/src/extension/ui/src/components/CatalogGrid.tsx
@@ -1,18 +1,19 @@
-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, CircularProgress } from '@mui/material';
-import { CatalogItemWithName, CatalogItemCard, CatalogItem } from './PromptCard';
-import AddIcon from '@mui/icons-material/Add';
-import { Ref } from '../Refs';
+import React, { Suspense, useEffect, useState } from 'react';
+import { IconButton, Alert, Stack, Button, Typography, FormGroup, FormControlLabel, Dialog, DialogTitle, DialogContent, Checkbox, Badge, BadgeProps, Link, TextField, Tabs, Tab, Tooltip, CircularProgress, Box } from '@mui/material';
+import { CatalogItemWithName, CatalogItem } from './PromptCard';
 import { v1 } from "@docker/extension-api-client-types";
 import { parse, stringify } from 'yaml';
 import { getRegistry, syncConfigWithRegistry, syncRegistryWithConfig } from '../Registry';
 import { FolderOpenRounded, Search, Settings } from '@mui/icons-material';
 import { tryRunImageSync } from '../FileWatcher';
-import { CATALOG_URL, DD_BUILD_WITH_SECRET_SUPPORT, MCP_POLICY_NAME, POLL_INTERVAL } from '../Constants';
-import { SecretList } from './SecretList';
+import { CATALOG_URL, POLL_INTERVAL } from '../Constants';
 import Secrets from '../Secrets';
 import { ParsedParameters } from './PromptConfig';
 
+const ToolCatalog = React.lazy(() => import('./tabs/ToolCatalog'));
+const YourTools = React.lazy(() => import('./tabs/YourTools'));
+const YourEnvironment = React.lazy(() => import('./tabs/YourEnvironment'));
+
 interface CatalogGridProps {
     registryItems: { [key: string]: { ref: string, config: any } };
     canRegister: boolean;
@@ -184,7 +185,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
             }}>registry.yaml</Button>} severity="info">
                 <Typography sx={{ width: '100%' }}>You have some prompts registered which are not available in the catalog.</Typography>
             </Alert>}
-            <Tabs value={tab} onChange={(e, v) => setTab(v)} sx={{ mb: 0, mt: 1 }}>
+            <Tabs value={tab} onChange={(_, newValue) => setTab(newValue)} sx={{ width: '100%' }}>
                 <Tooltip title="These are all of the tiles you have available across the catalog.">
                     <Tab sx={{ fontSize: '1.5em' }} label="Tool Catalog" />
                 </Tooltip>
@@ -210,63 +211,34 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
                         </Badge>
                     </IconButton>
                 </Stack>
-            </FormGroup >
-
-            {tab === 0 && <Grid2 container spacing={1} width='90vw' maxWidth={1000}>
-                {filteredCatalogItems.map((catalogItem) => {
-                    const expectedProperties = catalogItem.config?.map((c: { name: string, parameters: ParsedParameters }) => Object.keys(c.parameters)).flat() || []
-                    const hasAllConfig = !expectedProperties.length || expectedProperties.every((p: string) => config[catalogItem.name]?.[p])
-                    return (
-                        <Grid2 size={{ xs: 12, sm: 6, md: 4 }} key={catalogItem.name}>
-                            <CatalogItemCard
-                                hasAllConfig={hasAllConfig}
-                                setConfiguringItem={setConfiguringItem}
-                                openUrl={() => {
-                                    client.host.openExternal(Ref.fromRef(catalogItem.ref).toURL(true));
-                                }}
-                                item={catalogItem}
-                                ddVersion={ddVersion}
-                                canRegister={canRegister}
-                                registered={Object.keys(registryItems).some((i) => i === catalogItem.name)}
-                                register={registerCatalogItem}
-                                unregister={unregisterCatalogItem}
-                                onSecretChange={async (secret) => {
-                                    await Secrets.addSecret(client, { name: secret.name, value: secret.value, policies: [MCP_POLICY_NAME] })
-                                    loadSecrets();
-                                }}
-                                secrets={secrets}
-                            />
-                        </Grid2>
-                    )
-                })}
-                <Grid2 size={12}>
-                    <Card sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                        <CardContent>
-                            <IconButton sx={{ height: '100%' }} onClick={() => {
-                                client.host.openExternal('https://vonwig.github.io/prompts.docs/tools/docs/');
-                            }}>
-                                <AddIcon sx={{ width: '100%', height: 100 }} />
-                            </IconButton>
-                        </CardContent>
-                    </Card>
-                </Grid2>
-            </Grid2>}
-            {tab === 1 && <Grid2 container spacing={1} width='90vw' maxWidth={1000}>
-                {Object.entries(registryItems).map(([name, item]) => {
-                    const hasAllConfig = item.config?.map((c: any) => c.name).every((c: any) => config[name]?.[c])
-                    return (
-                        name.toLowerCase().includes(search.toLowerCase()) && <Grid2 size={{ xs: 12, sm: 6, md: 4 }} key={name}>
-                            <CatalogItemCard hasAllConfig={hasAllConfig} 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] })
-                                loadSecrets();
-                            }} secrets={secrets} setConfiguringItem={setConfiguringItem} />
-                        </Grid2>
-                    )
-                })}
-            </Grid2>}
-            {tab === 2 && ddVersion && <SecretList secrets={secrets} ddVersion={ddVersion} />}
-        </Stack >
+            </FormGroup>
+
+            <Suspense fallback={<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>}>
+                {tab === 0 && (
+                    <ToolCatalog
+                        search={search}
+                        catalogItems={catalogItems}
+                        client={client}
+                    />
+                )}
+                {tab === 1 && (
+                    <YourTools
+                        search={search}
+                        registryItems={registryItems}
+                        config={config}
+                        ddVersion={ddVersion}
+                        canRegister={canRegister}
+                        setConfiguringItem={setConfiguringItem}
+                        secrets={secrets}
+                    />
+                )}
+                {tab === 2 && ddVersion && (
+                    <YourEnvironment
+                        secrets={secrets}
+                        ddVersion={ddVersion}
+                    />
+                )}
+            </Suspense>
+        </Stack>
     );
 };
diff --git a/src/extension/ui/src/components/PromptCard.tsx b/src/extension/ui/src/components/PromptCard.tsx
@@ -1,17 +1,13 @@
 import { Badge, Box, CircularProgress, Dialog, DialogContent, DialogTitle, Divider, IconButton, List, ListItem, ListItemIcon, ListItemText, Stack, Switch, TextField, Tooltip, useTheme } from "@mui/material";
-import Button from '@mui/material/Button';
 import { Card, CardActions, CardContent, CardMedia, Typography } from "@mui/material";
-import { Ref } from "../Refs";
 import { useEffect, useState } from "react";
 import { trackEvent } from "../Usage";
-import { Article, AttachFile, Build, CheckBox, Delete, DoNotDisturb, LockOpenRounded, LockReset, LockRounded, NoEncryptionGmailerrorred, Save, Settings } from "@mui/icons-material";
+import { Article, AttachFile, Build, DoNotDisturb, LockReset, LockRounded, NoEncryptionGmailerrorred, Save, Settings } from "@mui/icons-material";
 import Secrets from "../Secrets";
 import { DD_BUILD_WITH_SECRET_SUPPORT, getUnsupportedSecretMessage } from "../Constants";
-import { DataType, githubDarkTheme, githubLightTheme, JsonEditor, NodeData } from "json-edit-react";
-import PromptConfig, { Config } from "./PromptConfig";
-const iconSize = 16
-
+import { Config } from "./PromptConfig";
 
+const iconSize = 16
 
 export interface CatalogItem {
     description?: string;
diff --git a/src/extension/ui/src/components/PromptConfig.tsx b/src/extension/ui/src/components/PromptConfig.tsx
@@ -1,14 +1,10 @@
-import { githubLightTheme, NodeData } from "json-edit-react"
-
-import { githubDarkTheme } from "json-edit-react"
-
+import { githubLightTheme, NodeData, githubDarkTheme, JsonEditor } from "json-edit-react"
 import { CircularProgress, useTheme } from "@mui/material";
-import { JsonEditor } from "json-edit-react"
 import { useEffect, useState } from "react";
 import { CatalogItemWithName } from "./PromptCard";
-import { getRegistry, getStoredConfig } from "../Registry";
+import { getStoredConfig } from "../Registry";
 import { v1 } from "@docker/extension-api-client-types";
-import { mergeDeep } from "../MergeDeep";
+import { DeepObject, mergeDeep } from "../MergeDeep";
 import { stringify } from "yaml";
 import { tryRunImageSync } from "../FileWatcher";
 
@@ -158,7 +154,7 @@ const PromptConfig = ({
                     key={config.name}
                     theme={theme.palette.mode === 'dark' ? githubDarkTheme : githubLightTheme}
                     onEdit={({ newData }) => {
-                        const newConfig = mergeDeep(existingConfigInYaml, newData)
+                        const newConfig = mergeDeep(existingConfigInYaml as DeepObject, newData as DeepObject)
                         saveConfigToYaml(newConfig)
                     }}
                     rootName={config.name}
diff --git a/src/extension/ui/src/components/tabs/ToolCatalog.tsx b/src/extension/ui/src/components/tabs/ToolCatalog.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Card, CardContent, Grid2, IconButton } from '@mui/material';
+import { CatalogItemCard, CatalogItemWithName } from '../PromptCard';
+import AddIcon from '@mui/icons-material/Add';
+import { Ref } from '../../Refs';
+import { v1 } from "@docker/extension-api-client-types";
+
+interface ToolCatalogProps {
+    search: string;
+    catalogItems: CatalogItemWithName[];
+    client: v1.DockerDesktopClient;
+}
+
+const ToolCatalog: React.FC<ToolCatalogProps> = ({ search, catalogItems, client }) => {
+    const filteredCatalogItems = catalogItems.filter(item =>
+        item.name.toLowerCase().includes(search.toLowerCase())
+    );
+
+    return (
+        <Grid2 container spacing={1} width='90vw' maxWidth={1000}>
+            {filteredCatalogItems.map((catalogItem) => (
+                <Grid2 size={{ xs: 12, sm: 6, md: 4 }} key={catalogItem.name}>
+                    <CatalogItemCard
+                        hasAllConfig={true}
+                        setConfiguringItem={() => { }}
+                        openUrl={() => {
+                            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={[]}
+                    />
+                </Grid2>
+            ))}
+            <Grid2 size={12}>
+                <Card sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                    <CardContent>
+                        <IconButton sx={{ height: '100%' }} onClick={() => {
+                            client.host.openExternal('https://vonwig.github.io/prompts.docs/tools/docs/');
+                        }}>
+                            <AddIcon sx={{ width: '100%', height: 100 }} />
+                        </IconButton>
+                    </CardContent>
+                </Card>
+            </Grid2>
+        </Grid2>
+    );
+};
+
+export default ToolCatalog; 
diff --git a/src/extension/ui/src/components/tabs/YourEnvironment.tsx b/src/extension/ui/src/components/tabs/YourEnvironment.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Alert, List, ListItem, ListItemText, Stack, Typography } from '@mui/material';
+import Secrets from '../../Secrets';
+import { DD_BUILD_WITH_SECRET_SUPPORT, getUnsupportedSecretMessage } from '../../Constants';
+
+interface YourEnvironmentProps {
+    secrets: Secrets.Secret[];
+    ddVersion: { version: string, build: number };
+}
+
+const YourEnvironment: React.FC<YourEnvironmentProps> = ({ secrets, ddVersion }) => {
+    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>
+    );
+};
+
+export default YourEnvironment; 
diff --git a/src/extension/ui/src/components/tabs/YourTools.tsx b/src/extension/ui/src/components/tabs/YourTools.tsx
diff --git a/src/extension/ui/vite.config.ts b/src/extension/ui/vite.config.ts
