Add horizontal limit, search bar and change icons of access tree component

frontend/src/components/permissions/AccessTree/utils/createBaseEdge.ts

@@ -5,11 +5,13 @@ import { PermissionAccess, PermissionEdge } from "../types";
 export const createBaseEdge = ({
   source,
   target,
-  access
+  access,
+  hideEdge = false
 }: {
   source: string;
   target: string;
   access: PermissionAccess;
+  hideEdge?: boolean;
 }) => {
   const color = access === PermissionAccess.None ? "#707174" : "#ccccce";
   return {
@@ -17,10 +19,12 @@ export const createBaseEdge = ({
     source,
     target,
     type: PermissionEdge.Base,
-    markerEnd: {
-      type: MarkerType.ArrowClosed,
-      color
-    },
-    style: { stroke: color }
+    markerEnd: hideEdge
+      ? undefined
+      : {
+          type: MarkerType.ArrowClosed,
+          color
+        },
+    style: { stroke: hideEdge ? "transparent" : color }
   };
 };

frontend/src/components/permissions/AccessTree/utils/createShowMoreNode.ts

@@ -0,0 +1,25 @@
+import { PermissionNode } from "../types";
+
+export const createShowMoreNode = ({
+  parentId,
+  onClick,
+  remaining
+}: {
+  parentId: string | null;
+  onClick: () => void;
+  remaining: number;
+}) => {
+  const id = `show-more-${parentId || "root"}`;
+  return {
+    id,
+    type: PermissionNode.ShowMoreButton,
+    position: { x: 0, y: 0 },
+    data: {
+      parentId,
+      onClick,
+      remaining
+    },
+    width: 100,
+    height: 40
+  };
+};

frontend/src/components/permissions/AccessTree/utils/positionElements.ts

@@ -2,27 +2,60 @@ import Dagre from "@dagrejs/dagre";
 import { Edge, Node } from "@xyflow/react";
 
 export const positionElements = (nodes: Node[], edges: Edge[]) => {
+  const regularNodes = nodes.filter((node) => node.type !== "showMoreButton");
+  const showMoreNodes = nodes.filter((node) => node.type === "showMoreButton");
+
+  const nodeMap: Record<string, Node> = {};
+
   const dagre = new Dagre.graphlib.Graph({ directed: true })
     .setDefaultEdgeLabel(() => ({}))
     .setGraph({ rankdir: "TB" });
 
   edges.forEach((edge) => dagre.setEdge(edge.source, edge.target));
-  nodes.forEach((node) => dagre.setNode(node.id, node));
+
+  regularNodes.forEach((node) => dagre.setNode(node.id, node));
 
   Dagre.layout(dagre, {});
 
-  return {
-    nodes: nodes.map((node) => {
-      const { x, y } = dagre.node(node.id);
+  const positionedNodes = regularNodes.map((node) => {
+    const { x, y } = dagre.node(node.id);
 
-      return {
-        ...node,
-        position: {
-          x: x - (node.width ? node.width / 2 : 0),
-          y: y - (node.height ? node.height / 2 : 0)
-        }
-      };
-    }),
+    const positionedNode = {
+      ...node,
+      position: {
+        x: x - (node.width ? node.width / 2 : 0),
+        y: y - (node.height ? node.height / 2 : 0)
+      }
+    };
+
+    nodeMap[node.id] = positionedNode;
+
+    return positionedNode;
+  });
+
+  const positionedShowMoreNodes = showMoreNodes.map((node) => {
+    const parentId = node.data.parentId as string;
+    const { isStart } = node.data;
+
+    const parentNode = nodeMap[parentId] || positionedNodes[0];
+    const parentX = parentNode.position.x;
+    const parentY = parentNode.position.y;
+
+    const parentWidth = parentNode.width || 150;
+    const buttonWidth = node.width || 100;
+
+    const buttonX = isStart ? parentX - buttonWidth - 20 : parentX + parentWidth + 20;
+
+    return {
+      ...node,
+      position: {
+        x: buttonX,
+        y: parentY
+      }
+    };
+  });
+  return {
+    nodes: [...positionedNodes, ...positionedShowMoreNodes],
     edges
   };
 };