Update activities links and add more events in the UI

frontend/app/src/entities/events/api/get-events-from-api.ts

@@ -78,17 +78,33 @@ const EVENTS_QUERY = gql`
             }
             payload
           }
-          ... on BranchCreatedEvent {
+          ... on StandardEvent {
             payload
           }
-          ... on StandardEvent {
+            ... on BranchCreatedEvent {
             payload
+            created_branch
           }
           ... on BranchDeletedEvent {
             payload
+            deleted_branch
           }
           ... on BranchRebasedEvent {
             payload
+            rebased_branch
+          }
+            ... on BranchMergedEvent {
+            source_branch
+          }
+          ... on GroupEvent {
+            ancestors {
+              id
+              kind
+            }
+            members {
+              id
+              kind
+            }
           }
           ... on GroupEvent {
             ancestors {

frontend/app/src/entities/events/ui/branch-event.tsx

@@ -1,21 +1,35 @@
 import { NodeLabel } from "@/entities/nodes/object/ui/node-label";
 import { EventNodeInterface } from "@/shared/api/graphql/generated/graphql";
+import { Link } from "@/shared/components/ui/link";
 import { ReactNode } from "react";
 
 export const BRANCH_EVENTS_MAPPING: Record<string, (props: EventNodeInterface) => ReactNode> = {
   "infrahub.branch.created": (props) => (
     <div>
-      created the branch <span className="text-black font-semibold">{props.branch}</span>{" "}
+      created the branch{" "}
+      <Link to={`/branches/${props.created_branch}`} className="text-black font-semibold">
+        {props.created_branch ?? "-"}
+      </Link>
     </div>
   ),
   "infrahub.branch.rebased": (props) => (
     <div>
-      rebased the branch <span className="text-black font-semibold">{props.branch}</span>{" "}
+      rebased the branch{" "}
+      <Link to={`/branches/${props.rebased_branch}`} className="text-black font-semibold">
+        {props.rebased_branch ?? "-"}
+      </Link>
+    </div>
+  ),
+  "infrahub.branch.merged": (props) => (
+    <div>
+      merged the branch{" "}
+      <span className="text-black font-semibold">{props.source_branch ?? "-"}</span>
     </div>
   ),
   "infrahub.branch.deleted": (props) => (
     <div>
-      deleted the branch <span className="text-black font-semibold">{props.branch}</span>{" "}
+      deleted the branch{" "}
+      <span className="text-black font-semibold">{props.deleted_branch ?? "-"}</span>
     </div>
   ),
 };

frontend/app/src/entities/events/ui/event.tsx

@@ -42,6 +42,7 @@ export type EventType = BranchEventType | NodeEventType | GroupEvent;
 export const EventDetails = ({
   id,
   event,
+  branch,
   occurred_at,
   account_id,
   primary_node,
@@ -61,6 +62,7 @@ export const EventDetails = ({
         }
       />
       <PropertyRow title="Event" value={event} />
+      <PropertyRow title="Branch" value={branch} />
       <PropertyRow title="Occured at" value={<DateDisplay date={occurred_at} />} />
       {account_id && (
         <PropertyRow

frontend/app/src/entities/events/ui/global-branch-event.tsx

@@ -15,7 +15,7 @@ export const BranchEvent = (props: EventNodeInterface) => {
           <NodeLabel id={account_id} />
         </div>
 
-        {BRANCH_EVENTS_MAPPING[event] && BRANCH_EVENTS_MAPPING[event](props)}
+        {(BRANCH_EVENTS_MAPPING[event] && BRANCH_EVENTS_MAPPING[event](props)) ?? event}
       </div>
     </div>
   );

frontend/app/src/entities/events/ui/global-event.tsx

@@ -3,13 +3,34 @@ import { Tooltip } from "@/shared/components/ui/tooltip";
 import { classNames } from "@/shared/utils/common";
 import { Icon } from "@iconify-icon/react";
 import { format } from "date-fns";
-import { BRANCH_EVENTS, STANDARD_EVENTS } from "../utils/constants";
+import { BRANCH_EVENTS, GROUP_EVENTS, STANDARD_EVENTS } from "../utils/constants";
 import { EventType } from "./event";
 import { BranchEvent } from "./global-branch-event";
+import { GroupEvent } from "./global-group-event";
 import { NodeEvent } from "./global-node-event";
 import { StandardEvent } from "./global-standard-event";
 
-export const Event = ({ __typename, ...props }: EventType) => {
+const GlobalEventDisplay = ({ __typename, ...props }: EventType) => {
+  if ("attributes" in props) {
+    return <NodeEvent {...props} />;
+  }
+
+  if (BRANCH_EVENTS.includes(__typename)) {
+    return <BranchEvent {...props} />;
+  }
+
+  if (STANDARD_EVENTS.includes(__typename)) {
+    return <StandardEvent {...props} />;
+  }
+
+  if (GROUP_EVENTS.includes(__typename)) {
+    return <GroupEvent {...props} />;
+  }
+
+  return <span className="flex items-center text-sm text-gray-500 ">{props.event}</span>;
+};
+
+export const Event = (props: EventType) => {
   return (
     <div
       className={classNames(
@@ -18,23 +39,23 @@ export const Event = ({ __typename, ...props }: EventType) => {
       )}
     >
       <div className="flex items-center text-xs font-medium text-gray-500 whitespace-nowrap">
-        <Tooltip enabled content={props.occurred_at}>
+        <Tooltip enabled content={format(new Date(props.occurred_at), "yyyy-MM-dd HH:mm:ss (O)")}>
           <span>{format(new Date(props.occurred_at), "MMM dd, HH:mm:ss")}</span>
         </Tooltip>
       </div>
 
       <div className="col-span-5 flex item-center gap-4 overflow-hidden">
-        {"attributes" in props && <NodeEvent {...props} />}
-
-        {BRANCH_EVENTS.includes(__typename) && <BranchEvent {...props} />}
-
-        {STANDARD_EVENTS.includes(__typename) && <StandardEvent {...props} />}
+        <GlobalEventDisplay {...props} />
       </div>
 
       <div className="text-xs font-medium text-gray-500 flex items-center gap-1">
-        <Icon icon={"mdi:source-branch"} />
+        {props.branch && (
+          <>
+            <Icon icon={"mdi:source-branch"} />
 
-        {props.branch}
+            {props.branch}
+          </>
+        )}
       </div>
 
       <div className="relative">

frontend/app/src/entities/events/ui/global-group-event.tsx

@@ -0,0 +1,24 @@
+import { NodeLabel } from "@/entities/nodes/object/ui/node-label";
+import { EventNodeInterface } from "@/shared/api/graphql/generated/graphql";
+import { Icon } from "@iconify-icon/react";
+import { GROUP_EVENTS_MAPPING } from "./group-event";
+
+export const GroupEvent = (props: EventNodeInterface) => {
+  const { event, account_id } = props;
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 text-sm text-gray-500">
+          <Icon icon="mdi:group" className="text-gray-400" />
+
+          <div className="text-black font-semibold">
+            <NodeLabel id={account_id} kind="CoreAccount" branch={props.branch} />
+          </div>
+
+          {(GROUP_EVENTS_MAPPING[event] && GROUP_EVENTS_MAPPING[event](props)) ?? event}
+        </div>
+      </div>
+    </>
+  );
+};

frontend/app/src/entities/events/ui/global-node-event.tsx

@@ -1,13 +1,11 @@
-import { QSP } from "@/config/qsp";
 import { NodeLabel } from "@/entities/nodes/object/ui/node-label";
 import { schemaKindLabelState } from "@/entities/schema/stores/schemaKindLabel.atom";
 import { useSchema } from "@/entities/schema/ui/hooks/useSchema";
 import { NodeMutatedEvent } from "@/shared/api/graphql/generated/graphql";
-import { constructPath } from "@/shared/api/rest/fetch";
 import { Link } from "@/shared/components/ui/link";
 import { Icon } from "@iconify-icon/react";
 import { useAtomValue } from "jotai";
-import { NODE_EVENTS_MAPPING } from "./node-event";
+import { NODE_EVENTS_MAPPING, getLink } from "./node-event";
 
 export const EventAttributes = ({ attributes }: Pick<NodeMutatedEvent, "attributes">) => {
   return (
@@ -45,30 +43,36 @@ export const NodeEvent = (props: NodeMutatedEvent) => {
         className="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
       />
 
-      <div className="text-gray-500">{NODE_EVENTS_MAPPING[event] ?? "-"}</div>
+      <div className="text-gray-500">{NODE_EVENTS_MAPPING[event] ?? event}</div>
 
       <div className="font-semibold whitespace-nowrap">
         {schemaLabels[props.payload.data.node_kind] ?? "-"}
       </div>
 
-      <Link
-        to={constructPath(
-          `/objects/${props.payload.data.node_kind}/${props.payload.data.node_id}`,
-          [
-            {
-              name: QSP.BRANCH,
-              value: props.branch,
-            },
-          ]
-        )}
-        className="overflow-hidden text-ellipsis"
-      >
+      {event.includes("deleted") ? (
         <NodeLabel
           id={props.primary_node.id}
           kind={props.primary_node?.kind}
+          branch={props.branch}
           className="overflow-hidden text-ellipsis whitespace-nowrap"
         />
-      </Link>
+      ) : (
+        <Link
+          to={getLink({
+            kind: props.primary_node?.kind,
+            id: props.primary_node.id,
+            branch: props.branch,
+          })}
+          className="overflow-hidden text-ellipsis"
+        >
+          <NodeLabel
+            id={props.primary_node.id}
+            kind={props.primary_node?.kind}
+            branch={props.branch}
+            className="overflow-hidden text-ellipsis whitespace-nowrap"
+          />
+        </Link>
+      )}
     </div>
   );
 };

frontend/app/src/entities/events/ui/global-standard-event.tsx

@@ -4,10 +4,6 @@ import { Icon } from "@iconify-icon/react";
 import { STANDARD_EVENTS_MAPPING } from "./standard-event";
 
 const getStandardEventIcon = (event: string) => {
-  if (event.includes("group")) {
-    return <Icon icon="mdi:group" className="text-gray-400" />;
-  }
-
   if (event.includes("schema")) {
     return <Icon icon="mdi:code-json" className="text-gray-400" />;
   }
@@ -24,13 +20,15 @@ export const StandardEvent = (props: EventNodeInterface) => {
         <div className="flex items-center gap-2 text-sm text-gray-500">
           {getStandardEventIcon(event)}
 
-          <div className="text-black font-semibold">
-            <NodeLabel id={account_id} kind="CoreAccount" />
-          </div>
-
-          {STANDARD_EVENTS_MAPPING[event] && STANDARD_EVENTS_MAPPING[event](props)}
+          {account_id ? (
+            <div className="text-black font-semibold">
+              <NodeLabel id={account_id} kind="CoreAccount" />
+            </div>
+          ) : (
+            "-"
+          )}
 
-          {!STANDARD_EVENTS_MAPPING[event] && event}
+          {(STANDARD_EVENTS_MAPPING[event] && STANDARD_EVENTS_MAPPING[event](props)) ?? event}
         </div>
       </div>
     </>

frontend/app/src/entities/events/ui/group-event.tsx

@@ -0,0 +1,80 @@
+import { NodeLabel } from "@/entities/nodes/object/ui/node-label";
+import { EventNodeInterface } from "@/shared/api/graphql/generated/graphql";
+import { constructPath } from "@/shared/api/rest/fetch";
+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 }) => {
+    return (
+      <div className="flex items-center gap-2">
+        added{" "}
+        <div className="flex items-center gap-1 text-black">
+          {related_nodes.slice(0, 5).map(({ id, kind }) => {
+            return (
+              <Link key={id} to={constructPath(`/objects/${kind}/${id}`)}>
+                <NodeLabel key={id} id={id} />
+              </Link>
+            );
+          })}
+          {related_nodes.slice(6).length > 0 && (
+            <span className="italic text-gray-500">(+{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>
+        </span>
+      </div>
+    );
+  },
+  "infrahub.group.member_removed": ({ related_nodes, primary_node }) => {
+    return (
+      <div className="flex items-center gap-2">
+        removed{" "}
+        <div className="flex items-center gap-1 text-black">
+          {related_nodes.slice(0, 5).map(({ id, kind }) => {
+            return (
+              <Link key={id} to={constructPath(`/objects/${kind}/${id}`)}>
+                <NodeLabel key={id} id={id} />
+              </Link>
+            );
+          })}
+          {related_nodes.slice(6).length > 0 && (
+            <span className="italic text-gray-500">(+{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>
+        </span>
+      </div>
+    );
+  },
+};
+
+export const GroupEvent = (props: EventNodeInterface) => {
+  const { event, account_id } = props;
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 text-sm">
+          <div className="font-semibold">
+            <NodeLabel id={account_id} />
+          </div>
+
+          <div className="text-gray-500">
+            {GROUP_EVENTS_MAPPING[event] && GROUP_EVENTS_MAPPING[event](props)}
+
+            {!GROUP_EVENTS_MAPPING[event] && event}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};