implement content for node of audit file view

Author: florianbgt

…ckages/app/src/components/GroupBadge.tsx …app/src/components/Badges/GroupBadge.tsxpackages/app/src/components/GroupBadge.tsx renamed to packages/app/src/components/Badges/GroupBadge.tsx packages/app/src/components/GroupBadge.tsx renamed to packages/app/src/components/Badges/GroupBadge.tsx

@@ -0,0 +1,29 @@
+import { Badge, BadgeProps } from "@radix-ui/themes";
+import { useEffect, useState } from "react";
+
+export default function InstanceTypeBadge(props: { type: string }) {
+  const [color, setColor] = useState<BadgeProps["color"]>("gray");
+
+  useEffect(() => {
+    switch (props.type.toLowerCase()) {
+      case "class":
+        setColor("green");
+        break;
+      case "function":
+        setColor("blue");
+        break;
+      case "assignement":
+        setColor("gray");
+        break;
+      default:
+        setColor("gray");
+        break;
+    }
+  }, [props.type]);
+
+  return (
+    <Badge color={color} variant="solid" radius="full" size="1">
+      {props.type}
+    </Badge>
+  );
+}

packages/app/src/components/Badges/InstanceTypeBadge.tsx

@@ -2,6 +2,7 @@ import { Button, Tooltip } from "@radix-ui/themes";
 import { Handle, Node, NodeProps, Position } from "@xyflow/react";
 import { Link } from "react-router";
 import { AuditFile } from "../../../service/api/types";
+import { defaultMaxPathLength, getDisplayedPath } from "../../../helpers";
 
 export default function AuditFileNode(
   props: NodeProps<
@@ -13,16 +14,6 @@ export default function AuditFileNode(
     >
   >,
 ) {
-  const maxPathLength = 25;
-
-  function getDisplayedPath(path: string) {
-    if (path.length > maxPathLength) {
-      return `...${path.slice(-maxPathLength)}`;
-    }
-
-    return path;
-  }
-
   function getWarnings() {
     const warnings: string[] = [];
 
@@ -173,9 +164,9 @@ export default function AuditFileNode(
         to={encodeURIComponent(props.data.path)}
         className="text-center p-5"
       >
-        {props.data.path.length > maxPathLength ? (
+        {props.data.path.length > defaultMaxPathLength ? (
           <Tooltip content={props.data.path}>
-            <div>{getDisplayedPath(props.data.path)}</div>
+            <div>{getDisplayedPath(props.data.path, defaultMaxPathLength)}</div>
           </Tooltip>
         ) : (
           props.data.path

…kages/app/src/components/MethodBadge.tsx …pp/src/components/Badges/MethodBadge.tsxpackages/app/src/components/MethodBadge.tsx renamed to packages/app/src/components/Badges/MethodBadge.tsx packages/app/src/components/MethodBadge.tsx renamed to packages/app/src/components/Badges/MethodBadge.tsx

@@ -0,0 +1,40 @@
+import { Handle, Node, NodeProps, Position } from "@xyflow/react";
+
+export default function ContainerFileNode(
+  props: NodeProps<
+    Node<
+      { fileName: string; isBeingDragged: boolean } & Record<string, unknown>
+    >
+  >,
+) {
+  const className = [
+    "bg-transparent",
+    "rounded-xl border border-background-light dark:border-background-dark",
+    `${props.data.isBeingDragged && "bg-blue-100 dark:bg-blue-900 shadow-lg"}`,
+  ].join(" ");
+
+  return (
+    <div
+      className={className}
+      style={{
+        width: props.width,
+        height: props.height,
+        zIndex: props.zIndex,
+      }}
+    >
+      <Handle
+        type="target"
+        position={props.targetPosition || Position.Top}
+        isConnectable={props.isConnectable}
+        className="border-0 bg-transparent"
+      />
+
+      <Handle
+        type="source"
+        position={props.sourcePosition || Position.Bottom}
+        isConnectable={props.isConnectable}
+        className="border-0 bg-transparent"
+      />
+    </div>
+  );
+}

packages/app/src/components/ReactFlow/AuditTree/AuditFileNode.tsx

@@ -0,0 +1,43 @@
+import { Handle, Node, NodeProps, Position } from "@xyflow/react";
+
+export default function ContainerReferencesNode(
+  props: NodeProps<
+    Node<
+      {
+        containerType: "dependents" | "dependencies";
+        isBeingDragged: boolean;
+      } & Record<string, unknown>
+    >
+  >,
+) {
+  const className = [
+    `${props.data.containerType === "dependencies" ? "bg-primary-light/10 dark:bg-primary-dark/30" : "bg-secondary-light/10 dark:bg-secondary-dark/30"}`,
+    "rounded-xl border border-border-light dark:border-border-dark",
+    `${props.data.isBeingDragged && "bg-blue-100 dark:bg-blue-900 shadow-lg"}`,
+  ].join(" ");
+
+  return (
+    <div
+      className={className}
+      style={{
+        width: props.width,
+        height: props.height,
+        zIndex: props.zIndex,
+      }}
+    >
+      <Handle
+        type="target"
+        position={props.targetPosition || Position.Top}
+        isConnectable={props.isConnectable}
+        className="border-0 bg-transparent"
+      />
+
+      <Handle
+        type="source"
+        position={props.sourcePosition || Position.Bottom}
+        isConnectable={props.isConnectable}
+        className="border-0 bg-transparent"
+      />
+    </div>
+  );
+}