Skip to content

Commit

Permalink
[8.9] [TableListView] Fix tag selection when passing initialFilter (#…
Browse files Browse the repository at this point in the history 
…160871) (#162169)

# Backport

This will backport the following commits from `main` to `8.9`:
- [[TableListView] Fix tag selection when passing initialFilter
(#160871)](#160871)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Sébastien
Loix","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-06-30T12:00:54Z","message":"[TableListView]
Fix tag selection when passing initialFilter
(#160871)","sha":"aec3a4bee3456d3d0ff06802c74caa13545fe2f3","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:skip","Team:SharedUX","Feature:Content
Management","Component:TableListView","v8.10.0"],"number":160871,"url":"https://github.com/elastic/kibana/pull/160871","mergeCommit":{"message":"[TableListView]
Fix tag selection when passing initialFilter
(#160871)","sha":"aec3a4bee3456d3d0ff06802c74caa13545fe2f3"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.10.0","labelRegex":"^v8.10.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/160871","number":160871,"mergeCommit":{"message":"[TableListView]
Fix tag selection when passing initialFilter
(#160871)","sha":"aec3a4bee3456d3d0ff06802c74caa13545fe2f3"}}]}]
BACKPORT-->
  • Loading branch information
@sebelga
sebelga authored Jul 19, 2023
1 parent 94b85a2 commit b9e0e5a
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 57 deletions.
45 changes: 44 additions & 1 deletion packages/content-management/table_list_view_table/src/table_list_view.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -781,6 +781,49 @@ describe('TableListView', () => {
});
});

describe('initialFilter', () => {
const setupInitialFilter = registerTestBed<string, TableListViewTableProps>(
WithServices<TableListViewTableProps>(TableListViewTable, {
getTagList: () => [
{ id: 'id-tag-foo', name: 'foo', type: 'tag', description: '', color: '' },
],
}),
{
defaultProps: { ...requiredProps },
memoryRouter: { wrapComponent: true },
}
);

test('should filter by tag passed as in initialFilter prop', async () => {
let testBed: TestBed;

const initialFilter = 'tag:(tag-1)';
const findItems = jest.fn().mockResolvedValue({ total: 0, hits: [] });

await act(async () => {
testBed = await setupInitialFilter({
findItems,
initialFilter,
urlStateEnabled: false,
});
});

const { component, find } = testBed!;
component.update();

const getSearchBoxValue = () => find('tableListSearchBox').props().defaultValue;

const getLastCallArgsFromFindItems = () =>
findItems.mock.calls[findItems.mock.calls.length - 1];

// The search bar should be updated
const expected = initialFilter;
const [searchTerm] = getLastCallArgsFromFindItems();
expect(getSearchBoxValue()).toBe(expected);
expect(searchTerm).toBe(expected);
});
});

describe('url state', () => {
let router: Router | undefined;

Expand Down Expand Up @@ -1265,7 +1308,7 @@ describe('TableList', () => {
it('reports the page data test subject', async () => {
const setPageDataTestSubject = jest.fn();

act(() => {
await act(async () => {
setup({ setPageDataTestSubject });
});

Expand Down
128 changes: 78 additions & 50 deletions packages/content-management/table_list_view_table/src/table_list_view_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,15 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({

const isMounted = useRef(false);
const fetchIdx = useRef(0);
/**
* The "onTableSearchChange()" handler has an async behavior. We want to be able to discard
* previsous search changes and only handle the last one. For that we keep a counter of the changes.
*/
const tableSearchChangeIdx = useRef(0);
/**
* We want to build the initial query
*/
const initialQueryInitialized = useRef(false);

const {
canEditAdvancedSettings,
Expand Down Expand Up @@ -333,10 +342,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
showDeleteModal: false,
hasUpdatedAtMetadata: false,
selectedIds: [],
searchQuery:
initialQuery !== undefined
? { text: initialQuery, query: new Query(Ast.create([]), undefined, initialQuery) }
: { text: '', query: new Query(Ast.create([]), undefined, '') },
searchQuery: { text: '', query: new Query(Ast.create([]), undefined, '') },
pagination: {
pageIndex: 0,
totalItemCount: 0,
Expand All @@ -348,7 +354,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
direction: 'asc',
},
}),
[initialPageSize, initialQuery]
[initialPageSize]
);

const [state, dispatch] = useReducer(reducer, initialState);
Expand Down Expand Up @@ -614,12 +620,67 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
// ------------
// Callbacks
// ------------
const buildQueryFromText = useCallback(
async (text: string) => {
let ast = Ast.create([]);
let termMatch = text;

if (searchQueryParser) {
// Parse possible tags in the search text
const {
references,
referencesToExclude,
searchQuery: searchTerm,
} = await searchQueryParser(text);

termMatch = searchTerm;

if (references?.length || referencesToExclude?.length) {
const allTags = getTagList();

if (references?.length) {
references.forEach(({ id: refId }) => {
const tag = allTags.find(({ id }) => id === refId);
if (tag) {
ast = ast.addOrFieldValue('tag', tag.name, true, 'eq');
}
});
}

if (referencesToExclude?.length) {
referencesToExclude.forEach(({ id: refId }) => {
const tag = allTags.find(({ id }) => id === refId);
if (tag) {
ast = ast.addOrFieldValue('tag', tag.name, false, 'eq');
}
});
}
}
}

if (termMatch.trim() !== '') {
ast = ast.addClause({ type: 'term', value: termMatch, match: 'must' });
}

return new Query(ast, undefined, text);
},
[getTagList, searchQueryParser]
);

const onTableSearchChange = useCallback(
(arg: { query: Query | null; queryText: string }) => {
const query = arg.query ?? new Query(Ast.create([]), undefined, arg.queryText);
updateQuery(query);
if (arg.query) {
updateQuery(arg.query);
} else {
const idx = tableSearchChangeIdx.current + 1;
buildQueryFromText(arg.queryText).then((query) => {
if (idx === tableSearchChangeIdx.current) {
updateQuery(query);
}
});
}
},
[updateQuery]
[updateQuery, buildQueryFromText]
);

const updateTableSortAndPagination = useCallback(
Expand Down Expand Up @@ -815,47 +876,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({

// Update our Query instance based on the URL "s" text
const updateQueryFromURL = async (text: string = '') => {
let ast = Ast.create([]);
let termMatch = text;

if (searchQueryParser) {
// Parse possible tags in the search text
const {
references,
referencesToExclude,
searchQuery: searchTerm,
} = await searchQueryParser(text);

termMatch = searchTerm;

if (references?.length || referencesToExclude?.length) {
const allTags = getTagList();

if (references?.length) {
references.forEach(({ id: refId }) => {
const tag = allTags.find(({ id }) => id === refId);
if (tag) {
ast = ast.addOrFieldValue('tag', tag.name, true, 'eq');
}
});
}

if (referencesToExclude?.length) {
referencesToExclude.forEach(({ id: refId }) => {
const tag = allTags.find(({ id }) => id === refId);
if (tag) {
ast = ast.addOrFieldValue('tag', tag.name, false, 'eq');
}
});
}
}
}

if (termMatch.trim() !== '') {
ast = ast.addClause({ type: 'term', value: termMatch, match: 'must' });
}

const updatedQuery = new Query(ast, undefined, text);
const updatedQuery = await buildQueryFromText(text);

dispatch({
type: 'onSearchQueryChange',
Expand Down Expand Up @@ -885,7 +906,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({

updateQueryFromURL(urlState.s);
updateSortFromURL(urlState.sort);
}, [urlState, searchQueryParser, getTagList, urlStateEnabled]);
}, [urlState, buildQueryFromText, urlStateEnabled]);

useEffect(() => {
isMounted.current = true;
Expand All @@ -895,6 +916,13 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
};
}, []);

useEffect(() => {
if (initialQuery && !initialQueryInitialized.current) {
initialQueryInitialized.current = true;
buildQueryFromText(initialQuery).then(updateQuery);
}
}, [initialQuery, buildQueryFromText, updateQuery]);

const PageTemplate = useMemo<typeof KibanaPageTemplate>(() => {
return withoutPageTemplateWrapper
? ((({
Expand Down
16 changes: 10 additions & 6 deletions src/plugins/dashboard/public/dashboard_listing/dashboard_listing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

import { FormattedRelative, I18nProvider } from '@kbn/i18n-react';
import React, { PropsWithChildren, useCallback, useState } from 'react';
import React, { PropsWithChildren, useCallback, useMemo, useState } from 'react';

import {
type TableListViewKibanaDependencies,
Expand Down Expand Up @@ -206,6 +206,14 @@ export const DashboardListing = ({

const { getEntityName, getTableListTitle, getEntityNamePlural } = dashboardListingTableStrings;

const savedObjectsTaggingFakePlugin = useMemo(() => {
return savedObjectsTagging.hasApi // TODO: clean up this logic once https://github.com/elastic/kibana/issues/140433 is resolved
? ({
ui: savedObjectsTagging,
} as TableListViewKibanaDependencies['savedObjectsTagging'])
: undefined;
}, [savedObjectsTagging]);

return (
<I18nProvider>
<TableListViewKibanaProvider
Expand All @@ -217,11 +225,7 @@ export const DashboardListing = ({
http,
},
toMountPoint,
savedObjectsTagging: savedObjectsTagging.hasApi // TODO: clean up this logic once https://github.com/elastic/kibana/issues/140433 is resolved
? ({
ui: savedObjectsTagging,
} as TableListViewKibanaDependencies['savedObjectsTagging'])
: undefined,
savedObjectsTagging: savedObjectsTaggingFakePlugin,
FormattedRelative,
}}
>
Expand Down

0 comments on commit b9e0e5a

Please sign in to comment.