@carlonicora/nextjs-jsonapi 1.80.0 → 1.82.0

package/src/components/grids/__tests__/ContentListGrid.test.tsx

@@ -0,0 +1,153 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, act } from "@testing-library/react";
+import { ContentListGrid } from "../ContentListGrid";
+import { DataListRetriever } from "../../../hooks";
+
+vi.mock("../../tables/ContentTableSearch", () => ({
+  ContentTableSearch: () => <div data-testid="content-table-search">Search</div>,
+}));
+
+type Item = { id: string; title: string };
+
+function createMockDataRetriever(overrides: Partial<DataListRetriever<Item>> = {}): DataListRetriever<Item> {
+  return {
+    ready: true,
+    setReady: vi.fn(),
+    isLoaded: true,
+    data: [],
+    search: vi.fn(),
+    refresh: vi.fn(),
+    addAdditionalParameter: vi.fn(),
+    removeAdditionalParameter: vi.fn(),
+    setRefreshedElement: vi.fn(),
+    removeElement: vi.fn(),
+    isSearch: false,
+    ...overrides,
+  } as DataListRetriever<Item>;
+}
+
+const mockModule = {
+  name: "items",
+  model: class MockItem {},
+  icon: ({ className }: { className?: string }) => <svg data-testid="module-icon" className={className} />,
+} as any;
+
+function ItemComponent({ item }: { item: Item }) {
+  return <div data-testid={`item-${item.id}`}>{item.title}</div>;
+}
+
+describe("ContentListGrid", () => {
+  let observerCallback: ((entries: IntersectionObserverEntry[]) => void) | null;
+  let observerInstance: { observe: ReturnType<typeof vi.fn>; disconnect: ReturnType<typeof vi.fn> } | null;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    observerCallback = null;
+    observerInstance = null;
+    (globalThis as any).IntersectionObserver = class {
+      observe = vi.fn();
+      disconnect = vi.fn();
+      constructor(cb: any) {
+        observerCallback = cb;
+        observerInstance = { observe: this.observe, disconnect: this.disconnect };
+      }
+    };
+  });
+
+  it("renders the title and module icon", () => {
+    const data = createMockDataRetriever({
+      data: [{ id: "1", title: "Hello" }],
+    });
+    render(
+      <ContentListGrid<Item>
+        data={data}
+        tableGeneratorType={mockModule}
+        ItemComponent={ItemComponent}
+        title="My Items"
+      />,
+    );
+
+    expect(screen.getByText("My Items")).toBeInTheDocument();
+    expect(screen.getByTestId("module-icon")).toBeInTheDocument();
+  });
+
+  it("renders one ItemComponent per item with stable keys", () => {
+    const data = createMockDataRetriever({
+      data: [
+        { id: "a", title: "First" },
+        { id: "b", title: "Second" },
+      ],
+    });
+    render(<ContentListGrid<Item> data={data} tableGeneratorType={mockModule} ItemComponent={ItemComponent} />);
+
+    expect(screen.getByTestId("item-a")).toHaveTextContent("First");
+    expect(screen.getByTestId("item-b")).toHaveTextContent("Second");
+  });
+
+  it("renders the empty-state copy when there are no items", () => {
+    const data = createMockDataRetriever({ data: [] });
+    render(<ContentListGrid<Item> data={data} tableGeneratorType={mockModule} ItemComponent={ItemComponent} />);
+
+    expect(screen.getByText("No results.")).toBeInTheDocument();
+  });
+
+  it("hides search by default and shows it when allowSearch is true", () => {
+    const data = createMockDataRetriever({ data: [{ id: "1", title: "x" }] });
+    const { rerender } = render(
+      <ContentListGrid<Item> data={data} tableGeneratorType={mockModule} ItemComponent={ItemComponent} title="t" />,
+    );
+    expect(screen.queryByTestId("content-table-search")).not.toBeInTheDocument();
+
+    rerender(
+      <ContentListGrid<Item>
+        data={data}
+        tableGeneratorType={mockModule}
+        ItemComponent={ItemComponent}
+        title="t"
+        allowSearch
+      />,
+    );
+    expect(screen.getByTestId("content-table-search")).toBeInTheDocument();
+  });
+
+  it("does not render the sentinel when data.next is undefined", () => {
+    const data = createMockDataRetriever({ data: [{ id: "1", title: "x" }], next: undefined });
+    const { container } = render(
+      <ContentListGrid<Item> data={data} tableGeneratorType={mockModule} ItemComponent={ItemComponent} />,
+    );
+    // Sentinel is the only 1px-tall div inline-styled; assert via inline style probe.
+    const sentinel = container.querySelector('div[style*="height: 1px"]');
+    expect(sentinel).toBeNull();
+  });
+
+  it("calls data.next when the sentinel intersects", () => {
+    const next = vi.fn();
+    const data = createMockDataRetriever({
+      data: [{ id: "1", title: "x" }],
+      next,
+    });
+    render(<ContentListGrid<Item> data={data} tableGeneratorType={mockModule} ItemComponent={ItemComponent} />);
+
+    expect(observerInstance?.observe).toHaveBeenCalled();
+
+    act(() => {
+      observerCallback?.([{ isIntersecting: true } as IntersectionObserverEntry]);
+    });
+
+    expect(next).toHaveBeenCalledTimes(1);
+  });
+
+  it("uses gridClassName when supplied", () => {
+    const data = createMockDataRetriever({ data: [{ id: "1", title: "x" }] });
+    const { container } = render(
+      <ContentListGrid<Item>
+        data={data}
+        tableGeneratorType={mockModule}
+        ItemComponent={ItemComponent}
+        gridClassName="my-custom-grid"
+      />,
+    );
+    const grid = container.querySelector(".my-custom-grid");
+    expect(grid).not.toBeNull();
+  });
+});

