Skip to content

Commit

Permalink
[SIEM] Fixes "include building block button" to operate (#73900)
Browse files Browse the repository at this point in the history 
## Summary

Blocker fixes "include building block button" to operate when there is no data on the table.

Before if you had nothing on the table then the button would not operate as it would not cause a re-render:
![button_not_working](https://user-images.githubusercontent.com/1151048/88980376-cde1de00-d280-11ea-98cf-b67ef9fe9f72.gif)

After where the button now works:
![button_working](https://user-images.githubusercontent.com/1151048/88980385-d3d7bf00-d280-11ea-89e4-f806e62853ed.gif)

This wasn't caught because most people have something already on the table which makes the rendering render and just work. Simple one line low level fix.

### Checklist

Delete any items that are not applicable to this PR.

- [ ] [Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios
No tests for this file at the moment and we need this as a fast backport to make the release cut off.
  • Loading branch information
@FrankHassanabad
FrankHassanabad authored Jul 31, 2020
1 parent aa668db commit 0a54278
Show file tree
Hide file tree
Showing 2 changed files with 188 additions and 5 deletions.
188 changes: 185 additions & 3 deletions ...rity_solution/public/detections/components/alerts_table/alerts_utility_bar/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,15 @@
*/

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

import { AlertsUtilityBar } from './index';
import { AlertsUtilityBar, AlertsUtilityBarProps } from './index';
import { TestProviders } from '../../../../common/mock/test_providers';

jest.mock('../../../../common/lib/kibana');

describe('AlertsUtilityBar', () => {
it('renders correctly', () => {
test('renders correctly', () => {
const wrapper = shallow(
<AlertsUtilityBar
canUserCRUD={true}
Expand All @@ -32,4 +33,185 @@ describe('AlertsUtilityBar', () => {

expect(wrapper.find('[dataTestSubj="alertActionPopover"]')).toBeTruthy();
});

describe('UtilityBarAdditionalFiltersContent', () => {
test('does not show the showBuildingBlockAlerts checked if the showBuildingBlockAlerts is false', () => {
const onShowBuildingBlockAlertsChanged = jest.fn();
const wrapper = mount(
<TestProviders>
<AlertsUtilityBar
canUserCRUD={true}
hasIndexWrite={true}
areEventsLoading={false}
clearSelection={jest.fn()}
totalCount={100}
selectedEventIds={{}}
currentFilter="closed"
selectAll={jest.fn()}
showClearSelection={true}
showBuildingBlockAlerts={false} // Does not show showBuildingBlockAlerts checked if this is false
onShowBuildingBlockAlertsChanged={onShowBuildingBlockAlertsChanged}
updateAlertsStatus={jest.fn()}
/>
</TestProviders>
);
// click the filters button to popup the checkbox to make it visible
wrapper
.find('[data-test-subj="additionalFilters"] button')
.first()
.simulate('click')
.update();

// The check box should be false
expect(
wrapper
.find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
.first()
.prop('checked')
).toEqual(false);
});

test('does show the showBuildingBlockAlerts checked if the showBuildingBlockAlerts is true', () => {
const onShowBuildingBlockAlertsChanged = jest.fn();
const wrapper = mount(
<TestProviders>
<AlertsUtilityBar
canUserCRUD={true}
hasIndexWrite={true}
areEventsLoading={false}
clearSelection={jest.fn()}
totalCount={100}
selectedEventIds={{}}
currentFilter="closed"
selectAll={jest.fn()}
showClearSelection={true}
showBuildingBlockAlerts={true} // Does show showBuildingBlockAlerts checked if this is true
onShowBuildingBlockAlertsChanged={onShowBuildingBlockAlertsChanged}
updateAlertsStatus={jest.fn()}
/>
</TestProviders>
);
// click the filters button to popup the checkbox to make it visible
wrapper
.find('[data-test-subj="additionalFilters"] button')
.first()
.simulate('click')
.update();

// The check box should be true
expect(
wrapper
.find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
.first()
.prop('checked')
).toEqual(true);
});

test('calls the onShowBuildingBlockAlertsChanged when the check box is clicked', () => {
const onShowBuildingBlockAlertsChanged = jest.fn();
const wrapper = mount(
<TestProviders>
<AlertsUtilityBar
canUserCRUD={true}
hasIndexWrite={true}
areEventsLoading={false}
clearSelection={jest.fn()}
totalCount={100}
selectedEventIds={{}}
currentFilter="closed"
selectAll={jest.fn()}
showClearSelection={true}
showBuildingBlockAlerts={false}
onShowBuildingBlockAlertsChanged={onShowBuildingBlockAlertsChanged}
updateAlertsStatus={jest.fn()}
/>
</TestProviders>
);
// click the filters button to popup the checkbox to make it visible
wrapper
.find('[data-test-subj="additionalFilters"] button')
.first()
.simulate('click')
.update();

// check the box
wrapper
.find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
.first()
.simulate('change', { target: { checked: true } });

// Make sure our callback is called
expect(onShowBuildingBlockAlertsChanged).toHaveBeenCalled();
});

test('can update showBuildingBlockAlerts from false to true', () => {
const Proxy = (props: AlertsUtilityBarProps) => (
<TestProviders>
<AlertsUtilityBar
canUserCRUD={true}
hasIndexWrite={true}
areEventsLoading={false}
clearSelection={jest.fn()}
totalCount={100}
selectedEventIds={{}}
currentFilter="closed"
selectAll={jest.fn()}
showClearSelection={true}
showBuildingBlockAlerts={props.showBuildingBlockAlerts}
onShowBuildingBlockAlertsChanged={jest.fn()}
updateAlertsStatus={jest.fn()}
/>
</TestProviders>
);

const wrapper = mount(
<Proxy
canUserCRUD={true}
hasIndexWrite={true}
areEventsLoading={false}
clearSelection={jest.fn()}
totalCount={100}
selectedEventIds={{}}
currentFilter="closed"
selectAll={jest.fn()}
showClearSelection={true}
showBuildingBlockAlerts={false}
onShowBuildingBlockAlertsChanged={jest.fn()}
updateAlertsStatus={jest.fn()}
/>
);
// click the filters button to popup the checkbox to make it visible
wrapper
.find('[data-test-subj="additionalFilters"] button')
.first()
.simulate('click')
.update();

// The check box should false now since we initially set the showBuildingBlockAlerts to false
expect(
wrapper
.find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
.first()
.prop('checked')
).toEqual(false);

wrapper.setProps({ showBuildingBlockAlerts: true });
wrapper.update();

// click the filters button to popup the checkbox to make it visible
wrapper
.find('[data-test-subj="additionalFilters"] button')
.first()
.simulate('click')
.update();

// The check box should be true now since we changed the showBuildingBlockAlerts from false to true
expect(
wrapper
.find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
.first()
.prop('checked')
).toEqual(true);
});
});
});
5 changes: 3 additions & 2 deletions .../security_solution/public/detections/components/alerts_table/alerts_utility_bar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import { TimelineNonEcsData } from '../../../../graphql/types';
import { UpdateAlertsStatus } from '../types';
import { FILTER_CLOSED, FILTER_IN_PROGRESS, FILTER_OPEN } from '../alerts_filter_group';

interface AlertsUtilityBarProps {
export interface AlertsUtilityBarProps {
canUserCRUD: boolean;
hasIndexWrite: boolean;
areEventsLoading: boolean;
Expand Down Expand Up @@ -223,5 +223,6 @@ export const AlertsUtilityBar = React.memo(
prevProps.areEventsLoading === nextProps.areEventsLoading &&
prevProps.selectedEventIds === nextProps.selectedEventIds &&
prevProps.totalCount === nextProps.totalCount &&
prevProps.showClearSelection === nextProps.showClearSelection
prevProps.showClearSelection === nextProps.showClearSelection &&
prevProps.showBuildingBlockAlerts === nextProps.showBuildingBlockAlerts
);

0 comments on commit 0a54278

Please sign in to comment.