fix display label in other branches (#5952)

pa-lem · web-flow · commit e8614bf15d92 · 2025-03-06T15:58:09.000+01:00
diff --git a/frontend/app/src/entities/events/ui/branch-events/branch-event-title.tsx b/frontend/app/src/entities/events/ui/branch-events/branch-event-title.tsx
@@ -33,11 +33,11 @@ export const BRANCH_EVENTS_MAPPING: Record<string, (props: EventNodeInterface) =
 };
 
 export const BranchEventTitle = (props: EventNodeInterface) => {
-  const { event, account_id } = props;
+  const { event, account_id, branch } = props;
 
   return (
     <div className="flex items-center flex-wrap gap-2 text-sm">
-      <NodeLabel id={account_id} />
+      <NodeLabel id={account_id} kind="CoreAccount" branch={branch} />
 
       {BRANCH_EVENTS_MAPPING[event] && BRANCH_EVENTS_MAPPING[event](props)}
     </div>
diff --git a/frontend/app/src/entities/events/ui/group-events/group-event-title.tsx b/frontend/app/src/entities/events/ui/group-events/group-event-title.tsx
@@ -5,51 +5,67 @@ import { Link } from "@/shared/components/ui/link";
 import { ReactElement } from "react";
 
 export const GROUP_EVENTS_MAPPING: Record<string, (props: EventNodeInterface) => ReactElement> = {
-  "infrahub.group.member_added": ({ related_nodes, primary_node }) => {
+  "infrahub.group.member_added": (props) => {
     return (
       <div className="flex flex-wrap items-center gap-1 whitespace-nowrap">
         added{" "}
         <div className="flex items-center gap-1 text-black">
-          {related_nodes.slice(0, 5).map(({ id, kind }) => {
+          {props.related_nodes.slice(0, 5).map(({ id, kind }) => {
             return (
               <Link key={id} to={constructPath(`/objects/${kind}/${id}`)}>
-                <NodeLabel key={id} id={id} />
+                <NodeLabel key={id} id={id} branch={props.branch} />
               </Link>
             );
           })}
-          {related_nodes.slice(6).length > 0 && (
-            <span className="italic text-gray-500">(+{related_nodes.slice(6).length})</span>
+          {props.related_nodes.slice(6).length > 0 && (
+            <span className="italic text-gray-500">(+{props.related_nodes.slice(6).length})</span>
           )}
         </div>{" "}
         in group{" "}
         <span className="text-black font-semibold">
-          <Link key={primary_node?.id} to={constructPath(`/objects/CoreGroup/${primary_node?.id}`)}>
-            <NodeLabel key={primary_node?.id} id={primary_node?.id} kind={primary_node?.kind} />
+          <Link
+            key={props.primary_node?.id}
+            to={constructPath(`/objects/CoreGroup/${props.primary_node?.id}`)}
+          >
+            <NodeLabel
+              key={props.primary_node?.id}
+              id={props.primary_node?.id}
+              kind={props.primary_node?.kind}
+              branch={props.branch}
+            />
           </Link>
         </span>
       </div>
     );
   },
-  "infrahub.group.member_removed": ({ related_nodes, primary_node }) => {
+  "infrahub.group.member_removed": (props) => {
     return (
       <div className="flex flex-wrap items-center gap-1 whitespace-nowrap">
         removed{" "}
         <div className="flex items-center gap-1 text-black">
-          {related_nodes.slice(0, 5).map(({ id, kind }) => {
+          {props.related_nodes.slice(0, 5).map(({ id, kind }) => {
             return (
               <Link key={id} to={constructPath(`/objects/${kind}/${id}`)}>
-                <NodeLabel key={id} id={id} />
+                <NodeLabel key={id} id={id} branch={props.branch} />
               </Link>
             );
           })}
-          {related_nodes.slice(6).length > 0 && (
-            <span className="italic text-gray-500">(+{related_nodes.slice(6).length})</span>
+          {props.related_nodes.slice(6).length > 0 && (
+            <span className="italic text-gray-500">(+{props.related_nodes.slice(6).length})</span>
           )}
         </div>{" "}
         from group{" "}
         <span className="text-black">
-          <Link key={primary_node?.id} to={constructPath(`/objects/CoreGroup/${primary_node?.id}`)}>
-            <NodeLabel key={primary_node?.id} id={primary_node?.id} kind={primary_node?.kind} />
+          <Link
+            key={props.primary_node?.id}
+            to={constructPath(`/objects/CoreGroup/${props.primary_node?.id}`)}
+          >
+            <NodeLabel
+              key={props.primary_node?.id}
+              id={props.primary_node?.id}
+              kind={props.primary_node?.kind}
+              branch={props.branch}
+            />
           </Link>
         </span>
       </div>
@@ -62,7 +78,7 @@ export const GroupEventTitle = (props: EventNodeInterface) => {
 
   return (
     <div className="flex items-center flex-wrap gap-1 text-sm">
-      <NodeLabel id={account_id} />
+      <NodeLabel id={account_id} kind="CoreAccount" branch={props.branch} />
 
       <div className="text-gray-500">
         {GROUP_EVENTS_MAPPING[event] && GROUP_EVENTS_MAPPING[event](props)}
diff --git a/frontend/app/src/entities/events/ui/node-events/node-event-title.tsx b/frontend/app/src/entities/events/ui/node-events/node-event-title.tsx
@@ -41,7 +41,7 @@ export const NodeEventTitle = ({
 
   return (
     <div className="flex flex-wrap items-center gap-1 text-sm">
-      <NodeLabel id={account_id} />
+      <NodeLabel id={account_id} kind="CoreAccount" branch={branch} />
       <span className="text-gray-600 whitespace-nowrap">{NODE_EVENTS_MAPPING[event] ?? event}</span>
       <div className="text-gray-600 whitespace-nowrap">
         {schemaLabels[payload.data.node_kind] ?? "-"}
@@ -50,6 +50,7 @@ export const NodeEventTitle = ({
         <NodeLabel
           id={primary_node.id}
           kind={primary_node?.kind}
+          branch={branch}
           className="overflow-hidden text-ellipsis whitespace-nowrap"
         />
       ) : (
@@ -64,6 +65,7 @@ export const NodeEventTitle = ({
           <NodeLabel
             id={primary_node.id}
             kind={primary_node?.kind}
+            branch={branch}
             className="overflow-hidden text-ellipsis whitespace-nowrap"
           />
         </Link>
diff --git a/frontend/app/src/entities/events/ui/standard-events/standard-event-title.tsx b/frontend/app/src/entities/events/ui/standard-events/standard-event-title.tsx
@@ -10,26 +10,6 @@ export const STANDARD_EVENTS_MAPPING: Record<string, (props: EventNodeInterface)
     "infrahub.schema.update": () => {
       return <div className="flex flex-wrap items-center gap-2">updated the schema</div>;
     },
-    "infrahub.branch.create": (props) => {
-      return (
-        <div className="flex flex-wrap items-center gap-2">
-          merged the branch
-          <Link to={`/branches/${props.payload?.context?.branch?.name}`} className="text-black">
-            {props.payload?.context?.branch?.name}
-          </Link>
-        </div>
-      );
-    },
-    "infrahub.branch.merged": (props) => {
-      return (
-        <div className="flex flex-wrap items-center gap-2">
-          merged the branch
-          <Link to={`/branches/${props.payload?.context?.branch?.name}`} className="text-black">
-            {props.payload?.context?.branch?.name}
-          </Link>
-        </div>
-      );
-    },
     "infrahub.repository.update_commit": (props) => {
       return (
         <div className="flex flex-wrap items-center gap-2">
@@ -50,11 +30,11 @@ export const STANDARD_EVENTS_MAPPING: Record<string, (props: EventNodeInterface)
   };
 
 export const StandardEventTitle = (props: EventNodeInterface) => {
-  const { event, account_id } = props;
+  const { event, account_id, branch } = props;
 
   return (
     <div className="flex items-center flex-wrap gap-1 text-sm">
-      <NodeLabel id={account_id} />
+      <NodeLabel id={account_id} kind="CoreAccount" branch={branch} />
 
       <div className="text-gray-500">
         {STANDARD_EVENTS_MAPPING[event] && STANDARD_EVENTS_MAPPING[event](props)}
diff --git a/frontend/app/src/entities/nodes/object/api/get-display-label.query.ts b/frontend/app/src/entities/nodes/object/api/get-display-label.query.ts
@@ -5,7 +5,12 @@ import { queryOptions, useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { getNodeLabelFromApi } from "./get-display-label";
 
-type NodeLabelProps = { objectid?: string; kind: string; enabled?: boolean; branch?: string };
+type NodeLabelProps = {
+  objectid?: string;
+  kind: string;
+  enabled?: boolean;
+  branch?: string | null;
+};
 
 export function getNodeLabelQueryOptions({
   objectid,
diff --git a/frontend/app/src/entities/nodes/object/ui/node-label.tsx b/frontend/app/src/entities/nodes/object/ui/node-label.tsx
@@ -6,14 +6,14 @@ import { useNodeLabel } from "../api/get-display-label.query";
 type NodeLabelProps = {
   id?: string;
   kind?: string;
-  branch?: string;
+  branch?: string | null;
   className?: string;
 };
 
 export const NodeLabel = ({ id, kind = NODE_OBJECT, branch, className }: NodeLabelProps) => {
-  const { isLoading, error, data } = useNodeLabel({ objectid: id, kind, enabled: !!id, branch });
+  const { isPending, error, data } = useNodeLabel({ objectid: id, kind, enabled: !!id, branch });
 
-  if (isLoading) {
+  if (isPending) {
     return <Skeleton className="h-3 w-14" />;
   }
 
