Skip to content

Commit

Permalink
Change the order of the sections (#622)
Browse files Browse the repository at this point in the history
* [FEATURE] Improve "list" text area UX #589
Use expression builder instead of code editor

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Improve "list" text area UX #589
Use expression builder instead of code editor

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Improve "list" text area UX #589
Use expression builder instead of code editor

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Improve "list" text area UX #589
Use expression builder instead of code editor

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Change the order of the sections in the "Create detection rule" page #586

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Code review

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Code review

Signed-off-by: Jovan Cvetkovic <[email protected]>

* bugfix for tags validation

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Change the order of the sections in the "Create detection rule" page #586
[FEATURE] Improve the Create detection rules - selection panel fields error notifications #601
[FEATURE] Improve the Create detection rules - selection panel condition field is not marked as invalid after submission #613

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Change the order of the sections in the "Create detection rule" page #586
[FEATURE] Improve the Create detection rules - selection panel fields error notifications #601
[FEATURE] Improve the Create detection rules - selection panel condition field is not marked as invalid after submission #613

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Replace code editor with expression editor #602

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Replace code editor with expression editor #602

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Improve text area ux and add expression UI #603

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Cypress cases for detectors and rules, validate forms and fields

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Cypress cases for detectors and rules, validate forms and fields

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Cypress cases for detectors and rules, validate forms and fields

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Cypress cases for detectors and rules, validate forms and fields

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Cypress cases for detectors and rules, validate forms and fields

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Cypress cases for detectors and rules, validate forms and fields

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Cypress cases for detectors and rules, validate forms and fields

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Cypress cases for detectors and rules, validate forms and fields

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Code review Change the order of the sections #622

Signed-off-by: Jovan Cvetkovic <[email protected]>

---------

Signed-off-by: Jovan Cvetkovic <[email protected]>
(cherry picked from commit e3c103e)
  • Loading branch information
jovancvetkovic3006 authored and github-actions[bot] committed Jun 21, 2023
1 parent 451861e commit 0f21245
Show file tree
Hide file tree
Showing 47 changed files with 10,447 additions and 937 deletions.
401 changes: 247 additions & 154 deletions cypress/integration/1_detectors.spec.js

Large diffs are not rendered by default.

613 changes: 450 additions & 163 deletions cypress/integration/2_rules.spec.js

Large diffs are not rendered by default.

89 changes: 63 additions & 26 deletions cypress/support/helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import sample_detector from '../fixtures/integration_tests/detector/create_usb_detector_data.json';
import { NODE_API, OPENSEARCH_DASHBOARDS_URL } from './constants';
import { OPENSEARCH_DASHBOARDS_URL } from './constants';
import _ from 'lodash';

Cypress.Commands.add('getElementByText', (locator, text) => {
Expand Down Expand Up @@ -62,17 +62,7 @@ Cypress.Commands.add(
items = [items];
}
Cypress.log({ message: `Select combobox items: ${items.join(' | ')}` });
cy.wrap(subject)
.focus()
.click({ force: true })
.then(() => {
items.map((item) =>
cy.get('.euiComboBoxOptionsList__rowWrap').within(() => {
cy.get('button').contains(item).should('be.visible');
cy.get('button').contains(item).click();
})
);
});
items.map((item) => cy.wrap(subject).type(item).type('{enter}'));
}
);

Expand All @@ -85,23 +75,70 @@ Cypress.Commands.add(
Cypress.log({ message: `Clear combobox` });
return cy
.wrap(subject)
.parents('.euiComboBox__inputWrap')
.find('.euiBadge')
.then(($badge) => {
let numberOfBadges = $badge.length;
Cypress.log({
message: `Number of combo badges to clear: ${numberOfBadges}`,
});

cy.wrap(subject)
.parents('.euiComboBox__inputWrap')
.find('input')
.focus()
.pressBackspaceKey(numberOfBadges);
});
.parents('.euiFormRow__fieldWrapper')
.find('[data-test-subj="comboBoxClearButton"]')
.click({ force: true });
}
);

Cypress.Commands.add(
'containsValue',
{
prevSubject: true,
},
(subject, value) =>
cy.wrap(subject).parents('.euiFormRow__fieldWrapper').contains(value, {
matchCase: false,
})
);

Cypress.Commands.add(
'clearValue',
{
prevSubject: true,
},
(subject) => cy.wrap(subject).type('{selectall}').type('{backspace}')
);

Cypress.Commands.add(
'containsError',
{
prevSubject: true,
},
(subject, errorText) =>
cy
.wrap(subject)
.parents('.euiFormRow__fieldWrapper')
.find('.euiFormErrorText')
.contains(errorText)
);

Cypress.Commands.add(
'containsHelperText',
{
prevSubject: true,
},
(subject, helperText) =>
cy
.wrap(subject)
.parents('.euiFormRow__fieldWrapper')
.find('.euiFormHelpText')
.contains(helperText)
);

Cypress.Commands.add(
'shouldNotHaveError',
{
prevSubject: true,
},
(subject) =>
cy
.wrap(subject)
.parents('.euiFormRow__fieldWrapper')
.find('.euiFormErrorText')
.should('not.exist')
);

