refactor(app): decompose widget-editor-modal into sub-components (#573)

app/src/components/widget-editor/__tests__/advanced-caching-section.test.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+vi.mock("@neoboard/components", () => ({
+  Checkbox: ({
+    id,
+    checked,
+    onCheckedChange,
+  }: {
+    id?: string;
+    checked?: boolean;
+    onCheckedChange?: (v: boolean) => void;
+  }) => (
+    <input
+      type="checkbox"
+      id={id}
+      checked={checked}
+      onChange={(e) => onCheckedChange?.(e.target.checked)}
+      data-testid={id}
+    />
+  ),
+  Input: ({
+    id,
+    value,
+    onChange,
+    ...props
+  }: React.InputHTMLAttributes<HTMLInputElement>) => (
+    <input
+      id={id}
+      value={value}
+      onChange={onChange}
+      data-testid={id}
+      {...props}
+    />
+  ),
+  Label: ({
+    children,
+    htmlFor,
+  }: React.PropsWithChildren<{ htmlFor?: string }>) => (
+    <label htmlFor={htmlFor}>{children}</label>
+  ),
+}));
+
+const mockSetEnableCache = vi.fn();
+const mockSetCacheTtlMinutes = vi.fn();
+
+vi.mock("@/stores/widget-editor-store", () => ({
+  useWidgetEditorStore: (selector: (s: Record<string, unknown>) => unknown) =>
+    selector({
+      enableCache: mockEnableCache,
+      setEnableCache: mockSetEnableCache,
+      cacheTtlMinutes: mockCacheTtlMinutes,
+      setCacheTtlMinutes: mockSetCacheTtlMinutes,
+    }),
+}));
+
+let mockEnableCache = false;
+let mockCacheTtlMinutes = 5;
+
+import { AdvancedCachingSection } from "../advanced-caching-section";
+
+describe("AdvancedCachingSection", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockEnableCache = false;
+    mockCacheTtlMinutes = 5;
+  });
+
+  it("renders caching header and checkbox", () => {
+    render(<AdvancedCachingSection />);
+    expect(screen.getByText("Caching")).toBeInTheDocument();
+    expect(screen.getByText("Cache query results")).toBeInTheDocument();
+  });
+
+  it("does not show TTL input when caching is disabled", () => {
+    render(<AdvancedCachingSection />);
+    expect(screen.queryByTestId("cache-ttl")).not.toBeInTheDocument();
+  });
+
+  it("shows TTL input when caching is enabled", () => {
+    mockEnableCache = true;
+    render(<AdvancedCachingSection />);
+    expect(screen.getByTestId("cache-ttl")).toBeInTheDocument();
+    expect(screen.getByText(/Results are reused/)).toBeInTheDocument();
+  });
+
+  it("calls setEnableCache when checkbox toggled", () => {
+    render(<AdvancedCachingSection />);
+    fireEvent.click(screen.getByTestId("enable-cache"));
+    expect(mockSetEnableCache).toHaveBeenCalledWith(true);
+  });
+
+  it("calls setCacheTtlMinutes when TTL changes", () => {
+    mockEnableCache = true;
+    render(<AdvancedCachingSection />);
+    fireEvent.change(screen.getByTestId("cache-ttl"), {
+      target: { value: "10" },
+    });
+    expect(mockSetCacheTtlMinutes).toHaveBeenCalledWith(10);
+  });
+
+  it("clamps TTL to minimum of 1", () => {
+    mockEnableCache = true;
+    render(<AdvancedCachingSection />);
+    fireEvent.change(screen.getByTestId("cache-ttl"), {
+      target: { value: "0" },
+    });
+    expect(mockSetCacheTtlMinutes).toHaveBeenCalledWith(1);
+  });
+
+  it("pluralizes minutes correctly", () => {
+    mockEnableCache = true;
+    mockCacheTtlMinutes = 1;
+    const { rerender } = render(<AdvancedCachingSection />);
+    expect(screen.getByText(/1 minute before/)).toBeInTheDocument();
+
+    mockCacheTtlMinutes = 5;
+    rerender(<AdvancedCachingSection />);
+    expect(screen.getByText(/5 minutes before/)).toBeInTheDocument();
+  });
+});

