Migrated new table in relationships tabs view (#5795)

Author: bilalabbad

frontend/app/src/entities/nodes/api/getObjectRelationshipDetails.ts

@@ -4,6 +4,7 @@ import { Permission } from "@/entities/permission/types";
 import { genericsState, schemaState } from "@/entities/schema/stores/schema.atom";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
 import { useMutation } from "@/shared/api/graphql/useQuery";
+import { queryClient } from "@/shared/api/rest/client";
 import { ButtonWithTooltip } from "@/shared/components/buttons/button-primitive";
 import SlideOver, { SlideOverTitle } from "@/shared/components/display/slide-over";
 import DynamicForm from "@/shared/components/form/dynamic-form";
@@ -77,6 +78,9 @@ export function RelationshipsButtons({ permission }: RelationshipsButtonsProps)
       await graphqlClient.refetchQueries({
         include: [objectKind!, `GetObjectRelationships_${objectKind}`],
       });
+      queryClient.invalidateQueries({
+        predicate: (query) => query.queryKey.includes("objects"),
+      });
 
       toast(
         <Alert

frontend/app/src/entities/nodes/object-item-details/action-buttons/relationships-buttons.tsx

@@ -9,6 +9,7 @@ import {
   getObjectTabs,
   getTabs,
 } from "@/entities/nodes/object-items/getSchemaObjectColumns";
+import { ObjectRelationshipsManager } from "@/entities/nodes/relationships/ui/object-relationships-manager";
 import { showMetaEditState } from "@/entities/nodes/stores/metaEditFieldDetails.atom";
 import { metaEditFieldDetailsState } from "@/entities/nodes/stores/showMetaEdit.atom";
 import { Permission } from "@/entities/permission/types";
@@ -36,7 +37,6 @@ import { NodeEvents } from "../../events/ui/node-events";
 import { ActionButtons } from "./action-buttons";
 import { ObjectAttributeRow } from "./object-attribute-row";
 import RelationshipDetails from "./relationship-details-paginated";
-import { RelationshipsDetails } from "./relationships-details-paginated";
 
 type ObjectDetailsProps = {
   schema: IModelSchema;
@@ -219,11 +219,10 @@ export default function ObjectItemDetails({
       )}
 
       {qspTab && qspTab !== TASK_TAB && (
-        <RelationshipsDetails
-          parentNode={objectDetailsData}
-          parentSchema={schema}
-          refetchObjectDetails={() => graphqlClient.refetchQueries({ include: [schema.kind!] })}
-          ref={refetchRef}
+        <ObjectRelationshipsManager
+          parentNodeSchema={schema}
+          parentNodeId={objectDetailsData.id}
+          relationshipName={qspTab}
         />
       )}
 

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

@@ -0,0 +1,14 @@
+import { cellHeaderStyle, cellsStyle } from "@/shared/components/table/style";
+import { classNames } from "@/shared/utils/common";
+
+export function ActionsHeaderCell() {
+  return (
+    <div
+      className={classNames(
+        cellsStyle,
+        cellHeaderStyle,
+        "right-0 z-10 border-l size-10 -ml-px hover:bg-white"
+      )}
+    />
+  );
+}

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

@@ -9,9 +9,14 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/shared/components/ui/
 import useFilters from "@/shared/hooks/useFilters";
 import { classNames } from "@/shared/utils/common";
 import { Icon } from "@iconify-icon/react";
+import { PopoverTriggerProps } from "@radix-ui/react-popover";
 import { useState } from "react";
 
-export function KindHeaderCell({ schema }: { schema: iGenericSchema }) {
+export interface KindHeaderCellProps extends PopoverTriggerProps {
+  schema: iGenericSchema;
+}
+
+export function KindHeaderCell({ schema, ...props }: KindHeaderCellProps) {
   const [filters, setFilters] = useFilters();
   const [showFilters, setShowFilters] = useState(false);
   const currentKindFilters = filters.find((filter) => filter.name === "kind__value");
@@ -25,7 +30,7 @@ export function KindHeaderCell({ schema }: { schema: iGenericSchema }) {
 
   return (
     <Popover open={showFilters} onOpenChange={setShowFilters}>
-      <PopoverTrigger className={classNames(cellsStyle, cellHeaderStyle)}>
+      <PopoverTrigger className={classNames(cellsStyle, cellHeaderStyle)} {...props}>
         <Icon icon="mdi:code-json" className="text-stone-400" />
         <span className="truncate mr-2">Kind</span>
         <Icon

frontend/app/src/entities/nodes/object/ui/object-table/cells/actions-header-cell.tsx

@@ -26,7 +26,12 @@ export interface ActionsCellProps {
   objectLabel: string;
 }
 
-export function ActionsCell({ objectKind, objectId, objectLabel, permission }: ActionsCellProps) {
+export function ObjectActionsCell({
+  objectKind,
+  objectId,
+  objectLabel,
+  permission,
+}: ActionsCellProps) {
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [showEditForm, setShowEditForm] = useState(false);
   const { schema } = useSchema(objectKind);

frontend/app/src/entities/nodes/object/ui/object-table/cells/generics/kind-header-cell.tsx

@@ -9,14 +9,15 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/shared/components/ui/
 import useFilters from "@/shared/hooks/useFilters";
 import { classNames } from "@/shared/utils/common";
 import { Icon } from "@iconify-icon/react";
+import { PopoverTriggerProps } from "@radix-ui/react-popover";
 import { useState } from "react";
 
-export interface TableColumnHeaderProps {
+export interface TableColumnHeaderProps extends PopoverTriggerProps {
   schema: IModelSchema;
   columnSchema: AttributeSchema | RelationshipSchema;
 }
 
-export function TableColumnHeader({ schema, columnSchema }: TableColumnHeaderProps) {
+export function TableColumnHeader({ schema, columnSchema, ...props }: TableColumnHeaderProps) {
   const [filters] = useFilters();
   const [showFilters, setShowFilters] = useState(false);
   const filtersAsObjectData = getObjectFromFilters(schema, filters);
@@ -28,7 +29,7 @@ export function TableColumnHeader({ schema, columnSchema }: TableColumnHeaderPro
 
   return (
     <Popover open={showFilters} onOpenChange={setShowFilters}>
-      <PopoverTrigger className={classNames(cellsStyle, cellHeaderStyle)}>
+      <PopoverTrigger className={classNames(cellsStyle, cellHeaderStyle)} {...props}>
         <TableColumnHeaderIcon fieldSchema={columnSchema} />
 
         <span className="truncate mr-2">{columnSchema.label ?? columnSchema.name}</span>

frontend/app/src/entities/nodes/object/ui/object-table/cells/actions-cell.tsx renamed to frontend/app/src/entities/nodes/object/ui/object-table/cells/object-actions-cell.tsx

@@ -0,0 +1,22 @@
+import { ActionsHeaderCell } from "@/entities/nodes/object/ui/object-table/cells/actions-header-cell";
+import { ObjectActionsCell } from "@/entities/nodes/object/ui/object-table/cells/object-actions-cell";
+import { NodeObject } from "@/entities/nodes/types";
+import { Permission } from "@/entities/permission/types";
+import { ColumnDef } from "@tanstack/react-table";
+
+export function getObjectActionsColumn(permission: Permission): ColumnDef<NodeObject> {
+  return {
+    id: "actions",
+    header: () => <ActionsHeaderCell />,
+    cell: ({ row }) => {
+      return (
+        <ObjectActionsCell
+          permission={permission}
+          objectKind={row.original.__typename as string}
+          objectLabel={row.getValue("id") as string}
+          objectId={row.original.id as string}
+        />
+      );
+    },
+  };
+}