From b15a0a97f742a4b1c2cbd424c3f842860b4331c0 Mon Sep 17 00:00:00 2001 From: Ryland Herrick Date: Mon, 27 Jul 2020 10:35:18 -0500 Subject: [PATCH] [Security Solution][Detections] Adds ip_range and text types to value list upload form (#73109) * Adds two more types to the value lists form * Adds `ip_range` and `text` types * Replaces radio group with select * Add custom command for attaching a file to an input This will be used to excercise value list uploads. * Add some missing test subjects for our value lists modal * Add cypress test for value lists modal This exercises the happy path: opening the modal, uploading a list, and asserting that it subsequently appears in the table. Co-authored-by: Elastic Machine --- .../cypress/fixtures/value_list.txt | 6 +++ .../cypress/integration/value_lists.spec.ts | 43 ++++++++++++++++ .../cypress/screens/lists.ts | 11 ++++ .../cypress/support/commands.js | 19 +++++++ .../cypress/support/index.d.ts | 1 + .../security_solution/cypress/tasks/lists.ts | 36 +++++++++++++ .../value_lists_management_modal/form.tsx | 50 +++++++++---------- .../value_lists_management_modal/table.tsx | 1 + .../translations.ts | 14 ++++++ .../pages/detection_engine/rules/index.tsx | 1 + 10 files changed, 156 insertions(+), 26 deletions(-) create mode 100644 x-pack/plugins/security_solution/cypress/fixtures/value_list.txt create mode 100644 x-pack/plugins/security_solution/cypress/integration/value_lists.spec.ts create mode 100644 x-pack/plugins/security_solution/cypress/screens/lists.ts create mode 100644 x-pack/plugins/security_solution/cypress/tasks/lists.ts diff --git a/x-pack/plugins/security_solution/cypress/fixtures/value_list.txt b/x-pack/plugins/security_solution/cypress/fixtures/value_list.txt new file mode 100644 index 00000000000000..2b40f036c62d22 --- /dev/null +++ b/x-pack/plugins/security_solution/cypress/fixtures/value_list.txt @@ -0,0 +1,6 @@ +these +are +keywords +for +a +list diff --git a/x-pack/plugins/security_solution/cypress/integration/value_lists.spec.ts b/x-pack/plugins/security_solution/cypress/integration/value_lists.spec.ts new file mode 100644 index 00000000000000..2804a8ac2ea8c0 --- /dev/null +++ b/x-pack/plugins/security_solution/cypress/integration/value_lists.spec.ts @@ -0,0 +1,43 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { loginAndWaitForPageWithoutDateRange } from '../tasks/login'; +import { DETECTIONS_URL } from '../urls/navigation'; +import { + waitForAlertsPanelToBeLoaded, + waitForAlertsIndexToBeCreated, + goToManageAlertsDetectionRules, +} from '../tasks/alerts'; +import { + waitForListsIndexToBeCreated, + waitForValueListsModalToBeLoaded, + openValueListsModal, + selectValueListsFile, + uploadValueList, +} from '../tasks/lists'; +import { VALUE_LISTS_TABLE, VALUE_LISTS_ROW } from '../screens/lists'; + +describe('value lists', () => { + describe('management modal', () => { + it('creates a keyword list from an uploaded file', () => { + loginAndWaitForPageWithoutDateRange(DETECTIONS_URL); + waitForAlertsPanelToBeLoaded(); + waitForAlertsIndexToBeCreated(); + waitForListsIndexToBeCreated(); + goToManageAlertsDetectionRules(); + waitForValueListsModalToBeLoaded(); + openValueListsModal(); + selectValueListsFile(); + uploadValueList(); + + cy.get(VALUE_LISTS_TABLE) + .find(VALUE_LISTS_ROW) + .should(($row) => { + expect($row.text()).to.contain('value_list.txt'); + }); + }); + }); +}); diff --git a/x-pack/plugins/security_solution/cypress/screens/lists.ts b/x-pack/plugins/security_solution/cypress/screens/lists.ts new file mode 100644 index 00000000000000..35205a27e5a3c4 --- /dev/null +++ b/x-pack/plugins/security_solution/cypress/screens/lists.ts @@ -0,0 +1,11 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export const VALUE_LISTS_MODAL_ACTIVATOR = '[data-test-subj="open-value-lists-modal-button"]'; +export const VALUE_LISTS_TABLE = '[data-test-subj="value-lists-table"]'; +export const VALUE_LISTS_ROW = '.euiTableRow'; +export const VALUE_LIST_FILE_PICKER = '[data-test-subj="value-list-file-picker"]'; +export const VALUE_LIST_FILE_UPLOAD_BUTTON = '[data-test-subj="value-lists-form-import-action"]'; diff --git a/x-pack/plugins/security_solution/cypress/support/commands.js b/x-pack/plugins/security_solution/cypress/support/commands.js index 8b75f068a53da2..789759643e3196 100644 --- a/x-pack/plugins/security_solution/cypress/support/commands.js +++ b/x-pack/plugins/security_solution/cypress/support/commands.js @@ -39,3 +39,22 @@ Cypress.Commands.add('stubSecurityApi', function (dataFileName) { cy.fixture(dataFileName).as(`${dataFileName}JSON`); cy.route('POST', 'api/solutions/security/graphql', `@${dataFileName}JSON`); }); + +Cypress.Commands.add( + 'attachFile', + { + prevSubject: 'element', + }, + (input, fileName, fileType = 'text/plain') => { + cy.fixture(fileName) + .then((content) => Cypress.Blob.base64StringToBlob(content, fileType)) + .then((blob) => { + const testFile = new File([blob], fileName, { type: fileType }); + const dataTransfer = new DataTransfer(); + + dataTransfer.items.add(testFile); + input[0].files = dataTransfer.files; + return input; + }); + } +); diff --git a/x-pack/plugins/security_solution/cypress/support/index.d.ts b/x-pack/plugins/security_solution/cypress/support/index.d.ts index 12c11ffd277504..906e526e2c4a04 100644 --- a/x-pack/plugins/security_solution/cypress/support/index.d.ts +++ b/x-pack/plugins/security_solution/cypress/support/index.d.ts @@ -7,5 +7,6 @@ declare namespace Cypress { interface Chainable { stubSecurityApi(dataFileName: string): Chainable; + attachFile(fileName: string, fileType?: string): Chainable; } } diff --git a/x-pack/plugins/security_solution/cypress/tasks/lists.ts b/x-pack/plugins/security_solution/cypress/tasks/lists.ts new file mode 100644 index 00000000000000..638c69c087adf1 --- /dev/null +++ b/x-pack/plugins/security_solution/cypress/tasks/lists.ts @@ -0,0 +1,36 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { + VALUE_LISTS_MODAL_ACTIVATOR, + VALUE_LIST_FILE_PICKER, + VALUE_LIST_FILE_UPLOAD_BUTTON, +} from '../screens/lists'; + +export const waitForListsIndexToBeCreated = () => { + cy.request({ url: '/api/lists/index', retryOnStatusCodeFailure: true }).then((response) => { + if (response.status !== 200) { + cy.wait(7500); + } + }); +}; + +export const waitForValueListsModalToBeLoaded = () => { + cy.get(VALUE_LISTS_MODAL_ACTIVATOR).should('exist'); + cy.get(VALUE_LISTS_MODAL_ACTIVATOR).should('not.be.disabled'); +}; + +export const openValueListsModal = () => { + cy.get(VALUE_LISTS_MODAL_ACTIVATOR).click(); +}; + +export const selectValueListsFile = () => { + cy.get(VALUE_LIST_FILE_PICKER).attachFile('value_list.txt').trigger('change', { force: true }); +}; + +export const uploadValueList = () => { + cy.get(VALUE_LIST_FILE_UPLOAD_BUTTON).click(); +}; diff --git a/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/form.tsx b/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/form.tsx index aab665289e80d8..c35cc612129d52 100644 --- a/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/form.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/form.tsx @@ -4,8 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useCallback, useState, ReactNode, useEffect, useRef } from 'react'; -import styled from 'styled-components'; +import React, { useCallback, useState, useEffect, useRef } from 'react'; import { EuiButton, EuiButtonEmpty, @@ -14,34 +13,30 @@ import { EuiFilePicker, EuiFlexGroup, EuiFlexItem, - EuiRadioGroup, + EuiSelect, + EuiSelectOption, } from '@elastic/eui'; import { useImportList, ListSchema, Type } from '../../../shared_imports'; import * as i18n from './translations'; import { useKibana } from '../../../common/lib/kibana'; -const InlineRadioGroup = styled(EuiRadioGroup)` - display: flex; - - .euiRadioGroup__item + .euiRadioGroup__item { - margin: 0 0 0 12px; - } -`; - -interface ListTypeOptions { - id: Type; - label: ReactNode; -} - -const options: ListTypeOptions[] = [ +const options: EuiSelectOption[] = [ { - id: 'keyword', - label: i18n.KEYWORDS_RADIO, + value: 'keyword', + text: i18n.KEYWORDS_RADIO, }, { - id: 'ip', - label: i18n.IP_RADIO, + value: 'ip', + text: i18n.IP_RADIO, + }, + { + value: 'ip_range', + text: i18n.IP_RANGE_RADIO, + }, + { + value: 'text', + text: i18n.TEXT_RADIO, }, ]; @@ -63,8 +58,10 @@ export const ValueListsFormComponent: React.FC = ({ onError const fileIsValid = !file || validFileTypes.some((fileType) => file.type === fileType); - // EuiRadioGroup's onChange only infers 'string' from our options - const handleRadioChange = useCallback((t: string) => setType(t as Type), [setType]); + const handleRadioChange = useCallback( + (event: React.ChangeEvent) => setType(event.target.value as Type), + [setType] + ); const handleFileChange = useCallback((files: FileList | null) => { setFile(files?.item(0) ?? null); @@ -133,6 +130,7 @@ export const ValueListsFormComponent: React.FC = ({ onError > = ({ onError - - + {importState.loading && ( diff --git a/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/table.tsx b/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/table.tsx index 850716ce54e260..a2e3b73a0abf0a 100644 --- a/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/table.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/table.tsx @@ -35,6 +35,7 @@ export const ValueListsTableComponent: React.FC = ({

{i18n.TABLE_TITLE}

{ )}