Skip to content

Commit 69a4b17

Browse files
FrankHassanabadFrankHassanabad
committed
[SIEM] Fixes "include building block button" to operate (#73900)
## 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.
1 parent f8d54d7 commit 69a4b17

2 files changed

Lines changed: 188 additions & 5 deletions

File tree

  • x-pack/plugins/security_solution/public/detections/components/alerts_table/alerts_utility_bar

‎x-pack/plugins/security_solution/public/detections/components/alerts_table/alerts_utility_bar/index.test.tsx‎

Lines changed: 185 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@
55
*/
66

77
import React from 'react';
8-
import { shallow } from 'enzyme';
8+
import { shallow, mount } from 'enzyme';
99

10-
import { AlertsUtilityBar } from './index';
10+
import { AlertsUtilityBar, AlertsUtilityBarProps } from './index';
11+
import { TestProviders } from '../../../../common/mock/test_providers';
1112

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

1415
describe('AlertsUtilityBar', () => {
15-
it('renders correctly', () => {
16+
test('renders correctly', () => {
1617
const wrapper = shallow(
1718
<AlertsUtilityBar
1819
canUserCRUD={true}
@@ -32,4 +33,185 @@ describe('AlertsUtilityBar', () => {
3233

3334
expect(wrapper.find('[dataTestSubj="alertActionPopover"]')).toBeTruthy();
3435
});
36+
37+
describe('UtilityBarAdditionalFiltersContent', () => {
38+
test('does not show the showBuildingBlockAlerts checked if the showBuildingBlockAlerts is false', () => {
39+
const onShowBuildingBlockAlertsChanged = jest.fn();
40+
const wrapper = mount(
41+
<TestProviders>
42+
<AlertsUtilityBar
43+
canUserCRUD={true}
44+
hasIndexWrite={true}
45+
areEventsLoading={false}
46+
clearSelection={jest.fn()}
47+
totalCount={100}
48+
selectedEventIds={{}}
49+
currentFilter="closed"
50+
selectAll={jest.fn()}
51+
showClearSelection={true}
52+
showBuildingBlockAlerts={false} // Does not show showBuildingBlockAlerts checked if this is false
53+
onShowBuildingBlockAlertsChanged={onShowBuildingBlockAlertsChanged}
54+
updateAlertsStatus={jest.fn()}
55+
/>
56+
</TestProviders>
57+
);
58+
// click the filters button to popup the checkbox to make it visible
59+
wrapper
60+
.find('[data-test-subj="additionalFilters"] button')
61+
.first()
62+
.simulate('click')
63+
.update();
64+
65+
// The check box should be false
66+
expect(
67+
wrapper
68+
.find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
69+
.first()
70+
.prop('checked')
71+
).toEqual(false);
72+
});
73+
74+
test('does show the showBuildingBlockAlerts checked if the showBuildingBlockAlerts is true', () => {
75+
const onShowBuildingBlockAlertsChanged = jest.fn();
76+
const wrapper = mount(
77+
<TestProviders>
78+
<AlertsUtilityBar
79+
canUserCRUD={true}
80+
hasIndexWrite={true}
81+
areEventsLoading={false}
82+
clearSelection={jest.fn()}
83+
totalCount={100}
84+
selectedEventIds={{}}
85+
currentFilter="closed"
86+
selectAll={jest.fn()}
87+
showClearSelection={true}
88+
showBuildingBlockAlerts={true} // Does show showBuildingBlockAlerts checked if this is true
89+
onShowBuildingBlockAlertsChanged={onShowBuildingBlockAlertsChanged}
90+
updateAlertsStatus={jest.fn()}
91+
/>
92+
</TestProviders>
93+
);
94+
// click the filters button to popup the checkbox to make it visible
95+
wrapper
96+
.find('[data-test-subj="additionalFilters"] button')
97+
.first()
98+
.simulate('click')
99+
.update();
100+
101+
// The check box should be true
102+
expect(
103+
wrapper
104+
.find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
105+
.first()
106+
.prop('checked')
107+
).toEqual(true);
108+
});
109+
110+
test('calls the onShowBuildingBlockAlertsChanged when the check box is clicked', () => {
111+
const onShowBuildingBlockAlertsChanged = jest.fn();
112+
const wrapper = mount(
113+
<TestProviders>
114+
<AlertsUtilityBar
115+
canUserCRUD={true}
116+
hasIndexWrite={true}
117+
areEventsLoading={false}
118+
clearSelection={jest.fn()}
119+
totalCount={100}
120+
selectedEventIds={{}}
121+
currentFilter="closed"
122+
selectAll={jest.fn()}
123+
showClearSelection={true}
124+
showBuildingBlockAlerts={false}
125+
onShowBuildingBlockAlertsChanged={onShowBuildingBlockAlertsChanged}
126+
updateAlertsStatus={jest.fn()}
127+
/>
128+
</TestProviders>
129+
);
130+
// click the filters button to popup the checkbox to make it visible
131+
wrapper
132+
.find('[data-test-subj="additionalFilters"] button')
133+
.first()
134+
.simulate('click')
135+
.update();
136+
137+
// check the box
138+
wrapper
139+
.find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
140+
.first()
141+
.simulate('change', { target: { checked: true } });
142+
143+
// Make sure our callback is called
144+
expect(onShowBuildingBlockAlertsChanged).toHaveBeenCalled();
145+
});
146+
147+
test('can update showBuildingBlockAlerts from false to true', () => {
148+
const Proxy = (props: AlertsUtilityBarProps) => (
149+
<TestProviders>
150+
<AlertsUtilityBar
151+
canUserCRUD={true}
152+
hasIndexWrite={true}
153+
areEventsLoading={false}
154+
clearSelection={jest.fn()}
155+
totalCount={100}
156+
selectedEventIds={{}}
157+
currentFilter="closed"
158+
selectAll={jest.fn()}
159+
showClearSelection={true}
160+
showBuildingBlockAlerts={props.showBuildingBlockAlerts}
161+
onShowBuildingBlockAlertsChanged={jest.fn()}
162+
updateAlertsStatus={jest.fn()}
163+
/>
164+
</TestProviders>
165+
);
166+
167+
const wrapper = mount(
168+
<Proxy
169+
canUserCRUD={true}
170+
hasIndexWrite={true}
171+
areEventsLoading={false}
172+
clearSelection={jest.fn()}
173+
totalCount={100}
174+
selectedEventIds={{}}
175+
currentFilter="closed"
176+
selectAll={jest.fn()}
177+
showClearSelection={true}
178+
showBuildingBlockAlerts={false}
179+
onShowBuildingBlockAlertsChanged={jest.fn()}
180+
updateAlertsStatus={jest.fn()}
181+
/>
182+
);
183+
// click the filters button to popup the checkbox to make it visible
184+
wrapper
185+
.find('[data-test-subj="additionalFilters"] button')
186+
.first()
187+
.simulate('click')
188+
.update();
189+
190+
// The check box should false now since we initially set the showBuildingBlockAlerts to false
191+
expect(
192+
wrapper
193+
.find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
194+
.first()
195+
.prop('checked')
196+
).toEqual(false);
197+
198+
wrapper.setProps({ showBuildingBlockAlerts: true });
199+
wrapper.update();
200+
201+
// click the filters button to popup the checkbox to make it visible
202+
wrapper
203+
.find('[data-test-subj="additionalFilters"] button')
204+
.first()
205+
.simulate('click')
206+
.update();
207+
208+
// The check box should be true now since we changed the showBuildingBlockAlerts from false to true
209+
expect(
210+
wrapper
211+
.find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
212+
.first()
213+
.prop('checked')
214+
).toEqual(true);
215+
});
216+
});
35217
});

‎x-pack/plugins/security_solution/public/detections/components/alerts_table/alerts_utility_bar/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { TimelineNonEcsData } from '../../../../graphql/types';
2828
import { UpdateAlertsStatus } from '../types';
2929
import { FILTER_CLOSED, FILTER_IN_PROGRESS, FILTER_OPEN } from '../alerts_filter_group';
3030

31-
interface AlertsUtilityBarProps {
31+
export interface AlertsUtilityBarProps {
3232
canUserCRUD: boolean;
3333
hasIndexWrite: boolean;
3434
areEventsLoading: boolean;
@@ -223,5 +223,6 @@ export const AlertsUtilityBar = React.memo(
223223
prevProps.areEventsLoading === nextProps.areEventsLoading &&
224224
prevProps.selectedEventIds === nextProps.selectedEventIds &&
225225
prevProps.totalCount === nextProps.totalCount &&
226-
prevProps.showClearSelection === nextProps.showClearSelection
226+
prevProps.showClearSelection === nextProps.showClearSelection &&
227+
prevProps.showBuildingBlockAlerts === nextProps.showBuildingBlockAlerts
227228
);

0 commit comments

Comments
 (0)