Improve state for unconfigured clients

Author: colinmcneil

src/extension/ui/src/App.tsx

@@ -1,7 +1,7 @@
 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 } from '@mui/material';
+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';
 import { RegistrySyncStatus } from './components/RegistrySyncStatus';
 import { getRegistry } from './Registry';
@@ -85,6 +85,8 @@ export function App() {
     </Paper>
   }
 
+  const hasMCPConfigured = Object.values(mcpClientStates).some(state => state.exists && state.configured)
+
   return (
     <div>
       <Dialog open={settings.showModal} onClose={() => setSettings({ ...settings, showModal: false })}>
@@ -97,8 +99,9 @@ export function App() {
       </Dialog>
       <Stack direction="column" spacing={1} justifyContent='center' alignItems='center'>
         <img src={MCPCatalogLogo} alt="MCP Catalog" height={100} />
-        <CatalogGrid settingsBadgeProps={Object.values(mcpClientStates).some(state => state.exists && state.configured) ? {} : {
-          color: Object.values(mcpClientStates).some(state => state.exists) ? 'warning' : 'error',
+        {hasMCPConfigured ? <></> : <Alert action={<Button variant='outlined' color='secondary' onClick={() => setSettings({ ...settings, showModal: true })}>Configure</Button>} severity="error" sx={{ fontWeight: 'bold' }}>MCP Clients are not configured.  Please configure MCP Clients to use the MCP Catalog.</Alert>}
+        <CatalogGrid settingsBadgeProps={hasMCPConfigured ? {} : {
+          color: hasMCPConfigured ? 'default' : 'error',
           badgeContent: '0 MCP Clients',
           sx: {
             width: 80,

src/extension/ui/src/components/CatalogGrid.tsx

@@ -142,8 +142,8 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({
             </Alert>}
             <FormGroup sx={{ width: '100%' }}>
                 <Stack direction="row" spacing={1} alignItems='center'>
-                    <FormControlLabel control={<Switch checked={showRegistered} onChange={(e) => setShowRegistered(e.target.checked)} />} label="Show Registered" />
-                    <FormControlLabel control={<Switch checked={showUnregistered} onChange={(e) => setShowUnregistered(e.target.checked)} />} label="Show Unregistered" />
+                    <FormControlLabel control={<Switch checked={showRegistered} onChange={(e) => setShowRegistered(e.target.checked)} />} label="Show Allowed Prompts" />
+                    <FormControlLabel control={<Switch checked={showUnregistered} onChange={(e) => setShowUnregistered(e.target.checked)} />} label="Show Blocked Prompts" />
                     <Link sx={{ fontWeight: 'bold' }} href="https://vonwig.github.io/prompts.docs/tools/docs/" target="_blank" rel="noopener noreferrer" onClick={() => {
                         client.host.openExternal('https://vonwig.github.io/prompts.docs/tools/docs/');
                     }}>⇱ Documentation</Link>

src/extension/ui/src/components/PromptCard.tsx

@@ -22,7 +22,7 @@ export interface CatalogItemWithName extends CatalogItem {
 export function CatalogItemCard({ openUrl, item, canRegister, registered, register, unregister }: { openUrl: () => void, item: CatalogItemWithName, canRegister: boolean, registered: boolean, register: (item: CatalogItemWithName) => Promise<void>, unregister: (item: CatalogItemWithName) => Promise<void> }) {
     const [isRegistering, setIsRegistering] = useState(false)
     return (
-        <Card sx={(theme) => ({ height: '100%', borderColor: registered ? theme.palette.docker.blue[500] : theme.palette.docker.grey[500], borderWidth: registered ? 2 : 1 })} variant="outlined" >
+        <Card sx={(theme) => ({ height: '100%', borderColor: registered ? theme.palette.docker.grey[600] : theme.palette.docker.grey[400], borderWidth: registered ? 2 : 1 })} variant="outlined" >
             <Stack direction="column" height="100%" sx={{ justifyContent: 'space-between' }}>
                 <CardContent>
                     <a href="">
@@ -81,7 +81,7 @@ export function CatalogItemCard({ openUrl, item, canRegister, registered, regist
                             }}
                             disabled={!canRegister || isRegistering}
                         >
-                            {isRegistering ? <CircularProgress size={20} /> : registered ? 'Remove' : 'Add'}
+                            {isRegistering ? <CircularProgress size={20} /> : registered ? 'Block' : 'Allow'}
                         </Button>
                     </Stack>