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:
Bohdan Tsymbala 2020-10-02 21:11:23 +02:00 committed by GitHub
parent 388a905b29
commit 00d2105650
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 136 additions and 29 deletions

View file

@ -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');

View file

@ -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))
)}`;
};

View file

@ -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';
}

View file

@ -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);

View file

@ -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')
);

View file

@ -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,
});

View file

@ -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);
});
});