Migrate from useObjectDetails to useGetObject (part 2) (#6452)

Author: bilalabbad

frontend/app/src/entities/artifacts/ui/artifact-details.tsx

@@ -1,11 +1,11 @@
 import { CONFIG } from "@/config/config";
 import { ArtifactFile } from "@/entities/artifacts/ui/artifact-file";
 import { NodeEvents } from "@/entities/events/ui/node-details-events";
-import { useObjectDetails } from "@/entities/nodes/hooks/useObjectDetails";
+import { useGetObject } from "@/entities/nodes/object/domain/get-object.query";
 import { NodeDescription } from "@/entities/nodes/object/ui/node-description";
 import { ModelSchema } from "@/entities/schema/types";
+import { CoreArtifact } from "@/shared/api/graphql/generated/graphql";
 import ErrorScreen from "@/shared/components/errors/error-screen";
-import NoDataFound from "@/shared/components/errors/no-data-found";
 import Content from "@/shared/components/layout/content";
 import { LoadingIndicator } from "@/shared/components/loading/loading-indicator";
 import { Card } from "@/shared/components/ui/card";
@@ -19,20 +19,20 @@ export interface ArtifactsDetailsProps {
 
 export function ArtifactsDetails({ artifactId, artifactSchema }: ArtifactsDetailsProps) {
   const artifactKind = artifactSchema.kind as string;
-  const { loading, error, data } = useObjectDetails(artifactSchema, artifactId);
+  const { isPending, error, data } = useGetObject({
+    objectSchema: artifactSchema,
+    objectId: artifactId,
+  });
 
-  if (loading) {
+  if (isPending) {
     return <LoadingIndicator className="h-full" />;
   }
 
   if (error) {
-    return <ErrorScreen message={`Something went wrong when fetching artifact ${artifactId}`} />;
+    return <ErrorScreen message={error.message} />;
   }
 
-  const objectDetailsData = data?.[artifactKind]?.edges?.[0]?.node;
-  if (!objectDetailsData) {
-    return <NoDataFound message={`No artifact found with id ${artifactId}`} />;
-  }
+  const objectDetailsData = data as unknown as CoreArtifact;
 
   const fileUrl: string = CONFIG.ARTIFACTS_CONTENT_URL(objectDetailsData?.storage_id?.value);
   const contentType = objectDetailsData.content_type?.value;

frontend/app/src/entities/groups/ui/add-group-trigger-button.tsx

@@ -1,6 +1,6 @@
 import { GroupDataFromAPI } from "@/entities/groups/api/types";
 import AddGroupForm from "@/entities/groups/ui/add-group-form";
-import { useObjectDetails } from "@/entities/nodes/hooks/useObjectDetails";
+import { useGetObject } from "@/entities/nodes/object/domain/get-object.query";
 import { Permission } from "@/entities/permission/types";
 import { NodeSchema } from "@/entities/schema/types";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
@@ -25,9 +25,7 @@ export default function AddGroupTriggerButton({
 }: AddGroupTriggerButtonProps) {
   const [isAddGroupFormOpen, setIsAddGroupFormOpen] = useState(false);
 
-  const { data } = useObjectDetails(schema, objectId);
-
-  const objectDetailsData = schema && data && data[schema.kind!]?.edges[0]?.node;
+  const { data: objectDetailsData } = useGetObject({ objectSchema: schema, objectId });
 
   return (
     <>

frontend/app/src/entities/groups/ui/groups-manager-trigger-button.tsx

@@ -1,5 +1,5 @@
 import { GroupsManager, GroupsManagerProps } from "@/entities/groups/ui/groups-manager";
-import { useObjectDetails } from "@/entities/nodes/hooks/useObjectDetails";
+import { useGetObject } from "@/entities/nodes/object/domain/get-object.query";
 import { ButtonProps, ButtonWithTooltip } from "@/shared/components/buttons/button-primitive";
 import SlideOver, { SlideOverTitle } from "@/shared/components/display/slide-over";
 import { Icon } from "@iconify-icon/react";
@@ -15,9 +15,7 @@ export const GroupsManagerTriggerButton = ({
 }: GroupsManagerTriggerProps) => {
   const [isManageGroupsDrawerOpen, setIsManageGroupsDrawerOpen] = useState(false);
 
-  const { data } = useObjectDetails(schema, objectId);
-
-  const objectDetailsData = schema && data && data[schema.kind!]?.edges[0]?.node;
+  const { data: objectDetailsData } = useGetObject({ objectSchema: schema, objectId });
 
   return (
     <>

frontend/app/src/entities/nodes/object/ui/CoreGraphQLQuery/graphql-query-details.tsx

@@ -2,11 +2,11 @@ import { GraphqlQueryActivities } from "@/entities/graphql/ui/graphql-query-acti
 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 { useObjectDetails } from "@/entities/nodes/hooks/useObjectDetails";
+import { useGetObject } from "@/entities/nodes/object/domain/get-object.query";
 import { Permission } from "@/entities/permission/types";
 import { ModelSchema } from "@/entities/schema/types";
 import { CoreGraphQlQuery } from "@/shared/api/graphql/generated/graphql";
-import NoDataFound from "@/shared/components/errors/no-data-found";
+import ErrorScreen from "@/shared/components/errors/error-screen";
 
 export function GraphqlQueryDetails({
   graphqlQueryId,
@@ -17,14 +17,20 @@ export function GraphqlQueryDetails({
   graphqlQuerySchema: ModelSchema;
   permission: Permission;
 }) {
-  const { loading, data, refetch } = useObjectDetails(graphqlQuerySchema, graphqlQueryId);
+  const { isPending, error, data, refetch } = useGetObject({
+    objectSchema: graphqlQuerySchema,
+    objectId: graphqlQueryId,
+  });
 
-  if (loading) return <GraphQLQueryDetailsPageSkeleton />;
+  if (isPending) {
+    return <GraphQLQueryDetailsPageSkeleton />;
+  }
 
-  const graphqlQueries = data && data.CoreGraphQLQuery.edges;
-  if (graphqlQueries.length === 0) return <NoDataFound />;
+  if (error) {
+    return <ErrorScreen message={error.message} />;
+  }
 
-  const graphqlQuery: CoreGraphQlQuery = graphqlQueries[0].node;
+  const graphqlQuery: CoreGraphQlQuery = data as unknown as CoreGraphQlQuery;
 
   return (
     <section className="grid grid-cols-1 lg:grid-cols-2 gap-2 p-2">

frontend/app/src/shared/components/layout/breadcrumb-navigation/items/breadcrumb-object-selector.tsx

@@ -1,10 +1,10 @@
-import { useObjectDetails } from "@/entities/nodes/hooks/useObjectDetails";
+import { useGetObject } from "@/entities/nodes/object/domain/get-object.query";
+import { getNodeLabel } from "@/entities/nodes/object/utils/get-node-label";
 import { getObjectDetailsUrl } from "@/entities/nodes/utils";
 import { ModelSchema } from "@/entities/schema/types";
 import { useSchema } from "@/entities/schema/ui/hooks/useSchema";
 import { BreadcrumbLink } from "@/shared/components/layout/breadcrumb-navigation/items/breadcrumb-link";
 import BreadcrumbLoading from "@/shared/components/layout/breadcrumb-navigation/items/breadcrumb-loading";
-import { NetworkStatus } from "@apollo/client";
 
 export default function BreadcrumbObjectSelector({
   kind,
@@ -31,22 +31,15 @@ const ObjectSelector = ({
   id: string;
   className?: string;
 }) => {
-  const { data, error, networkStatus } = useObjectDetails(schema, id);
+  const { data, error, isPending } = useGetObject({ objectSchema: schema, objectId: id });
 
-  if (networkStatus === NetworkStatus.loading) return <BreadcrumbLoading />;
+  if (isPending) return <BreadcrumbLoading />;
 
   if (error) return null;
 
-  const objectList = data?.[schema.kind!].edges.map((edge: any) => edge.node);
-  if (!objectList || objectList.length === 0) return null;
-
-  const currentObject = objectList.find((node: any) => node.id === id);
-
-  if (!currentObject) return null;
-
   return (
-    <BreadcrumbLink to={getObjectDetailsUrl(currentObject.__typename, currentObject.id)} {...props}>
-      {currentObject.display_label}
+    <BreadcrumbLink to={getObjectDetailsUrl(data.__typename, data.id)} {...props}>
+      {getNodeLabel(data)}
     </BreadcrumbLink>
   );
 };

frontend/app/src/shared/components/search/search-anywhere-dialog.tsx

@@ -26,7 +26,11 @@ export function SearchAnywhereDialog({ children, className, ...props }: DialogPr
         )}
         {...props}
       >
-        <Dialog aria-label="Search anywhere" data-testid="search-anywhere">
+        <Dialog
+          aria-label="Search anywhere"
+          data-testid="search-anywhere"
+          className="overflow-hidden"
+        >
           {children}
         </Dialog>
       </Modal>

frontend/app/src/shared/components/search/search-nodes.tsx

@@ -1,8 +1,9 @@
 import { SEARCH_QUERY_NAME } from "@/config/constants";
 import { POOLS_PEER } from "@/entities/ipam/constants";
 import { SEARCH } from "@/entities/nodes/api/search";
-import { useObjectDetails } from "@/entities/nodes/hooks/useObjectDetails";
 import { getSchemaObjectColumns } from "@/entities/nodes/object-items/getSchemaObjectColumns";
+import { useGetObject } from "@/entities/nodes/object/domain/get-object.query";
+import { getNodeLabel } from "@/entities/nodes/object/utils/get-node-label";
 import { getObjectDetailsUrl } from "@/entities/nodes/utils";
 import { ATTRIBUTE_KIND } from "@/entities/schema/constants";
 import { useSchema } from "@/entities/schema/ui/hooks/useSchema";
@@ -64,15 +65,22 @@ type NodesOptionsProps = {
 
 const NodesOptions = ({ node }: NodesOptionsProps) => {
   const { isGeneric, schema } = useSchema(node.kind);
-  const { data, loading, error } = useObjectDetails(schema!, node.id);
+  const {
+    data: objectDetailsData,
+    isPending,
+    error,
+  } = useGetObject({
+    objectSchema: schema!,
+    objectId: node.id,
+    getRelationshipsVisible: (rel) => rel,
+  });
 
   if (!schema) return null;
 
-  if (loading) return <SearchResultNodeSkeleton />;
+  if (isPending) return <SearchResultNodeSkeleton />;
 
   if (error) return null;
 
-  const objectDetailsData = schema && data?.[node.kind]?.edges[0]?.node;
   if (!objectDetailsData) return <div className="text-sm">No data found for this object</div>;
 
   const useIpNamespace =
@@ -99,7 +107,7 @@ const NodesOptions = ({ node }: NodesOptionsProps) => {
       <div className="grow text-sm overflow-auto">
         <div className="flex justify-between">
           <span className="mr-1 font-semibold text-custom-blue-800">
-            {objectDetailsData?.display_label}
+            {getNodeLabel(objectDetailsData)}
           </span>
 
           <div className="inline-flex items-center gap-1">

frontend/app/tests/e2e/search.spec.ts

@@ -1,14 +1,6 @@
 import { expect, test } from "@playwright/test";
 
 test.describe("when searching an object", () => {
-  test.beforeEach(async function ({ page }) {
-    page.on("response", async (response) => {
-      if (response.status() === 500) {
-        await expect(response.url()).toBe("This URL responded with a 500 status");
-      }
-    });
-  });
-
   test("should open search anywhere modal", async ({ page }) => {
     await page.goto("/");
 
@@ -106,7 +98,7 @@ test.describe("when searching an object", () => {
 
     await page.getByTestId("search-anywhere-input").fill(uuid);
     await expect(
-      page.getByRole("option", { name: "AS174 174 Infra Autonomous System" })
+      page.getByRole("option", { name: "AS174, 174 Infra Autonomous System" })
     ).toBeVisible();
   });
 });