S⚠️ ◾ ✨ Jira preset MCP server with guided domain (#769)

* Initial plan

* feat: add Jira preset MCP server with guided domain input

Co-authored-by: yaqi-lyu <121055451+yaqi-lyu@users.noreply.github.com>

* update mcp domains

* refactor connection

* remove unncessary changes

* fix lint error

* fix copilot feedback

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: yaqi-lyu <121055451+yaqi-lyu@users.noreply.github.com>
Co-authored-by: Willow Lyu <iqay_lyu@hotmail.com>

Author: Copilot

src/ui/src/components/settings/mcp/McpServerManager.tsx

@@ -16,6 +16,7 @@ import {
 } from "../../ui/alert-dialog";
 import { McpAzureDevOpsCard } from "./devops/mcp-devops-card";
 import { McpGitHubCard } from "./github/mcp-github-card";
+import { McpJiraCard } from "./jira/mcp-jira-card";
 import type { MCPServerConfig } from "./McpServerForm";
 import { McpWhitelistDialog } from "./McpWhitelistDialog";
 import { McpCard } from "./mcp-card";
@@ -246,9 +247,13 @@ export function McpSettingsPanel({
   const azureDevOps: MCPServerConfig | undefined = sortedServers.find(
     (s) => s.id === McpAzureDevOpsCard.Id,
   );
+  const jira: MCPServerConfig | undefined = sortedServers.find((s) => s.id === McpJiraCard.Id);
 
   const restServers: MCPServerConfig[] = sortedServers.filter(
-    (server) => server.id !== McpGitHubCard.Id && server.id !== McpAzureDevOpsCard.Id,
+    (server) =>
+      server.id !== McpGitHubCard.Id &&
+      server.id !== McpAzureDevOpsCard.Id &&
+      server.id !== McpJiraCard.Id,
   );
 
   function getHealthStatus(serverId?: string | null): HealthStatusInfo | null {
@@ -274,6 +279,13 @@ export function McpSettingsPanel({
           onTools={() => azureDevOps && openWhitelistDialog(azureDevOps)}
           viewMode={viewMode}
         />
+        <McpJiraCard
+          config={jira}
+          onChange={() => loadServers({ serverIdToRefresh: McpJiraCard.Id })}
+          healthInfo={getHealthStatus(McpJiraCard.Id)}
+          onTools={() => jira && openWhitelistDialog(jira)}
+          viewMode={viewMode}
+        />
         {restServers.map((server) => (
           <>
             <McpCard
@@ -304,7 +316,7 @@ export function McpSettingsPanel({
               setShowAddCustomMcpForm(true);
             }}
           >
-            + Add custom MCP
+            + Add custom MCP server
           </div>
         </div>
       )}

src/ui/src/components/settings/mcp/devops/mcp-devops-card.tsx

@@ -1,4 +1,4 @@
-import { ipcClient } from "@/services/ipc-client";
+import { useMcpCardActions } from "@/hooks/useMcpCardActions";
 import type { HealthStatusInfo } from "../../../../../../backend/types";
 import type { MCPServerConfig } from "../McpServerForm";
 import { McpCard } from "../mcp-card";
@@ -36,23 +36,11 @@ export function McpAzureDevOpsCard({
     enabled: false,
   };
 
-  async function toggleSettings(status: boolean): Promise<void> {
-    const updatedConfig = { ...configLocal, enabled: status };
-    await ipcClient.mcp.updateServerAsync(McpAzureDevOpsCard.Id, updatedConfig);
-
-    if (onChange) {
-      onChange(updatedConfig);
-    }
-  }
-
-  function handleOnConnect(): void {
-    toggleSettings(true);
-  }
-
-  async function handleOnDisconnect(): Promise<void> {
-    await ipcClient.mcp.clearTokensAsync(McpAzureDevOpsCard.Id);
-    await toggleSettings(false);
-  }
+  const { handleOnConnect, handleOnDisconnect } = useMcpCardActions(
+    McpAzureDevOpsCard.Id,
+    configLocal,
+    onChange,
+  );
 
   return (
     <McpCard

src/ui/src/components/settings/mcp/github/mcp-github-card.tsx

@@ -1,4 +1,4 @@
-import { ipcClient } from "@/services/ipc-client";
+import { useMcpCardActions } from "@/hooks/useMcpCardActions";
 import type { HealthStatusInfo } from "../../../../../../backend/types";
 import type { MCPServerConfig } from "../McpServerForm";
 import { McpCard } from "../mcp-card";
@@ -32,23 +32,11 @@ export function McpGitHubCard({
     enabled: false,
   };
 
-  async function toggleSettings(status: boolean): Promise<void> {
-    const updatedConfig = { ...configLocal, enabled: status };
-    await ipcClient.mcp.updateServerAsync(McpGitHubCard.Id, updatedConfig);
-
-    if (onChange) {
-      onChange(updatedConfig);
-    }
-  }
-
-  function handleOnConnect(): void {
-    toggleSettings(true);
-  }
-
-  async function handleOnDisconnect(): Promise<void> {
-    await ipcClient.mcp.clearTokensAsync(McpGitHubCard.Id);
-    await toggleSettings(false);
-  }
+  const { handleOnConnect, handleOnDisconnect } = useMcpCardActions(
+    McpGitHubCard.Id,
+    configLocal,
+    onChange,
+  );
 
   return (
     <McpCard

src/ui/src/components/settings/mcp/jira/atlassian.tsx

@@ -1,13 +1,13 @@
 import type { SVGProps } from "react";
 
 // Icon from https://svgl.app/
-const Atlassian = (props: SVGProps<SVGSVGElement>) => (
+export const AtlassianIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 256">
     <title>Atlassian logo</title>
     <defs>
       <linearGradient x1="99.7%" y1="15.8%" x2="39.8%" y2="97.4%" id="atlassian__a">
-        <stop stop-color="#0052CC" offset="0%" />
-        <stop stop-color="#2684FF" offset="92.3%" />
+        <stop stopColor="#0052CC" offset="0%" />
+        <stop stopColor="#2684FF" offset="92.3%" />
       </linearGradient>
     </defs>
     <path
@@ -20,5 +20,3 @@ const Atlassian = (props: SVGProps<SVGSVGElement>) => (
     />
   </svg>
 );
-
-export { Atlassian };

src/ui/src/components/settings/mcp/jira/mcp-jira-card.tsx

@@ -0,0 +1,115 @@
+import { Check, Copy, ExternalLink, X } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { useClipboard } from "@/hooks/useClipboard";
+import { useMcpCardActions } from "@/hooks/useMcpCardActions";
+import type { HealthStatusInfo } from "@/types";
+import type { MCPServerConfig } from "../McpServerForm";
+import { McpCard } from "../mcp-card";
+import { AtlassianIcon } from "./atlassian";
+
+const YAKSHAVER_DOMAIN = "https://api.yakshaver.ai/**";
+const DISMISS_KEY = "jira-setup-dismissed";
+
+interface McpJiraCardProps {
+  config?: MCPServerConfig;
+  onChange?: (config: MCPServerConfig) => void;
+  healthInfo?: HealthStatusInfo | null;
+  onTools?: () => void;
+  viewMode: "compact" | "detailed";
+}
+
+McpJiraCard.Name = "Jira";
+McpJiraCard.Id = "0f03a50c-219b-46e9-9ce3-54f925c44479";
+
+export function McpJiraCard({ config, onChange, healthInfo, onTools, viewMode }: McpJiraCardProps) {
+  const configLocal = config ?? {
+    id: McpJiraCard.Id,
+    name: McpJiraCard.Name,
+    transport: "streamableHttp",
+    url: "https://mcp.atlassian.com/v1/mcp",
+    description: "Atlassian MCP Server",
+    toolWhitelist: [],
+    enabled: false,
+  };
+
+  const [dismissed, setDismissed] = useState(() => localStorage.getItem(DISMISS_KEY) === "true");
+  const { copyToClipboard, copied } = useClipboard();
+
+  const { handleOnConnect, handleOnDisconnect } = useMcpCardActions(
+    McpJiraCard.Id,
+    configLocal,
+    onChange,
+  );
+
+  async function handleCopyDomain(): Promise<void> {
+    await copyToClipboard(YAKSHAVER_DOMAIN, "Domain copied to clipboard");
+  }
+
+  function handleDismiss(): void {
+    localStorage.setItem(DISMISS_KEY, "true");
+    setDismissed(true);
+  }
+
+  const prerequisiteSection =
+    !configLocal.enabled && !dismissed ? (
+      <div className="mt-4">
+        <div className="flex flex-col gap-3 rounded-md border border-white/10 bg-white/5 p-3">
+          <div className="flex items-start justify-between gap-2">
+            <p className="text-sm font-semibold text-white/90">One-time setup before connecting</p>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-5 w-5 p-0 shrink-0 text-white/40 hover:text-white/70"
+              onClick={handleDismiss}
+              title="Dismiss"
+            >
+              <X className="size-3.5" />
+            </Button>
+          </div>
+          <p className="text-sm leading-relaxed text-muted-foreground">
+            Trust YakShaver in your{" "}
+            <a
+              href="https://admin.atlassian.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-0.5 text-blue-400 hover:text-blue-300"
+            >
+              Atlassian admin <ExternalLink className="size-3" />
+            </a>
+            . Go to{" "}
+            <span className="text-white/70">
+              Apps &rsaquo; AI Settings &rsaquo; Rovo MCP server &rsaquo; Your domains
+            </span>{" "}
+            and add:
+          </p>
+          <div className="flex items-center gap-2 rounded bg-black/20 px-2 py-1.5">
+            <code className="text-xs text-blue-300 flex-1">{YAKSHAVER_DOMAIN}</code>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 px-2 shrink-0"
+              onClick={handleCopyDomain}
+              title="Copy domain"
+            >
+              {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
+            </Button>
+          </div>
+        </div>
+      </div>
+    ) : null;
+
+  return (
+    <McpCard
+      isReadOnly
+      icon={<AtlassianIcon className="size-8" />}
+      config={configLocal}
+      healthInfo={healthInfo}
+      onConnect={handleOnConnect}
+      onDisconnect={handleOnDisconnect}
+      onTools={onTools}
+      viewMode={viewMode}
+      extraContent={prerequisiteSection}
+    />
+  );
+}

src/ui/src/components/settings/mcp/mcp-card.tsx

@@ -17,6 +17,7 @@ interface McpCardProps {
   onUpdate?: (data: MCPServerConfig) => Promise<void>;
   onTools?: () => void;
   viewMode: "compact" | "detailed";
+  extraContent?: React.ReactNode;
 }
 
 export function McpCard({
@@ -31,6 +32,7 @@ export function McpCard({
   onTools,
   healthInfo = null,
   viewMode = "compact",
+  extraContent,
 }: McpCardProps) {
   const [showSettings, setShowSettings] = useState(false);
   return (
@@ -124,6 +126,7 @@ export function McpCard({
             </div>
           </>
         )}
+        {extraContent}
       </div>
     </>
   );

src/ui/src/hooks/useClipboard.ts

@@ -1,14 +1,31 @@
+import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
-export const useClipboard = () => {
-  const copyToClipboard = async (text: string | null) => {
-    try {
-      await navigator.clipboard.writeText(text || "");
-      toast.success("Copied to clipboard");
-    } catch {
-      toast.error("Failed to copy");
-    }
-  };
-
-  return { copyToClipboard };
+export const useClipboard = (duration = 2000) => {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const copyToClipboard = useCallback(
+    async (text: string | null, message = "Copied to clipboard") => {
+      try {
+        await navigator.clipboard.writeText(text ?? "");
+        setCopied(true);
+        toast.success(message);
+
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setCopied(false), duration);
+      } catch {
+        toast.error("Failed to copy");
+      }
+    },
+    [duration],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return { copied, copyToClipboard };
 };

src/ui/src/hooks/useMcpCardActions.ts

@@ -0,0 +1,33 @@
+import { toast } from "sonner";
+import type { MCPServerConfig } from "@/components/settings/mcp/McpServerForm";
+import { ipcClient } from "@/services/ipc-client";
+import { formatErrorMessage } from "@/utils";
+
+export function useMcpCardActions(
+  serverId: string,
+  configLocal: MCPServerConfig,
+  onChange?: (config: MCPServerConfig) => void,
+) {
+  async function toggleSettings(status: boolean): Promise<void> {
+    const updatedConfig = { ...configLocal, enabled: status };
+    await ipcClient.mcp.updateServerAsync(serverId, updatedConfig);
+    if (onChange) {
+      onChange(updatedConfig);
+    }
+  }
+
+  async function handleOnConnect(): Promise<void> {
+    try {
+      await toggleSettings(true);
+    } catch (error) {
+      toast.error(`Failed to connect: ${formatErrorMessage(error)}`);
+    }
+  }
+
+  async function handleOnDisconnect(): Promise<void> {
+    await ipcClient.mcp.clearTokensAsync(serverId);
+    await toggleSettings(false);
+  }
+
+  return { toggleSettings, handleOnConnect, handleOnDisconnect };
+}