[Security Solutions][Detection Engine] Updates the edit rules page to…

… only have what is selected for editing (#79233) ## 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)
elastic · Oct 3, 2020 · 3a181c3 · 3a181c3
1 parent 5477a1d
commit 3a181c3
Show file tree

Hide file tree

Showing 9 changed files with 550 additions and 377 deletions.
diff --git a/...security_solution/public/common/components/wrapper_page/__snapshots__/index.test.tsx.snap b/...security_solution/public/common/components/wrapper_page/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/security_solution/public/common/components/wrapper_page/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/wrapper_page/index.test.tsx
@@ -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();
-    });
-  });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/wrapper_page/index.tsx b/x-pack/plugins/security_solution/public/common/components/wrapper_page/index.tsx
@@ -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;
@@ -58,7 +48,6 @@ interface WrapperPageProps {
 const WrapperPageComponent: React.FC<WrapperPageProps & CommonProps> = ({
   children,
   className,
-  restrictWidth,
   style,
   noPadding,
   noTimeline,
@@ -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>

diff --git a/...gins/security_solution/public/detections/components/rules/select_rule_type/index.test.tsx b/...gins/security_solution/public/detections/components/rules/select_rule_type/index.test.tsx
@@ -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);
+    });
+  });
 });