Added view type parameter to routing in trusted apps (#79297)
* Refactored store code to group properties related to location so that would be easy to introduce a new view type parameter. * Added view type to the location and routing. * Fixed type errors. * Fixed and completed tests.
This commit is contained in:
parent
388a905b29
commit
00d2105650
|
@ -6,6 +6,7 @@
|
|||
|
||||
import { extractTrustedAppsListPageLocation, getTrustedAppsListPath } from './routing';
|
||||
import { MANAGEMENT_DEFAULT_PAGE, MANAGEMENT_DEFAULT_PAGE_SIZE } from './constants';
|
||||
import { TrustedAppsListPageLocation } from '../pages/trusted_apps/state';
|
||||
|
||||
describe('routing', () => {
|
||||
describe('extractListPaginationParams()', () => {
|
||||
|
@ -56,6 +57,42 @@ describe('routing', () => {
|
|||
it('extracts proper page size when single valid value provided', () => {
|
||||
expect(extractTrustedAppsListPageLocation({ page_size: '20' }).page_size).toBe(20);
|
||||
});
|
||||
|
||||
it('extracts proper "show" when single valid value provided', () => {
|
||||
expect(extractTrustedAppsListPageLocation({ show: 'create' }).show).toBe('create');
|
||||
});
|
||||
|
||||
it('extracts only last "show" when multiple values provided', () => {
|
||||
expect(extractTrustedAppsListPageLocation({ show: ['invalid', 'create'] }).show).toBe(
|
||||
'create'
|
||||
);
|
||||
});
|
||||
|
||||
it('extracts default "show" when no value provided', () => {
|
||||
expect(extractTrustedAppsListPageLocation({}).show).toBeUndefined();
|
||||
});
|
||||
|
||||
it('extracts default "show" when single invalid value provided', () => {
|
||||
expect(extractTrustedAppsListPageLocation({ show: 'invalid' }).show).toBeUndefined();
|
||||
});
|
||||
|
||||
it('extracts proper view type when single valid value provided', () => {
|
||||
expect(extractTrustedAppsListPageLocation({ view_type: 'list' }).view_type).toBe('list');
|
||||
});
|
||||
|
||||
it('extracts only last view type when multiple values provided', () => {
|
||||
expect(extractTrustedAppsListPageLocation({ view_type: ['grid', 'list'] }).view_type).toBe(
|
||||
'list'
|
||||
);
|
||||
});
|
||||
|
||||
it('extracts default view type when no value provided', () => {
|
||||
expect(extractTrustedAppsListPageLocation({}).view_type).toBe('grid');
|
||||
});
|
||||
|
||||
it('extracts default view type when single invalid value provided', () => {
|
||||
expect(extractTrustedAppsListPageLocation({ view_type: 'invalid' }).view_type).toBe('grid');
|
||||
});
|
||||
});
|
||||
|
||||
describe('getTrustedAppsListPath()', () => {
|
||||
|
@ -67,17 +104,32 @@ describe('routing', () => {
|
|||
expect(getTrustedAppsListPath({})).toEqual('/trusted_apps');
|
||||
});
|
||||
|
||||
it('builds proper path when no page index provided', () => {
|
||||
it('builds proper path when only page size provided', () => {
|
||||
expect(getTrustedAppsListPath({ page_size: 20 })).toEqual('/trusted_apps?page_size=20');
|
||||
});
|
||||
|
||||
it('builds proper path when no page size provided', () => {
|
||||
it('builds proper path when only page index provided', () => {
|
||||
expect(getTrustedAppsListPath({ page_index: 2 })).toEqual('/trusted_apps?page_index=2');
|
||||
});
|
||||
|
||||
it('builds proper path when both page index and size provided', () => {
|
||||
expect(getTrustedAppsListPath({ page_index: 2, page_size: 20 })).toEqual(
|
||||
'/trusted_apps?page_index=2&page_size=20'
|
||||
it('builds proper path when only "show" provided', () => {
|
||||
expect(getTrustedAppsListPath({ show: 'create' })).toEqual('/trusted_apps?show=create');
|
||||
});
|
||||
|
||||
it('builds proper path when only view type provided', () => {
|
||||
expect(getTrustedAppsListPath({ view_type: 'list' })).toEqual('/trusted_apps?view_type=list');
|
||||
});
|
||||
|
||||
it('builds proper path when all params provided', () => {
|
||||
const location: TrustedAppsListPageLocation = {
|
||||
page_index: 2,
|
||||
page_size: 20,
|
||||
show: 'create',
|
||||
view_type: 'list',
|
||||
};
|
||||
|
||||
expect(getTrustedAppsListPath(location)).toEqual(
|
||||
'/trusted_apps?page_index=2&page_size=20&view_type=list&show=create'
|
||||
);
|
||||
});
|
||||
|
||||
|
@ -85,24 +137,52 @@ describe('routing', () => {
|
|||
const path = getTrustedAppsListPath({
|
||||
page_index: MANAGEMENT_DEFAULT_PAGE,
|
||||
page_size: 20,
|
||||
show: 'create',
|
||||
view_type: 'list',
|
||||
});
|
||||
|
||||
expect(path).toEqual('/trusted_apps?page_size=20');
|
||||
expect(path).toEqual('/trusted_apps?page_size=20&view_type=list&show=create');
|
||||
});
|
||||
|
||||
it('builds proper path when page size is equal to default', () => {
|
||||
const path = getTrustedAppsListPath({
|
||||
page_index: 2,
|
||||
page_size: MANAGEMENT_DEFAULT_PAGE_SIZE,
|
||||
show: 'create',
|
||||
view_type: 'list',
|
||||
});
|
||||
|
||||
expect(path).toEqual('/trusted_apps?page_index=2');
|
||||
expect(path).toEqual('/trusted_apps?page_index=2&view_type=list&show=create');
|
||||
});
|
||||
|
||||
it('builds proper path when both page index and size are equal to default', () => {
|
||||
it('builds proper path when "show" is equal to default', () => {
|
||||
const path = getTrustedAppsListPath({
|
||||
page_index: 2,
|
||||
page_size: 20,
|
||||
show: undefined,
|
||||
view_type: 'list',
|
||||
});
|
||||
|
||||
expect(path).toEqual('/trusted_apps?page_index=2&page_size=20&view_type=list');
|
||||
});
|
||||
|
||||
it('builds proper path when view type is equal to default', () => {
|
||||
const path = getTrustedAppsListPath({
|
||||
page_index: 2,
|
||||
page_size: 20,
|
||||
show: 'create',
|
||||
view_type: 'grid',
|
||||
});
|
||||
|
||||
expect(path).toEqual('/trusted_apps?page_index=2&page_size=20&show=create');
|
||||
});
|
||||
|
||||
it('builds proper path when params are equal to default', () => {
|
||||
const path = getTrustedAppsListPath({
|
||||
page_index: MANAGEMENT_DEFAULT_PAGE,
|
||||
page_size: MANAGEMENT_DEFAULT_PAGE_SIZE,
|
||||
show: undefined,
|
||||
view_type: 'grid',
|
||||
});
|
||||
|
||||
expect(path).toEqual('/trusted_apps');
|
||||
|
|
|
@ -105,6 +105,7 @@ const normalizeTrustedAppsPageLocation = (
|
|||
...(!isDefaultOrMissing(location.page_size, MANAGEMENT_DEFAULT_PAGE_SIZE)
|
||||
? { page_size: location.page_size }
|
||||
: {}),
|
||||
...(!isDefaultOrMissing(location.view_type, 'grid') ? { view_type: location.view_type } : {}),
|
||||
...(!isDefaultOrMissing(location.show, undefined) ? { show: location.show } : {}),
|
||||
};
|
||||
} else {
|
||||
|
@ -144,13 +145,16 @@ export const extractTrustedAppsListPageLocation = (
|
|||
query: querystring.ParsedUrlQuery
|
||||
): TrustedAppsListPageLocation => ({
|
||||
...extractListPaginationParams(query),
|
||||
view_type: extractFirstParamValue(query, 'view_type') === 'list' ? 'list' : 'grid',
|
||||
show: extractFirstParamValue(query, 'show') === 'create' ? 'create' : undefined,
|
||||
});
|
||||
|
||||
export const getTrustedAppsListPath = (params?: Partial<TrustedAppsListPageLocation>): string => {
|
||||
export const getTrustedAppsListPath = (location?: Partial<TrustedAppsListPageLocation>): string => {
|
||||
const path = generatePath(MANAGEMENT_ROUTING_TRUSTED_APPS_PATH, {
|
||||
tabName: AdministrationSubTab.trustedApps,
|
||||
});
|
||||
|
||||
return `${path}${appendSearch(querystring.stringify(normalizeTrustedAppsPageLocation(params)))}`;
|
||||
return `${path}${appendSearch(
|
||||
querystring.stringify(normalizeTrustedAppsPageLocation(location))
|
||||
)}`;
|
||||
};
|
||||
|
|
|
@ -38,9 +38,12 @@ export interface TrustedAppCreateFailure {
|
|||
data: ServerApiError;
|
||||
}
|
||||
|
||||
export type ViewType = 'list' | 'grid';
|
||||
|
||||
export interface TrustedAppsListPageLocation {
|
||||
page_index: number;
|
||||
page_size: number;
|
||||
view_type: ViewType;
|
||||
show?: 'create';
|
||||
}
|
||||
|
||||
|
|
|
@ -75,7 +75,7 @@ describe('middleware', () => {
|
|||
describe('refreshing list resource state', () => {
|
||||
it('refreshes the list when location changes and data gets outdated', async () => {
|
||||
const pagination = { index: 2, size: 50 };
|
||||
const location = { page_index: 2, page_size: 50, show: undefined };
|
||||
const location = { page_index: 2, page_size: 50, show: undefined, view_type: 'grid' };
|
||||
const service = createTrustedAppsServiceMock();
|
||||
const { store, spyMiddleware } = createStoreSetup(service);
|
||||
|
||||
|
@ -110,7 +110,7 @@ describe('middleware', () => {
|
|||
|
||||
it('does not refresh the list when location changes and data does not get outdated', async () => {
|
||||
const pagination = { index: 2, size: 50 };
|
||||
const location = { page_index: 2, page_size: 50, show: undefined };
|
||||
const location = { page_index: 2, page_size: 50, show: undefined, view_type: 'grid' };
|
||||
const service = createTrustedAppsServiceMock();
|
||||
const { store, spyMiddleware } = createStoreSetup(service);
|
||||
|
||||
|
@ -136,7 +136,7 @@ describe('middleware', () => {
|
|||
it('refreshes the list when data gets outdated with and outdate action', async () => {
|
||||
const newNow = 222222;
|
||||
const pagination = { index: 0, size: 10 };
|
||||
const location = { page_index: 0, page_size: 10, show: undefined };
|
||||
const location = { page_index: 0, page_size: 10, show: undefined, view_type: 'grid' };
|
||||
const service = createTrustedAppsServiceMock();
|
||||
const { store, spyMiddleware } = createStoreSetup(service);
|
||||
|
||||
|
@ -196,7 +196,7 @@ describe('middleware', () => {
|
|||
freshDataTimestamp: initialNow,
|
||||
},
|
||||
active: true,
|
||||
location: { page_index: 2, page_size: 50, show: undefined },
|
||||
location: { page_index: 2, page_size: 50, show: undefined, view_type: 'grid' },
|
||||
});
|
||||
|
||||
const infiniteLoopTest = async () => {
|
||||
|
@ -212,7 +212,7 @@ describe('middleware', () => {
|
|||
const entry = createSampleTrustedApp(3);
|
||||
const notFoundError = createServerApiError('Not Found');
|
||||
const pagination = { index: 0, size: 10 };
|
||||
const location = { page_index: 0, page_size: 10, show: undefined };
|
||||
const location = { page_index: 0, page_size: 10, show: undefined, view_type: 'grid' };
|
||||
const getTrustedAppsListResponse = createGetTrustedListAppsResponse(pagination, 500);
|
||||
const listView = createLoadedListViewWithPagination(initialNow, pagination, 500);
|
||||
const listViewNew = createLoadedListViewWithPagination(newNow, pagination, 500);
|
||||
|
|
|
@ -24,31 +24,34 @@ const initialState = initialTrustedAppsPageState();
|
|||
|
||||
describe('reducer', () => {
|
||||
describe('UserChangedUrl', () => {
|
||||
it('makes page state active and extracts pagination parameters', () => {
|
||||
it('makes page state active and extracts all parameters', () => {
|
||||
const result = trustedAppsPageReducer(
|
||||
initialState,
|
||||
createUserChangedUrlAction('/trusted_apps', '?page_index=5&page_size=50')
|
||||
createUserChangedUrlAction(
|
||||
'/trusted_apps',
|
||||
'?page_index=5&page_size=50&show=create&view_type=list'
|
||||
)
|
||||
);
|
||||
|
||||
expect(result).toStrictEqual({
|
||||
...initialState,
|
||||
location: { page_index: 5, page_size: 50, show: undefined },
|
||||
location: { page_index: 5, page_size: 50, show: 'create', view_type: 'list' },
|
||||
active: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('extracts default pagination parameters when none provided', () => {
|
||||
it('extracts default pagination parameters when invalid provided', () => {
|
||||
const result = trustedAppsPageReducer(
|
||||
{ ...initialState, location: { page_index: 5, page_size: 50 } },
|
||||
createUserChangedUrlAction('/trusted_apps', '?page_index=b&page_size=60')
|
||||
{ ...initialState, location: { page_index: 5, page_size: 50, view_type: 'grid' } },
|
||||
createUserChangedUrlAction('/trusted_apps', '?page_index=b&page_size=60&show=a&view_type=c')
|
||||
);
|
||||
|
||||
expect(result).toStrictEqual({ ...initialState, active: true });
|
||||
});
|
||||
|
||||
it('extracts default pagination parameters when invalid provided', () => {
|
||||
it('extracts default pagination parameters when none provided', () => {
|
||||
const result = trustedAppsPageReducer(
|
||||
{ ...initialState, location: { page_index: 5, page_size: 50 } },
|
||||
{ ...initialState, location: { page_index: 5, page_size: 50, view_type: 'grid' } },
|
||||
createUserChangedUrlAction('/trusted_apps')
|
||||
);
|
||||
|
||||
|
|
|
@ -152,6 +152,7 @@ export const initialTrustedAppsPageState = (): TrustedAppsListPageState => ({
|
|||
page_index: MANAGEMENT_DEFAULT_PAGE,
|
||||
page_size: MANAGEMENT_DEFAULT_PAGE_SIZE,
|
||||
show: undefined,
|
||||
view_type: 'grid',
|
||||
},
|
||||
active: false,
|
||||
});
|
||||
|
|
|
@ -4,7 +4,11 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { AsyncResourceState, TrustedAppsListPageState } from '../state';
|
||||
import {
|
||||
AsyncResourceState,
|
||||
TrustedAppsListPageLocation,
|
||||
TrustedAppsListPageState,
|
||||
} from '../state';
|
||||
import { initialTrustedAppsPageState } from './reducer';
|
||||
import {
|
||||
getListResourceState,
|
||||
|
@ -84,7 +88,11 @@ describe('selectors', () => {
|
|||
|
||||
it('returns false when current loaded data is up to date', () => {
|
||||
const listView = createLoadedListViewWithPagination(initialNow);
|
||||
const location = { page_index: 0, page_size: 10 };
|
||||
const location: TrustedAppsListPageLocation = {
|
||||
page_index: 0,
|
||||
page_size: 10,
|
||||
view_type: 'grid',
|
||||
};
|
||||
|
||||
expect(needsRefreshOfListData({ ...initialState, listView, active: true, location })).toBe(
|
||||
false
|
||||
|
@ -166,17 +174,25 @@ describe('selectors', () => {
|
|||
|
||||
describe('getListCurrentPageIndex()', () => {
|
||||
it('returns page index', () => {
|
||||
const state = { ...initialState, location: { page_index: 3, page_size: 10 } };
|
||||
const location: TrustedAppsListPageLocation = {
|
||||
page_index: 3,
|
||||
page_size: 10,
|
||||
view_type: 'grid',
|
||||
};
|
||||
|
||||
expect(getCurrentLocationPageIndex(state)).toBe(3);
|
||||
expect(getCurrentLocationPageIndex({ ...initialState, location })).toBe(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getListCurrentPageSize()', () => {
|
||||
it('returns page size', () => {
|
||||
const state = { ...initialState, location: { page_index: 0, page_size: 20 } };
|
||||
const location: TrustedAppsListPageLocation = {
|
||||
page_index: 0,
|
||||
page_size: 20,
|
||||
view_type: 'grid',
|
||||
};
|
||||
|
||||
expect(getCurrentLocationPageSize(state)).toBe(20);
|
||||
expect(getCurrentLocationPageSize({ ...initialState, location })).toBe(20);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue