Add new advanced filters experience (#8570)

* Remove advanced filter sidebar detail

So long, and thanks for all the fish.

* Remove filter conversion logic

* Start replacing/removing old skool filters

* Add inline mode for usages in search bar

* Make filter work in header bar

* Emit empty string as null in filter

* Move shared filter types to shared

* Upgrade use-items

* Fix manual sort on tabular

* Cleanup styling in search bar usage

* Tweak styling

* Fix filtering issues

* Update cards

* Remove activeFilterCount from tabular

* Update maps to work with new filters

* Update calendar to new filter/sort structure

* Fix activity module nav/search

* Fix no-results message

* Update file library filtering

* Finalize user search

* Allow filtering in drawer-collection

* Handle cancelled responses semi-gracefully

* Add loading start state timeout

* Replace sort type in api

* Last commit before redoing a bunch

* Finish new visual style

* Remove unused rounded prop from v-menu

* Tweak sizing

* Enough size tweaking for now

* Count all filter operators instead of top

* Fix archive casting

* Fix api build

* Add merge filters util

* Split filter in user vs system

* Fix export sidebar detail

* Show field label on permissions configuration

* Add migration for filter/sort

* Use filters in insights

api/src/services/authorization.ts

@@ -11,13 +11,10 @@ import {
 	FieldNode,
 	Item,
 	NestedCollectionNode,
-	Permission,
-	PermissionsAction,
 	PrimaryKey,
-	Query,
 	SchemaOverview,
-	Aggregate,
 } from '../types';
+import { Query, Aggregate, Permission, PermissionsAction } from '@directus/shared/types';
 import { ItemsService } from './items';
 import { PayloadService } from './payload';
 
@@ -105,7 +102,11 @@ export class AuthorizationService {
 				}
 			}
 
-			function checkFields(collection: string, children: (NestedCollectionNode | FieldNode)[], aggregate?: Aggregate) {
+			function checkFields(
+				collection: string,
+				children: (NestedCollectionNode | FieldNode)[],
+				aggregate?: Aggregate | null
+			) {
 				// We check the availability of the permissions in the step before this is run
 				const permissions = permissionsForCollections.find((permission) => permission.collection === collection)!;
 				const allowedFields = permissions.fields || [];
@@ -185,7 +186,7 @@ export class AuthorizationService {
 					query.filter._and.push(parsedPermissions);
 				}
 
-				if (query.filter._and.length === 0) delete query.filter._and;
+				if (query.filter._and.length === 0) delete query.filter;
 			}
 		}
 	}
