Merge pull request #1771 from exogee-technology/feature/searchable-relationship-filters

Feature / Searchable Relationship Filters - Case Insensitive / Partial Text Filters

Author: thekevinbrown

src/examples/auth-zero/src/frontend/types.generated.ts

@@ -89,6 +89,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/auth-zero/src/types.generated.ts

@@ -89,6 +89,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/aws-cognito/src/frontend/types.generated.ts

@@ -87,6 +87,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/aws-cognito/src/types.generated.ts

@@ -87,6 +87,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/databases/README.md

@@ -21,6 +21,9 @@ CREATE TABLE "user" (
   age INTEGER
 );
 
+CREATE EXTENSION IF NOT EXISTS pg_trgm;
+CREATE INDEX user_username_trigram ON "user" USING gin (username gin_trgm_ops);
+
 -- Seed data for user table
 INSERT INTO "user" (username, email)
 VALUES

src/examples/databases/src/backend/schema/task.ts

@@ -31,6 +31,17 @@ export class Task {
 	@Field(() => Boolean)
 	isCompleted!: boolean;
 
+	@RelationshipField<OrmTask>(() => User, {
+		id: (entity) => entity.userId,
+		adminUIOptions: {
+			filterOptions: {
+				orderBy: { username: 'ASC' },
+				searchableFields: ['username'],
+			},
+		},
+	})
+	user!: User;
+
 	@Field(() => Date)
 	createdAt!: Date;
 
@@ -53,7 +64,4 @@ export class Task {
 			description: task.description,
 		};
 	}
-
-	@RelationshipField<OrmTask>(() => User, { id: (entity) => entity.userId })
-	user!: User;
 }

src/examples/databases/src/backend/schema/user.ts

