@rxtx4816/cockpit-plugin-base-react 1.0.0

package/src/components/ConfirmDialog.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { ConfirmDialog } from "./ConfirmDialog";
+
+function setup(overrides: Partial<Parameters<typeof ConfirmDialog>[0]> = {}) {
+  const onConfirm = vi.fn();
+  const onClose = vi.fn();
+  render(
+    <ConfirmDialog
+      isOpen={true}
+      title="Delete item?"
+      confirmLabel="Delete"
+      onConfirm={onConfirm}
+      onClose={onClose}
+      {...overrides}
+    />,
+  );
+  return { onConfirm, onClose };
+}
+
+describe("ConfirmDialog", () => {
+  it("renders title and buttons when open", () => {
+    setup();
+    expect(screen.getByText("Delete item?")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Delete" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+  });
+
+  it("calls onConfirm when confirm button is clicked", () => {
+    const { onConfirm } = setup();
+    fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClose when cancel button is clicked", () => {
+    const { onClose } = setup();
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("uses custom cancelLabel", () => {
+    setup({ cancelLabel: "Go back" });
+    expect(screen.getByRole("button", { name: "Go back" })).toBeInTheDocument();
+  });
+
+  it("disables buttons when loading", () => {
+    setup({ loading: true });
+    expect(screen.getByRole("button", { name: /Delete/i })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeDisabled();
+  });
+
+  it("shows error alert when error prop is set", () => {
+    setup({ error: "Something went wrong" });
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+  });
+
+  it("renders body content", () => {
+    setup({ body: <p>Are you sure you want to delete this?</p> });
+    expect(screen.getByText("Are you sure you want to delete this?")).toBeInTheDocument();
+  });
+});

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,65 @@
+import {
+  Alert,
+  Button,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from "@patternfly/react-core";
+import type { ReactNode } from "react";
+
+interface Props {
+  isOpen: boolean;
+  title: string;
+  body?: ReactNode;
+  confirmLabel: string;
+  cancelLabel?: string;
+  variant?: "primary" | "danger";
+  loading?: boolean;
+  error?: string | null;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export function ConfirmDialog({
+  isOpen,
+  title,
+  body,
+  confirmLabel,
+  cancelLabel = "Cancel",
+  variant = "primary",
+  loading = false,
+  error,
+  onConfirm,
+  onClose,
+}: Props) {
+  return (
+    <Modal isOpen={isOpen} variant="small" onClose={onClose} aria-labelledby="cpb-confirm-dialog-title">
+      <ModalHeader title={title} labelId="cpb-confirm-dialog-title" />
+      <ModalBody>
+        {body}
+        {error && (
+          <Alert
+            variant="danger"
+            isInline
+            title={error}
+            style={{ marginTop: body ? "var(--pf-v6-global--spacer--md)" : undefined }}
+          />
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          variant={variant}
+          isDisabled={loading}
+          isLoading={loading}
+          onClick={onConfirm}
+        >
+          {confirmLabel}
+        </Button>
+        <Button variant="link" isDisabled={loading} onClick={onClose}>
+          {cancelLabel}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}

package/src/components/ErrorBoundary.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { ErrorBoundary } from "./ErrorBoundary";
+
+function Bomb({ shouldThrow }: { shouldThrow: boolean }) {
+  if (shouldThrow) throw new Error("kaboom");
+  return <div>all good</div>;
+}
+
+describe("ErrorBoundary", () => {
+  it("renders children when no error", () => {
+    render(
+      <ErrorBoundary>
+        <Bomb shouldThrow={false} />
+      </ErrorBoundary>,
+    );
+    expect(screen.getByText("all good")).toBeInTheDocument();
+  });
+
+  it("renders fallback UI when child throws", () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    render(
+      <ErrorBoundary>
+        <Bomb shouldThrow={true} />
+      </ErrorBoundary>,
+    );
+    expect(screen.queryByText("all good")).not.toBeInTheDocument();
+    expect(screen.getByText("kaboom")).toBeInTheDocument();
+  });
+
+  it("uses fallbackTitle prop in the heading", () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    render(
+      <ErrorBoundary fallbackTitle="Plugin crashed">
+        <Bomb shouldThrow={true} />
+      </ErrorBoundary>,
+    );
+    expect(screen.getByText("Plugin crashed")).toBeInTheDocument();
+  });
+
+  it("uses default title when fallbackTitle is omitted", () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    render(
+      <ErrorBoundary>
+        <Bomb shouldThrow={true} />
+      </ErrorBoundary>,
+    );
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+  });
+});

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,30 @@
+import { Component, type ReactNode } from "react";
+import { EmptyState, EmptyStateBody } from "@patternfly/react-core";
+
+interface Props {
+  children: ReactNode;
+  fallbackTitle?: string;
+}
+
+interface State {
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { error: null };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error };
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <EmptyState headingLevel="h2" titleText={this.props.fallbackTitle ?? "Something went wrong"}>
+          <EmptyStateBody>{this.state.error.message}</EmptyStateBody>
+        </EmptyState>
+      );
+    }
+    return this.props.children;
+  }
+}

package/src/components/HelpPopover.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { Popover, Button } from "@patternfly/react-core";
+import { OutlinedQuestionCircleIcon } from "@patternfly/react-icons";
+
+interface Props {
+  header: string;
+  body: string;
+  "aria-label"?: string;
+}
+
+export function HelpPopover({ header, body, "aria-label": ariaLabel }: Props) {
+  const [visible, setVisible] = useState(false);
+  return (
+    <Popover
+      headerContent={header}
+      bodyContent={body}
+      isVisible={visible}
+      shouldOpen={() => setVisible(true)}
+      shouldClose={() => setVisible(false)}
+    >
+      <Button
+        variant="plain"
+        aria-label={ariaLabel ?? header}
+        style={{ padding: "0 0.25rem", minWidth: 0, color: "var(--pf-t--global--text--color--subtle)" }}
+      >
+        <OutlinedQuestionCircleIcon style={{ fontSize: "0.9rem" }} />
+      </Button>
+    </Popover>
+  );
+}

package/src/components/LogViewer.tsx

@@ -0,0 +1,108 @@
+import { useState } from "react";
+import {
+  Alert,
+  Button,
+  SearchInput,
+  Spinner,
+  Stack,
+  StackItem,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+} from "@patternfly/react-core";
+
+interface Props {
+  lines: string[];
+  loading?: boolean;
+  error?: string | null;
+  onRefresh?: () => void;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  noMatchesMessage?: string;
+  errorTitle?: string;
+  refreshAriaLabel?: string;
+}
+
+export function LogViewer({
+  lines,
+  loading = false,
+  error,
+  onRefresh,
+  searchPlaceholder = "Search logs…",
+  emptyMessage = "No log entries.",
+  noMatchesMessage = "No matching entries.",
+  errorTitle = "Failed to load logs",
+  refreshAriaLabel = "Refresh",
+}: Props) {
+  const [search, setSearch] = useState("");
+
+  const filtered = search
+    ? lines.filter(l => l.toLowerCase().includes(search.toLowerCase()))
+    : lines;
+
+  return (
+    <Stack hasGutter>
+      {error && (
+        <StackItem>
+          <Alert
+            variant="danger"
+            title={errorTitle}
+            actionLinks={onRefresh && (
+              <Button variant="link" onClick={onRefresh}>Retry</Button>
+            )}
+          >
+            {error}
+          </Alert>
+        </StackItem>
+      )}
+
+      <StackItem>
+        <Toolbar>
+          <ToolbarContent>
+            <ToolbarItem>
+              <SearchInput
+                placeholder={searchPlaceholder}
+                value={search}
+                onChange={(_e, v) => setSearch(v)}
+                onClear={() => setSearch("")}
+              />
+            </ToolbarItem>
+            {onRefresh && (
+              <ToolbarItem align={{ default: "alignEnd" }}>
+                <Button variant="plain" onClick={onRefresh} aria-label={refreshAriaLabel}>↺</Button>
+              </ToolbarItem>
+            )}
+          </ToolbarContent>
+        </Toolbar>
+      </StackItem>
+
+      <StackItem isFilled>
+        {loading ? (
+          <Spinner />
+        ) : filtered.length === 0 ? (
+          <p style={{ color: "var(--pf-v6-global--Color--200)" }}>
+            {lines.length === 0 ? emptyMessage : noMatchesMessage}
+          </p>
+        ) : (
+          <pre
+            style={{
+              fontFamily: "monospace",
+              fontSize: "0.8rem",
+              overflowX: "auto",
+              maxHeight: "60vh",
+              overflowY: "auto",
+              background: "var(--pf-v6-global--BackgroundColor--dark-100, #1b1d21)",
+              color: "var(--pf-v6-global--Color--light-100, #e8e8e8)",
+              padding: "1rem",
+              borderRadius: "var(--pf-v6-global--BorderRadius--sm, 4px)",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all",
+            }}
+          >
+            {filtered.join("\n")}
+          </pre>
+        )}
+      </StackItem>
+    </Stack>
+  );
+}

package/src/components/StatusBadge.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { StatusBadge, type StatusBadgeConfig } from "./StatusBadge";
+
+const config: Record<string, StatusBadgeConfig> = {
+  active: { color: "green", label: "Running" },
+  inactive: { color: "grey", label: "Stopped" },
+  failed: { color: "red", label: "Failed" },
+};
+
+describe("StatusBadge", () => {
+  it("renders label from config", () => {
+    render(<StatusBadge status="active" config={config} />);
+    expect(screen.getByText("Running")).toBeInTheDocument();
+  });
+
+  it("renders different statuses", () => {
+    render(<StatusBadge status="failed" config={config} />);
+    expect(screen.getByText("Failed")).toBeInTheDocument();
+  });
+
+  it("renders fallback when status is not in config", () => {
+    const fallback: StatusBadgeConfig = { color: "orange", label: "Unknown" };
+    render(<StatusBadge status="mystery" config={config} fallback={fallback} />);
+    expect(screen.getByText("Unknown")).toBeInTheDocument();
+  });
+
+  it("renders raw status string when no fallback is provided", () => {
+    render(<StatusBadge status="mystery" config={config} />);
+    expect(screen.getByText("mystery")).toBeInTheDocument();
+  });
+});

package/src/components/StatusBadge.tsx

@@ -0,0 +1,18 @@
+import { Label, type LabelProps } from "@patternfly/react-core";
+
+export interface StatusBadgeConfig {
+  color: LabelProps["color"];
+  label: string;
+}
+
+interface Props<T extends string> {
+  status: T;
+  config: Record<string, StatusBadgeConfig>;
+  fallback?: StatusBadgeConfig;
+  isCompact?: boolean;
+}
+
+export function StatusBadge<T extends string>({ status, config, fallback, isCompact }: Props<T>) {
+  const entry = config[status] ?? fallback ?? { color: "grey", label: status };
+  return <Label color={entry.color} isCompact={isCompact}>{entry.label}</Label>;
+}

package/src/components/ToastProvider.css

@@ -0,0 +1,20 @@
+.cpb-toast-group {
+  position: fixed !important;
+  bottom: 4rem !important;
+  right: 1.5rem !important;
+  top: auto !important;
+  z-index: 9999;
+  max-width: 480px;
+  pointer-events: none;
+}
+
+.cpb-toast-group .pf-v6-c-alert {
+  pointer-events: all;
+  animation: cpb-toast-in 200ms ease;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+}
+
+@keyframes cpb-toast-in {
+  from { transform: translateX(2rem); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+}

package/src/components/ToastProvider.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen, act, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { ToastProvider, useToast } from "./ToastProvider";
+
+function ToastTrigger({ label, message }: { label: string; message: string }) {
+  const toast = useToast();
+  return <button onClick={() => toast.success(message)}>{label}</button>;
+}
+
+function setup() {
+  return render(
+    <ToastProvider>
+      <ToastTrigger label="add" message="It worked!" />
+    </ToastProvider>,
+  );
+}
+
+describe("ToastProvider", () => {
+  beforeEach(() => { vi.useFakeTimers(); });
+  afterEach(() => { vi.useRealTimers(); });
+
+  it("renders children", () => {
+    setup();
+    expect(screen.getByText("add")).toBeInTheDocument();
+  });
+
+  it("shows a toast when success() is called", () => {
+    setup();
+    act(() => { fireEvent.click(screen.getByText("add")); });
+    expect(screen.getByText("It worked!")).toBeInTheDocument();
+  });
+
+  it("auto-dismisses the toast after 5 seconds", () => {
+    setup();
+    act(() => { fireEvent.click(screen.getByText("add")); });
+    expect(screen.getByText("It worked!")).toBeInTheDocument();
+
+    act(() => { vi.advanceTimersByTime(5000); });
+    expect(screen.queryByText("It worked!")).not.toBeInTheDocument();
+  });
+
+  it("dismisses the toast when close button is clicked", () => {
+    setup();
+    act(() => { fireEvent.click(screen.getByText("add")); });
+    expect(screen.getByText("It worked!")).toBeInTheDocument();
+
+    const closeBtn = screen.getByRole("button", { name: /close/i });
+    act(() => { fireEvent.click(closeBtn); });
+    expect(screen.queryByText("It worked!")).not.toBeInTheDocument();
+  });
+
+  it("useToast returns noop functions when used outside ToastProvider", () => {
+    function Standalone() {
+      const toast = useToast();
+      return <button onClick={() => toast.error("oops")}>trigger</button>;
+    }
+    render(<Standalone />);
+    // Should not throw
+    expect(() => screen.getByText("trigger")).not.toThrow();
+  });
+});

package/src/components/ToastProvider.tsx

@@ -0,0 +1,76 @@
+import { createContext, useCallback, useContext, useRef, useState, type ReactNode } from "react";
+import { Alert, AlertGroup, AlertActionCloseButton } from "@patternfly/react-core";
+import "./ToastProvider.css";
+
+export type ToastVariant = "success" | "danger" | "warning" | "info";
+
+interface Toast {
+  id: number;
+  variant: ToastVariant;
+  title: string;
+  body?: string;
+}
+
+export interface ToastContextValue {
+  addToast: (variant: ToastVariant, title: string, body?: string) => void;
+  success: (title: string, body?: string) => void;
+  error: (title: string, body?: string) => void;
+  warn: (title: string, body?: string) => void;
+  info: (title: string, body?: string) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+const AUTO_DISMISS_MS = 5000;
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const counterRef = useRef(0);
+
+  const dismiss = useCallback((id: number) => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+  }, []);
+
+  const addToast = useCallback((variant: ToastVariant, title: string, body?: string) => {
+    const id = ++counterRef.current;
+    setToasts(prev => [...prev, { id, variant, title, body }]);
+    setTimeout(() => dismiss(id), AUTO_DISMISS_MS);
+  }, [dismiss]);
+
+  const success = useCallback((title: string, body?: string) => addToast("success", title, body), [addToast]);
+  const error = useCallback((title: string, body?: string) => addToast("danger", title, body), [addToast]);
+  const warn = useCallback((title: string, body?: string) => addToast("warning", title, body), [addToast]);
+  const info = useCallback((title: string, body?: string) => addToast("info", title, body), [addToast]);
+
+  return (
+    <ToastContext.Provider value={{ addToast, success, error, warn, info }}>
+      {children}
+      <AlertGroup isToast isLiveRegion className="cpb-toast-group">
+        {toasts.map(t => (
+          <Alert
+            key={t.id}
+            variant={t.variant}
+            title={t.title}
+            timeout={AUTO_DISMISS_MS}
+            onTimeout={() => dismiss(t.id)}
+            actionClose={<AlertActionCloseButton onClose={() => dismiss(t.id)} />}
+          >
+            {t.body}
+          </Alert>
+        ))}
+      </AlertGroup>
+    </ToastContext.Provider>
+  );
+}
+
+const NOOP_TOAST: ToastContextValue = {
+  addToast: () => {},
+  success: () => {},
+  error: () => {},
+  warn: () => {},
+  info: () => {},
+};
+
+export function useToast(): ToastContextValue {
+  return useContext(ToastContext) ?? NOOP_TOAST;
+}

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export { ErrorBoundary } from "./ErrorBoundary";
+export { ToastProvider, useToast } from "./ToastProvider";
+export type { ToastVariant, ToastContextValue } from "./ToastProvider";
+export { StatusBadge } from "./StatusBadge";
+export type { StatusBadgeConfig } from "./StatusBadge";
+export { ConfirmDialog } from "./ConfirmDialog";
+export { LogViewer } from "./LogViewer";
+export { HelpPopover } from "./HelpPopover";

package/src/css.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+  const content: Record<string, string>;
+  export default content;
+}

package/src/dark-theme.ts

@@ -0,0 +1,30 @@
+const THEME_KEY = 'shell:style';
+const DARK_CLASS = 'pf-v6-theme-dark';
+
+function prefersDark(): boolean {
+    return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+}
+
+function applyTheme(override?: string): void {
+    const style = override ?? localStorage.getItem(THEME_KEY) ?? 'auto';
+    const dark = style === 'dark' || (style === 'auto' && prefersDark());
+    document.documentElement.classList.toggle(DARK_CLASS, dark);
+}
+
+window.addEventListener('storage', (event: StorageEvent) => {
+    if (event.key === THEME_KEY) {
+        applyTheme();
+    }
+});
+
+window.addEventListener('cockpit-style', (event: Event) => {
+    if (event instanceof CustomEvent) {
+        applyTheme(event.detail?.style);
+    }
+});
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    applyTheme();
+});
+
+applyTheme();

package/src/hooks/useAsyncAction.test.ts

@@ -0,0 +1,59 @@
+import { renderHook, act } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { useAsyncAction } from "./useAsyncAction";
+
+describe("useAsyncAction", () => {
+  it("starts with loading=false and no error", () => {
+    const { result } = renderHook(() => useAsyncAction(vi.fn().mockResolvedValue("ok")));
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  it("returns the action result", async () => {
+    const action = vi.fn<() => Promise<string>>().mockResolvedValue("done");
+    const { result } = renderHook(() => useAsyncAction(action));
+    let value: string | undefined;
+    await act(async () => { value = await result.current.execute(); });
+    expect(value).toBe("done");
+  });
+
+  it("sets loading true during execution and false after", async () => {
+    let resolve!: (v: string) => void;
+    const action = vi.fn(() => new Promise<string>(r => { resolve = r; }));
+    const { result } = renderHook(() => useAsyncAction(action));
+
+    act(() => { void result.current.execute(); });
+    expect(result.current.loading).toBe(true);
+
+    await act(async () => { resolve("ok"); });
+    expect(result.current.loading).toBe(false);
+  });
+
+  it("captures error message on failure", async () => {
+    const action = vi.fn().mockRejectedValue(new Error("boom"));
+    const { result } = renderHook(() => useAsyncAction(action));
+
+    await act(async () => { await result.current.execute(); });
+    expect(result.current.error).toBe("boom");
+    expect(result.current.loading).toBe(false);
+  });
+
+  it("stringifies non-Error rejections", async () => {
+    const action = vi.fn().mockRejectedValue("raw string error");
+    const { result } = renderHook(() => useAsyncAction(action));
+
+    await act(async () => { await result.current.execute(); });
+    expect(result.current.error).toBe("raw string error");
+  });
+
+  it("clears error via clearError", async () => {
+    const action = vi.fn().mockRejectedValue(new Error("oops"));
+    const { result } = renderHook(() => useAsyncAction(action));
+
+    await act(async () => { await result.current.execute(); });
+    expect(result.current.error).toBe("oops");
+
+    act(() => { result.current.clearError(); });
+    expect(result.current.error).toBeNull();
+  });
+});