Display "dissociate" action only if possible on relationships table's row actions (#6373)

* enable dissocate action only for optional relationships

* add fragment

* add count

* dissociate if min_count is fine

* rename variable and fix edit form

* add edit relationship test + use branch

* fix dissociate checks

* update fragment

* update dissociate action

* add comment

* rename file and update import

* update logic

* fix dissociate check

* update check

* add mock data

* add test

* update comment

* rename files, update types

* add generic use case

* remove old mock data

* use utils function

* refactor dissociate check

* Fix ts errors + improved code logic with early return

* added tests

* more tests

* made usage simplier and added more tests

* lint

* cleaning

---------

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

Author: pa-lem

changelog/+dissociate.fixed.md

@@ -0,0 +1 @@
+Display "dissociate" action only if possible on relationships table's row actions

frontend/app/src/entities/nodes/relationships/ui/relationship-table/get-relationship-actions-column.tsx

@@ -9,13 +9,15 @@ export type GetRelationshipActionsColumnParams = {
   parentKind: string;
   relationshipName: string;
   permission: Permission;
+  relationshipsCount: number;
 };
 
 export function getRelationshipActionsColumn({
   parentId,
   parentKind,
   relationshipName,
   permission,
+  relationshipsCount,
 }: GetRelationshipActionsColumnParams): ColumnDef<NodeObject> {
   return {
     id: "actions",
@@ -30,6 +32,7 @@ export function getRelationshipActionsColumn({
           relationshipKind={row.original.__typename as string}
           relationshipLabel={row.getValue("id") as string}
           relationshipId={row.original.id as string}
+          relationshipsCount={relationshipsCount}
         />
       );
     },

frontend/app/src/entities/nodes/relationships/ui/relationship-table/relationship-actions-cell.tsx

@@ -1,6 +1,7 @@
 import ObjectItemEditComponent from "@/entities/nodes/object-item-edit/object-item-edit-paginated";
 import { DissociateRelationshipsModal } from "@/entities/nodes/relationships/ui/dissociate-relationships-modal";
 import { RelationshipProperties } from "@/entities/nodes/relationships/ui/relationship-properties";
+import { canDissociateRelationship } from "@/entities/nodes/relationships/utils/can-dissociate-relationship";
 import { Permission } from "@/entities/permission/types";
 import { useSchema } from "@/entities/schema/ui/hooks/useSchema";
 import { queryClient } from "@/shared/api/rest/client";
@@ -27,6 +28,7 @@ export interface ActionsCellProps {
   relationshipKind: string;
   relationshipLabel: string;
   relationshipName: string;
+  relationshipsCount: number;
 }
 
 export function RelationshipActionsCell({
@@ -37,14 +39,24 @@ export function RelationshipActionsCell({
   relationshipLabel,
   relationshipKind,
   relationshipName,
+  relationshipsCount,
 }: ActionsCellProps) {
   const [showPropertiesModal, setShowPropertiesModal] = useState(false);
   const [showEditForm, setShowEditForm] = useState(false);
   const [showDissociateModal, setShowDissociateModal] = useState(false);
-  const { schema } = useSchema(relationshipKind);
-  const isEditAllowed = permission.update.isAllowed;
 
-  if (!schema) return <ErrorScreen message={`Schema not found for ${relationshipKind}`} />;
+  const { schema: parentSchema } = useSchema(parentKind);
+
+  if (!parentSchema) {
+    return <ErrorScreen message={`Schema not found for ${relationshipKind}`} />;
+  }
+
+  const isEditAllowed = permission.update.isAllowed;
+  const isDissociateAllowed = canDissociateRelationship({
+    parentSchema,
+    relationshipName,
+    relationshipsCount,
+  });
 
   return (
     <Popover open={showPropertiesModal} onOpenChange={setShowPropertiesModal}>
@@ -82,17 +94,19 @@ export function RelationshipActionsCell({
               </div>
             </Tooltip>
 
-            <Tooltip enabled={!isEditAllowed} content={permission.update.message} side="left">
-              <div>
-                <DropdownMenuItem
-                  disabled={!isEditAllowed}
-                  onClick={() => isEditAllowed && setShowDissociateModal(true)}
-                >
-                  <Icon icon="mdi:link-variant-remove" className="text-base" />
-                  Dissociate
-                </DropdownMenuItem>
-              </div>
-            </Tooltip>
+            {isDissociateAllowed && (
+              <Tooltip enabled={!isEditAllowed} content={permission.update.message} side="left">
+                <div>
+                  <DropdownMenuItem
+                    disabled={!isEditAllowed}
+                    onClick={() => isEditAllowed && setShowDissociateModal(true)}
+                  >
+                    <Icon icon="mdi:link-variant-remove" className="text-base" />
+                    Dissociate
+                  </DropdownMenuItem>
+                </div>
+              </Tooltip>
+            )}
           </DropdownMenuContent>
         </DropdownMenu>
       </TableCell>
@@ -110,7 +124,7 @@ export function RelationshipActionsCell({
         <SlideOver
           title={
             <SlideOverTitle
-              schema={schema}
+              schema={parentSchema}
               currentObjectLabel={relationshipLabel}
               title={`Edit ${relationshipLabel}`}
             />

frontend/app/src/entities/nodes/relationships/ui/relationship-table/relationship-table.tsx

@@ -30,6 +30,8 @@ export function RelationshipTable({
       ...props,
     });
 
+  const flatData = React.useMemo(() => data?.pages?.flat() ?? [], [data]);
+
   const columns = React.useMemo(() => {
     return [
       ...getObjectTableColumns(relationshipSchema, { disabled: true }),
@@ -38,10 +40,10 @@ export function RelationshipTable({
         parentKind,
         relationshipName,
         permission: PERMISSION_ALLOW_ALL,
+        relationshipsCount: flatData.length,
       }),
     ];
-  }, [relationshipSchema.hash]);
-  const flatData = React.useMemo(() => data?.pages?.flat() ?? [], [data]);
+  }, [relationshipSchema.hash, flatData.length]);
 
   return (
     <InfiniteDataTable