@@ -258,7 +259,7 @@ export class AuthorizationService {
 		}
 
 		if (requiredColumns.length > 0) {
-			permission.validation = hasValidationRules ? { _and: [permission.validation] } : { _and: [] };
+			permission.validation = hasValidationRules ? { _and: [permission.validation!] } : { _and: [] };
 
 			for (const field of requiredColumns) {
 				if (action === 'create' && field.defaultValue === null) {

api/src/services/graphql.ts

@@ -52,8 +52,8 @@ import env from '../env';
 import { BaseException } from '@directus/shared/exceptions';
 import { ForbiddenException, GraphQLValidationException, InvalidPayloadException } from '../exceptions';
 import { getExtensionManager } from '../extensions';
-import { Accountability } from '@directus/shared/types';
-import { AbstractServiceOptions, Action, Aggregate, GraphQLParams, Item, Query, SchemaOverview } from '../types';
+import { Accountability, Query, Aggregate } from '@directus/shared/types';
+import { AbstractServiceOptions, Action, GraphQLParams, Item, SchemaOverview } from '../types';
 import { getGraphQLType } from '../utils/get-graphql-type';
 import { reduceSchema } from '../utils/reduce-schema';
 import { sanitizeQuery } from '../utils/sanitize-query';
@@ -1413,7 +1413,7 @@ export class GraphQLService {
 			return uniq(fields);
 		};
 
-		const replaceFuncs = (filter?: Filter): undefined | Filter => {
+		const replaceFuncs = (filter?: Filter | null): null | undefined | Filter => {
 			if (!filter) return filter;
 
 			return replaceFuncDeep(filter);

api/src/services/items.ts

@@ -9,17 +9,8 @@ import env from '../env';
 import { ForbiddenException, InvalidPayloadException } from '../exceptions';
 import { translateDatabaseError } from '../exceptions/database/translate';
 import logger from '../logger';
-import { Accountability } from '@directus/shared/types';
-import {
-	AbstractService,
-	AbstractServiceOptions,
-	Action,
-	Item as AnyItem,
-	PermissionsAction,
-	PrimaryKey,
-	Query,
-	SchemaOverview,
-} from '../types';
+import { Accountability, Query, PermissionsAction } from '@directus/shared/types';
+import { AbstractService, AbstractServiceOptions, Action, Item as AnyItem, PrimaryKey, SchemaOverview } from '../types';
 import getASTFromQuery from '../utils/get-ast-from-query';
 import { toArray } from '@directus/shared/utils';
 import { AuthorizationService } from './authorization';

api/src/services/meta.ts

@@ -2,8 +2,7 @@ import { Knex } from 'knex';
 import getDatabase from '../database';
 import { ForbiddenException } from '../exceptions';
 import { AbstractServiceOptions, SchemaOverview } from '../types';
-import { Accountability } from '@directus/shared/types';
-import { Query } from '../types/query';
+import { Accountability, Query } from '@directus/shared/types';
 import { applyFilter, applySearch } from '../utils/apply-query';
 import { parseFilter } from '@directus/shared/utils';
 
@@ -18,11 +17,11 @@ export class MetaService {
 		this.schema = options.schema;
 	}
 
-	async getMetaForQuery(collection: string, query: Query): Promise<Record<string, any> | undefined> {
+	async getMetaForQuery(collection: string, query: any): Promise<Record<string, any> | undefined> {
 		if (!query || !query.meta) return;
 
 		const results = await Promise.all(
-			query.meta.map((metaVal) => {
+			query.meta.map((metaVal: string) => {
 				if (metaVal === 'total_count') return this.totalCount(collection);
 				if (metaVal === 'filter_count') return this.filterCount(collection, query);
 			})

api/src/services/payload.ts

@@ -5,8 +5,8 @@ import { clone, cloneDeep, isObject, isPlainObject, omit, isNil } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
 import getDatabase from '../database';
 import { ForbiddenException, InvalidPayloadException } from '../exceptions';
-import { AbstractServiceOptions, Item, PrimaryKey, Query, SchemaOverview, Alterations } from '../types';
-import { Accountability } from '@directus/shared/types';
+import { AbstractServiceOptions, Item, PrimaryKey, SchemaOverview, Alterations } from '../types';
+import { Accountability, Query } from '@directus/shared/types';
 import { toArray } from '@directus/shared/utils';
 import { ItemsService } from './items';
 import { unflatten } from 'flat';

api/src/services/permissions.ts

@@ -1,7 +1,8 @@
 import { appAccessMinimalPermissions } from '../database/system-data/app-access-permissions';
 import logger from '../logger';
 import { ItemsService, QueryOptions } from '../services/items';
-import { AbstractServiceOptions, Item, PermissionsAction, PrimaryKey, Query } from '../types';
+import { AbstractServiceOptions, Item, PrimaryKey } from '../types';
+import { Query, PermissionsAction } from '@directus/shared/types';
 import { filterItems } from '../utils/filter-items';
 
 export class PermissionsService extends ItemsService {

api/src/services/relations.ts

@@ -1,7 +1,8 @@
 import { Knex } from 'knex';
 import { systemRelationRows } from '../database/system-data/relations';
 import { ForbiddenException, InvalidPayloadException } from '../exceptions';
-import { AbstractServiceOptions, SchemaOverview, Query, Relation, RelationMeta } from '../types';
+import { AbstractServiceOptions, SchemaOverview, Relation, RelationMeta } from '../types';
+import { Query } from '@directus/shared/types';
 import { Accountability } from '@directus/shared/types';
 import { toArray } from '@directus/shared/utils';
 import { ItemsService, QueryOptions } from './items';

api/src/services/roles.ts

@@ -1,5 +1,6 @@
 import { ForbiddenException, UnprocessableEntityException } from '../exceptions';
-import { AbstractServiceOptions, PrimaryKey, Query, Alterations, Item } from '../types';
+import { AbstractServiceOptions, PrimaryKey, Alterations, Item } from '../types';
+import { Query } from '@directus/shared/types';
 import { ItemsService, MutationOptions } from './items';
 import { PermissionsService } from './permissions';
 import { PresetsService } from './presets';

api/src/services/specifications.ts

@@ -15,8 +15,8 @@ import {
 import { version } from '../../package.json';
 import getDatabase from '../database';
 import env from '../env';
-import { AbstractServiceOptions, Collection, Permission, Relation, SchemaOverview } from '../types';
-import { Accountability, Field, Type } from '@directus/shared/types';
+import { AbstractServiceOptions, Collection, Relation, SchemaOverview } from '../types';
+import { Accountability, Field, Type, Permission } from '@directus/shared/types';
 import { getRelationType } from '../utils/get-relation-type';
 import { CollectionsService } from './collections';
 import { FieldsService } from './fields';

api/src/services/users.ts

@@ -7,7 +7,8 @@ import { FailedValidationException } from '@directus/shared/exceptions';
 import { ForbiddenException, InvalidPayloadException, UnprocessableEntityException } from '../exceptions';
 import { RecordNotUniqueException } from '../exceptions/database/record-not-unique';
 import logger from '../logger';
-import { AbstractServiceOptions, Item, PrimaryKey, Query, SchemaOverview } from '../types';
+import { AbstractServiceOptions, Item, PrimaryKey, SchemaOverview } from '../types';
+import { Query } from '@directus/shared/types';
 import { Accountability } from '@directus/shared/types';
 import isUrlAllowed from '../utils/is-url-allowed';
 import { toArray } from '@directus/shared/utils';