package/src/components/grids/index.ts

@@ -0,0 +1 @@
+export * from "./ContentListGrid";

package/src/components/index.ts

@@ -11,6 +11,7 @@ export * from "./forms";
 export * from "./navigations";
 export * from "./pages";
 export * from "./tables";
+export * from "./grids";
 export * from "./fiscal";
 export { parseFiscalData } from "../utils/fiscal-utils";
 
@@ -31,6 +32,7 @@ export * from "../features/user/components";
 export * from "../features/oauth/components";
 export * from "../features/waitlist/components";
 export { RbacContainer } from "../features/rbac/components/RbacContainer";
+export { RbacByRoleContainer } from "../features/rbac/components/RbacByRoleContainer";
 export { RbacPermissionCell } from "../features/rbac/components/RbacPermissionCell";
 export { RbacPermissionPicker } from "../features/rbac/components/RbacPermissionPicker";
 

package/src/features/rbac/components/RbacByRoleContainer.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import { RoundPageContainer } from "@/components";
+import { cn } from "@/lib/utils";
+import { Loader2Icon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useRbacContext } from "../contexts/RbacContext";
+import { ACTION_TYPES, ActionType, PermissionValue, type PermToken } from "../data/RbacTypes";
+import RbacPermissionCell from "./RbacPermissionCell";
+import { RbacPermissionPicker } from "./RbacPermissionPicker";
+
+function findToken(tokens: PermToken[] | undefined, action: ActionType): PermToken | undefined {
+  if (!tokens) return undefined;
+  return tokens.find((t) => t.action === action);
+}
+
+function cellValue(tokens: PermToken[] | undefined, action: ActionType): PermissionValue | undefined {
+  const tok = findToken(tokens, action);
+  if (!tok) return undefined;
+  return tok.scope;
+}
+
+interface ActivePicker {
+  moduleId: string;
+  rowKey: string;
+  action: ActionType;
+  isRoleColumn: boolean;
+  anchor: HTMLElement;
+}
+
+interface CellButtonProps {
+  moduleId: string;
+  rowKey: string;
+  action: ActionType;
+  tokens: PermToken[] | undefined;
+  isRoleColumn: boolean;
+  onOpen: (picker: ActivePicker) => void;
+}
+
+const CellButton = memo(function CellButton({
+  moduleId,
+  rowKey,
+  action,
+  tokens,
+  isRoleColumn,
+  onOpen,
+}: CellButtonProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const value = cellValue(tokens, action);
+
+  const handleClick = useCallback(() => {
+    if (!ref.current) return;
+    onOpen({ moduleId, rowKey, action, isRoleColumn, anchor: ref.current });
+  }, [onOpen, moduleId, rowKey, action, isRoleColumn]);
+
+  return (
+    <div ref={ref}>
+      <RbacPermissionCell value={value} isRoleColumn={isRoleColumn} onClick={handleClick} />
+    </div>
+  );
+});
+
+const ACTION_LABELS: Record<ActionType, string> = {
+  read: "Read",
+  create: "Create",
+  update: "Update",
+  delete: "Delete",
+};
+
+export default function RbacByRoleContainer() {
+  const t = useTranslations();
+  const { matrix, modulePaths, loading, error, roleNames, moduleNames, updateCell, clearCell } = useRbacContext();
+
+  const [selectedRoleId, setSelectedRoleId] = useState<string | null>(null);
+  const [activePicker, setActivePicker] = useState<ActivePicker | null>(null);
+
+  const openPicker = useCallback((picker: ActivePicker) => {
+    setActivePicker(picker);
+  }, []);
+
+  const closePicker = useCallback(() => {
+    setActivePicker(null);
+  }, []);
+
+  const handleSelectRole = useCallback((id: string) => {
+    setSelectedRoleId(id);
+    setActivePicker(null);
+  }, []);
+
+  const sortedRoleIds = useMemo(() => {
+    if (!roleNames) return [];
+    return Object.keys(roleNames).sort((a, b) => (roleNames[a] ?? a).localeCompare(roleNames[b] ?? b));
+  }, [roleNames]);
+
+  const sortedModuleIds = useMemo(() => {
+    if (!matrix) return [];
+    return Object.keys(matrix).sort((a, b) => (moduleNames?.[a] ?? a).localeCompare(moduleNames?.[b] ?? b));
+  }, [matrix, moduleNames]);
+
+  useEffect(() => {
+    if (!selectedRoleId && sortedRoleIds.length > 0) {
+      setSelectedRoleId(sortedRoleIds[0]);
+    }
+  }, [selectedRoleId, sortedRoleIds]);
+
+  const activeValue = useMemo<PermissionValue | undefined>(() => {
+    if (!activePicker || !matrix) return undefined;
+    const block = matrix[activePicker.moduleId];
+    if (!block) return undefined;
+    const tokens =
+      activePicker.rowKey === "default" ? block.default : (block as Record<string, PermToken[]>)[activePicker.rowKey];
+    return cellValue(tokens, activePicker.action);
+  }, [activePicker, matrix]);
+
+  const activeSegments = useMemo<string[]>(() => {
+    if (!activePicker) return [];
+    return (modulePaths[activePicker.moduleId] as string[] | undefined) ?? [];
+  }, [activePicker, modulePaths]);
+
+  const handleSetValue = useCallback(
+    (value: PermissionValue) => {
+      if (!activePicker) return;
+      updateCell(activePicker.moduleId, activePicker.rowKey, activePicker.action, value);
+    },
+    [activePicker, updateCell],
+  );
+
+  const handleClear = useCallback(() => {
+    if (!activePicker || !activePicker.isRoleColumn) return;
+    clearCell(activePicker.moduleId, activePicker.rowKey, activePicker.action);
+  }, [activePicker, clearCell]);
+
+  if (loading) {
+    return (
+      <RoundPageContainer fullWidth>
+        <div className="flex h-full items-center justify-center">
+          <Loader2Icon className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      </RoundPageContainer>
+    );
+  }
+
+  if (error) {
+    return (
+      <RoundPageContainer fullWidth>
+        <div className="flex h-full items-center justify-center">
+          <p className="text-destructive">{error}</p>
+        </div>
+      </RoundPageContainer>
+    );
+  }
+
+  if (!matrix || !selectedRoleId) return null;
+
+  return (
+    <RoundPageContainer fullWidth forceHeader>
+      <div className="flex h-full w-full">
+        <aside className="w-60 shrink-0 overflow-y-auto border-r bg-muted/20">
+          <ul className="py-1">
+            {sortedRoleIds.map((id) => (
+              <li key={id}>
+                <button
+                  type="button"
+                  onClick={() => handleSelectRole(id)}
+                  aria-current={id === selectedRoleId ? "true" : undefined}
+                  className={cn(
+                    "block w-full px-4 py-1.5 text-left text-sm hover:bg-muted",
+                    id === selectedRoleId && "bg-muted font-medium text-foreground",
+                    id !== selectedRoleId && "text-muted-foreground",
+                  )}
+                >
+                  {roleNames?.[id] ?? id}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </aside>
+
+        <section className="flex-1 overflow-y-auto p-4">
+          {sortedModuleIds.length > 0 ? (
+            <div className="rounded-lg border border-accent bg-card">
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead className="sticky top-0 z-10">
+                    <tr className="border-b bg-muted/80 backdrop-blur-sm">
+                      <th className="w-40 px-4 py-2 text-left text-xs font-medium text-muted-foreground">
+                        {t("rbac.module")}
+                      </th>
+                      {ACTION_TYPES.map((action) => (
+                        <th
+                          key={action}
+                          className="min-w-28 px-2 py-2 text-center text-xs font-medium text-muted-foreground"
+                        >
+                          {ACTION_LABELS[action]}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {sortedModuleIds.map((moduleId) => {
+                      const block = matrix[moduleId];
+                      if (!block) return null;
+                      const defaultTokens = block.default ?? [];
+                      const roleTokens = (block as Record<string, PermToken[]>)[selectedRoleId];
+                      const moduleLabel = moduleNames?.[moduleId] ?? moduleId;
+
+                      return (
+                        <Fragment key={moduleId}>
+                          <tr className="border-b bg-muted/40">
+                            <td
+                              colSpan={ACTION_TYPES.length + 1}
+                              className="px-4 py-1.5 text-xs font-bold text-muted-foreground"
+                            >
+                              {moduleLabel}
+                            </td>
+                          </tr>
+                          <tr className="border-b bg-muted/20">
+                            <td className="px-4 py-1 text-xs text-muted-foreground">{t("rbac.defaults")}</td>
+                            {ACTION_TYPES.map((action) => (
+                              <td key={action} className="px-2 py-1">
+                                <RbacPermissionCell value={cellValue(defaultTokens, action)} />
+                              </td>
+                            ))}
+                          </tr>
+                          <tr className="border-b last:border-b-0">
+                            <td className="px-4 py-1 text-xs font-medium text-muted-foreground">
+                              {roleNames?.[selectedRoleId] ?? selectedRoleId}
+                            </td>
+                            {ACTION_TYPES.map((action) => (
+                              <td key={action} className="px-2 py-1">
+                                <CellButton
+                                  moduleId={moduleId}
+                                  rowKey={selectedRoleId}
+                                  action={action}
+                                  tokens={roleTokens}
+                                  isRoleColumn={true}
+                                  onOpen={openPicker}
+                                />
+                              </td>
+                            ))}
+                          </tr>
+                        </Fragment>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          ) : (
+            <p className="text-muted-foreground text-sm">{t("rbac.select_role_prompt")}</p>
+          )}
+        </section>
+      </div>
+
+      <RbacPermissionPicker
+        open={!!activePicker}
+        anchor={activePicker?.anchor ?? null}
+        value={activeValue}
+        isRoleColumn={activePicker?.isRoleColumn ?? false}
+        knownSegments={activeSegments}
+        onSetValue={handleSetValue}
+        onClear={activePicker?.isRoleColumn ? handleClear : undefined}
+        onClose={closePicker}
+      />
+    </RoundPageContainer>
+  );
+}
+
+export { RbacByRoleContainer };

package/src/features/rbac/index.ts

@@ -3,6 +3,7 @@ export * from "./data";
 
 // Components
 export { RbacContainer } from "./components/RbacContainer";
+export { RbacByRoleContainer } from "./components/RbacByRoleContainer";
 export { RbacPermissionCell } from "./components/RbacPermissionCell";
 export { RbacPermissionPicker } from "./components/RbacPermissionPicker";