Merge pull request #5548 from IBM/5101-group-prompts

fix(ui-rewrite): group prompts by MCP server on the Prompts page

Author: marekdano

client/e2e/resources.spec.ts

@@ -425,16 +425,18 @@ test.describe("Resources page", () => {
 
     test("card group disappears from grid when its only resource is deleted", async ({ page }) => {
       const SOLO = makeResource("lone_resource", "lone-gateway");
+      let resourceDeleted = false;
 
       await page.route("**/resources?*", async (route) => {
         await route.fulfill({
           status: 200,
           contentType: "application/json",
-          body: JSON.stringify([SOLO, RESOURCE_A1]),
+          body: JSON.stringify(resourceDeleted ? [RESOURCE_A1] : [SOLO, RESOURCE_A1]),
         });
       });
       await page.route(`**/resources/${SOLO.id}`, async (route) => {
         if (route.request().method() === "DELETE") {
+          resourceDeleted = true;
           await route.fulfill({ status: 204 });
         } else {
           await route.fallback();

client/e2e/tools.spec.ts

@@ -474,16 +474,18 @@ test.describe("Tools page", () => {
 
   test("card group disappears from grid when its only tool is deleted", async ({ page }) => {
     const SOLO = makeTool("lone_tool", "lone-gateway");
+    let toolDeleted = false;
 
     await page.route("**/tools?*", async (route) => {
       await route.fulfill({
         status: 200,
         contentType: "application/json",
-        body: JSON.stringify([SOLO, TOOL_A1]),
+        body: JSON.stringify(toolDeleted ? [TOOL_A1] : [SOLO, TOOL_A1]),
       });
     });
     await page.route(`**/tools/${SOLO.id}`, async (route) => {
       if (route.request().method() === "DELETE") {
+        toolDeleted = true;
         await route.fulfill({ status: 204 });
       } else {
         await route.fallback();

client/src/components/ui/card-tag.test.tsx

@@ -0,0 +1,31 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { CardTag } from "./card-tag";
+
+describe("CardTag", () => {
+  it("renders a plain chip with no tooltip trigger by default", () => {
+    render(<CardTag>label</CardTag>);
+
+    const tag = screen.getByText("label");
+    expect(tag).toBeInTheDocument();
+    // No tooltip => not wrapped in a focusable trigger.
+    expect(tag.closest("button")).toBeNull();
+  });
+
+  it("applies the neutral variant classes", () => {
+    render(<CardTag variant="neutral">mime</CardTag>);
+
+    expect(screen.getByText("mime")).toHaveClass("bg-neutral-100");
+  });
+
+  it("exposes an accessible tooltip when tooltip text is provided", async () => {
+    render(<CardTag tooltip="More info">chip</CardTag>);
+
+    const trigger = screen.getByText("chip").closest("button");
+    expect(trigger).not.toBeNull();
+
+    // Radix opens the tooltip on focus, giving keyboard users the hint.
+    trigger!.focus();
+    expect(await screen.findByRole("tooltip")).toHaveTextContent("More info");
+  });
+});

client/src/components/ui/card-tag.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+const cardTagVariants = cva(
+  "inline-flex items-center rounded px-1.5 py-1 text-[10px] font-medium leading-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-tool-badge-bg text-white",
+        neutral: "bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-white",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface CardTagProps
+  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof cardTagVariants> {
+  /** Optional text shown in an accessible tooltip on hover/focus. */
+  tooltip?: string | null;
+}
+
+/**
+ * A compact tag chip used inside the tool/resource/prompt cards. Matches the
+ * Figma card-tag style (a small squared chip, not the pill-shaped `Badge`).
+ * When `tooltip` is provided the chip becomes an accessible tooltip trigger, so
+ * the hint works for keyboard and touch users instead of relying on native
+ * `title`.
+ */
+export function CardTag({ className, variant, tooltip, children, ...props }: CardTagProps) {
+  const tag = (
+    <span className={cn(cardTagVariants({ variant }), className)} {...props}>
+      {children}
+    </span>
+  );
+
+  if (!tooltip) {
+    return tag;
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger className="rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+          {tag}
+        </TooltipTrigger>
+        <TooltipContent>{tooltip}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export { cardTagVariants };

client/src/i18n/locales/en-US/prompts.json

@@ -4,6 +4,8 @@
   "prompts.error.loading": "Error loading prompts",
   "prompts.add.title": "Add prompts",
   "prompts.add.description": "Connect a MCP server to load prompts automatically, or build a reusable template with named arguments.",
+  "prompts.restPromptsGroup": "REST prompts",
   "prompts.card.moreOptionsFor": "More options for {name}",
-  "prompts.card.viewDetails": "View details"
+  "prompts.card.viewDetails": "View details",
+  "prompts.card.morePromptsTitle": "{count, plural, one {# more prompt} other {# more prompts}}"
 }

client/src/i18n/locales/es-ES/prompts.json

@@ -4,6 +4,8 @@
   "prompts.error.loading": "Error al cargar los prompts",
   "prompts.add.title": "Añadir prompts",
   "prompts.add.description": "Conecte un servidor MCP para cargar prompts automáticamente, o cree una plantilla reutilizable con argumentos con nombre.",
+  "prompts.restPromptsGroup": "Prompts REST",
   "prompts.card.moreOptionsFor": "Más opciones para {name}",
-  "prompts.card.viewDetails": "Ver detalles"
+  "prompts.card.viewDetails": "Ver detalles",
+  "prompts.card.morePromptsTitle": "{count, plural, one {# prompt más} other {# prompts más}}"
 }

client/src/i18n/locales/pt-BR/prompts.json

@@ -4,6 +4,8 @@
   "prompts.error.loading": "Erro ao carregar prompts",
   "prompts.add.title": "Adicionar prompts",
   "prompts.add.description": "Conecte um servidor MCP para carregar prompts automaticamente ou crie um modelo reutilizável com argumentos nomeados.",
+  "prompts.restPromptsGroup": "Prompts REST",
   "prompts.card.moreOptionsFor": "Mais opções para {name}",
-  "prompts.card.viewDetails": "Ver detalhes"
+  "prompts.card.viewDetails": "Ver detalhes",
+  "prompts.card.morePromptsTitle": "{count, plural, one {mais # prompt} other {mais # prompts}}"
 }

client/src/pages/CreateServer.test.tsx

@@ -178,6 +178,11 @@ describe("CreateServer", () => {
       });
     });
 
+    // Wait a tick to ensure the useEffect that sets selectedComponents has run
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
     await act(async () => {
       componentMockState.capturedProps?.onSuccess({
         name: "Updated GH repo tasks",

client/src/pages/Prompts.test.tsx

@@ -62,38 +62,64 @@ describe("Prompts", () => {
     expect(screen.getByText("Loading prompts, please wait...")).toBeInTheDocument();
   });
 
-  it("renders populated prompt cards with label fallbacks, tag and argument badges, filtered descriptions, and actions", async () => {
+  it("groups prompts from the same MCP server into one card with prompt-name badges", async () => {
     const user = userEvent.setup();
     const prompts: Prompt[] = [
       createMockPrompt({
         id: "prompt-display-name",
         name: "summarize",
         displayName: "Summarize document",
         originalName: "summarize_document",
-        description: "Summarizes uploaded documents.",
-        tags: [{ id: "tag-summary", label: "summary" }],
-        arguments: [
-          { name: "topic", required: true },
-          { name: "tone", required: false },
-        ],
+        gatewayId: "gw-github",
+        gatewaySlug: "gh-repo-tasks",
       }),
       createMockPrompt({
         id: "prompt-original-name",
         name: "translate",
         displayName: "",
         originalName: "translate_text",
-        description: "None",
-        tags: [{ id: "tag-language", label: "language" }],
-        arguments: [{ name: "locale", required: true }],
+        gatewayId: "gw-github",
+        gatewaySlug: "gh-repo-tasks",
       }),
+    ];
+
+    server.use(http.get("/prompts", () => HttpResponse.json({ prompts })));
+
+    renderWithProviders(<Prompts />);
+
+    await waitFor(() => {
+      expect(screen.getByText("gh-repo-tasks")).toBeInTheDocument();
+    });
+
+    // A single group card holds both prompts as name badges.
+    const groupCard = getPromptCard("gh-repo-tasks");
+    expect(within(groupCard).getByText("Summarize document")).toBeInTheDocument();
+    expect(within(groupCard).getByText("translate_text")).toBeInTheDocument();
+
+    // Only one "More options" trigger for the whole group.
+    expect(screen.getAllByRole("button", { name: /More options for/i })).toHaveLength(1);
+
+    await user.click(screen.getByRole("button", { name: "More options for gh-repo-tasks" }));
+    expect(await screen.findByRole("menuitem", { name: "View details" })).toBeInTheDocument();
+  });
+
+  it("collapses gateway-less prompts into a single REST prompts card", async () => {
+    const prompts: Prompt[] = [
       createMockPrompt({
-        id: "prompt-name",
+        id: "prompt-local",
+        name: "doc_processor",
+        displayName: "doc-processor",
+        originalName: "doc_processor",
+        gatewayId: null,
+        gatewaySlug: null,
+      }),
+      createMockPrompt({
+        id: "prompt-fallback",
         name: "fallback_prompt",
         displayName: undefined,
         originalName: undefined,
-        description: "   ",
-        tags: [],
-        arguments: [],
+        gatewayId: null,
+        gatewaySlug: null,
       }),
     ];
 
@@ -102,25 +128,56 @@ describe("Prompts", () => {
     renderWithProviders(<Prompts />);
 
     await waitFor(() => {
-      expect(screen.getByText("Summarize document")).toBeInTheDocument();
+      expect(screen.getByText("REST prompts")).toBeInTheDocument();
     });
 
-    expect(screen.getByText("translate_text")).toBeInTheDocument();
-    expect(screen.getByText("fallback_prompt")).toBeInTheDocument();
-    expect(screen.getByText("Summarizes uploaded documents.")).toBeInTheDocument();
-    expect(screen.queryByText("None")).not.toBeInTheDocument();
+    // Both gateway-less prompts share one card, shown as name badges.
+    const restCard = getPromptCard("REST prompts");
+    expect(within(restCard).getByText("doc-processor")).toBeInTheDocument();
+    expect(within(restCard).getByText("fallback_prompt")).toBeInTheDocument();
 
-    const summarizeCard = getPromptCard("Summarize document");
-    expect(within(summarizeCard).getByText("summary")).toBeInTheDocument();
-    expect(within(summarizeCard).getByText("topic")).toBeInTheDocument();
-    expect(within(summarizeCard).getByText("tone")).toBeInTheDocument();
+    // A single "More options" trigger for the whole REST group.
+    expect(screen.getAllByRole("button", { name: /More options for/i })).toHaveLength(1);
+  });
 
-    const originalNameCard = getPromptCard("translate_text");
-    expect(within(originalNameCard).getByText("language")).toBeInTheDocument();
-    expect(within(originalNameCard).getByText("locale")).toBeInTheDocument();
+  it("truncates a large group to a +N overflow badge and uses descriptions as badge tooltips", async () => {
+    // 10 prompts in one gateway group: 8 visible + a "+2" overflow badge.
+    const prompts: Prompt[] = Array.from({ length: 10 }, (_, i) =>
+      createMockPrompt({
+        id: `prompt-${i}`,
+        name: `prompt_${i}`,
+        displayName: `Prompt ${i}`,
+        originalName: `prompt_${i}`,
+        gatewayId: "gw-bulk",
+        gatewaySlug: "bulk-gateway",
+        description: i === 0 ? "First prompt description." : "None",
+      }),
+    );
 
-    await user.click(screen.getByRole("button", { name: "More options for Summarize document" }));
-    expect(await screen.findByRole("menuitem", { name: "View details" })).toBeInTheDocument();
+    server.use(http.get("/prompts", () => HttpResponse.json({ prompts })));
+
+    renderWithProviders(<Prompts />);
+
+    await waitFor(() => {
+      expect(screen.getByText("bulk-gateway")).toBeInTheDocument();
+    });
+
+    const card = getPromptCard("bulk-gateway");
+    expect(within(card).getByText("Prompt 0")).toBeInTheDocument();
+    expect(within(card).getByText("Prompt 7")).toBeInTheDocument();
+    // 9th and 10th prompts are hidden behind the overflow badge.
+    expect(within(card).queryByText("Prompt 8")).not.toBeInTheDocument();
+    expect(within(card).getByText("+2")).toBeInTheDocument();
+
+    // A real description becomes an accessible tooltip; filtered "None" descriptions do not.
+    const describedTrigger = within(card).getByText("Prompt 0").closest("button");
+    expect(describedTrigger).not.toBeNull();
+    // Radix opens the tooltip on focus, giving keyboard users the description.
+    describedTrigger?.focus();
+    expect(await screen.findByRole("tooltip")).toHaveTextContent("First prompt description.");
+
+    // "Prompt 1" has description "None", so it renders as a plain tag with no tooltip trigger.
+    expect(within(card).getByText("Prompt 1").closest("button")).toBeNull();
   });
 
   it("renders error state when prompts fail to load", async () => {