From 2a8927153f31e2c465d866b56ee95c0c77e7cb50 Mon Sep 17 00:00:00 2001 From: Bohdan Tsymbala Date: Thu, 8 Oct 2020 11:38:14 +0200 Subject: [PATCH] Implemented trusted app name truncation. --- .../common/endpoint/schema/trusted_apps.ts | 2 +- .../pages/trusted_apps/test_utils/index.ts | 29 +++- .../components/create_trusted_app_form.tsx | 1 + .../__snapshots__/index.test.tsx.snap | 10 +- .../trusted_app_card/index.stories.tsx | 5 +- .../trusted_app_card/index.test.tsx | 10 +- .../components/trusted_app_card/index.tsx | 6 +- .../__snapshots__/index.test.tsx.snap | 60 +++---- .../trusted_apps_grid/index.stories.tsx | 11 ++ .../__snapshots__/index.test.tsx.snap | 162 +++++++++--------- .../trusted_apps_list/index.stories.tsx | 11 ++ .../components/trusted_apps_list/index.tsx | 1 + 12 files changed, 173 insertions(+), 135 deletions(-) diff --git a/x-pack/plugins/security_solution/common/endpoint/schema/trusted_apps.ts b/x-pack/plugins/security_solution/common/endpoint/schema/trusted_apps.ts index 60672cce972a31..74135169635bd2 100644 --- a/x-pack/plugins/security_solution/common/endpoint/schema/trusted_apps.ts +++ b/x-pack/plugins/security_solution/common/endpoint/schema/trusted_apps.ts @@ -35,7 +35,7 @@ export const GetTrustedAppsRequestSchema = { export const PostTrustedAppCreateRequestSchema = { body: schema.object({ - name: schema.string({ minLength: 1 }), + name: schema.string({ minLength: 1, maxLength: 256 }), description: schema.maybe(schema.string({ minLength: 0, maxLength: 256, defaultValue: '' })), os: schema.oneOf([schema.literal('linux'), schema.literal('macos'), schema.literal('windows')]), entries: schema.arrayOf( diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/test_utils/index.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/test_utils/index.ts index efc2717e10f1d5..d881b5cbcb5b01 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/test_utils/index.ts +++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/test_utils/index.ts @@ -33,11 +33,14 @@ import { TrustedAppsListResourceStateChanged } from '../store/action'; const OS_LIST: Array = ['windows', 'macos', 'linux']; -export const createSampleTrustedApp = (i: number): TrustedApp => { +const generate = (count: number, generator: (i: number) => T) => + [...new Array(count).keys()].map(generator); + +export const createSampleTrustedApp = (i: number, longTexts?: boolean): TrustedApp => { return { id: String(i), - name: `trusted app ${i}`, - description: `Trusted App ${i}`, + name: generate(longTexts ? 10 : 1, () => `trusted app ${i}`).join(' '), + description: generate(longTexts ? 10 : 1, () => `Trusted App ${i}`).join(' '), created_at: '1 minute ago', created_by: 'someone', os: OS_LIST[i % 3], @@ -45,17 +48,24 @@ export const createSampleTrustedApp = (i: number): TrustedApp => { }; }; -export const createSampleTrustedApps = (pagination: Partial): TrustedApp[] => { +export const createSampleTrustedApps = ( + pagination: Partial, + longTexts?: boolean +): TrustedApp[] => { const fullPagination = { ...createDefaultPagination(), ...pagination }; - return [...new Array(fullPagination.pageSize).keys()].map(createSampleTrustedApp); + return generate(fullPagination.pageSize, (i: number) => createSampleTrustedApp(i, longTexts)); }; -export const createTrustedAppsListData = (pagination: Partial, timestamp: number) => { +export const createTrustedAppsListData = ( + pagination: Partial, + timestamp: number, + longTexts?: boolean +) => { const fullPagination = { ...createDefaultPagination(), ...pagination }; return { - items: createSampleTrustedApps(fullPagination), + items: createSampleTrustedApps(fullPagination, longTexts), pageSize: fullPagination.pageSize, pageIndex: fullPagination.pageIndex, totalItemsCount: fullPagination.totalItemCount, @@ -75,10 +85,11 @@ export const createUninitialisedResourceState = (): UninitialisedResourceState = export const createListLoadedResourceState = ( pagination: Partial, - timestamp: number + timestamp: number, + longTexts?: boolean ): LoadedResourceState => ({ type: 'LoadedResourceState', - data: createTrustedAppsListData(pagination, timestamp), + data: createTrustedAppsListData(pagination, timestamp, longTexts), }); export const createListFailedResourceState = ( diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx index 198548b642dd29..8b922605e0ab42 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx @@ -361,6 +361,7 @@ export const CreateTrustedAppForm = memo( onBlur={handleDomBlurEvents} fullWidth required + maxLength={256} data-test-subj={getTestId('nameTextField')} /> diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/__snapshots__/index.test.tsx.snap index 8f04fa0a7133a7..5739281426f9aa 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/__snapshots__/index.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/__snapshots__/index.test.tsx.snap @@ -4,6 +4,7 @@ exports[`trusted_app_card TrustedAppCard should render correctly 1`] = ` `; -exports[`trusted_app_card TrustedAppCard should trim long descriptions 1`] = ` +exports[`trusted_app_card TrustedAppCard should trim long texts 1`] = ` ; }) - .add('trim description', () => { - const trustedApp: TrustedApp = createSampleTrustedApp(5); + .add('longs texts', () => { + const trustedApp: TrustedApp = createSampleTrustedApp(5, true); trustedApp.created_at = '2020-09-17T14:52:33.899Z'; trustedApp.entries = [PATH_CONDITION, SIGNER_CONDITION]; - trustedApp.description = [...new Array(40).keys()].map((index) => `item${index}`).join(' '); return ; }); diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/index.test.tsx index 1e2d18aea20fd1..55964737bb970f 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/index.test.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/index.test.tsx @@ -19,12 +19,10 @@ describe('trusted_app_card', () => { expect(element).toMatchSnapshot(); }); - it('should trim long descriptions', () => { - const trustedApp = { - ...createSampleTrustedApp(4), - description: [...new Array(40).keys()].map((index) => `item${index}`).join(' '), - }; - const element = shallow( {}} />); + it('should trim long texts', () => { + const element = shallow( + {}} /> + ); expect(element).toMatchSnapshot(); }); diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/index.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/index.tsx index e31ff9e3b313b5..8c897eb9fea8c7 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/index.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/index.tsx @@ -84,7 +84,11 @@ export const TrustedAppCard = memo(({ trustedApp, onDelete }: TrustedAppCardProp return ( - + trimTextOverflow(trustedApp.name || '', 100), [trustedApp.name])} + title={trustedApp.name} + /> trusted app 0 @@ -386,7 +386,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = ` class="euiDescriptionList__description c2" > trusted app 1 @@ -646,7 +646,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = ` class="euiDescriptionList__description c2" > trusted app 2 @@ -906,7 +906,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = ` class="euiDescriptionList__description c2" > trusted app 3 @@ -1166,7 +1166,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = ` class="euiDescriptionList__description c2" > trusted app 4 @@ -1426,7 +1426,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = ` class="euiDescriptionList__description c2" > trusted app 5 @@ -1686,7 +1686,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = ` class="euiDescriptionList__description c2" > trusted app 6 @@ -1946,7 +1946,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = ` class="euiDescriptionList__description c2" > trusted app 7 @@ -2206,7 +2206,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = ` class="euiDescriptionList__description c2" > trusted app 8 @@ -2466,7 +2466,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = ` class="euiDescriptionList__description c2" > trusted app 9 @@ -3004,7 +3004,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time class="euiDescriptionList__description c2" > trusted app 0 @@ -3264,7 +3264,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time class="euiDescriptionList__description c2" > trusted app 1 @@ -3524,7 +3524,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time class="euiDescriptionList__description c2" > trusted app 2 @@ -3784,7 +3784,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time class="euiDescriptionList__description c2" > trusted app 3 @@ -4044,7 +4044,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time class="euiDescriptionList__description c2" > trusted app 4 @@ -4304,7 +4304,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time class="euiDescriptionList__description c2" > trusted app 5 @@ -4564,7 +4564,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time class="euiDescriptionList__description c2" > trusted app 6 @@ -4824,7 +4824,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time class="euiDescriptionList__description c2" > trusted app 7 @@ -5084,7 +5084,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time class="euiDescriptionList__description c2" > trusted app 8 @@ -5344,7 +5344,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time class="euiDescriptionList__description c2" > trusted app 9 @@ -5846,7 +5846,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not class="euiDescriptionList__description c2" > trusted app 0 @@ -6106,7 +6106,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not class="euiDescriptionList__description c2" > trusted app 1 @@ -6366,7 +6366,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not class="euiDescriptionList__description c2" > trusted app 2 @@ -6626,7 +6626,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not class="euiDescriptionList__description c2" > trusted app 3 @@ -6886,7 +6886,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not class="euiDescriptionList__description c2" > trusted app 4 @@ -7146,7 +7146,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not class="euiDescriptionList__description c2" > trusted app 5 @@ -7406,7 +7406,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not class="euiDescriptionList__description c2" > trusted app 6 @@ -7666,7 +7666,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not class="euiDescriptionList__description c2" > trusted app 7 @@ -7926,7 +7926,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not class="euiDescriptionList__description c2" > trusted app 8 @@ -8186,7 +8186,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not class="euiDescriptionList__description c2" > trusted app 9 diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/index.stories.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/index.stories.tsx index fbe268a1322021..0d8762111b1d02 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/index.stories.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/index.stories.tsx @@ -77,5 +77,16 @@ storiesOf('TrustedApps/TrustedAppsGrid', module) ) ); + return renderGrid(store); + }) + .add('long texts', () => { + const store = createGlobalNoMiddlewareStore(); + + store.dispatch( + createTrustedAppsListResourceStateChangedAction( + createListLoadedResourceState({ pageSize: 10 }, now, true) + ) + ); + return renderGrid(store); }); diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap index 551032d88c5be3..794fba9cd7dd76 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap @@ -647,7 +647,7 @@ exports[`TrustedAppsList renders correctly when item details expanded 1`] = ` Name
trusted app 0 @@ -1033,7 +1033,7 @@ exports[`TrustedAppsList renders correctly when item details expanded 1`] = ` Name
{ + const store = createGlobalNoMiddlewareStore(); + + store.dispatch( + createTrustedAppsListResourceStateChangedAction( + createListLoadedResourceState({ pageSize: 10 }, now, true) + ) + ); + return renderList(store); }); diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/index.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/index.tsx index cbb7da5ba15459..d5c829bccb9032 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/index.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/index.tsx @@ -96,6 +96,7 @@ const getColumnDefinitions = (context: TrustedAppsListContext): ColumnsList => { { field: 'name', name: PROPERTY_TITLES.name, + truncateText: true, }, { field: 'os',