Add activities for graphql queries (#5962)

* udpate style and add activities for queries

* add responsive layout

* use code code viewer

* fix activities props

* update locator for new code viwer

* update props and remove useParams

* fix props

Author: pa-lem

frontend/app/src/entities/events/ui/node-details-events.tsx

@@ -6,19 +6,20 @@ import NoDataFound from "@/shared/components/errors/no-data-found";
 import { Link } from "@/shared/components/ui/link";
 import { Spinner } from "@/shared/components/ui/spinner";
 import React from "react";
-import { useParams } from "react-router";
 import { useEvents } from "../api/get-events.query";
 import { EventCard } from "./event-card";
 
 const MAX_EVENTS = 5;
 
-export const NodeEvents = ({ parentId }: { parentId?: string }) => {
-  const { objectKind, objectid } = useParams();
-
+export const NodeEvents = ({
+  parentId,
+  objectId,
+  objectKind,
+}: { parentId?: string; objectId?: string; objectKind?: string }) => {
   const { isPending, data, error } = useEvents({
     filters: {
       parentIds: parentId ? [parentId] : undefined,
-      relatedNodeIds: objectid ? [objectid] : undefined,
+      relatedNodeIds: objectId ? [objectId] : undefined,
       limit: parentId ? 0 : MAX_EVENTS,
     },
   });
@@ -28,9 +29,9 @@ export const NodeEvents = ({ parentId }: { parentId?: string }) => {
     error: displayLabelError,
     data: displayLabelData,
   } = useNodeLabel({
-    objectid: objectid,
+    objectid: objectId,
     kind: objectKind as string,
-    enabled: !parentId,
+    enabled: !parentId && !!objectKind,
   });
 
   const flatData = React.useMemo(() => data?.pages?.flat() ?? [], [data]);
@@ -53,7 +54,7 @@ export const NodeEvents = ({ parentId }: { parentId?: string }) => {
 
   const filter = {
     name: "relatedNodeIds__value",
-    value: [{ id: objectid, display_label: displayLabelData.display_label }],
+    value: [{ id: objectId, display_label: displayLabelData.display_label }],
   };
 
   return (

frontend/app/src/entities/graphql/ui/graphql-query-activities.tsx

@@ -0,0 +1,12 @@
+import { NodeEvents } from "@/entities/events/ui/node-details-events";
+import { Card, CardWithBorder } from "@/shared/components/ui/card";
+
+export const GraphqlQueryActivities = ({ id }: { id: string }) => {
+  return (
+    <Card className="p-0 overflow-x-hidden">
+      <CardWithBorder.Title>Activities</CardWithBorder.Title>
+
+      <NodeEvents objectId={id} />
+    </Card>
+  );
+};

frontend/app/src/entities/graphql/ui/graphql-query-details-card.tsx

@@ -29,7 +29,7 @@ const GraphqlQueryDetailsCard = ({
   permission,
 }: GraphqlQueryDetailsCardProps) => {
   return (
-    <Card>
+    <Card className="p-0 overflow-x-hidden">
       <GraphqlQueryDetailsTitle
         data={data}
         schema={schema}

frontend/app/src/entities/graphql/ui/graphql-query-viewer-card.tsx

@@ -1,14 +1,14 @@
 import { constructPath } from "@/shared/api/rest/fetch";
 import { Button } from "@/shared/components/buttons/button-primitive";
 import { CopyToClipboard } from "@/shared/components/buttons/copy-to-clipboard";
-import { GraphqlViewer } from "@/shared/components/editor/graphql/graphql-viewer";
+import { CodeViewer } from "@/shared/components/editor/code/code-viewer";
 import { Card, CardWithBorder } from "@/shared/components/ui/card";
 import { Icon } from "@iconify-icon/react";
 import { Link } from "react-router";
 
 const GraphqlQueryViewerCard = ({ query }: { query: string }) => {
   return (
-    <Card className="flex-grow">
+    <Card className="flex-grow p-0 overflow-x-hidden">
       <CardWithBorder.Title className="flex gap-2 items-center rounded-t">
         <h3 className="mr-auto">Query</h3>
 
@@ -21,7 +21,7 @@ const GraphqlQueryViewerCard = ({ query }: { query: string }) => {
         </Link>
       </CardWithBorder.Title>
 
-      <GraphqlViewer value={query} />
+      <CodeViewer language="graphql">{query}</CodeViewer>
     </Card>
   );
 };

frontend/app/src/entities/nodes/object-item-details/object-item-details-paginated.tsx

@@ -55,7 +55,7 @@ export default function ObjectItemDetails({
   hideHeaders,
 }: ObjectDetailsProps) {
   const location = useLocation();
-  const { objectid } = useParams();
+  const { objectKind, objectid } = useParams();
   const { pathname } = location;
 
   const [qspTab, setQspTab] = useQueryParam(QSP.TAB, StringParam);
@@ -214,7 +214,7 @@ export default function ObjectItemDetails({
 
           <Card className="p-0 overflow-x-hidden">
             <CardWithBorder.Title className="border-b">Activities</CardWithBorder.Title>
-            <NodeEvents />
+            <NodeEvents objectId={objectid} objectKind={objectKind} />
           </Card>
         </div>
       )}

frontend/app/src/pages/objects/CoreGraphQLQuery/graphql-query-details.tsx

@@ -1,4 +1,5 @@
 import { GRAPHQL_QUERY_OBJECT } from "@/config/constants";
+import { GraphqlQueryActivities } from "@/entities/graphql/ui/graphql-query-activities";
 import GraphqlQueryDetailsCard from "@/entities/graphql/ui/graphql-query-details-card";
 import GraphQLQueryDetailsPageSkeleton from "@/entities/graphql/ui/graphql-query-details-page-skeleton";
 import GraphqlQueryViewerCard from "@/entities/graphql/ui/graphql-query-viewer-card";
@@ -66,15 +67,19 @@ const GraphqlQueryDetails = ({
   const graphqlQuery: CoreGraphQlQuery = graphqlQueries[0].node;
 
   return (
-    <section className="flex flex-wrap lg:flex-nowrap items-start gap-2 p-2">
-      <GraphqlQueryDetailsCard
-        data={graphqlQuery}
-        schema={graphqlQuerySchema}
-        refetch={refetch}
-        permission={permission}
-      />
-
+    <section className="grid grid-cols-1 lg:grid-cols-2 gap-2 p-2">
       <GraphqlQueryViewerCard query={graphqlQuery.query.value ?? ""} />
+
+      <div className="flex flex-col gap-2">
+        <GraphqlQueryDetailsCard
+          data={graphqlQuery}
+          schema={graphqlQuerySchema}
+          refetch={refetch}
+          permission={permission}
+        />
+
+        <GraphqlQueryActivities id={graphqlQueryId} />
+      </div>
     </section>
   );
 };

frontend/app/src/shared/components/editor/graphql/graphql-viewer.tsx

@@ -64,7 +64,7 @@ test.describe("/objects/CoreGraphQLQuery/:graphqlQueryId - GraphQL Query details
     await expect(
       page.getByText("DescriptionA profile for E2E test ", { exact: true })
     ).toBeVisible();
-    await expect(page.getByText("query GET_TAGS {")).toBeVisible();
+    await expect(page.getByText("1query GET_TAGS {")).toBeVisible();
 
     await page.getByTestId("edit-button").click();
     await page.getByLabel("Description").fill("A profile for E2E test updated");