app/src/components/widget-editor/__tests__/advanced-form-refresh-section.test.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+vi.mock("@neoboard/components", () => ({
+  Checkbox: ({
+    id,
+    checked,
+    onCheckedChange,
+  }: {
+    id?: string;
+    checked?: boolean;
+    onCheckedChange?: (v: boolean) => void;
+  }) => (
+    <input
+      type="checkbox"
+      id={id}
+      checked={checked}
+      onChange={(e) => onCheckedChange?.(e.target.checked)}
+      data-testid={id}
+    />
+  ),
+  Label: ({
+    children,
+    htmlFor,
+  }: React.PropsWithChildren<{ htmlFor?: string }>) => (
+    <label htmlFor={htmlFor}>{children}</label>
+  ),
+  Button: ({
+    children,
+    onClick,
+    ...props
+  }: React.PropsWithChildren<Record<string, unknown>>) => (
+    <button onClick={onClick as () => void} {...props}>
+      {children}
+    </button>
+  ),
+  Badge: ({ children }: React.PropsWithChildren) => <span>{children}</span>,
+}));
+
+vi.mock("@/lib/plugin/chart-helpers", () => ({
+  getChartConfig: (type: string) => ({ label: type.toUpperCase() }),
+}));
+
+const mockSetRefreshWidgetIds = vi.fn();
+let mockRefreshWidgetIds: string[] = [];
+
+vi.mock("@/stores/widget-editor-store", () => ({
+  useWidgetEditorStore: (selector: (s: Record<string, unknown>) => unknown) =>
+    selector({
+      refreshWidgetIds: mockRefreshWidgetIds,
+      setRefreshWidgetIds: mockSetRefreshWidgetIds,
+    }),
+}));
+
+import { AdvancedFormRefreshSection } from "../advanced-form-refresh-section";
+
+const WIDGETS = [
+  { id: "w1", title: "Sales Chart", chartType: "bar" },
+  { id: "w2", title: "Users Table", chartType: "table" },
+  { id: "w3", title: "", chartType: "line" },
+];
+
+describe("AdvancedFormRefreshSection", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockRefreshWidgetIds = [];
+  });
+
+  it("renders header and description", () => {
+    render(<AdvancedFormRefreshSection otherWidgets={WIDGETS} />);
+    expect(screen.getByText("After Submit")).toBeInTheDocument();
+    expect(screen.getByText(/Refresh these widgets/)).toBeInTheDocument();
+  });
+
+  it("shows empty state when no other widgets", () => {
+    render(<AdvancedFormRefreshSection otherWidgets={[]} />);
+    expect(
+      screen.getByText("No other widgets on this page."),
+    ).toBeInTheDocument();
+  });
+
+  it("renders widget list with titles and chart type badges", () => {
+    render(<AdvancedFormRefreshSection otherWidgets={WIDGETS} />);
+    expect(screen.getByText("Sales Chart")).toBeInTheDocument();
+    expect(screen.getByText("Users Table")).toBeInTheDocument();
+    expect(screen.getByText("(untitled)")).toBeInTheDocument();
+    expect(screen.getByText("BAR")).toBeInTheDocument();
+    expect(screen.getByText("TABLE")).toBeInTheDocument();
+  });
+
+  it("shows selection count", () => {
+    mockRefreshWidgetIds = ["w1"];
+    render(<AdvancedFormRefreshSection otherWidgets={WIDGETS} />);
+    expect(screen.getByText("1 of 3 selected")).toBeInTheDocument();
+  });
+
+  it("calls setRefreshWidgetIds when widget checkbox toggled on", () => {
+    render(<AdvancedFormRefreshSection otherWidgets={WIDGETS} />);
+    fireEvent.click(screen.getByTestId("refresh-widget-w1"));
+    expect(mockSetRefreshWidgetIds).toHaveBeenCalledWith(["w1"]);
+  });
+
+  it("calls setRefreshWidgetIds when widget checkbox toggled off", () => {
+    mockRefreshWidgetIds = ["w1", "w2"];
+    render(<AdvancedFormRefreshSection otherWidgets={WIDGETS} />);
+    fireEvent.click(screen.getByTestId("refresh-widget-w1"));
+    expect(mockSetRefreshWidgetIds).toHaveBeenCalledWith(["w2"]);
+  });
+
+  it("select all selects all widgets", () => {
+    render(<AdvancedFormRefreshSection otherWidgets={WIDGETS} />);
+    fireEvent.click(screen.getByText("Select all"));
+    expect(mockSetRefreshWidgetIds).toHaveBeenCalledWith(["w1", "w2", "w3"]);
+  });
+
+  it("deselect all clears selection when all selected", () => {
+    mockRefreshWidgetIds = ["w1", "w2", "w3"];
+    render(<AdvancedFormRefreshSection otherWidgets={WIDGETS} />);
+    fireEvent.click(screen.getByText("Deselect all"));
+    expect(mockSetRefreshWidgetIds).toHaveBeenCalledWith([]);
+  });
+});

app/src/components/widget-editor/__tests__/advanced-interactivity-section.test.tsx

