Skip to content

Commit

Permalink
[Security Solutions][Detection Engine] Updates the edit rules page to…
Browse files Browse the repository at this point in the history
… only have what is selected for editing (#79233) (#79386)

## Summary

Before when you would edit rules you get all the rules as disabled but you cannot switch between them in edit mode as it's already a rule you created:
<img width="1063" alt="Screen Shot 2020-10-01 at 5 06 18 PM" src="https://user-images.githubusercontent.com/1151048/94872518-0bdaba00-040a-11eb-8b7d-3b3a59980e99.png">

After, now we remove those cards and only show the card of the rule type you're editing:
<img width="1074" alt="Screen Shot 2020-10-02 at 6 29 48 PM" src="https://user-images.githubusercontent.com/1151048/94978954-50835580-04dd-11eb-9e08-8e473fc216bf.png">

Changes the card's icon placement and text.

Before:
<img width="1098" alt="Screen Shot 2020-10-02 at 9 27 44 AM" src="https://user-images.githubusercontent.com/1151048/94979008-9dffc280-04dd-11eb-8bce-88cd49b063a8.png">

After:
<img width="1190" alt="Screen Shot 2020-10-02 at 6 31 01 PM" src="https://user-images.githubusercontent.com/1151048/94979005-95a78780-04dd-11eb-92ec-e81bc3ce436e.png">

Fixes the Schedule/Actions and weirdness with CSS.
Before:
<img width="588" alt="Screen Shot 2020-10-02 at 5 42 09 PM" src="https://user-images.githubusercontent.com/1151048/94979030-c5568f80-04dd-11eb-9c91-683d75dc37da.png">
<img width="516" alt="Screen Shot 2020-10-02 at 5 42 05 PM" src="https://user-images.githubusercontent.com/1151048/94979035-c8ea1680-04dd-11eb-9049-120c9d676b1a.png">

After:
<img width="1099" alt="Screen Shot 2020-10-02 at 5 42 51 PM" src="https://user-images.githubusercontent.com/1151048/94979038-d0112480-04dd-11eb-8a2a-8eb314023669.png">

<img width="1067" alt="Screen Shot 2020-10-02 at 5 42 57 PM" src="https://user-images.githubusercontent.com/1151048/94979040-d30c1500-04dd-11eb-85ab-a09e4def6adb.png">

### Checklist

Delete any items that are not applicable to this PR.

- [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
- [ ] This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist)
- [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)
- [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

Co-authored-by: Kibana Machine <[email protected]>
  • Loading branch information
FrankHassanabad and kibanamachine authored Oct 3, 2020
1 parent 42fc027 commit 4453999
Show file tree
Hide file tree
Showing 9 changed files with 550 additions and 377 deletions.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -22,42 +22,4 @@ describe('WrapperPage', () => {

expect(wrapper.find('Memo(WrapperPageComponent)')).toMatchSnapshot();
});

describe('restrict width', () => {
test('default max width when restrictWidth is true', () => {
const wrapper = shallow(
<TestProviders>
<WrapperPage restrictWidth>
<p>{'Test page'}</p>
</WrapperPage>
</TestProviders>
);

expect(wrapper.find('Memo(WrapperPageComponent)')).toMatchSnapshot();
});

test('custom max width when restrictWidth is number', () => {
const wrapper = shallow(
<TestProviders>
<WrapperPage restrictWidth={600}>
<p>{'Test page'}</p>
</WrapperPage>
</TestProviders>
);

expect(wrapper.find('Memo(WrapperPageComponent)')).toMatchSnapshot();
});

test('custom max width when restrictWidth is string', () => {
const wrapper = shallow(
<TestProviders>
<WrapperPage restrictWidth="600px">
<p>{'Test page'}</p>
</WrapperPage>
</TestProviders>
);

expect(wrapper.find('Memo(WrapperPageComponent)')).toMatchSnapshot();
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,6 @@ import { AppGlobalStyle } from '../page/index';
const Wrapper = styled.div`
padding: ${(props) => `${props.theme.eui.paddingSizes.l}`};
&.siemWrapperPage--restrictWidthDefault,
&.siemWrapperPage--restrictWidthCustom {
box-sizing: content-box;
margin: 0 auto;
}
&.siemWrapperPage--restrictWidthDefault {
max-width: 1000px;
}
&.siemWrapperPage--fullHeight {
height: 100%;
display: flex;
Expand Down Expand Up @@ -58,7 +48,6 @@ interface WrapperPageProps {
const WrapperPageComponent: React.FC<WrapperPageProps & CommonProps> = ({
children,
className,
restrictWidth,
style,
noPadding,
noTimeline,
Expand All @@ -74,20 +63,10 @@ const WrapperPageComponent: React.FC<WrapperPageProps & CommonProps> = ({
'siemWrapperPage--noPadding': noPadding,
'siemWrapperPage--withTimeline': !noTimeline,
'siemWrapperPage--fullHeight': globalFullScreen,
'siemWrapperPage--restrictWidthDefault':
restrictWidth && typeof restrictWidth === 'boolean' && restrictWidth === true,
'siemWrapperPage--restrictWidthCustom': restrictWidth && typeof restrictWidth !== 'boolean',
});

let customStyle: WrapperPageProps['style'];

if (restrictWidth && typeof restrictWidth !== 'boolean') {
const value = typeof restrictWidth === 'number' ? `${restrictWidth}px` : restrictWidth;
customStyle = { ...style, maxWidth: value };
}

return (
<Wrapper className={classes} style={customStyle || style} {...otherProps}>
<Wrapper className={classes} style={style} {...otherProps}>
{children}
<AppGlobalStyle />
</Wrapper>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,235 @@
*/

import React from 'react';
import { shallow } from 'enzyme';
import { mount, shallow } from 'enzyme';

import { SelectRuleType } from './index';
import { useFormFieldMock } from '../../../../common/mock';
import { TestProviders, useFormFieldMock } from '../../../../common/mock';
jest.mock('../../../../common/lib/kibana');

describe('SelectRuleType', () => {
// I do this to avoid the messy warning from happening
// Warning: React does not recognize the `isVisible` prop on a DOM element.
beforeEach(() => {
jest.spyOn(console, 'error').mockImplementation(jest.fn());
});

afterEach(() => {
jest.spyOn(console, 'error').mockRestore();
});

it('renders correctly', () => {
const Component = () => {
const field = useFormFieldMock();

return <SelectRuleType field={field} />;
return (
<SelectRuleType
field={field}
describedByIds={[]}
isUpdateView={false}
hasValidLicense={true}
isMlAdmin={true}
/>
);
};
const wrapper = shallow(<Component />);

expect(wrapper.dive().find('[data-test-subj="selectRuleType"]')).toHaveLength(1);
});

describe('update mode vs. non-update mode', () => {
it('renders all the cards when not in update mode', () => {
const field = useFormFieldMock<unknown>({ value: 'query' });
const wrapper = mount(
<TestProviders>
<SelectRuleType
describedByIds={[]}
field={field}
isUpdateView={false}
hasValidLicense={true}
isMlAdmin={true}
/>
</TestProviders>
);
expect(wrapper.find('[data-test-subj="customRuleType"]').exists()).toBeTruthy();
expect(wrapper.find('[data-test-subj="machineLearningRuleType"]').exists()).toBeTruthy();
expect(wrapper.find('[data-test-subj="thresholdRuleType"]').exists()).toBeTruthy();
expect(wrapper.find('[data-test-subj="eqlRuleType"]').exists()).toBeTruthy();
expect(wrapper.find('[data-test-subj="threatMatchRuleType"]').exists()).toBeTruthy();
});

it('renders only the card selected when in update mode of "eql"', () => {
const field = useFormFieldMock<unknown>({ value: 'eql' });
const wrapper = mount(
<TestProviders>
<SelectRuleType
describedByIds={[]}
field={field}
isUpdateView={true}
hasValidLicense={true}
isMlAdmin={true}
/>
</TestProviders>
);
expect(wrapper.find('[data-test-subj="customRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="machineLearningRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="thresholdRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="eqlRuleType"]').exists()).toBeTruthy();
expect(wrapper.find('[data-test-subj="threatMatchRuleType"]').exists()).toBeFalsy();
});

it('renders only the card selected when in update mode of "machine_learning', () => {
const field = useFormFieldMock<unknown>({ value: 'machine_learning' });
const wrapper = mount(
<TestProviders>
<SelectRuleType
describedByIds={[]}
field={field}
isUpdateView={true}
hasValidLicense={true}
isMlAdmin={true}
/>
</TestProviders>
);
expect(wrapper.find('[data-test-subj="customRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="machineLearningRuleType"]').exists()).toBeTruthy();
expect(wrapper.find('[data-test-subj="thresholdRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="eqlRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="threatMatchRuleType"]').exists()).toBeFalsy();
});

it('renders only the card selected when in update mode of "query', () => {
const field = useFormFieldMock<unknown>({ value: 'query' });
const wrapper = mount(
<TestProviders>
<SelectRuleType
describedByIds={[]}
field={field}
isUpdateView={true}
hasValidLicense={true}
isMlAdmin={true}
/>
</TestProviders>
);
expect(wrapper.find('[data-test-subj="customRuleType"]').exists()).toBeTruthy();
expect(wrapper.find('[data-test-subj="machineLearningRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="thresholdRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="eqlRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="threatMatchRuleType"]').exists()).toBeFalsy();
});

it('renders only the card selected when in update mode of "threshold"', () => {
const field = useFormFieldMock<unknown>({ value: 'threshold' });
const wrapper = mount(
<TestProviders>
<SelectRuleType
describedByIds={[]}
field={field}
isUpdateView={true}
hasValidLicense={true}
isMlAdmin={true}
/>
</TestProviders>
);
expect(wrapper.find('[data-test-subj="customRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="machineLearningRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="thresholdRuleType"]').exists()).toBeTruthy();
expect(wrapper.find('[data-test-subj="eqlRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="threatMatchRuleType"]').exists()).toBeFalsy();
});

it('renders only the card selected when in update mode of "threat_match', () => {
const field = useFormFieldMock<unknown>({ value: 'threat_match' });
const wrapper = mount(
<TestProviders>
<SelectRuleType
describedByIds={[]}
field={field}
isUpdateView={true}
hasValidLicense={true}
isMlAdmin={true}
/>
</TestProviders>
);
expect(wrapper.find('[data-test-subj="customRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="machineLearningRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="thresholdRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="eqlRuleType"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="threatMatchRuleType"]').exists()).toBeTruthy();
});
});

describe('permissions', () => {
it('renders machine learning as disabled if "hasValidLicense" is false and it is not selected', () => {
const field = useFormFieldMock<unknown>({ value: 'query' });
const wrapper = mount(
<TestProviders>
<SelectRuleType
describedByIds={[]}
field={field}
isUpdateView={false}
hasValidLicense={false}
isMlAdmin={true}
/>
</TestProviders>
);
expect(
wrapper.find('[data-test-subj="machineLearningRuleType"]').first().prop('isDisabled')
).toEqual(true);
});

it('renders machine learning as not disabled if "hasValidLicense" is false and it is selected', () => {
const field = useFormFieldMock<unknown>({ value: 'machine_learning' });
const wrapper = mount(
<TestProviders>
<SelectRuleType
describedByIds={[]}
field={field}
isUpdateView={false}
hasValidLicense={false}
isMlAdmin={true}
/>
</TestProviders>
);
expect(
wrapper.find('[data-test-subj="machineLearningRuleType"]').first().prop('isDisabled')
).toEqual(false);
});

it('renders machine learning as disabled if "isMlAdmin" is false and it is not selected', () => {
const field = useFormFieldMock<unknown>({ value: 'query' });
const wrapper = mount(
<TestProviders>
<SelectRuleType
describedByIds={[]}
field={field}
isUpdateView={false}
hasValidLicense={true}
isMlAdmin={false}
/>
</TestProviders>
);
expect(
wrapper.find('[data-test-subj="machineLearningRuleType"]').first().prop('isDisabled')
).toEqual(true);
});

it('renders machine learning as not disabled if "isMlAdmin" is false and it is selected', () => {
const field = useFormFieldMock<unknown>({ value: 'machine_learning' });
const wrapper = mount(
<TestProviders>
<SelectRuleType
describedByIds={[]}
field={field}
isUpdateView={false}
hasValidLicense={true}
isMlAdmin={false}
/>
</TestProviders>
);
expect(
wrapper.find('[data-test-subj="machineLearningRuleType"]').first().prop('isDisabled')
).toEqual(false);
});
});
});
Loading

0 comments on commit 4453999

Please sign in to comment.