Fix manage tags when selecting all on serverside pagination

src/AutoUI/Actions/Tags.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import {
 	ResourceTagSubmitInfo,
+	Spinner,
 	SubmitInfo,
 	TagManagementModal,
+	useRequest,
 } from 'rendition';
 import { useTranslation } from '../../hooks/useTranslation';
 import { AutoUIContext, AutoUIBaseResource } from '../schemaOps';
 import { enqueueSnackbar, closeSnackbar } from '@balena/ui-shared-components';
 
 interface TagsProps<T> {
-	selected: T[];
+	selected: T[] | undefined;
 	autouiContext: AutoUIContext<T>;
 	setIsBusyMessage: (message: string | undefined) => void;
 	onDone: () => void;
@@ -25,7 +27,25 @@ export const Tags = <T extends AutoUIBaseResource<T>>({
 }: TagsProps<T>) => {
 	const { t } = useTranslation();
 
-	const { sdk } = autouiContext;
+	const { sdk, internalPineFilter, checkedState } = autouiContext;
+
+	const getAllTags = sdk?.tags && 'getAll' in sdk.tags ? sdk.tags.getAll : null;
+
+	const { data: items, isLoading } = useRequest(
+		async () => {
+			if (
+				// we are in server side pagination
+				selected == null &&
+				checkedState === 'all' &&
+				getAllTags
+			) {
+				return await getAllTags(internalPineFilter);
+			}
+			return selected;
+		},
+		[internalPineFilter, checkedState, getAllTags, selected == null],
+		{ polling: false },
+	);
 
 	const changeTags = React.useCallback(
 		async (tags: SubmitInfo<ResourceTagSubmitInfo, ResourceTagSubmitInfo>) => {
@@ -64,21 +84,23 @@ export const Tags = <T extends AutoUIBaseResource<T>>({
 		[sdk?.tags, refresh, selected],
 	);
 
-	if (!autouiContext.tagField || !autouiContext.nameField) {
+	if (!autouiContext.tagField || !autouiContext.nameField || !items) {
 		return null;
 	}
 
 	return (
-		<TagManagementModal<T>
-			items={selected}
-			itemType={autouiContext.resource}
-			titleField={autouiContext.nameField as keyof T}
-			tagField={autouiContext.tagField as keyof T}
-			done={(tagSubmitInfo) => {
-				changeTags(tagSubmitInfo);
-				onDone();
-			}}
-			cancel={() => onDone()}
-		/>
+		<Spinner show={isLoading} width="100%" height="100%">
+			<TagManagementModal<T>
+				items={items}
+				itemType={autouiContext.resource}
+				titleField={autouiContext.nameField as keyof T}
+				tagField={autouiContext.tagField as keyof T}
+				done={(tagSubmitInfo) => {
+					changeTags(tagSubmitInfo);
+					onDone();
+				}}
+				cancel={() => onDone()}
+			/>
+		</Spinner>
 	);
 };

src/AutoUI/index.tsx

@@ -9,6 +9,7 @@ import {
 	autoUIJsonSchemaPick,
 	ActionData,
 	Priorities,
+	AutoUITagsSdk,
 } from './schemaOps';
 import { LensSelection } from './Lenses/LensSelection';
 import type { JSONSchema7 as JSONSchema } from 'json-schema';
@@ -40,7 +41,6 @@ import {
 	Dictionary,
 	FiltersView,
 	Format,
-	ResourceTagModelService,
 	Spinner,
 	TableColumn,
 	SchemaSieve as sieve,
@@ -55,6 +55,7 @@ import { useHistory } from '../hooks/useHistory';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
 import {
+	type PineFilterObject,
 	convertToPineClientFilter,
 	orderbyBuilder,
 } from '../oData/jsonToOData';
@@ -102,9 +103,7 @@ export interface AutoUIProps<T> extends Omit<Material.BoxProps, 'onChange'> {
 	/** Actions is an array of actions applicable on the selected items */
 	actions?: Array<AutoUIAction<T>>;
 	/** The sdk is used to pass the method to handle tags when added removed or updated */
-	sdk?: {
-		tags?: ResourceTagModelService;
-	};
+	sdk?: { tags: AutoUITagsSdk<T> };
 	/** Dictionary of {[column_property]: customFunction} where the customFunction is the function to sort data on column header click */
 	customSort?: Dictionary<(a: T, b: T) => number> | Dictionary<string>;
 	// TODO: Ideally the base URL is autogenerated, but there are some issues with that currently (eg. instead of application we have apps in the URL)
@@ -188,6 +187,9 @@ export const AutoUI = <T extends AutoUIBaseResource<T>>({
 	const [views, setViews] = React.useState<FiltersView[]>([]);
 	const [selected, setSelected] = React.useState<T[] | undefined>([]);
 	const [checkedState, setCheckedState] = React.useState<CheckedState>('none');
+	const [internalPineFilter, setInternalPineFilter] = React.useState<
+		PineFilterObject | null | undefined
+	>();
 	const [isBusyMessage, setIsBusyMessage] = React.useState<
 		string | undefined
 	>();
@@ -298,18 +300,27 @@ export const AutoUI = <T extends AutoUIBaseResource<T>>({
 					title: t('actions.manage_tags'),
 					type: 'update',
 					section: 'settings',
-					renderer: ({ affectedEntries, onDone }) =>
-						!!affectedEntries && (
-							<Tags
-								selected={affectedEntries}
-								autouiContext={autouiContext}
-								onDone={onDone}
-								setIsBusyMessage={setIsBusyMessage}
-								refresh={refresh}
-							/>
+					renderer: ({ affectedEntries, onDone }) => {
+						return (
+							(!!affectedEntries || (sdk.tags && 'getAll' in sdk.tags)) && (
+								<Tags
+									selected={affectedEntries}
+									autouiContext={autouiContext}
+									onDone={onDone}
+									setIsBusyMessage={setIsBusyMessage}
+									refresh={refresh}
+								/>
+							)
+						);
+					},
+					isDisabled: async ({ affectedEntries, checkedState }) =>
+						getTagsDisabledReason(
+							affectedEntries,
+							tagField as keyof T,
+							checkedState,
+							sdk.tags,
+							t,
 						),
-					isDisabled: ({ affectedEntries }) =>
-						getTagsDisabledReason(affectedEntries, tagField as keyof T, t),
 			  }
 			: null;
 
@@ -323,8 +334,19 @@ export const AutoUI = <T extends AutoUIBaseResource<T>>({
 			actions: !!tagsAction ? (actions || []).concat(tagsAction) : actions,
 			customSort,
 			sdk,
+			internalPineFilter,
+			checkedState,
 		};
-	}, [model, getBaseUrl, onEntityClick, actions, customSort, sdk]);
+	}, [
+		model,
+		getBaseUrl,
+		onEntityClick,
+		actions,
+		customSort,
+		sdk,
+		internalPineFilter,
+		checkedState,
+	]);
 
 	const properties = React.useMemo(
 		() =>
@@ -363,17 +385,21 @@ export const AutoUI = <T extends AutoUIBaseResource<T>>({
 		if (!onChange) {
 			return;
 		}
+		const pineFilter = pagination?.serverSide
+			? convertToPineClientFilter([], updatedFilters)
+			: null;
 		const oData = pagination?.serverSide
 			? pickBy(
 					{
-						$filter: convertToPineClientFilter([], updatedFilters),
+						$filter: pineFilter,
 						$orderby: orderbyBuilder(sortInfo, customSort),
 						$top: itemsPerPage,
 						$skip: page * itemsPerPage,
 					},
 					(v) => v != null,
 			  )
 			: null;
+		setInternalPineFilter(pineFilter);
 		onChange?.({
 			filters: updatedFilters,
 			page,

src/AutoUI/schemaOps.ts

@@ -1,6 +1,7 @@
 import type { JSONSchema7 as JSONSchema } from 'json-schema';
 import pick from 'lodash/pick';
 import { CheckedState, Dictionary, ResourceTagModelService } from 'rendition';
+import { PineFilterObject } from '~/oData/jsonToOData';
 
 type MaybePromise<T> = T | Promise<T>;
 
@@ -36,6 +37,18 @@ export interface AutoUIModel<T> {
 	priorities?: Priorities<T>;
 }
 
+export type AutoUITagsSdk<T> = ResourceTagModelService &
+	(
+		| {}
+		| {
+				getAll: (itemsOrFilters: any) => T[] | Promise<T[]>;
+				canAccess: (param: {
+					checkedState?: CheckedState;
+					selected?: T[];
+				}) => Promise<boolean>;
+		  }
+	);
+
 export interface AutoUIAction<T> {
 	title: string;
 	type: 'create' | 'update' | 'delete';
@@ -87,8 +100,10 @@ export interface AutoUIContext<T> {
 	actions?: Array<AutoUIAction<T>>;
 	customSort?: Dictionary<(a: T, b: T) => number> | Dictionary<string>;
 	sdk?: {
-		tags?: ResourceTagModelService;
+		tags?: AutoUITagsSdk<T>;
 	};
+	internalPineFilter?: PineFilterObject | null;
+	checkedState: CheckedState;
 }
 
 export interface ActionData<T> {

src/AutoUI/utils.ts

@@ -1,4 +1,9 @@
-import { AutoUIBaseResource, Permissions, Priorities } from './schemaOps';
+import {
+	AutoUIBaseResource,
+	Permissions,
+	Priorities,
+	AutoUITagsSdk,
+} from './schemaOps';
 import castArray from 'lodash/castArray';
 import get from 'lodash/get';
 import { TFunction } from '../hooks/useTranslation';
@@ -72,22 +77,27 @@ export const ObjectFromEntries = (entries: any[]) => {
 	return obj;
 };
 
-export const getTagsDisabledReason = <T extends AutoUIBaseResource<T>>(
+export const getTagsDisabledReason = async <T extends AutoUIBaseResource<T>>(
 	selected: T[] | undefined,
 	tagField: keyof T,
+	checkedState: CheckedState | undefined,
+	tagsSdk: AutoUITagsSdk<T>,
 	t: TFunction,
 ) => {
-	if (!selected || selected.length === 0) {
+	if (checkedState !== 'all' && (!selected || selected.length === 0)) {
 		return t('info.no_selected');
 	}
 
-	const lacksPermissionsOnSelected = selected.some((entry) => {
-		return (
-			!entry.__permissions.delete &&
-			!entry.__permissions.create.includes(tagField) &&
-			!entry.__permissions.update.includes(tagField as keyof T)
-		);
-	});
+	const lacksPermissionsOnSelected =
+		tagsSdk && 'canAccess' in tagsSdk
+			? !(await tagsSdk.canAccess({ checkedState, selected }))
+			: selected?.some((entry) => {
+					return (
+						!entry.__permissions.delete &&
+						!entry.__permissions.create.includes(tagField) &&
+						!entry.__permissions.update.includes(tagField as keyof T)
+					);
+			  });
 
 	if (lacksPermissionsOnSelected) {
 		// TODO: Pass the resource name instead.

src/oData/jsonToOData.ts

@@ -1,7 +1,7 @@
 import { JSONSchema, TableSortOptions } from 'rendition';
 import { AutoUIContext } from '~/AutoUI/schemaOps';
 
-type PineFilterObject = Record<string, any>;
+export type PineFilterObject = Record<string, any>;
 
 interface FilterMutation extends JSONSchema {
 	$and?: any[];