feat(knowledge): improve MCP import and tool selector dialogs

- Move Import button to DialogActions for consistency with other dialogs
- Remove oversized Search button styling
- Display tool name instead of provider type in dialog title
- Replace Cancel with Back button that navigates to tool selector
- Add provider-specific icons (Notion, GitHub, Atlassian) to tool list
- Capitalize provider type names in tool selector

Author: EmanueleDeRossi1

apps/frontend/src/app/(protected)/knowledge/components/MCPImportDialog.tsx

@@ -27,6 +27,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import SearchIcon from '@mui/icons-material/Search';
 import SaveIcon from '@mui/icons-material/Save';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { ApiClientFactory } from '@/utils/api-client/client-factory';
 import { useNotifications } from '@/components/common/NotificationContext';
 import { MCPItem } from '@/utils/api-client/services-client';
@@ -36,6 +37,7 @@ import { UUID } from 'crypto';
 interface MCPImportDialogProps {
   open: boolean;
   onClose: () => void;
+  onBack?: () => void;
   onSuccess?: () => void;
   sessionToken: string;
   tool?: Tool | null;
@@ -44,6 +46,7 @@ interface MCPImportDialogProps {
 export default function MCPImportDialog({
   open,
   onClose,
+  onBack,
   onSuccess,
   sessionToken,
   tool,
@@ -233,6 +236,20 @@ export default function MCPImportDialog({
     }
   };
 
+  const handleBack = () => {
+    if (!searching && !importing) {
+      setSearchQuery('');
+      setSearchResults([]);
+      setSelectedIds(new Set());
+      setError(null);
+      if (onBack) {
+        onBack();
+      } else {
+        onClose();
+      }
+    }
+  };
+
   const handleKeyPress = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !searching) {
       handleSearch();
@@ -256,11 +273,7 @@ export default function MCPImportDialog({
           <Box display="flex" alignItems="center" gap={1}>
             <SearchIcon />
             <Typography variant="h6">
-              Import from{' '}
-              {tool?.tool_provider_type?.type_value
-                ? tool.tool_provider_type.type_value.charAt(0).toUpperCase() +
-                  tool.tool_provider_type.type_value.slice(1)
-                : 'MCP'}
+              Import from {tool?.name || 'MCP'}
             </Typography>
           </Box>
           <IconButton onClick={handleClose} disabled={isProcessing}>
@@ -303,7 +316,6 @@ export default function MCPImportDialog({
                 startIcon={
                   searching ? <CircularProgress size={20} /> : <SearchIcon />
                 }
-                sx={{ minWidth: '120px' }}
               >
                 {searching ? 'Searching...' : 'Search'}
               </Button>
@@ -399,29 +411,33 @@ export default function MCPImportDialog({
                   ))}
                 </List>
               </Paper>
-              <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end' }}>
-                <Button
-                  variant="contained"
-                  onClick={handleImportAsSources}
-                  disabled={selectedIds.size === 0 || importing}
-                  startIcon={
-                    importing ? <CircularProgress size={20} /> : <SaveIcon />
-                  }
-                >
-                  {importing
-                    ? 'Importing...'
-                    : `Import ${selectedIds.size} as Source${selectedIds.size !== 1 ? 's' : ''}`}
-                </Button>
-              </Box>
             </Box>
           )}
         </Box>
       </DialogContent>
 
-      <DialogActions sx={{ px: 3, pb: 2 }}>
-        <Button onClick={handleClose} disabled={isProcessing}>
-          Cancel
+      <DialogActions sx={{ p: 3, pt: 1, justifyContent: 'space-between' }}>
+        <Button
+          onClick={handleBack}
+          disabled={isProcessing}
+          startIcon={<ArrowBackIcon />}
+        >
+          Back
         </Button>
+        {searchResults.length > 0 && (
+          <Button
+            variant="contained"
+            onClick={handleImportAsSources}
+            disabled={selectedIds.size === 0 || importing}
+            startIcon={
+              importing ? <CircularProgress size={20} /> : <SaveIcon />
+            }
+          >
+            {importing
+              ? 'Importing...'
+              : `Import ${selectedIds.size} as Source${selectedIds.size !== 1 ? 's' : ''}`}
+          </Button>
+        )}
       </DialogActions>
     </Dialog>
   );

apps/frontend/src/app/(protected)/knowledge/components/MCPToolSelectorDialog.tsx

@@ -21,8 +21,10 @@ import {
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import TerminalIcon from '@mui/icons-material/Terminal';
+import SmartToyIcon from '@mui/icons-material/SmartToy';
 import { ApiClientFactory } from '@/utils/api-client/client-factory';
 import { Tool } from '@/utils/api-client/interfaces/tool';
+import { MCP_PROVIDER_ICONS } from '@/config/mcp-providers';
 
 interface MCPToolSelectorDialogProps {
   open: boolean;
@@ -111,6 +113,15 @@ export default function MCPToolSelectorDialog({
     }
   };
 
+  const getToolIcon = (tool: Tool) => {
+    const providerName = tool.tool_provider_type?.type_value || 'custom';
+    const providerIcon = MCP_PROVIDER_ICONS[providerName];
+    if (providerIcon) {
+      return providerIcon;
+    }
+    return <SmartToyIcon />;
+  };
+
   return (
     <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
       <DialogTitle>
@@ -154,14 +165,16 @@ export default function MCPToolSelectorDialog({
                   {index > 0 && <Divider />}
                   <ListItem disablePadding>
                     <ListItemButton onClick={() => handleSelectTool(tool)}>
-                      <ListItemIcon>
-                        <TerminalIcon />
-                      </ListItemIcon>
+                      <ListItemIcon>{getToolIcon(tool)}</ListItemIcon>
                       <ListItemText
                         primary={tool.name}
                         secondary={
-                          tool.tool_provider_type?.type_value ||
-                          'Unknown provider'
+                          tool.tool_provider_type?.type_value
+                            ? tool.tool_provider_type.type_value
+                                .charAt(0)
+                                .toUpperCase() +
+                              tool.tool_provider_type.type_value.slice(1)
+                            : 'Unknown provider'
                         }
                         primaryTypographyProps={{ fontWeight: 500 }}
                       />

apps/frontend/src/app/(protected)/knowledge/components/SourcesGrid.tsx

@@ -582,6 +582,10 @@ export default function SourcesGrid({
           setMcpImportDialogOpen(false);
           setSelectedMCPTool(null);
         }}
+        onBack={() => {
+          setMcpImportDialogOpen(false);
+          setMcpToolSelectorOpen(true);
+        }}
         onSuccess={() => {
           fetchSources();
           setMcpImportDialogOpen(false);