Housekeeping on GraphqlQueryDetailsPage component (#5871)

Author: bilalabbad

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

@@ -2,79 +2,69 @@ import { GRAPHQL_QUERY_OBJECT } from "@/config/constants";
 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";
-import { getObjectDetailsPaginated } from "@/entities/nodes/api/getObjectDetails";
-import { getSchemaObjectColumns } from "@/entities/nodes/object-items/getSchemaObjectColumns";
+import { useObjectDetails } from "@/entities/nodes/hooks/useObjectDetails";
+import { useGetObjectPermissions } from "@/entities/permission/domain/get-object-permissions.query";
 import { Permission } from "@/entities/permission/types";
-import { getPermission } from "@/entities/permission/utils";
-import { nodeSchemasAtom } from "@/entities/schema/stores/schema.atom";
-import { NodeSchema } from "@/entities/schema/types";
+import { ModelSchema, NodeSchema } from "@/entities/schema/types";
 import { CoreGraphQlQuery } from "@/shared/api/graphql/generated/graphql";
-import useQuery from "@/shared/api/graphql/useQuery";
+import ErrorScreen from "@/shared/components/errors/error-screen";
 import NoDataFound from "@/shared/components/errors/no-data-found";
 import UnauthorizedScreen from "@/shared/components/errors/unauthorized-screen";
+import { LoadingIndicator } from "@/shared/components/loading/loading-indicator";
 import { useTitle } from "@/shared/hooks/useTitle";
-import { gql } from "@apollo/client";
-import { useAtomValue } from "jotai/index";
 
-export default function GraphqlQueryDetailsPage({ graphqlQueryId }: { graphqlQueryId: string }) {
-  useTitle("GraphQL Query details");
-
-  const objectid = graphqlQueryId;
-
-  const nodes = useAtomValue(nodeSchemasAtom);
-  const graphqlQuerySchema = nodes.find((s) => s.kind === GRAPHQL_QUERY_OBJECT);
-
-  const columns = getSchemaObjectColumns({ schema: graphqlQuerySchema });
-
-  const query = gql(
-    getObjectDetailsPaginated({
-      objectid,
-      kind: GRAPHQL_QUERY_OBJECT,
-      columns,
-      hasPermissions: true,
-    })
-  );
-
-  const { loading, data, refetch } = useQuery(query, {
-    skip: !graphqlQuerySchema,
-  });
+export interface GraphqlQueryDetailsPageProps {
+  graphqlQuerySchema: ModelSchema;
+  graphqlQueryId: string;
+}
 
-  if (!graphqlQuerySchema || loading) return <GraphQLQueryDetailsPageSkeleton />;
+export default function GraphqlQueryDetailsPage({
+  graphqlQuerySchema,
+  graphqlQueryId,
+}: GraphqlQueryDetailsPageProps) {
+  useTitle("GraphQL Query details");
 
-  const graphqlQueries = data && data.CoreGraphQLQuery.edges;
-  if (graphqlQueries.length === 0) return <NoDataFound />;
+  const { isPending, error, data: permission } = useGetObjectPermissions(GRAPHQL_QUERY_OBJECT);
 
-  const graphqlQuery: CoreGraphQlQuery = graphqlQueries[0].node;
+  if (isPending) {
+    return <LoadingIndicator className="h-[calc(100vh-10rem)]" />;
+  }
 
-  const permission = getPermission(data?.[GRAPHQL_QUERY_OBJECT]?.permissions?.edges);
+  if (error) {
+    return <ErrorScreen message="Something went wrong when fetching permissions." />;
+  }
 
   if (!permission.view.isAllowed) {
     return <UnauthorizedScreen message={permission.view.message} />;
   }
 
   return (
-    graphqlQuery && (
-      <GraphqlQueryDetailsContent
-        graphqlQuerySchema={graphqlQuerySchema}
-        graphqlQuery={graphqlQuery}
-        refetch={refetch}
-        permission={permission}
-      />
-    )
+    <GraphqlQueryDetails
+      graphqlQueryId={graphqlQueryId}
+      graphqlQuerySchema={graphqlQuerySchema as NodeSchema}
+      permission={permission}
+    />
   );
 }
 
-const GraphqlQueryDetailsContent = ({
-  graphqlQuery,
+const GraphqlQueryDetails = ({
+  graphqlQueryId,
   graphqlQuerySchema,
-  refetch,
   permission,
 }: {
-  graphqlQuery: CoreGraphQlQuery;
+  graphqlQueryId: string;
   graphqlQuerySchema: NodeSchema;
-  refetch: () => Promise<unknown>;
   permission: Permission;
 }) => {
+  const { loading, data, refetch } = useObjectDetails(graphqlQuerySchema, graphqlQueryId);
+
+  if (loading) return <GraphQLQueryDetailsPageSkeleton />;
+
+  const graphqlQueries = data && data.CoreGraphQLQuery.edges;
+  if (graphqlQueries.length === 0) return <NoDataFound />;
+
+  const graphqlQuery: CoreGraphQlQuery = graphqlQueries[0].node;
+
   return (
     <section className="flex flex-wrap lg:flex-nowrap items-start gap-2 p-2">
       <GraphqlQueryDetailsCard
@@ -84,7 +74,7 @@ const GraphqlQueryDetailsContent = ({
         permission={permission}
       />
 
-      <GraphqlQueryViewerCard query={graphqlQuery.query.value ?? ""} permission={permission} />
+      <GraphqlQueryViewerCard query={graphqlQuery.query.value ?? ""} />
     </section>
   );
 };

frontend/app/src/pages/objects/object-details.tsx

@@ -1,6 +1,7 @@
 import { GRAPHQL_QUERY_OBJECT, TASK_OBJECT } from "@/config/constants";
 import { useObjectDetails } from "@/entities/nodes/hooks/useObjectDetails";
 import ObjectItemDetails from "@/entities/nodes/object-item-details/object-item-details-paginated";
+import { ModelSchema } from "@/entities/schema/types";
 import { useSchema } from "@/entities/schema/ui/hooks/useSchema";
 import { constructPath } from "@/shared/api/rest/fetch";
 import ErrorScreen from "@/shared/components/errors/error-screen";
@@ -11,11 +12,8 @@ import { NetworkStatus } from "@apollo/client";
 import { Navigate, useParams } from "react-router";
 import GraphqlQueryDetailsPage from "./CoreGraphQLQuery/graphql-query-details";
 
-export function ObjectDetailsPage() {
-  const { objectKind, objectid } = useParams();
-  const { schema } = useSchema(objectKind);
-
-  if (!schema) return <ErrorScreen message={`Object ${objectKind} not found.`} />;
+export function ObjectDetailsPage({ schema }: { schema: ModelSchema }) {
+  const { objectid } = useParams();
 
   const { data, networkStatus, error, permission } = useObjectDetails(schema, objectid as string);
 
@@ -59,14 +57,19 @@ export function ObjectDetailsPage() {
 
 export const Component = () => {
   const { objectKind, objectid } = useParams();
+  const { schema } = useSchema(objectKind);
+
+  if (!schema) {
+    return <ErrorScreen message={`Schema ${objectKind} not found.`} />;
+  }
 
   if (!objectid) {
     return <Navigate to={constructPath(`/objects/${objectKind}`)} />;
   }
 
   if (objectKind === GRAPHQL_QUERY_OBJECT) {
-    return <GraphqlQueryDetailsPage graphqlQueryId={objectid} />;
+    return <GraphqlQueryDetailsPage graphqlQuerySchema={schema} graphqlQueryId={objectid} />;
   }
 
-  return <ObjectDetailsPage />;
+  return <ObjectDetailsPage schema={schema} />;
 };

frontend/app/tests/integrations/screens/object-details.cy.tsx

@@ -5,9 +5,9 @@ import { MockedProvider } from "@apollo/client/testing";
 import { ErrorBoundary } from "react-error-boundary";
 import { Route, Routes } from "react-router";
 import { BranchContext } from "../../../src/entities/branches/ui/branches-provider";
-import { nodeSchemasAtom } from "../../../src/entities/schema/stores/schema.atom";
 import { ObjectDetailsPage } from "../../../src/pages/objects/object-details";
 import ErrorFallback from "../../../src/shared/components/errors/error-fallback";
+import { generateBranch } from "../../fake/branch";
 import {
   deviceDetailsMocksASNName,
   deviceDetailsMocksData,
@@ -19,7 +19,6 @@ import {
   getPermissionsData,
   getPermissionsQuery,
 } from "../../mocks/data/devices";
-import { TestProvider } from "../../mocks/jotai/atom";
 
 // URL for the current view
 const graphqlQueryItemsUrl = `/objects/InfraDevice/${deviceDetailsMocksId}`;
@@ -65,15 +64,6 @@ const mocks: any[] = [
   },
 ];
 
-// Provide the initial value for jotai
-const ObjectDetailsProvider = () => {
-  return (
-    <TestProvider initialValues={[[nodeSchemasAtom, deviceDetailsMocksSchema]]}>
-      <ObjectDetailsPage />
-    </TestProvider>
-  );
-};
-
 describe("List screen", () => {
   it("should fetch object details and render a list of details", () => {
     cy.viewport(1920, 1080);
@@ -83,11 +73,14 @@ describe("List screen", () => {
 
     // Mount the view with the default route and the mocked data
     cy.mount(
-      <BranchContext value={{ currentBranch: { name: "main" } }}>
+      <BranchContext value={{ currentBranch: generateBranch(), setCurrentBranch: () => {} }}>
         <MockedProvider mocks={mocks} addTypename={false}>
           <ErrorBoundary FallbackComponent={ErrorFallback}>
             <Routes>
-              <Route element={<ObjectDetailsProvider />} path={graphqlQueryItemsPath} />
+              <Route
+                element={<ObjectDetailsPage schema={deviceDetailsMocksSchema[0]} />}
+                path={graphqlQueryItemsPath}
+              />
             </Routes>
           </ErrorBoundary>
         </MockedProvider>