diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx index 0ffd353c8ddd2..d51c7461d684d 100644 --- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx +++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx @@ -277,7 +277,7 @@ export class Table extends PureComponent { ); }, } as EuiTableFieldDataColumnType>, - ...(taggingApi ? [taggingApi.ui.getTableColumnDefinition()] : []), + ...(taggingApi ? [taggingApi.ui.getTableColumnDefinition({ serverPaging: true })] : []), ...columnRegistry.getAll().map((column) => { column.setColumnContext({ capabilities }); column.registerOnFinishCallback(() => { diff --git a/src/plugins/saved_objects_tagging_oss/public/api.ts b/src/plugins/saved_objects_tagging_oss/public/api.ts index 61d6fe29e64d9..6315185978472 100644 --- a/src/plugins/saved_objects_tagging_oss/public/api.ts +++ b/src/plugins/saved_objects_tagging_oss/public/api.ts @@ -102,7 +102,9 @@ export interface SavedObjectsTaggingApiUi { * ) * ``` */ - getTableColumnDefinition(): EuiTableFieldDataColumnType; + getTableColumnDefinition( + options?: GetTableColumnDefinitionOptions + ): EuiTableFieldDataColumnType; /** * Convert given tag name to a {@link SavedObjectsFindOptionsReference | reference } @@ -251,6 +253,28 @@ export interface SavedObjectSaveModalTagSelectorComponentProps { onTagsSelected: (ids: string[]) => void; } +/** + * Options for the {@link SavedObjectsTaggingApiUi.getTableColumnDefinition | getTableColumnDefinition api} + * + * @public + */ +export interface GetTableColumnDefinitionOptions { + /** + * By default, the `tags` column definition will be automatically sortable + * by tag name. + * + * However, when paging is performed on the server, we need to remove the sorting + * capability from the column to avoid unexpected behavior by triggering fetch request + * when sorting by column. + * + * Should be set to `true` when generating the definition for a table that performs + * server-side paging. + * + * Defaults to false. + */ + serverPaging?: boolean; +} + /** * Options for the {@link SavedObjectsTaggingApiUi.getSearchBarFilter | getSearchBarFilter api} * diff --git a/src/plugins/saved_objects_tagging_oss/public/index.ts b/src/plugins/saved_objects_tagging_oss/public/index.ts index cb22cb9ce4864..46e30d51e084a 100644 --- a/src/plugins/saved_objects_tagging_oss/public/index.ts +++ b/src/plugins/saved_objects_tagging_oss/public/index.ts @@ -23,6 +23,7 @@ export type { ParseSearchQueryOptions, SavedObjectSaveModalTagSelectorComponentProps, SavedObjectTagDecoratorTypeGuard, + GetTableColumnDefinitionOptions, } from './api'; export type { TagDecoratedSavedObject } from './decorator'; diff --git a/x-pack/plugins/saved_objects_tagging/public/ui_api/get_table_column_definition.test.ts b/x-pack/plugins/saved_objects_tagging/public/ui_api/get_table_column_definition.test.ts index d51e0e8bd03b1..0b4a814370177 100644 --- a/x-pack/plugins/saved_objects_tagging/public/ui_api/get_table_column_definition.test.ts +++ b/x-pack/plugins/saved_objects_tagging/public/ui_api/get_table_column_definition.test.ts @@ -59,4 +59,10 @@ describe('getTableColumnDefinition', () => { // we know this returns a function even if the generic column signature allows other types expect((sortable as Function)(savedObject)).toEqual('Tag 1'); }); + + it('returns a non-sortable definition when `serverPaging` is `true`', () => { + const { sortable } = getTableColumnDefinition({ serverPaging: true }); + + expect(sortable).toEqual(false); + }); }); diff --git a/x-pack/plugins/saved_objects_tagging/public/ui_api/get_table_column_definition.tsx b/x-pack/plugins/saved_objects_tagging/public/ui_api/get_table_column_definition.tsx index ffde6e2e5e825..ae9e96625eaa9 100644 --- a/x-pack/plugins/saved_objects_tagging/public/ui_api/get_table_column_definition.tsx +++ b/x-pack/plugins/saved_objects_tagging/public/ui_api/get_table_column_definition.tsx @@ -11,11 +11,12 @@ import { SavedObject, SavedObjectReference } from '@kbn/core/public'; import { SavedObjectsTaggingApiUi, SavedObjectsTaggingApiUiComponent, + GetTableColumnDefinitionOptions, } from '@kbn/saved-objects-tagging-oss-plugin/public'; import { ITagsCache } from '../services'; import { getTagsFromReferences, byNameTagSorter } from '../utils'; -export interface GetTableColumnDefinitionOptions { +export interface BuildGetTableColumnDefinitionOptions { components: SavedObjectsTaggingApiUiComponent; cache: ITagsCache; } @@ -23,8 +24,8 @@ export interface GetTableColumnDefinitionOptions { export const buildGetTableColumnDefinition = ({ components, cache, -}: GetTableColumnDefinitionOptions): SavedObjectsTaggingApiUi['getTableColumnDefinition'] => { - return () => { +}: BuildGetTableColumnDefinitionOptions): SavedObjectsTaggingApiUi['getTableColumnDefinition'] => { + return ({ serverPaging = false }: GetTableColumnDefinitionOptions = {}) => { return { field: 'references', name: i18n.translate('xpack.savedObjectsTagging.uiApi.table.columnTagsName', { @@ -33,11 +34,13 @@ export const buildGetTableColumnDefinition = ({ description: i18n.translate('xpack.savedObjectsTagging.uiApi.table.columnTagsDescription', { defaultMessage: 'Tags associated with this saved object', }), - sortable: (object: SavedObject) => { - const { tags } = getTagsFromReferences(object.references, cache.getState()); - tags.sort(byNameTagSorter); - return tags.length ? tags[0].name : undefined; - }, + sortable: serverPaging + ? false + : (object: SavedObject) => { + const { tags } = getTagsFromReferences(object.references, cache.getState()); + tags.sort(byNameTagSorter); + return tags.length ? tags[0].name : undefined; + }, render: (references: SavedObjectReference[], object: SavedObject) => { return ; },