@@ -0,0 +1,147 @@
+import React from "react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+vi.mock("@neoboard/components", () => ({
+  Checkbox: ({
+    id,
+    checked,
+    onCheckedChange,
+  }: {
+    id?: string;
+    checked?: boolean;
+    onCheckedChange?: (v: boolean) => void;
+  }) => (
+    <input
+      type="checkbox"
+      id={id}
+      checked={checked}
+      onChange={(e) => onCheckedChange?.(e.target.checked)}
+      data-testid={id}
+    />
+  ),
+  Label: ({
+    children,
+    htmlFor,
+  }: React.PropsWithChildren<{ htmlFor?: string }>) => (
+    <label htmlFor={htmlFor}>{children}</label>
+  ),
+  Button: ({
+    children,
+    onClick,
+  }: React.PropsWithChildren<{ onClick?: () => void }>) => (
+    <button onClick={onClick}>{children}</button>
+  ),
+  Alert: ({
+    children,
+    ...props
+  }: React.PropsWithChildren<Record<string, unknown>>) => (
+    <div role="alert" {...props}>
+      {children}
+    </div>
+  ),
+  AlertTitle: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+  AlertDescription: ({ children }: React.PropsWithChildren) => (
+    <div>{children}</div>
+  ),
+}));
+
+vi.mock("lucide-react", () => ({
+  Info: () => <span data-testid="info-icon" />,
+}));
+
+const mockSetClickActionEnabled = vi.fn();
+const mockSetDialogStep = vi.fn();
+let mockClickActionEnabled = false;
+let mockActionRules: unknown[] = [];
+
+vi.mock("@/stores/widget-editor-store", () => ({
+  useWidgetEditorStore: (selector: (s: Record<string, unknown>) => unknown) =>
+    selector({
+      clickActionEnabled: mockClickActionEnabled,
+      setClickActionEnabled: mockSetClickActionEnabled,
+      actionRules: mockActionRules,
+      setDialogStep: mockSetDialogStep,
+    }),
+}));
+
+import { AdvancedInteractivitySection } from "../advanced-interactivity-section";
+
+describe("AdvancedInteractivitySection", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockClickActionEnabled = false;
+    mockActionRules = [];
+  });
+
+  it("renders header and checkbox", () => {
+    render(<AdvancedInteractivitySection clickActionCollisions={[]} />);
+    expect(screen.getByText("Interactivity")).toBeInTheDocument();
+    expect(screen.getByText("Enable click action")).toBeInTheDocument();
+  });
+
+  it("does not show rules info when disabled", () => {
+    render(<AdvancedInteractivitySection clickActionCollisions={[]} />);
+    expect(
+      screen.queryByText("No action rules configured."),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows rules info and manage button when enabled", () => {
+    mockClickActionEnabled = true;
+    render(<AdvancedInteractivitySection clickActionCollisions={[]} />);
+    expect(screen.getByText("No action rules configured.")).toBeInTheDocument();
+    expect(screen.getByText("Manage Action Rules")).toBeInTheDocument();
+  });
+
+  it("shows rule count when rules exist", () => {
+    mockClickActionEnabled = true;
+    mockActionRules = [{ id: "1" }, { id: "2" }];
+    render(<AdvancedInteractivitySection clickActionCollisions={[]} />);
+    expect(
+      screen.getByText("2 action rule(s) configured."),
+    ).toBeInTheDocument();
+  });
+
+  it("calls setDialogStep when manage button clicked", () => {
+    mockClickActionEnabled = true;
+    render(<AdvancedInteractivitySection clickActionCollisions={[]} />);
+    fireEvent.click(screen.getByText("Manage Action Rules"));
+    expect(mockSetDialogStep).toHaveBeenCalledWith("rules");
+  });
+
+  it("shows collision banner for single collision", () => {
+    mockClickActionEnabled = true;
+    render(
+      <AdvancedInteractivitySection
+        clickActionCollisions={[{ widgetId: "w1", title: "Widget A" }]}
+      />,
+    );
+    expect(
+      screen.getByText(/A parameter set here is also set by: Widget A/),
+    ).toBeInTheDocument();
+  });
+
+  it("shows collision banner for multiple collisions", () => {
+    mockClickActionEnabled = true;
+    render(
+      <AdvancedInteractivitySection
+        clickActionCollisions={[
+          { widgetId: "w1", title: "Widget A" },
+          { widgetId: "w2", title: "Widget B" },
+        ]}
+      />,
+    );
+    expect(
+      screen.getByText(
+        /Parameters set here are also set by: Widget A, Widget B/,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("calls setClickActionEnabled when checkbox toggled", () => {
+    render(<AdvancedInteractivitySection clickActionCollisions={[]} />);
+    fireEvent.click(screen.getByTestId("click-action-enabled"));
+    expect(mockSetClickActionEnabled).toHaveBeenCalledWith(true);
+  });
+});