add tooltip for server selection

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx

@@ -58,6 +58,7 @@ interface McpDeployProps {
   onAddedToServer?: () => void
   onSubmittingChange?: (submitting: boolean) => void
   onCanSaveChange?: (canSave: boolean) => void
+  onSaveDisabledReasonChange?: (reason: string | null) => void
   onActiveServerChange?: (serverId: string | null) => void
 }
 
@@ -128,6 +129,7 @@ export function McpDeploy({
   onAddedToServer,
   onSubmittingChange,
   onCanSaveChange,
+  onSaveDisabledReasonChange,
   onActiveServerChange,
 }: McpDeployProps) {
   const params = useParams()
@@ -280,10 +282,24 @@ export function McpDeploy({
     hasServerSelectionChanges ||
     (hasToolConfigurationChanges && selectedServerIdsForForm.length > 0)
 
+  // Explain the greyed Save when the tool name is valid but no server is chosen (and none is saved
+  // to remove) — the one disabled state with no inline guidance beside the field.
+  const saveDisabledReason = useMemo(() => {
+    if (!toolName.trim() || toolNameError) return null
+    if (selectedServerIdsForForm.length === 0 && selectedServerIds.length === 0) {
+      return 'Select a server to save this tool'
+    }
+    return null
+  }, [toolName, toolNameError, selectedServerIdsForForm, selectedServerIds])
+
   useEffect(() => {
     onCanSaveChange?.(hasChanges && !!toolName.trim() && !toolNameError)
   }, [hasChanges, toolName, toolNameError, onCanSaveChange])
 
+  useEffect(() => {
+    onSaveDisabledReasonChange?.(saveDisabledReason)
+  }, [saveDisabledReason, onSaveDisabledReasonChange])
+
   useEffect(() => {
     onActiveServerChange?.(selectedServerIdsForForm[0] ?? null)
   }, [selectedServerIdsForForm, onActiveServerChange])

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx

@@ -20,6 +20,7 @@ import {
   ModalTabsContent,
   ModalTabsList,
   ModalTabsTrigger,
+  Tooltip,
 } from '@/components/emcn'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { getInputFormatExample as getInputFormatExampleUtil } from '@/lib/workflows/operations/deployment-utils'
@@ -141,6 +142,7 @@ export function DeployModal({
   const [undeployTargetWorkflowId, setUndeployTargetWorkflowId] = useState<string | null>(null)
   const [mcpToolSubmitting, setMcpToolSubmitting] = useState(false)
   const [mcpToolCanSave, setMcpToolCanSave] = useState(false)
+  const [mcpToolSaveDisabledReason, setMcpToolSaveDisabledReason] = useState<string | null>(null)
   const [mcpActiveServerId, setMcpActiveServerId] = useState<string | null>(null)
   const [a2aSubmitting, setA2aSubmitting] = useState(false)
   const [a2aCanSave, setA2aCanSave] = useState(false)
@@ -673,6 +675,7 @@ export function DeployModal({
                       isLoadingDeployedState={isLoadingDeployedState}
                       onSubmittingChange={setMcpToolSubmitting}
                       onCanSaveChange={setMcpToolCanSave}
+                      onSaveDisabledReasonChange={setMcpToolSaveDisabledReason}
                       onActiveServerChange={setMcpActiveServerId}
                     />
                   )}
@@ -782,14 +785,23 @@ export function DeployModal({
                 >
                   Manage
                 </Button>
-                <Button
-                  type='button'
-                  variant='tertiary'
-                  onClick={handleMcpToolFormSubmit}
-                  disabled={mcpToolSubmitting || !mcpToolCanSave}
-                >
-                  {mcpToolSubmitting ? 'Saving...' : 'Save Tool'}
-                </Button>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <span>
+                      <Button
+                        type='button'
+                        variant='tertiary'
+                        onClick={handleMcpToolFormSubmit}
+                        disabled={mcpToolSubmitting || !mcpToolCanSave}
+                      >
+                        {mcpToolSubmitting ? 'Saving...' : 'Save Tool'}
+                      </Button>
+                    </span>
+                  </Tooltip.Trigger>
+                  {mcpToolSaveDisabledReason && (
+                    <Tooltip.Content>{mcpToolSaveDisabledReason}</Tooltip.Content>
+                  )}
+                </Tooltip.Root>
               </div>
             </ModalFooter>
           )}