Add UI Blocks to Context Panel

src/components/shared/ContextPanel/Blocks/ActionBlock.tsx

@@ -0,0 +1,110 @@
+import { isValidElement, type ReactNode, useState } from "react";
+
+import { Icon, type IconName } from "@/components/ui/icon";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Heading } from "@/components/ui/typography";
+
+import TooltipButton from "../../Buttons/TooltipButton";
+import { ConfirmationDialog } from "../../Dialogs";
+
+export type Action = {
+  label: string;
+  destructive?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+  confirmation?: string;
+  onClick: () => void;
+  className?: string;
+} & (
+  | { icon: IconName; content?: never }
+  | { content: ReactNode; icon?: never }
+);
+
+// Temporary: ReactNode included for backward compatibility with some existing buttons. In the long-term we should strive for only Action types.
+type ActionOrReactNode = Action | ReactNode;
+
+interface ActionBlockProps {
+  title?: string;
+  actions: ActionOrReactNode[];
+  className?: string;
+}
+
+export const ActionBlock = ({
+  title,
+  actions,
+  className,
+}: ActionBlockProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [dialogAction, setDialogAction] = useState<Action | null>(null);
+
+  const openConfirmationDialog = (action: Action) => {
+    return () => {
+      setDialogAction(action);
+      setIsOpen(true);
+    };
+  };
+
+  const handleConfirm = () => {
+    setIsOpen(false);
+    dialogAction?.onClick();
+    setDialogAction(null);
+  };
+
+  const handleCancel = () => {
+    setIsOpen(false);
+    setDialogAction(null);
+  };
+
+  return (
+    <>
+      <BlockStack className={className}>
+        {title && <Heading level={3}>{title}</Heading>}
+        <InlineStack gap="2">
+          {actions.map((action, index) => {
+            if (!action || typeof action !== "object" || !("label" in action)) {
+              const key =
+                isValidElement(action) && action.key != null
+                  ? `action-node-${String(action.key)}`
+                  : `action-node-${index}`;
+              return <span key={key}>{action}</span>;
+            }
+
+            if (action.hidden) {
+              return null;
+            }
+
+            return (
+              <TooltipButton
+                key={action.label}
+                data-testid={`action-${action.label}`}
+                variant={action.destructive ? "destructive" : "outline"}
+                tooltip={action.label}
+                onClick={
+                  action.confirmation
+                    ? openConfirmationDialog(action)
+                    : action.onClick
+                }
+                disabled={action.disabled}
+                className={action.className}
+              >
+                {action.content === undefined && action.icon ? (
+                  <Icon name={action.icon} />
+                ) : (
+                  action.content
+                )}
+              </TooltipButton>
+            );
+          })}
+        </InlineStack>
+      </BlockStack>
+
+      <ConfirmationDialog
+        isOpen={isOpen}
+        title={dialogAction?.label}
+        description={dialogAction?.confirmation}
+        onConfirm={handleConfirm}
+        onCancel={handleCancel}
+      />
+    </>
+  );
+};

src/components/shared/ContextPanel/Blocks/Attribute.tsx

@@ -0,0 +1,78 @@
+import { InlineStack } from "@/components/ui/layout";
+import { Link } from "@/components/ui/link";
+import { Paragraph } from "@/components/ui/typography";
+import { cn } from "@/lib/utils";
+
+import { CopyText } from "../../CopyText/CopyText";
+
+export interface AttributeProps {
+  label?: string;
+  value?: string | { href: string; text: string };
+  critical?: boolean;
+  copyable?: boolean;
+}
+
+export const Attribute = ({
+  label,
+  value,
+  critical,
+  copyable,
+}: AttributeProps) => {
+  if (!value) {
+    return null;
+  }
+
+  return (
+    <InlineStack gap="2" blockAlign="center" wrap="nowrap">
+      {label && (
+        <Paragraph
+          size="xs"
+          tone={critical ? "critical" : "inherit"}
+          className="truncate"
+          title={label}
+        >
+          {label}:
+        </Paragraph>
+      )}
+
+      <div className="min-w-16 flex-1 overflow-hidden">
+        {isLink(value) ? (
+          <Link
+            href={value.href}
+            size="xs"
+            variant="classic"
+            external
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {value.text}
+          </Link>
+        ) : copyable ? (
+          <CopyText
+            className={cn(
+              "text-xs truncate",
+              critical ? "text-destructive" : "text-muted-foreground",
+            )}
+          >
+            {value}
+          </CopyText>
+        ) : (
+          <Paragraph
+            size="xs"
+            tone={critical ? "critical" : "subdued"}
+            className="truncate"
+            title={value}
+          >
+            {value}
+          </Paragraph>
+        )}
+      </div>
+    </InlineStack>
+  );
+};
+
+const isLink = (
+  val: string | { href: string; text: string },
+): val is { href: string; text: string } => {
+  return typeof val === "object" && val !== null && "href" in val;
+};

src/components/shared/ContextPanel/Blocks/ContentBlock.test.tsx

