Activities cleanup and UI updates (#5937)

* start upate get events functions

* wip

* fix lint

* remove duplicate

* rename for consistency

* moved file around

* Styled changes on attributes

* improving UI node event

* extracted event details popover

* more simplification

* move standard events

* move filters

* move node events component

* rename file

* nowrap

* update branch events

* update group event

* update standard event

* fix group event in node details view

* fix wrap

* fix wrap title

* fix event attributes

* fix sub activities

* update media query

* wrap items on small screens

* fix grow

* update tests

* update test

---------

Co-authored-by: bilalabbad <[email protected]>

Author: pa-lem

backend/infrahub/menu/menu.py

@@ -185,16 +185,6 @@ def _extract_node_icon(model: MainSchemaTypes) -> str:
                 section=MenuSection.INTERNAL,
                 order_weight=3500,
             ),
-            MenuItemDefinition(
-                namespace="Builtin",
-                name="ActivityLogs",
-                label="Activity Logs",
-                path="/activities",
-                icon="mdi:format-list-bulleted",
-                protected=True,
-                section=MenuSection.INTERNAL,
-                order_weight=4000,
-            ),
         ],
     ),
     MenuItemDefinition(

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

@@ -1,7 +1,7 @@
+import { EventType } from "@/entities/events/types";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
 import { gql } from "@apollo/client";
-import { EventType } from "../ui/event";
-import { INFRAHUB_EVENT } from "../utils/constants";
+import { INFRAHUB_EVENT } from "../constants";
 
 export type EventDetailsFilters = {
   id: string;

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

@@ -1,10 +1,7 @@
+import { Get_ActivitiesQuery } from "@/shared/api/graphql/generated/graphql";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
-import { ContextParams } from "@/shared/api/types";
+import { ContextParams, PaginationParams } from "@/shared/api/types";
 import { gql } from "@apollo/client";
-import { EventType } from "../ui/event";
-import { INFRAHUB_EVENT } from "../utils/constants";
-
-export const OBJECTS_PER_PAGE = 40;
 
 export type GlobalEventsFilters = {
   hasChildren?: boolean;
@@ -20,6 +17,10 @@ export type GlobalEventsFilters = {
   limit?: number;
 };
 
+export type GetEventsParams = ContextParams & PaginationParams & { filters: GlobalEventsFilters };
+
+export const OBJECTS_PER_PAGE = 40;
+
 const EVENTS_QUERY = gql`
   query GET_ACTIVITIES(
     $hasChildren: Boolean
@@ -126,9 +127,9 @@ export async function getEventsFromApi({
   limit = OBJECTS_PER_PAGE,
   branchName,
   atDate,
-  ...filters
-}: GlobalEventsFilters & ContextParams) {
-  const { data } = await graphqlClient.query({
+  filters,
+}: GetEventsParams) {
+  return graphqlClient.query<Get_ActivitiesQuery>({
     query: EVENTS_QUERY,
     variables: {
       limit,
@@ -139,10 +140,4 @@ export async function getEventsFromApi({
       date: atDate,
     },
   });
-
-  const activities: EventType[] = data?.[INFRAHUB_EVENT]?.edges?.map((edge) => {
-    return edge.node;
-  });
-
-  return activities;
 }

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

@@ -1,25 +1,21 @@
 import { useCurrentBranch } from "@/entities/branches/ui/branches-provider";
 import { ContextParams } from "@/shared/api/types";
-import { datetimeAtom } from "@/shared/stores/time.atom";
 import { infiniteQueryOptions, useInfiniteQuery } from "@tanstack/react-query";
-import { useAtomValue } from "jotai";
-import { GlobalEventsFilters, OBJECTS_PER_PAGE, getEventsFromApi } from "./get-events-from-api";
+import { getEvents } from "../domain/get-events";
+import { GlobalEventsFilters, OBJECTS_PER_PAGE } from "./get-events-from-api";
 
 export function getEventsQueryOptions({
   filters,
   branchName,
-  atDate,
 }: { filters: GlobalEventsFilters } & ContextParams) {
   return infiniteQueryOptions({
-    queryKey: [branchName, atDate, "events", filters],
-    queryFn: ({ pageParam }) => {
-      return getEventsFromApi({
-        ...filters,
+    queryKey: [branchName, "events", filters],
+    queryFn: ({ pageParam }) =>
+      getEvents({
+        filters,
         offset: pageParam,
         branchName,
-        atDate,
-      });
-    },
+      }),
     initialPageParam: 0,
     getNextPageParam: (lastPage, _, lastPageParam) => {
       if (lastPage?.length < OBJECTS_PER_PAGE) {
@@ -32,9 +28,6 @@ export function getEventsQueryOptions({
 
 export const useEvents = ({ filters }: { filters: GlobalEventsFilters }) => {
   const { currentBranch } = useCurrentBranch();
-  const timeMachineDate = useAtomValue(datetimeAtom);
 
-  return useInfiniteQuery(
-    getEventsQueryOptions({ filters, branchName: currentBranch.name, atDate: timeMachineDate })
-  );
+  return useInfiniteQuery(getEventsQueryOptions({ filters, branchName: currentBranch.name }));
 };

frontend/app/src/entities/events/utils/constants.ts renamed to frontend/app/src/entities/events/constants.ts

@@ -0,0 +1,13 @@
+import { EventType } from "@/entities/events/types";
+import { GetEventsParams, getEventsFromApi } from "../api/get-events-from-api";
+import { INFRAHUB_EVENT } from "../constants";
+
+export type GetEvents = (params: GetEventsParams) => Promise<Array<EventType>>;
+
+export const getEvents: GetEvents = async (params) => {
+  const { data } = await getEventsFromApi(params);
+
+  return data[INFRAHUB_EVENT].edges.map((edge) => {
+    return edge.node as EventType;
+  });
+};

frontend/app/src/entities/events/domain/get-events.ts

@@ -0,0 +1,24 @@
+import {
+  BRANCH_CREATED_EVENT,
+  BRANCH_DELETED_EVENT,
+  BRANCH_REBASEDED_EVENT,
+  NODE_MUTATED_EVENT,
+} from "@/entities/events/constants";
+import {
+  EventNodeInterface,
+  GroupEvent,
+  NodeMutatedEvent,
+} from "@/shared/api/graphql/generated/graphql";
+
+export type BranchEventType = EventNodeInterface & {
+  __typename:
+    | typeof BRANCH_DELETED_EVENT
+    | typeof BRANCH_CREATED_EVENT
+    | typeof BRANCH_REBASEDED_EVENT;
+};
+
+export type NodeEventType = NodeMutatedEvent & {
+  __typename: typeof NODE_MUTATED_EVENT;
+};
+
+export type EventType = BranchEventType | NodeEventType | GroupEvent;

frontend/app/src/entities/events/types.ts

@@ -5,51 +5,41 @@ import { ReactNode } from "react";
 
 export const BRANCH_EVENTS_MAPPING: Record<string, (props: EventNodeInterface) => ReactNode> = {
   "infrahub.branch.created": (props) => (
-    <div>
+    <div className="text-gray-500">
       created the branch{" "}
-      <Link to={`/branches/${props.created_branch}`} className="text-black font-semibold">
+      <Link to={`/branches/${props.created_branch}`} className="text-black">
         {props.created_branch ?? "-"}
       </Link>
     </div>
   ),
   "infrahub.branch.rebased": (props) => (
-    <div>
+    <div className="text-gray-500">
       rebased the branch{" "}
-      <Link to={`/branches/${props.rebased_branch}`} className="text-black font-semibold">
+      <Link to={`/branches/${props.rebased_branch}`} className="text-black">
         {props.rebased_branch ?? "-"}
       </Link>
     </div>
   ),
   "infrahub.branch.merged": (props) => (
-    <div>
-      merged the branch{" "}
-      <span className="text-black font-semibold">{props.source_branch ?? "-"}</span>
+    <div className="text-gray-500">
+      merged the branch <span className="text-black">{props.source_branch ?? "-"}</span>
     </div>
   ),
   "infrahub.branch.deleted": (props) => (
-    <div>
-      deleted the branch{" "}
-      <span className="text-black font-semibold">{props.deleted_branch ?? "-"}</span>
+    <div className="text-gray-500">
+      deleted the branch <span className="text-black">{props.deleted_branch ?? "-"}</span>
     </div>
   ),
 };
 
-export const BranchEvent = (props: EventNodeInterface) => {
+export const BranchEventTitle = (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="text-gray-500">
-            <div className="font-semibold">
-              <NodeLabel id={account_id} />
-            </div>
+    <div className="flex items-center flex-wrap gap-2 text-sm">
+      <NodeLabel id={account_id} />
 
-            {BRANCH_EVENTS_MAPPING[event] && BRANCH_EVENTS_MAPPING[event](props)}
-          </div>
-        </div>
-      </div>
-    </>
+      {BRANCH_EVENTS_MAPPING[event] && BRANCH_EVENTS_MAPPING[event](props)}
+    </div>
   );
 };

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

@@ -1,43 +1,22 @@
-import {
-  EventNodeInterface,
-  GroupEvent,
-  NodeMutatedEvent,
-} from "@/shared/api/graphql/generated/graphql";
 import { DateDisplay } from "@/shared/components/display/date-display";
 
 import { ACCOUNT_OBJECT } from "@/config/constants";
 import { QSP } from "@/config/qsp";
+import { EventType } from "@/entities/events/types";
+import { EventDetailsPopover } from "@/entities/events/ui/event-details-popover";
+
 import { NodeLabel } from "@/entities/nodes/object/ui/node-label";
 import { PropertyRow } from "@/entities/schema/ui/styled";
 import { constructPath } from "@/shared/api/rest/fetch";
 import { CopyToClipboard } from "@/shared/components/buttons/copy-to-clipboard";
 import { Link } from "@/shared/components/ui/link";
-import { Popover, PopoverContent, PopoverTrigger } from "@/shared/components/ui/popover";
 import { TimelineBorder } from "@/shared/components/ui/timeline-border";
-import {
-  BRANCH_CREATED_EVENT,
-  BRANCH_DELETED_EVENT,
-  BRANCH_EVENTS,
-  BRANCH_REBASEDED_EVENT,
-  NODE_MUTATED_EVENT,
-  STANDARD_EVENTS,
-} from "../utils/constants";
-import { BranchEvent } from "./branch-event";
-import { EventAttributes, NodeEvent } from "./node-event";
-import { StandardEvent } from "./standard-event";
-
-export type BranchEventType = EventNodeInterface & {
-  __typename:
-    | typeof BRANCH_DELETED_EVENT
-    | typeof BRANCH_CREATED_EVENT
-    | typeof BRANCH_REBASEDED_EVENT;
-};
-
-export type NodeEventType = NodeMutatedEvent & {
-  __typename: typeof NODE_MUTATED_EVENT;
-};
-
-export type EventType = BranchEventType | NodeEventType | GroupEvent;
+import { BRANCH_EVENTS, GROUP_EVENTS, STANDARD_EVENTS } from "../constants";
+import { BranchEventTitle } from "./branch-events/branch-event-title";
+import { GroupEventTitle } from "./group-events/group-event-title";
+import { EventAttributes } from "./node-events/event-attributes";
+import { NodeEventTitle } from "./node-events/node-event-title";
+import { StandardEventTitle } from "./standard-events/standard-event-title";
 
 export const EventDetails = ({
   id,
@@ -162,38 +141,27 @@ export const EventDetails = ({
   );
 };
 
-export const Event = ({ __typename, ...props }: EventType) => {
+export const EventCard = (props: EventType) => {
   return (
     <div className="flex gap-2">
       <TimelineBorder />
 
       <div className="flex flex-grow gap-3 p-2 rounded-md shadow-sm border bg-white">
         <div className="flex flex-col gap-2 grow">
-          {"attributes" in props && <NodeEvent {...props} />}
+          {"attributes" in props && <NodeEventTitle {...props} />}
 
           {"attributes" in props && <EventAttributes attributes={props.attributes} />}
 
-          {BRANCH_EVENTS.includes(__typename) && <BranchEvent {...props} />}
+          {BRANCH_EVENTS.includes(props.__typename) && <BranchEventTitle {...props} />}
 
-          {STANDARD_EVENTS.includes(__typename) && <StandardEvent {...props} />}
+          {STANDARD_EVENTS.includes(props.__typename) && <StandardEventTitle {...props} />}
 
-          <div className="flex justify-between">
-            <div className="text-xs font-medium text-gray-500 dark:text-neutral-400">
-              <DateDisplay date={props.occurred_at} />
-            </div>
+          {GROUP_EVENTS.includes(props.__typename) && <GroupEventTitle {...props} />}
+
+          <div className="flex justify-between text-gray-500">
+            <DateDisplay date={props.occurred_at} />
 
-            <Popover>
-              <PopoverTrigger>
-                <div className="flex flex-grow justify-end">
-                  <p className="text-sm underline text-gray-600 dark:text-neutral-400 mb-1">
-                    View more.
-                  </p>
-                </div>
-              </PopoverTrigger>
-              <PopoverContent className="w-full">
-                <EventDetails {...props} />
-              </PopoverContent>
-            </Popover>
+            <EventDetailsPopover {...props} />
           </div>
         </div>
       </div>

frontend/app/src/entities/events/ui/event.tsx renamed to frontend/app/src/entities/events/ui/event-card.tsx

@@ -0,0 +1,18 @@
+import { EventType } from "@/entities/events/types";
+import { EventDetails } from "@/entities/events/ui/event-card";
+import { Popover, PopoverContent, PopoverTrigger } from "@/shared/components/ui/popover";
+import { InfoIcon } from "lucide-react";
+
+export function EventDetailsPopover(props: EventType) {
+  return (
+    <Popover>
+      <PopoverTrigger className="flex items-center gap-1 text-xs text-gray-600">
+        View all <InfoIcon className="size-3" />
+      </PopoverTrigger>
+
+      <PopoverContent className="w-full">
+        <EventDetails {...props} />
+      </PopoverContent>
+    </Popover>
+  );
+}