Merge pull request #163 from docker/rework-mcp-dialog

Make tools list more visible in MCP dialog

Author: dgageot

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

@@ -1,6 +1,6 @@
 import { createDockerDesktopClient } from '@docker/extension-api-client';
 import { ExecResult } from '@docker/extension-api-client-types/dist/v0';
-import { FolderOpenRounded } from '@mui/icons-material';
+import FolderOpenRounded from '@mui/icons-material/FolderOpenRounded';
 import { Alert, AlertTitle, Badge, Box, Button, Checkbox, CircularProgress, Dialog, DialogContent, DialogTitle, FormControlLabel, FormGroup, OutlinedInput, Stack, Switch, Tab, Tabs, Typography } from '@mui/material';
 import React, { Suspense, useEffect, useState } from 'react';
 import { CATALOG_LAYOUT_SX } from '../Constants';

src/extension/ui/src/components/tabs/YourClients.tsx

@@ -1,14 +1,15 @@
-import { Chip, ListItem, ListItemText, List, Button, Tooltip, CircularProgress, Typography, Link, Divider, AccordionSummary, Accordion, AccordionDetails, Stack } from "@mui/material";
-import { Box } from "@mui/material";
-import { DOCKER_MCP_COMMAND, CATALOG_LAYOUT_SX } from "../../Constants";
-import { LinkOff, LinkRounded, SaveOutlined } from "@mui/icons-material";
-import { v1 } from "@docker/extension-api-client-types";
-import ClaudeIcon from '../../assets/claude-ai-icon.svg'
-import GordonIcon from '../../assets/gordon-icon.png'
-import CursorIcon from '../../assets/cursor.svg'
-import ChatGPTIcon from '../../assets/chatgpt.svg'
-import { useState } from "react";
 import { createDockerDesktopClient } from '@docker/extension-api-client';
+import LinkOff from '@mui/icons-material/LinkOff';
+import LinkRounded from '@mui/icons-material/LinkRounded';
+import SaveOutlined from '@mui/icons-material/SaveOutlined';
+import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Chip, CircularProgress, Divider, Link, List, ListItem, ListItemText, Stack, Tooltip, Typography } from '@mui/material';
+import { useState } from 'react';
+
+import ChatGPTIcon from '../../assets/chatgpt.svg';
+import ClaudeIcon from '../../assets/claude-ai-icon.svg';
+import CursorIcon from '../../assets/cursor.svg';
+import GordonIcon from '../../assets/gordon-icon.png';
+import { CATALOG_LAYOUT_SX, DOCKER_MCP_COMMAND } from "../../Constants";
 
 // Initialize the Docker Desktop client
 const client = createDockerDesktopClient();

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

@@ -1,12 +1,13 @@
-import { Button, CircularProgress, IconButton, TextField, Typography } from "@mui/material";
-import { Alert, Stack } from "@mui/material";
-import { CatalogItemRichened } from "../../types/catalog";
-import { useEffect, useState, useCallback, useMemo } from "react";
-import * as JsonSchema from "json-schema-library";
-import { getTemplateForItem, useConfig } from "../../queries/useConfig";
-import { buildObjectFromFlattenedObject, deepFlattenObject, deepSet } from "../../MergeDeep";
-import { CheckOutlined, CloseOutlined } from "@mui/icons-material";
 import { v1 } from "@docker/extension-api-client-types";
+import CheckOutlined from "@mui/icons-material/CheckOutlined";
+import CloseOutlined from "@mui/icons-material/CloseOutlined";
+import { Alert, CircularProgress, IconButton, Stack, TextField, Typography } from "@mui/material";
+import * as JsonSchema from "json-schema-library";
+import { useEffect, useMemo, useState } from "react";
+
+import { buildObjectFromFlattenedObject, deepFlattenObject } from "../../MergeDeep";
+import { useConfig } from "../../queries/useConfig";
+import { CatalogItemRichened } from "../../types/catalog";
 
 JsonSchema.settings.GET_TEMPLATE_RECURSION_LIMIT = 1000;
 JsonSchema.settings.templateDefaultOptions.addOptionalProps = true;

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

@@ -1,5 +1,6 @@
 import { v1 } from '@docker/extension-api-client-types';
-import { LockReset, Save } from '@mui/icons-material';
+import LockReset from '@mui/icons-material/LockReset';
+import Save from '@mui/icons-material/Save';
 import {
   Card,
   CardActionArea,