@@ -0,0 +1,172 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+
+import { ContentBlock } from "./ContentBlock";
+
+describe("<ContentBlock />", () => {
+  test("renders with title and children", () => {
+    render(
+      <ContentBlock title="Test Title">
+        <div>Test Content</div>
+      </ContentBlock>,
+    );
+
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
+    expect(screen.getByText("Test Content")).toBeInTheDocument();
+  });
+
+  test("renders without title", () => {
+    render(
+      <ContentBlock>
+        <div>Test Content</div>
+      </ContentBlock>,
+    );
+
+    expect(screen.queryByRole("heading")).not.toBeInTheDocument();
+    expect(screen.getByText("Test Content")).toBeInTheDocument();
+  });
+
+  test("returns null when children is not provided", () => {
+    const { container } = render(<ContentBlock title="No Content" />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  test("applies custom className to container", () => {
+    const { container } = render(
+      <ContentBlock title="Test" className="custom-class">
+        <div>Content</div>
+      </ContentBlock>,
+    );
+
+    const blockStack = container.querySelector(".custom-class");
+    expect(blockStack).toBeInTheDocument();
+  });
+
+  test("renders title as Heading component with level 3", () => {
+    render(
+      <ContentBlock title="My Heading">
+        <div>Content</div>
+      </ContentBlock>,
+    );
+
+    const heading = screen.getByRole("heading", {
+      level: 3,
+      name: "My Heading",
+    });
+    expect(heading).toBeInTheDocument();
+  });
+
+  test("renders multiple children", () => {
+    render(
+      <ContentBlock title="Multiple Children">
+        <div>First Child</div>
+        <div>Second Child</div>
+        <span>Third Child</span>
+      </ContentBlock>,
+    );
+
+    expect(screen.getByText("First Child")).toBeInTheDocument();
+    expect(screen.getByText("Second Child")).toBeInTheDocument();
+    expect(screen.getByText("Third Child")).toBeInTheDocument();
+  });
+
+  test("renders with complex nested content", () => {
+    render(
+      <ContentBlock title="Complex Content">
+        <div>
+          <p>Paragraph 1</p>
+          <ul>
+            <li>Item 1</li>
+            <li>Item 2</li>
+          </ul>
+        </div>
+      </ContentBlock>,
+    );
+
+    expect(screen.getByText("Paragraph 1")).toBeInTheDocument();
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.getByText("Item 2")).toBeInTheDocument();
+  });
+
+  test("handles undefined children gracefully", () => {
+    const { container } = render(
+      <ContentBlock title="Null Children">{undefined}</ContentBlock>,
+    );
+
+    // Should return null since children are falsy
+    expect(container.firstChild).toBeNull();
+  });
+
+  test("renders with ReactNode as children", () => {
+    const CustomComponent = () => <div>Custom Component Content</div>;
+
+    render(
+      <ContentBlock title="React Component">
+        <CustomComponent />
+      </ContentBlock>,
+    );
+
+    expect(screen.getByText("Custom Component Content")).toBeInTheDocument();
+  });
+
+  test("renders with both title and className", () => {
+    const { container } = render(
+      <ContentBlock title="Styled Block" className="my-custom-style">
+        <div>Styled Content</div>
+      </ContentBlock>,
+    );
+
+    expect(screen.getByText("Styled Block")).toBeInTheDocument();
+    expect(container.querySelector(".my-custom-style")).toBeInTheDocument();
+  });
+
+  describe("non-collapsible mode", () => {
+    test("does not show toggle button when collapsible is false", () => {
+      render(
+        <ContentBlock title="Not Collapsible" collapsible={false}>
+          <div>Content</div>
+        </ContentBlock>,
+      );
+
+      expect(screen.queryByRole("button")).not.toBeInTheDocument();
+      expect(screen.getByText("Content")).toBeInTheDocument();
+    });
+
+    test("does not show toggle button when collapsible is not provided", () => {
+      render(
+        <ContentBlock title="Default">
+          <div>Content</div>
+        </ContentBlock>,
+      );
+
+      expect(screen.queryByRole("button")).not.toBeInTheDocument();
+      expect(screen.getByText("Content")).toBeInTheDocument();
+    });
+  });
+
+  describe("collapsible mode", () => {
+    test("shows toggle button when collapsible is true", () => {
+      render(
+        <ContentBlock title="Collapsible" collapsible={true}>
+          <div>Content</div>
+        </ContentBlock>,
+      );
+
+      const button = screen.getByRole("button", { name: /toggle/i });
+      expect(button).toBeInTheDocument();
+    });
+
+    test("starts open when defaultOpen is true", () => {
+      render(
+        <ContentBlock title="Collapsible" collapsible={true} defaultOpen={true}>
+          <div>Visible Content</div>
+        </ContentBlock>,
+      );
+
+      const content = screen.getByText("Visible Content");
+      expect(content).toBeVisible();
+      expect(content.parentElement).toHaveAttribute("data-state", "open");
+    });
+  });
+});