@carlonicora/nextjs-jsonapi 1.52.0 → 1.53.0

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

@@ -0,0 +1,179 @@
+"use client";
+
+import { cn } from "../../../lib/utils";
+import { CheckIcon, MinusIcon, XIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useCallback, useState } from "react";
+import { Button, Checkbox, Input, Popover, PopoverContent, PopoverTrigger, Separator } from "../../../shadcnui";
+import { PermissionValue } from "../data/RbacTypes";
+import RbacPermissionCell from "./RbacPermissionCell";
+
+interface RbacPermissionPickerProps {
+  value: PermissionValue | undefined | null;
+  originalValue?: PermissionValue | undefined | null;
+  isRoleColumn?: boolean;
+  knownSegments: string[];
+  onSetValue: (value: PermissionValue) => void;
+  onClear?: () => void;
+}
+
+export default function RbacPermissionPicker({
+  value,
+  originalValue,
+  isRoleColumn = false,
+  knownSegments,
+  onSetValue,
+  onClear,
+}: RbacPermissionPickerProps) {
+  const t = useTranslations();
+  const [open, setOpen] = useState(false);
+  const [customSegment, setCustomSegment] = useState("");
+
+  // Parse current segments from value if it's a string
+  const currentSegments: string[] = typeof value === "string" ? value.split("|").filter(Boolean) : [];
+
+  const toggleSegment = useCallback(
+    (segment: string) => {
+      const newSegments = currentSegments.includes(segment)
+        ? currentSegments.filter((s) => s !== segment)
+        : [...currentSegments, segment];
+
+      if (newSegments.length === 0) {
+        onSetValue(false);
+      } else {
+        onSetValue(newSegments.join("|"));
+      }
+    },
+    [currentSegments, onSetValue],
+  );
+
+  const addCustomSegment = useCallback(() => {
+    if (!customSegment.trim()) return;
+    const segment = customSegment.trim();
+    if (!currentSegments.includes(segment)) {
+      const newSegments = [...currentSegments, segment];
+      onSetValue(newSegments.join("|"));
+    }
+    setCustomSegment("");
+  }, [customSegment, currentSegments, onSetValue]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger>
+        <RbacPermissionCell value={value} originalValue={originalValue} isRoleColumn={isRoleColumn} />
+      </PopoverTrigger>
+      <PopoverContent className="w-72 p-3" align="center">
+        <div className="space-y-3">
+          {/* Quick toggles */}
+          <div>
+            <p className="text-xs font-medium text-muted-foreground mb-2">{t("rbac.quick_value")}</p>
+            <div className="flex gap-2">
+              <Button
+                size="sm"
+                variant={value === true ? "default" : "outline"}
+                className={cn("flex-1 gap-1", value === true && "bg-emerald-600 hover:bg-emerald-700")}
+                onClick={() => {
+                  onSetValue(true);
+                  setOpen(false);
+                }}
+              >
+                <CheckIcon className="h-3 w-3" />
+                <span>true</span>
+              </Button>
+              <Button
+                size="sm"
+                variant={value === false ? "destructive" : "outline"}
+                className="flex-1 gap-1"
+                onClick={() => {
+                  onSetValue(false);
+                  setOpen(false);
+                }}
+              >
+                <XIcon className="h-3 w-3" />
+                <span>false</span>
+              </Button>
+            </div>
+          </div>
+
+          {/* Clear / Inherit (role columns only) */}
+          {isRoleColumn && onClear && (
+            <>
+              <Separator />
+              <Button
+                size="sm"
+                variant="ghost"
+                className="w-full gap-1 text-muted-foreground"
+                onClick={() => {
+                  onClear();
+                  setOpen(false);
+                }}
+              >
+                <MinusIcon className="h-3 w-3" />
+                {t("rbac.inherit_from_defaults")}
+              </Button>
+            </>
+          )}
+
+          {/* Relationship path builder */}
+          {knownSegments.length > 0 && (
+            <>
+              <Separator />
+              <div>
+                <p className="text-xs font-medium text-muted-foreground mb-2">{t("rbac.relationships")}</p>
+                <div className="max-h-40 space-y-1 overflow-y-auto">
+                  {knownSegments.map((segment) => (
+                    <label
+                      key={segment}
+                      className="flex items-center gap-2 rounded px-1 py-0.5 text-sm hover:bg-muted cursor-pointer"
+                    >
+                      <Checkbox
+                        checked={currentSegments.includes(segment)}
+                        onCheckedChange={() => toggleSegment(segment)}
+                      />
+                      <span className="font-mono text-xs">{segment}</span>
+                    </label>
+                  ))}
+                </div>
+
+                {/* Custom segment input */}
+                <div className="mt-2 flex gap-1">
+                  <Input
+                    value={customSegment}
+                    onChange={(e) => setCustomSegment(e.target.value)}
+                    placeholder={t("rbac.custom_segment_placeholder")}
+                    className="h-7 text-xs font-mono"
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        addCustomSegment();
+                      }
+                    }}
+                  />
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="h-7 px-2 text-xs"
+                    onClick={addCustomSegment}
+                    disabled={!customSegment.trim()}
+                  >
+                    +
+                  </Button>
+                </div>
+
+                {/* Preview */}
+                {currentSegments.length > 0 && (
+                  <div className="mt-2 rounded bg-muted p-2">
+                    <p className="text-xs text-muted-foreground mb-1">{t("rbac.preview")}</p>
+                    <p className="text-xs font-mono break-all">{currentSegments.join("|")}</p>
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export { RbacPermissionPicker };

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

@@ -0,0 +1,40 @@
+"use client";
+
+import { DownloadIcon, RotateCcwIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Badge, Button } from "../../../shadcnui";
+
+interface RbacToolbarProps {
+  isDirty: boolean;
+  onGenerate: () => void;
+  onReset: () => void;
+}
+
+export default function RbacToolbar({ isDirty, onGenerate, onReset }: RbacToolbarProps) {
+  const t = useTranslations();
+
+  return (
+    <div className="flex items-center justify-between rounded-lg border bg-card px-4 py-3">
+      <div className="flex items-center gap-3">
+        <h2 className="text-lg font-semibold">{t("rbac.title")}</h2>
+        {isDirty && (
+          <Badge variant="outline" className="border-amber-400 text-amber-600">
+            {t("rbac.unsaved_changes")}
+          </Badge>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="sm" onClick={onReset} disabled={!isDirty} className="gap-1">
+          <RotateCcwIcon className="h-3.5 w-3.5" />
+          {t("rbac.reset")}
+        </Button>
+        <Button size="sm" onClick={onGenerate} disabled={!isDirty} className="gap-1">
+          <DownloadIcon className="h-3.5 w-3.5" />
+          {t("rbac.generate_migration")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { RbacToolbar };

package/src/features/rbac/data/ModulePaths.ts

@@ -0,0 +1,25 @@
+import { AbstractApiData, JsonApiHydratedDataInterface } from "../../../core";
+import { ModulePathsInterface } from "./ModulePathsInterface";
+
+export class ModulePaths extends AbstractApiData implements ModulePathsInterface {
+  private _moduleId?: string;
+  private _paths?: string[];
+
+  get moduleId(): string {
+    if (!this._moduleId) throw new Error("JsonApi error: module paths moduleId is missing");
+    return this._moduleId;
+  }
+
+  get paths(): string[] {
+    return this._paths ?? [];
+  }
+
+  rehydrate(data: JsonApiHydratedDataInterface): this {
+    super.rehydrate(data);
+
+    this._moduleId = data.jsonApi.attributes.moduleId;
+    this._paths = data.jsonApi.attributes.paths;
+
+    return this;
+  }
+}

package/src/features/rbac/data/ModulePathsInterface.ts

@@ -0,0 +1,6 @@
+import { ApiDataInterface } from "../../../core";
+
+export interface ModulePathsInterface extends ApiDataInterface {
+  get moduleId(): string;
+  get paths(): string[];
+}

package/src/features/rbac/data/PermissionMapping.ts

@@ -0,0 +1,43 @@
+import { AbstractApiData, JsonApiHydratedDataInterface } from "../../../core";
+import { PermissionMappingInterface } from "./PermissionMappingInterface";
+
+export class PermissionMapping extends AbstractApiData implements PermissionMappingInterface {
+  private _roleId?: string;
+  private _moduleId?: string;
+  private _permissions?: {
+    create?: boolean | string;
+    read?: boolean | string;
+    update?: boolean | string;
+    delete?: boolean | string;
+  };
+
+  get roleId(): string {
+    if (!this._roleId) throw new Error("JsonApi error: permission mapping roleId is missing");
+    return this._roleId;
+  }
+
+  get moduleId(): string {
+    if (!this._moduleId) throw new Error("JsonApi error: permission mapping moduleId is missing");
+    return this._moduleId;
+  }
+
+  get permissions(): {
+    create?: boolean | string;
+    read?: boolean | string;
+    update?: boolean | string;
+    delete?: boolean | string;
+  } {
+    if (!this._permissions) throw new Error("JsonApi error: permission mapping permissions is missing");
+    return this._permissions;
+  }
+
+  rehydrate(data: JsonApiHydratedDataInterface): this {
+    super.rehydrate(data);
+
+    this._roleId = data.jsonApi.attributes.roleId;
+    this._moduleId = data.jsonApi.attributes.moduleId;
+    this._permissions = data.jsonApi.meta?.permissions;
+
+    return this;
+  }
+}

package/src/features/rbac/data/PermissionMappingInterface.ts

@@ -0,0 +1,12 @@
+import { ApiDataInterface } from "../../../core";
+
+export interface PermissionMappingInterface extends ApiDataInterface {
+  get roleId(): string;
+  get moduleId(): string;
+  get permissions(): {
+    create?: boolean | string;
+    read?: boolean | string;
+    update?: boolean | string;
+    delete?: boolean | string;
+  };
+}

package/src/features/rbac/data/RbacService.ts

@@ -0,0 +1,47 @@
+import { AbstractService, EndpointCreator, HttpMethod, Modules } from "../../../core";
+import { FeatureInterface } from "../../feature";
+import { RoleInterface } from "../../role";
+import { PermissionMappingInterface } from "./PermissionMappingInterface";
+import { ModulePathsInterface } from "./ModulePathsInterface";
+
+export class RbacService extends AbstractService {
+  static async getFeatures(): Promise<FeatureInterface[]> {
+    const endpoint = new EndpointCreator({ endpoint: Modules.Feature }).addAdditionalParam("fetchAll", "true");
+
+    return this.callApi<FeatureInterface[]>({
+      type: Modules.Feature,
+      method: HttpMethod.GET,
+      endpoint: endpoint.generate(),
+    });
+  }
+
+  static async getRoles(): Promise<RoleInterface[]> {
+    const endpoint = new EndpointCreator({ endpoint: Modules.Role }).addAdditionalParam("fetchAll", "true");
+
+    return this.callApi<RoleInterface[]>({
+      type: Modules.Role,
+      method: HttpMethod.GET,
+      endpoint: endpoint.generate(),
+    });
+  }
+
+  static async getPermissionMappings(): Promise<PermissionMappingInterface[]> {
+    const endpoint = new EndpointCreator({ endpoint: Modules.PermissionMapping });
+
+    return this.callApi<PermissionMappingInterface[]>({
+      type: Modules.PermissionMapping,
+      method: HttpMethod.GET,
+      endpoint: endpoint.generate(),
+    });
+  }
+
+  static async getModuleRelationshipPaths(): Promise<ModulePathsInterface[]> {
+    const endpoint = new EndpointCreator({ endpoint: Modules.ModulePaths });
+
+    return this.callApi<ModulePathsInterface[]>({
+      type: Modules.ModulePaths,
+      method: HttpMethod.GET,
+      endpoint: endpoint.generate(),
+    });
+  }
+}

package/src/features/rbac/data/RbacTypes.ts

@@ -0,0 +1,15 @@
+export const COMPANY_ADMINISTRATOR_ROLE_ID = "2e1eee00-6cba-4506-9059-ccd24e4ea5b0";
+
+export type PermissionValue = boolean | string;
+
+export type ActionType = "read" | "create" | "update" | "delete";
+
+export const ACTION_TYPES: ActionType[] = ["read", "create", "update", "delete"];
+
+/** The permissions object shape used by both Module and PermissionMapping entities */
+export type PermissionsMap = {
+  create?: PermissionValue;
+  read?: PermissionValue;
+  update?: PermissionValue;
+  delete?: PermissionValue;
+};

package/src/features/rbac/data/index.ts

@@ -0,0 +1,6 @@
+export * from "./RbacTypes";
+export * from "./PermissionMapping";
+export * from "./PermissionMappingInterface";
+export * from "./ModulePaths";
+export * from "./ModulePathsInterface";
+export * from "./RbacService";

package/src/features/rbac/hooks/useRbacState.test.ts

@@ -0,0 +1,178 @@
+import { describe, it, expect } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useRbacState } from "./useRbacState";
+import { FeatureInterface } from "../../feature";
+import { RoleInterface } from "../../role";
+import { PermissionMappingInterface } from "../data/PermissionMappingInterface";
+import { ModulePathsInterface } from "../data/ModulePathsInterface";
+import { ModuleInterface } from "../../module";
+
+const mockModule: ModuleInterface = {
+  id: "mod-1",
+  type: "modules",
+  included: [],
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  name: "pipelines",
+  permissions: { create: true, read: true, update: true, delete: false },
+} as ModuleInterface;
+
+const mockFeatures: FeatureInterface[] = [
+  {
+    id: "feat-1",
+    type: "features",
+    included: [],
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    name: "CRM",
+    isCore: false,
+    modules: [mockModule],
+  } as FeatureInterface,
+];
+
+const mockRoles: RoleInterface[] = [
+  {
+    id: "role-1",
+    type: "roles",
+    included: [],
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    name: "Manager",
+    description: "",
+    isSelectable: true,
+    requiredFeature: undefined,
+  } as unknown as RoleInterface,
+  {
+    id: "role-2",
+    type: "roles",
+    included: [],
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    name: "Viewer",
+    description: "",
+    isSelectable: true,
+    requiredFeature: undefined,
+  } as unknown as RoleInterface,
+];
+
+const mockPermissionMappings: PermissionMappingInterface[] = [];
+
+const mockModulePaths: ModulePathsInterface[] = [
+  {
+    id: "mod-1",
+    type: "module-paths",
+    included: [],
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    moduleId: "mod-1",
+    paths: ["owner", "company.user"],
+  } as unknown as ModulePathsInterface,
+];
+
+function initHook() {
+  const { result } = renderHook(() => useRbacState());
+  act(() => {
+    result.current.init(mockFeatures, mockRoles, mockPermissionMappings, mockModulePaths);
+  });
+  return result;
+}
+
+describe("useRbacState", () => {
+  describe("Scenario: Initialize state from fetched data", () => {
+    it("should initialize with features and roles", () => {
+      const result = initHook();
+
+      expect(result.current.original).not.toBeNull();
+      expect(result.current.original!.features).toHaveLength(1);
+      expect(result.current.original!.features[0].name).toBe("CRM");
+      expect(result.current.isDirty).toBe(false);
+    });
+  });
+
+  describe("Scenario: Set module default permission", () => {
+    it("should update default permission and mark as dirty", () => {
+      const result = initHook();
+
+      act(() => {
+        result.current.setModuleDefaultPermission("mod-1", "delete", true);
+      });
+
+      expect(result.current.getModuleDefaultPermission("mod-1", "delete")).toBe(true);
+      expect(result.current.isDirty).toBe(true);
+    });
+  });
+
+  describe("Scenario: Set role-specific permission override", () => {
+    it("should set role permission for a specific module and action", () => {
+      const result = initHook();
+
+      act(() => {
+        result.current.setRolePermission("role-1", "mod-1", "create", false);
+      });
+
+      expect(result.current.getRolePermission("role-1", "mod-1", "create")).toBe(false);
+      expect(result.current.isDirty).toBe(true);
+    });
+
+    it("should support string path values for role permissions", () => {
+      const result = initHook();
+
+      act(() => {
+        result.current.setRolePermission("role-2", "mod-1", "update", "owner");
+      });
+
+      expect(result.current.getRolePermission("role-2", "mod-1", "update")).toBe("owner");
+    });
+  });
+
+  describe("Scenario: Clear role permission (inherit from default)", () => {
+    it("should clear a role permission so it inherits from default", () => {
+      const result = initHook();
+
+      act(() => {
+        result.current.setRolePermission("role-1", "mod-1", "create", false);
+      });
+
+      act(() => {
+        result.current.clearRolePermission("role-1", "mod-1", "create");
+      });
+
+      expect(result.current.getRolePermission("role-1", "mod-1", "create")).toBeNull();
+    });
+  });
+
+  describe("Scenario: Reset to initial state", () => {
+    it("should reset all changes and clear dirty flag", () => {
+      const result = initHook();
+
+      act(() => {
+        result.current.setModuleDefaultPermission("mod-1", "delete", true);
+      });
+
+      expect(result.current.isDirty).toBe(true);
+
+      act(() => {
+        result.current.reset();
+      });
+
+      expect(result.current.isDirty).toBe(false);
+      expect(result.current.getModuleDefaultPermission("mod-1", "delete")).toBe(false);
+    });
+  });
+
+  describe("Scenario: Get effective configuration for migration", () => {
+    it("should return complete configuration with all changes applied", () => {
+      const result = initHook();
+
+      act(() => {
+        result.current.setRolePermission("role-1", "mod-1", "delete", true);
+      });
+
+      const config = result.current.getEffectiveConfiguration();
+      expect(config).not.toBeNull();
+      expect(config!.features).toHaveLength(1);
+      expect(config!.roles).toHaveLength(2);
+      expect(config!.rolePermissionsMap).toBeInstanceOf(Map);
+    });
+  });
+});