Skip to content

Commit

Permalink
[Table list view] Add state in URL (#145517)
Browse files Browse the repository at this point in the history
  • Loading branch information
sebelga authored Dec 19, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent e03f8f0 commit bafe213
Showing 18 changed files with 534 additions and 177 deletions.
22 changes: 9 additions & 13 deletions packages/content-management/table_list/src/actions.ts
Original file line number Diff line number Diff line change
@@ -6,9 +6,9 @@
* Side Public License, v 1.
*/
import type { IHttpFetchError } from '@kbn/core-http-browser';
import type { CriteriaWithPagination, Direction, Query } from '@elastic/eui';
import type { Query } from '@elastic/eui';

import type { SortColumnField } from './components';
import type { State, UserContentCommonSchema } from './table_list_view';

/** Action to trigger a fetch of the table items */
export interface OnFetchItemsAction {
@@ -49,17 +49,14 @@ export interface OnSelectionChangeAction<T> {
}

/** Action to update the state of the table whenever the sort or page size changes */
export interface OnTableChangeAction<T> {
export interface OnTableChangeAction<T extends UserContentCommonSchema> {
type: 'onTableChange';
data: CriteriaWithPagination<T>;
}

/** Action to update the sort column of the table */
export interface OnTableSortChangeAction<T> {
type: 'onTableSortChange';
data: {
field: SortColumnField;
direction: Direction;
sort?: State<T>['tableSort'];
page?: {
pageIndex: number;
pageSize: number;
};
};
}

@@ -77,13 +74,12 @@ export interface OnSearchQueryChangeAction {
};
}

export type Action<T> =
export type Action<T extends UserContentCommonSchema> =
| OnFetchItemsAction
| OnFetchItemsSuccessAction<T>
| OnFetchItemsErrorAction
| DeleteItemsActions
| OnSelectionChangeAction<T>
| OnTableChangeAction<T>
| OnTableSortChangeAction<T>
| ShowConfirmDeleteItemsModalAction
| OnSearchQueryChangeAction;
20 changes: 4 additions & 16 deletions packages/content-management/table_list/src/components/table.tsx
Original file line number Diff line number Diff line change
@@ -17,7 +17,6 @@ import {
SearchFilterConfig,
Direction,
Query,
Ast,
} from '@elastic/eui';

import { useServices } from '../services';
@@ -54,6 +53,7 @@ interface Props<T extends UserContentCommonSchema> extends State<T>, TagManageme
deleteItems: TableListViewProps<T>['deleteItems'];
onSortChange: (column: SortColumnField, direction: Direction) => void;
onTableChange: (criteria: CriteriaWithPagination<T>) => void;
onTableSearchChange: (arg: { query: Query | null; queryText: string }) => void;
clearTagSelection: () => void;
}

@@ -73,6 +73,7 @@ export function Table<T extends UserContentCommonSchema>({
deleteItems,
tableCaption,
onTableChange,
onTableSearchChange,
onSortChange,
addOrRemoveExcludeTagFilter,
addOrRemoveIncludeTagFilter,
@@ -128,19 +129,6 @@ export function Table<T extends UserContentCommonSchema>({
addOrRemoveIncludeTagFilter,
});

const onSearchQueryChange = useCallback(
(arg: { query: Query | null; queryText: string }) => {
dispatch({
type: 'onSearchQueryChange',
data: {
query: arg.query ?? new Query(Ast.create([]), undefined, arg.queryText),
text: arg.queryText,
},
});
},
[dispatch]
);

const tableSortSelectFilter = useMemo<SearchFilterConfig>(() => {
return {
type: 'custom_component',
@@ -191,7 +179,7 @@ export function Table<T extends UserContentCommonSchema>({

const search = useMemo(() => {
return {
onChange: onSearchQueryChange,
onChange: onTableSearchChange,
toolsLeft: renderToolsLeft(),
query: searchQuery.query ?? undefined,
box: {
@@ -200,7 +188,7 @@ export function Table<T extends UserContentCommonSchema>({
},
filters: searchFilters,
};
}, [onSearchQueryChange, renderToolsLeft, searchFilters, searchQuery.query]);
}, [onTableSearchChange, renderToolsLeft, searchFilters, searchQuery.query]);

const noItemsMessage = (
<FormattedMessage
30 changes: 20 additions & 10 deletions packages/content-management/table_list/src/reducer.tsx
Original file line number Diff line number Diff line change
@@ -9,6 +9,8 @@ import type { State, UserContentCommonSchema } from './table_list_view';
import type { Action } from './actions';

export function getReducer<T extends UserContentCommonSchema>() {
let sortColumnChanged = false;

return (state: State<T>, action: Action<T>): State<T> => {
switch (action.type) {
case 'onFetchItems': {
@@ -26,7 +28,10 @@ export function getReducer<T extends UserContentCommonSchema>() {
// We only get the state on the initial fetch of items
// After that we don't want to reset the columns or change the sort after fetching
hasUpdatedAtMetadata = Boolean(items.find((item) => Boolean(item.updatedAt)));
if (hasUpdatedAtMetadata) {

// Only change the table sort if it hasn't been changed already.
// For example if its state comes from the URL, we don't want to override it here.
if (hasUpdatedAtMetadata && !sortColumnChanged) {
tableSort = {
field: 'updatedAt' as const,
direction: 'desc' as const,
@@ -58,30 +63,35 @@ export function getReducer<T extends UserContentCommonSchema>() {
};
}
case 'onSearchQueryChange': {
if (action.data.text === state.searchQuery.text) {
return state;
}

return {
...state,
searchQuery: action.data,
isFetchingItems: true,
};
}
case 'onTableChange': {
const tableSort = (action.data.sort as State['tableSort']) ?? state.tableSort;
if (action.data.sort) {
sortColumnChanged = true;
}

const tableSort = action.data.sort ?? state.tableSort;
const pageIndex = action.data.page?.pageIndex ?? state.pagination.pageIndex;
const pageSize = action.data.page?.pageSize ?? state.pagination.pageSize;

return {
...state,
pagination: {
...state.pagination,
pageIndex: action.data.page.index,
pageSize: action.data.page.size,
pageIndex,
pageSize,
},
tableSort,
};
}
case 'onTableSortChange': {
return {
...state,
tableSort: action.data,
};
}
case 'showConfirmDeleteItemsModal': {
return {
...state,
12 changes: 6 additions & 6 deletions packages/content-management/table_list/src/services.tsx
Original file line number Diff line number Diff line change
@@ -47,11 +47,11 @@ export interface Services {
notifyError: NotifyFn;
currentAppId$: Observable<string | undefined>;
navigateToUrl: (url: string) => Promise<void> | void;
searchQueryParser?: (searchQuery: string) => {
searchQueryParser?: (searchQuery: string) => Promise<{
searchQuery: string;
references?: SavedObjectsFindOptionsReference[];
referencesToExclude?: SavedObjectsFindOptionsReference[];
};
}>;
DateFormatterComp?: DateFormatter;
/** Handler to retrieve the list of available tags */
getTagList: () => Tag[];
@@ -142,12 +142,12 @@ export interface TableListViewKibanaDependencies {
useName?: boolean;
tagField?: string;
}
) => {
) => Promise<{
searchTerm: string;
tagReferences: SavedObjectsFindOptionsReference[];
tagReferencesToExclude: SavedObjectsFindOptionsReference[];
valid: boolean;
};
}>;
getTagList: () => Tag[];
getTagIdsFromReferences: (references: SavedObjectsReference[]) => string[];
};
@@ -167,8 +167,8 @@ export const TableListViewKibanaProvider: FC<TableListViewKibanaDependencies> =

const searchQueryParser = useMemo(() => {
if (savedObjectsTagging) {
return (searchQuery: string) => {
const res = savedObjectsTagging.ui.parseSearchQuery(searchQuery, { useName: true });
return async (searchQuery: string) => {
const res = await savedObjectsTagging.ui.parseSearchQuery(searchQuery, { useName: true });
return {
searchQuery: res.searchTerm,
references: res.tagReferences,
Original file line number Diff line number Diff line change
@@ -49,6 +49,7 @@ const requiredProps: TableListViewProps = {
tableListTitle: 'test title',
findItems: jest.fn().mockResolvedValue({ total: 0, hits: [] }),
getDetailViewLink: () => 'http://elastic.co',
urlStateEnabled: false,
};

// FLAKY: https://github.com/elastic/kibana/issues/145267
@@ -66,7 +67,7 @@ describe.skip('TableListView', () => {
WithServices<TableListViewProps>(TableListView),
{
defaultProps: { ...requiredProps },
memoryRouter: { wrapComponent: false },
memoryRouter: { wrapComponent: true },
}
);

@@ -333,7 +334,7 @@ describe.skip('TableListView', () => {
WithServices<TableListViewProps>(TableListView, { TagList: getTagList({ references: [] }) }),
{
defaultProps: { ...requiredProps },
memoryRouter: { wrapComponent: false },
memoryRouter: { wrapComponent: true },
}
);

@@ -544,7 +545,7 @@ describe.skip('TableListView', () => {
WithServices<TableListViewProps>(TableListView),
{
defaultProps: { ...requiredProps },
memoryRouter: { wrapComponent: false },
memoryRouter: { wrapComponent: true },
}
);

@@ -602,7 +603,7 @@ describe.skip('TableListView', () => {
}),
{
defaultProps: { ...requiredProps },
memoryRouter: { wrapComponent: false },
memoryRouter: { wrapComponent: true },
}
);

Loading

0 comments on commit bafe213

Please sign in to comment.