@@ -25,7 +25,14 @@ export class User {
 	@Field(() => ID)
 	id!: string;
 
-	@Field(() => String)
+	@Field(() => String, {
+		adminUIOptions: {
+			filterOptions: {
+				caseInsensitive: true,
+				substringMatch: true,
+			},
+		},
+	})
 	username!: string;
 
 	@Field(() => String)

src/examples/databases/src/frontend/types.generated.ts

@@ -93,6 +93,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/databases/src/types.generated.ts

@@ -93,6 +93,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/federation/src/frontend/types.generated.ts

@@ -90,6 +90,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/federation/src/types.generated.ts

@@ -90,6 +90,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/microsoft-entra/src/frontend/types.generated.ts

@@ -89,6 +89,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/microsoft-entra/src/types.generated.ts

@@ -89,6 +89,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/okta/src/frontend/types.generated.ts

@@ -89,6 +89,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/okta/src/types.generated.ts

@@ -89,6 +89,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/rest-with-auth/src/frontend/types.generated.ts

@@ -91,6 +91,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/rest-with-auth/src/types.generated.ts

@@ -91,6 +91,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/rest-with-auth/types.generated.ts

@@ -91,6 +91,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/rest/src/frontend/types.generated.ts

@@ -87,6 +87,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/rest/src/types.generated.ts

@@ -87,6 +87,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/s3-storage/src/frontend/types.generated.ts

@@ -87,6 +87,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/s3-storage/src/types.generated.ts

@@ -87,6 +87,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/sqlite/src/frontend/types.generated.ts

@@ -93,6 +93,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/sqlite/src/types.generated.ts

@@ -93,6 +93,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/xero/src/frontend/types.generated.ts

@@ -220,6 +220,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/examples/xero/src/types.generated.ts

@@ -220,6 +220,7 @@ export type AdminUiFieldMetadata = {
 
 export type AdminUiFilterMetadata = {
   __typename?: 'AdminUiFilterMetadata';
+  options?: Maybe<Scalars['JSON']['output']>;
   type: AdminUiFilterType;
 };
 

src/packages/admin-ui-components/src/combo-box/component.tsx

@@ -144,7 +144,7 @@ export const ComboBox = ({
 									ref: inputRef,
 									onBlur: handleBlur,
 									onFocus: toggleMenu,
-									placeholder,
+									placeholder: valueArray.length === 0 ? placeholder : undefined,
 								})}
 							/>
 						</div>

src/packages/admin-ui-components/src/combo-box/styles.module.css

@@ -37,7 +37,7 @@
 .selectedOptions {
 	display: flex;
 	flex-wrap: nowrap;
-	padding: 4px;
+	padding: 0 4px;
 	z-index: 2;
 }
 

src/packages/admin-ui-components/src/filter-bar/component.tsx

@@ -125,6 +125,7 @@ export const FilterBar = ({ iconBefore }: { iconBefore?: ReactNode }) => {
 		return fields.map((field) => {
 			if (field.hideInFilterBar || !field.filter?.type) return null;
 			const options = {
+				...field.filter.options,
 				fieldName: field.name,
 				entity: entityName,
 				onChange: onFilter,

src/packages/admin-ui-components/src/filters/text-filter.tsx

@@ -4,21 +4,39 @@ export interface TextFilterProps {
 	fieldName: string;
 	entity: string;
 	onChange?: (fieldName: string, newFilter: Filter) => void;
+	caseInsensitive?: boolean;
+	substringMatch?: boolean;
 	filter?: Filter;
 }
 
-export const TextFilter = ({ fieldName, onChange, filter }: TextFilterProps) => {
-	const handleOnChange = (fieldName: string, newValue?: string) => {
-		onChange?.(fieldName, newValue ? { [fieldName]: newValue } : {});
-	};
+export const TextFilter = ({
+	fieldName,
+	onChange,
+	filter,
+	caseInsensitive,
+	substringMatch,
+}: TextFilterProps) => {
+	let filterKey = fieldName;
+	if (substringMatch) filterKey = `${fieldName}_like`;
+	if (caseInsensitive) filterKey = `${fieldName}_ilike`;
+
+	let value = String(filter?.[filterKey] ?? '');
+	if (caseInsensitive || substringMatch) value = value.replaceAll('\\%', '%');
+	if (substringMatch) value = value.slice(1, -1);
 
 	return (
 		<Input
 			key={fieldName}
 			inputMode="text"
 			fieldName={fieldName}
-			value={String(filter?.[fieldName] ?? '')}
-			onChange={handleOnChange}
+			value={value}
+			onChange={(fieldName: string, newValue?: string) => {
+				// In either case we'll use ilike so we should escape any literal % characters
+				if (caseInsensitive || substringMatch) newValue = newValue?.replaceAll('%', '\\%');
+				if (substringMatch && newValue) newValue = `%${newValue}%`;
+
+				onChange?.(fieldName, newValue ? { [filterKey]: newValue } : {});
+			}}
 			data-testid={`${fieldName}-filter`}
 		/>
 	);

src/packages/admin-ui-components/src/filters/utils.ts

@@ -28,6 +28,13 @@ const getValidFilterProperties = (fields: EntityField[]): Set<string> => {
 				break;
 			case AdminUIFilterType.TEXT:
 				supportedKeys.add(field.name);
+				// Support for case insensitive and substring matching filters
+				if (field.filter?.options?.caseInsensitive) {
+					supportedKeys.add(`${field.name}_ilike`);
+				}
+				if (field.filter?.options?.substringMatch) {
+					supportedKeys.add(`${field.name}_like`);
+				}
 				break;
 		}
 	}

src/packages/admin-ui-components/src/utils/graphql.ts

@@ -26,6 +26,7 @@ export const SCHEMA_QUERY = gql`
 					relatedEntity
 					filter {
 						type
+						options
 					}
 					attributes {
 						isReadOnly

src/packages/admin-ui-components/src/utils/use-schema.ts

@@ -97,6 +97,7 @@ export interface EntityField {
 	relationshipType?: 'MANY_TO_MANY' | 'MANY_TO_ONE' | 'ONE_TO_MANY' | 'ONE_TO_ONE';
 	filter?: {
 		type: AdminUIFilterType;
+		options?: Record<string, unknown>;
 	};
 	attributes?: EntityFieldAttributes;
 	initialValue?: string | number | boolean;

src/packages/core/src/decorators/field.ts

@@ -100,6 +100,7 @@ export interface FieldOptions {
 	readonly?: boolean;
 	adminUIOptions?: {
 		filterType?: AdminUIFilterType;
+		filterOptions?: Record<string, unknown>;
 		hideInTable?: boolean;
 		hideInFilterBar?: boolean;
 		hideInDetailForm?: boolean;

src/packages/core/src/decorators/relationship-field.ts

@@ -10,6 +10,7 @@ type RelationshipFieldOptions<D> = {
 		hideInFilterBar?: boolean;
 		hideInDetailForm?: boolean;
 		readonly?: boolean;
+		filterOptions?: Record<string, unknown>;
 	};
 
 	// Add custom field directives to this field

src/packages/core/src/metadata-service/filter.ts

@@ -1,3 +1,4 @@
+import { GraphQLJSON } from '@exogee/graphweaver-scalars';
 import { Entity, Field } from '../decorators';
 import { graphweaverMetadata } from '../metadata';
 import { AdminUIFilterType } from '../types';
@@ -13,4 +14,7 @@ graphweaverMetadata.collectEnumInformation({
 export class AdminUiFilterMetadata {
 	@Field(() => AdminUIFilterType)
 	type!: AdminUIFilterType;
+
+	@Field(() => GraphQLJSON, { nullable: true })
+	options?: Record<string, unknown>;
 }

src/packages/core/src/metadata-service/resolver.ts

@@ -148,8 +148,7 @@ export const resolveAdminUiMetadata = (hooks?: Hooks) => {
 				}
 
 				const filterType = field.adminUIOptions?.filterType ?? mapFilterType(fieldObject);
-
-				fieldObject.filter = { type: filterType };
+				fieldObject.filter = { type: filterType, options: field.adminUIOptions?.filterOptions };
 
 				return fieldObject;
 			});

src/packages/core/src/types.ts

@@ -253,6 +253,7 @@ export interface FieldMetadata<G = unknown, D = unknown> {
 		readonly?: boolean;
 		fieldForDetailPanelNavigationId?: boolean;
 		filterType?: AdminUIFilterType;
+		filterOptions?: Record<string, unknown>;
 		detailPanelInputComponent?: DetailPanelInputComponentOption | DetailPanelInputComponent;
 	};
 	apiOptions?: {