Allow passing any filter to relationship combobox list (#5977)

Author: bilalabbad

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

@@ -1,17 +1,21 @@
 import { PaginationParams } from "@/shared/api/types";
 import { jsonToGraphQLQuery } from "json-to-graphql-query";
 
+export type GenerateRelationshipListQueryParams = PaginationParams & {
+  peer: string;
+  parent?: { name: string; value: string };
+  search?: string;
+  filterQuery?: Record<string, string | number | boolean | string[]>;
+};
+
 export const generateRelationshipListQuery = ({
   peer,
   parent,
   limit = 0,
   offset = 0,
   search = "",
-}: PaginationParams & {
-  peer: string;
-  parent?: { name?: string; value?: string };
-  search?: string;
-}): string => {
+  filterQuery = {},
+}: GenerateRelationshipListQueryParams): string => {
   const defaultArgs = { limit, offset, any__value: search, partial_match: true };
 
   const args = parent?.value
@@ -24,6 +28,7 @@ export const generateRelationshipListQuery = ({
       [peer]: {
         __args: {
           ...args,
+          ...filterQuery,
         },
         count: true,
         edges: {

frontend/app/src/entities/nodes/relationships/api/get-relationships-from-api.ts

@@ -1,14 +1,13 @@
-import { generateRelationshipListQuery } from "@/entities/nodes/api/generateRelationshipListQuery";
+import {
+  GenerateRelationshipListQueryParams,
+  generateRelationshipListQuery,
+} from "@/entities/nodes/api/generateRelationshipListQuery";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
-import { ContextParams, PaginationParams } from "@/shared/api/types";
+import { ContextParams } from "@/shared/api/types";
 import { gql } from "@apollo/client";
 
 export type getRelationshipsFromApiParams = ContextParams &
-  PaginationParams & {
-    peer: string;
-    search?: string;
-    parent?: { name: string; value: string };
-  };
+  Omit<GenerateRelationshipListQueryParams, "parent">;
 
 export const getRelationshipsFromApi = async ({
   peer,
@@ -17,9 +16,9 @@ export const getRelationshipsFromApi = async ({
   search,
   branchName,
   atDate,
-  parent,
+  filterQuery,
 }: getRelationshipsFromApiParams) => {
-  const query = gql(generateRelationshipListQuery({ peer, limit, offset, search, parent }));
+  const query = gql(generateRelationshipListQuery({ peer, limit, offset, search, filterQuery }));
 
   return graphqlClient.query({
     query,

frontend/app/src/entities/nodes/relationships/domain/get-relationships/get-relationships.query.ts

@@ -14,14 +14,14 @@ export type GetRelationshipsQueryParams = Omit<GetRelationshipsParams, keyof Pag
 export function getRelationshipsInfiniteQueryOptions({
   peer,
   search,
-  parentId,
   branchName,
   atDate,
+  filterQuery,
 }: GetRelationshipsQueryParams) {
   return infiniteQueryOptions({
-    queryKey: [branchName, atDate, "relationships", peer, search, parentId],
+    queryKey: [branchName, atDate, "relationships", peer, search, filterQuery],
     queryFn: ({ pageParam }) => {
-      return getRelationships({ peer, offset: pageParam, search, parentId, branchName, atDate });
+      return getRelationships({ peer, offset: pageParam, search, filterQuery, branchName, atDate });
     },
     initialPageParam: 0,
     getNextPageParam: (lastPage, _, lastPageParam) => {

frontend/app/src/entities/nodes/relationships/domain/get-relationships/get-relationships.test.ts

@@ -38,7 +38,16 @@ describe("getRelationships", () => {
     vi.mocked(getRelationshipsFromApi).mockResolvedValue(mockResponse);
 
     // WHEN
-    const result = await getRelationships({ peer, offset, search, parentId, branchName, atDate });
+    const result = await getRelationships({
+      peer,
+      offset,
+      search,
+      filterQuery: {
+        parent__ids: [parentId],
+      },
+      branchName,
+      atDate,
+    });
 
     // THEN
     expect(getRelationshipsFromApi).toHaveBeenCalledWith({
@@ -48,7 +57,9 @@ describe("getRelationships", () => {
       limit: 20,
       offset,
       search,
-      parent: { name: "parent", value: parentId },
+      filterQuery: {
+        parent__ids: [parentId],
+      },
     });
     expect(result).toEqual([
       {
@@ -87,7 +98,7 @@ describe("getRelationships", () => {
       limit: 20,
       offset: undefined,
       search: undefined,
-      parent: undefined,
+      filterQuery: undefined,
     });
     expect(result).toEqual([]);
   });

frontend/app/src/entities/nodes/relationships/domain/get-relationships/get-relationships.ts

@@ -1,19 +1,16 @@
-import { getRelationshipsFromApi } from "@/entities/nodes/relationships/api/get-relationships-from-api";
+import {
+  getRelationshipsFromApi,
+  getRelationshipsFromApiParams,
+} from "@/entities/nodes/relationships/api/get-relationships-from-api";
 import { RelationshipNode } from "@/entities/nodes/relationships/domain/types";
-import { ContextParams, PaginationParams } from "@/shared/api/types";
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////
 
 export const RELATIONSHIPS_PER_PAGE = 20;
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////
 
-export type GetRelationshipsParams = ContextParams &
-  PaginationParams & {
-    peer: string;
-    search?: string;
-    parentId?: string;
-  };
+export type GetRelationshipsParams = getRelationshipsFromApiParams;
 
 export type GetRelationships = (params: GetRelationshipsParams) => Promise<Array<RelationshipNode>>;
 
@@ -24,7 +21,7 @@ export const getRelationships: GetRelationships = async ({
   offset,
   peer,
   search,
-  parentId,
+  filterQuery,
 }) => {
   const { data } = await getRelationshipsFromApi({
     peer,
@@ -33,7 +30,7 @@ export const getRelationships: GetRelationships = async ({
     search,
     branchName,
     atDate,
-    parent: parentId ? { name: "parent", value: parentId } : undefined,
+    filterQuery,
   });
 
   const relationshipsData = data[peer];

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

@@ -2,24 +2,31 @@ import { useRelationships } from "@/entities/nodes/relationships/domain/get-rela
 import { RelationshipNode } from "@/entities/nodes/relationships/domain/types";
 import { useSchema } from "@/entities/schema/ui/hooks/useSchema";
 import ErrorScreen from "@/shared/components/errors/error-screen";
-import { ComboboxEmpty, ComboboxItem, ComboboxList } from "@/shared/components/ui/combobox";
+import {
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxListProps,
+} from "@/shared/components/ui/combobox";
 import { Spinner } from "@/shared/components/ui/spinner";
 import { debounce } from "@/shared/utils/common";
 import React, { forwardRef } from "react";
 
-export interface RelationshipComboboxListProps {
+export interface RelationshipComboboxListProps
+  extends Omit<ComboboxListProps, "value" | "onSelect"> {
   peer: string;
   onSelect: (value: RelationshipNode) => void;
   value?: RelationshipNode | null;
   filterItem?: (relationshipNode: RelationshipNode) => boolean;
+  filterQuery?: Record<string, string | number | boolean | string[]>;
 }
 
 export const RelationshipComboboxList = forwardRef<HTMLDivElement, RelationshipComboboxListProps>(
-  ({ peer, value, onSelect, filterItem }, ref) => {
+  ({ peer, value, onSelect, filterItem, filterQuery, ...props }, ref) => {
     const [search, setSearch] = React.useState("");
     const { schema } = useSchema(peer);
     const { isPending, data, error, fetchNextPage, hasNextPage, isFetchingNextPage } =
-      useRelationships({ peer, search });
+      useRelationships({ peer, search, filterQuery });
 
     if (error) return <ErrorScreen message={error.message} />;
 
@@ -30,6 +37,7 @@ export const RelationshipComboboxList = forwardRef<HTMLDivElement, RelationshipC
         ref={ref}
         onValueChange={(newValue) => setSearchDebounced(newValue)}
         shouldFilter={false}
+        {...props}
       >
         {isPending ? (
           <Spinner className="flex justify-center m-2" />

frontend/app/src/entities/nodes/relationships/ui/relationship-hierarchical-combobox-list.tsx

@@ -81,8 +81,8 @@ const HierarchicalExplorer = ({
       })
     : getRelationshipsInfiniteQueryOptions({
         peer: peer as string,
-        parentId: topLevelNode?.id,
         branchName,
+        ...(topLevelNode ? { filterQuery: { parent__ids: [topLevelNode.id] } } : {}),
       });
 
   const { isPending, data, error, fetchNextPage, hasNextPage, isFetchingNextPage } =

frontend/app/tests/e2e/role-management/read.spec.ts

@@ -10,7 +10,7 @@ test.describe("Role management - READ", () => {
     });
 
     await test.step("check counts", async () => {
-      await expect(page.getByRole("link", { name: "Accounts 12" })).toBeVisible();
+      await expect(page.getByRole("link", { name: "Accounts 13" })).toBeVisible();
       await expect(page.getByRole("link", { name: "Groups 6" })).toBeVisible();
       await expect(page.getByRole("link", { name: "Roles 7" })).toBeVisible();
       await expect(page.getByRole("link", { name: "Global Permissions 8" })).toBeVisible();