Cypress.Commands.add('validateDetailsItem', (label, value) => {
Cypress.log({ message: `Validate details item by label: ${label} and value: ${value}` });
return cy.getElementByText('.euiFlexItem label', label).parent().siblings().contains(value);
Expand Down
36 changes: 36 additions & 0 deletions cypress/support/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,42 @@ declare namespace Cypress {
*/
validateDetailsItem(label: string, value: string): Chainable<any>;

/**
* Should clear a field value (use with text and textarea fields)
* @example
* cy.getFieldByLabel('Rule name').clearValue()
*/
clearValue(): Chainable<any>;

/**
* Validates that field contains value
* Should be used with combobox or other fields that don't print its value in inputs
* @example
* cy.getFieldByLabel('Rule name').containsValue('Name')
*/
containsValue(value: string): Chainable<any>;

/**
* Validates that field has error text
* @example
* cy.getFieldByLabel('Rule name').containsError('This fields is invalid')
*/
containsError(errorText: string): Chainable<any>;

/**
* Validates that field has helper text
* @example
* cy.getFieldByLabel('Rule name').containsHelperText('Use this field for...')
*/
containsHelperText(helperText: string): Chainable<any>;

/**
* Should not have error text
* @example
* cy.getFieldByLabel('Rule name').shouldNotHaveError()
*/
shouldNotHaveError(): Chainable<any>;

/**
* Validates url path
* @example
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@
"jest-environment-jsdom": "^27.5.1",
"lint-staged": "^10.2.0",
"ts-loader": "^6.2.1",
"@types/vis": "^4.21.21"
"@types/vis": "^4.21.21",
"string.prototype.replaceall": "1.0.7"
},
"engines": {
"yarn": "^1.21.1"
Expand Down
9 changes: 9 additions & 0 deletions public/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ $euiTextColor: $euiColorDarkestShade !default;
@import "./pages/Findings/components/CorrelationsTable/CorrelationsTable.scss";
@import "./pages/Rules/components/RuleEditor/RuleEditorForm.scss";
@import "./pages/Rules/components/RuleEditor/DetectionVisualEditor.scss";
@import "./pages/Rules/components/RuleEditor/components/SelectionExpField.scss";

.selected-radio-panel {
background-color: tintOrShade($euiColorPrimary, 90%, 70%);
Expand Down Expand Up @@ -135,3 +136,11 @@ $euiTextColor: $euiColorDarkestShade !default;
.detailsFormRow {
width: auto !important;
}

.empty-text-button {
vertical-align: baseline;

.euiButtonEmpty__content {
padding: 0 !important;
}
}
16 changes: 16 additions & 0 deletions public/pages/Rules/components/DeleteModal/DeleteRuleModal.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import { render } from '@testing-library/react';
import DeleteRuleModalMock from '../../../../../test/mocks/Rules/components/DeleteModal/DeleteRuleModal.mock';
import { DeleteRuleModal } from './DeleteRuleModal';

describe('<DeleteModal /> spec', () => {
it('renders the component', () => {
const tree = render(<DeleteRuleModal {...DeleteRuleModalMock} />);
expect(tree).toMatchSnapshot();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<DeleteModal /> spec renders the component 1`] = `
Object {
"asFragment": [Function],
"baseElement": <body
class="euiBody-hasOverlayMask"
>
<div
aria-hidden="true"
data-aria-hidden="true"
/>
<div
class="euiOverlayMask euiOverlayMask--aboveHeader"
>
<div
aria-hidden="true"
data-aria-hidden="true"
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
data-focus-lock-disabled="false"
>
<div
class="euiModal euiModal--maxWidth-default euiModal--confirmation"
tabindex="0"
>
<button
aria-label="Closes this modal window"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
type="button"
>
EuiIconMock
</button>
<div
class="euiModal__flex"
>
<div
class="euiModalHeader"
>
<div
class="euiModalHeader__title"
data-test-subj="confirmModalTitleText"
>
Delete Delete rule?
</div>
</div>
<div
class="euiModalBody"
>
<div
class="euiModalBody__overflow"
>
<div
class="euiText euiText--medium"
data-test-subj="confirmModalBodyText"
>
<p>
Delete the rule permanently? This action cannot be undone.
</p>
</div>
</div>
</div>
<div
class="euiModalFooter"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary"
data-test-subj="confirmModalCancelButton"
type="button"
>
<span
class="euiButtonContent euiButtonEmpty__content"
>
<span
class="euiButtonEmpty__text"
>
Cancel
</span>
</span>
</button>
<button
class="euiButton euiButton--danger euiButton--fill"
data-test-subj="confirmModalConfirmButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
>
<span
class="euiButton__text"
>
Delete
</span>
</span>
</button>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
data-aria-hidden="true"
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</div>
</body>,
"container": <div
aria-hidden="true"
data-aria-hidden="true"
/>,
"debug": [Function],
"findAllByAltText": [Function],
"findAllByDisplayValue": [Function],
"findAllByLabelText": [Function],
"findAllByPlaceholderText": [Function],
"findAllByRole": [Function],
"findAllByTestId": [Function],
"findAllByText": [Function],
"findAllByTitle": [Function],
"findByAltText": [Function],
"findByDisplayValue": [Function],
"findByLabelText": [Function],
"findByPlaceholderText": [Function],
"findByRole": [Function],
"findByTestId": [Function],
"findByText": [Function],
"findByTitle": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"rerender": [Function],
"unmount": [Function],
}
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import { render } from '@testing-library/react';
import { DetectionVisualEditor } from './DetectionVisualEditor';
import DetectionVisualEditorMock from '../../../../../test/mocks/Rules/components/RuleEditor/DetectionVisualEditor.mock';

describe('<SelectionExpField /> spec', () => {
it('renders the component', () => {
const tree = render(<DetectionVisualEditor {...DetectionVisualEditorMock} />);
expect(tree).toMatchSnapshot();
});
});
Loading

0 comments on commit 0f21245

Please sign in to comment.