Skip to content

Commit 96d191d

Browse files
gmmorrisgmmorris
committed
[Actions & Connectors] removes Connector flyouts after usage (#82126)
We've had several bugs over the past few months due to flyouts retaining state between renders. This ensure we remove these flyouts entirely in between usage to avoid such issues recurring.
1 parent aae4273 commit 96d191d

8 files changed

Lines changed: 56 additions & 85 deletions

File tree

‎x-pack/plugins/security_solution/public/cases/components/configure_cases/index.test.tsx‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,9 @@ describe('ConfigureCases', () => {
6767
expect(wrapper.find(ActionsConnectorsContextProvider).exists()).toBeTruthy();
6868
});
6969

70-
test('it renders the ConnectorAddFlyout', () => {
70+
test('it does NOT render the ConnectorAddFlyout', () => {
7171
// Components from triggersActionsUi do not have a data-test-subj
72-
expect(wrapper.find(ConnectorAddFlyout).exists()).toBeTruthy();
72+
expect(wrapper.find(ConnectorAddFlyout).exists()).toBeFalsy();
7373
});
7474

7575
test('it does NOT render the ConnectorEditFlyout', () => {
@@ -157,10 +157,6 @@ describe('ConfigureCases', () => {
157157
wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
158158
});
159159

160-
test('it renders the ConnectorEditFlyout', () => {
161-
expect(wrapper.find(ConnectorEditFlyout).exists()).toBeTruthy();
162-
});
163-
164160
test('it renders with correct props', () => {
165161
// Connector
166162
expect(wrapper.find(Connectors).prop('connectors')).toEqual(connectors);
@@ -173,21 +169,8 @@ describe('ConfigureCases', () => {
173169
expect(wrapper.find(ClosureOptions).prop('closureTypeSelected')).toBe('close-by-user');
174170

175171
// Flyouts
176-
expect(wrapper.find(ConnectorAddFlyout).prop('addFlyoutVisible')).toBe(false);
177-
expect(wrapper.find(ConnectorAddFlyout).prop('actionTypes')).toEqual([
178-
expect.objectContaining({
179-
id: '.servicenow',
180-
}),
181-
expect.objectContaining({
182-
id: '.jira',
183-
}),
184-
expect.objectContaining({
185-
id: '.resilient',
186-
}),
187-
]);
188-
189-
expect(wrapper.find(ConnectorEditFlyout).prop('editFlyoutVisible')).toBe(false);
190-
expect(wrapper.find(ConnectorEditFlyout).prop('initialConnector')).toEqual(connectors[0]);
172+
expect(wrapper.find(ConnectorAddFlyout).exists()).toBe(false);
173+
expect(wrapper.find(ConnectorEditFlyout).exists()).toBe(false);
191174
});
192175

193176
test('it disables correctly when the user cannot crud', () => {
@@ -518,7 +501,18 @@ describe('user interactions', () => {
518501
wrapper.find('button[data-test-subj="dropdown-connector-add-connector"]').simulate('click');
519502
wrapper.update();
520503

521-
expect(wrapper.find(ConnectorAddFlyout).prop('addFlyoutVisible')).toBe(true);
504+
expect(wrapper.find(ConnectorAddFlyout).exists()).toBe(true);
505+
expect(wrapper.find(ConnectorAddFlyout).prop('actionTypes')).toEqual([
506+
expect.objectContaining({
507+
id: '.servicenow',
508+
}),
509+
expect.objectContaining({
510+
id: '.jira',
511+
}),
512+
expect.objectContaining({
513+
id: '.resilient',
514+
}),
515+
]);
522516
});
523517

524518
test('it show the edit flyout when pressing the update connector button', () => {
@@ -528,7 +522,8 @@ describe('user interactions', () => {
528522
.simulate('click');
529523
wrapper.update();
530524

531-
expect(wrapper.find(ConnectorEditFlyout).prop('editFlyoutVisible')).toBe(true);
525+
expect(wrapper.find(ConnectorEditFlyout).exists()).toBe(true);
526+
expect(wrapper.find(ConnectorEditFlyout).prop('initialConnector')).toEqual(connectors[1]);
532527
expect(
533528
wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
534529
).toBeFalsy();

‎x-pack/plugins/security_solution/public/cases/components/configure_cases/index.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7-
import React, { useCallback, useEffect, useState, Dispatch, SetStateAction } from 'react';
7+
import React, { useCallback, useEffect, useState } from 'react';
88
import styled, { css } from 'styled-components';
99

1010
import { EuiCallOut } from '@elastic/eui';
@@ -204,19 +204,17 @@ const ConfigureCasesComponent: React.FC<ConfigureCasesComponentProps> = ({ userC
204204
consumer: 'case',
205205
}}
206206
>
207-
<ConnectorAddFlyout
208-
addFlyoutVisible={addFlyoutVisible}
209-
setAddFlyoutVisibility={handleSetAddFlyoutVisibility as Dispatch<SetStateAction<boolean>>}
210-
actionTypes={actionTypes}
211-
/>
212-
{editedConnectorItem && (
207+
{addFlyoutVisible && (
208+
<ConnectorAddFlyout
209+
onClose={() => handleSetAddFlyoutVisibility(false)}
210+
actionTypes={actionTypes}
211+
/>
212+
)}
213+
{editedConnectorItem && editFlyoutVisible && (
213214
<ConnectorEditFlyout
214215
key={editedConnectorItem.id}
215216
initialConnector={editedConnectorItem}
216-
editFlyoutVisible={editFlyoutVisible}
217-
setEditFlyoutVisibility={
218-
handleSetEditFlyoutVisibility as Dispatch<SetStateAction<boolean>>
219-
}
217+
onClose={() => handleSetEditFlyoutVisibility(false)}
220218
/>
221219
)}
222220
</ActionsConnectorsContextProvider>

‎x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.test.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,7 @@ describe('connector_add_flyout', () => {
5858
}}
5959
>
6060
<ConnectorAddFlyout
61-
addFlyoutVisible={true}
62-
setAddFlyoutVisibility={() => {}}
61+
onClose={() => {}}
6362
actionTypes={[
6463
{
6564
id: actionType.id,
@@ -100,8 +99,7 @@ describe('connector_add_flyout', () => {
10099
}}
101100
>
102101
<ConnectorAddFlyout
103-
addFlyoutVisible={true}
104-
setAddFlyoutVisibility={() => {}}
102+
onClose={() => {}}
105103
actionTypes={[
106104
{
107105
id: actionType.id,
@@ -160,8 +158,7 @@ describe('connector_add_flyout', () => {
160158
}}
161159
>
162160
<ConnectorAddFlyout
163-
addFlyoutVisible={true}
164-
setAddFlyoutVisibility={() => {}}
161+
onClose={() => {}}
165162
actionTypes={[
166163
{
167164
id: actionType.id,
@@ -208,8 +205,7 @@ describe('connector_add_flyout', () => {
208205
}}
209206
>
210207
<ConnectorAddFlyout
211-
addFlyoutVisible={true}
212-
setAddFlyoutVisibility={() => {}}
208+
onClose={() => {}}
213209
actionTypes={[
214210
{
215211
id: actionType.id,

‎x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,13 @@ import { useActionsConnectorsContext } from '../../context/actions_connectors_co
3232
import { VIEW_LICENSE_OPTIONS_LINK } from '../../../common/constants';
3333

3434
export interface ConnectorAddFlyoutProps {
35-
addFlyoutVisible: boolean;
36-
setAddFlyoutVisibility: React.Dispatch<React.SetStateAction<boolean>>;
35+
onClose: () => void;
3736
actionTypes?: ActionType[];
3837
onTestConnector?: (connector: ActionConnector) => void;
3938
}
4039

4140
export const ConnectorAddFlyout = ({
42-
addFlyoutVisible,
43-
setAddFlyoutVisibility,
41+
onClose,
4442
actionTypes,
4543
onTestConnector,
4644
}: ConnectorAddFlyoutProps) => {
@@ -74,17 +72,13 @@ export const ConnectorAddFlyout = ({
7472
const [isSaving, setIsSaving] = useState<boolean>(false);
7573

7674
const closeFlyout = useCallback(() => {
77-
setAddFlyoutVisibility(false);
7875
setActionType(undefined);
7976
setConnector(initialConnector);
80-
}, [setAddFlyoutVisibility, initialConnector]);
77+
onClose();
78+
}, [onClose, initialConnector]);
8179

8280
const canSave = hasSaveActionsCapability(capabilities);
8381

84-
if (!addFlyoutVisible) {
85-
return null;
86-
}
87-
8882
function onActionTypeChange(newActionType: ActionType) {
8983
setActionType(newActionType);
9084
setActionProperty('actionTypeId', newActionType.id);

‎x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.test.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,7 @@ describe('connector_edit_flyout', () => {
8484
docLinks: deps.docLinks,
8585
}}
8686
>
87-
<ConnectorEditFlyout
88-
initialConnector={connector}
89-
editFlyoutVisible={true}
90-
setEditFlyoutVisibility={(state) => {}}
91-
/>
87+
<ConnectorEditFlyout initialConnector={connector} onClose={() => {}} />
9288
</ActionsConnectorsContextProvider>
9389
</AppContextProvider>
9490
);
@@ -141,11 +137,7 @@ describe('connector_edit_flyout', () => {
141137
docLinks: deps.docLinks,
142138
}}
143139
>
144-
<ConnectorEditFlyout
145-
initialConnector={connector}
146-
editFlyoutVisible={true}
147-
setEditFlyoutVisibility={(state) => {}}
148-
/>
140+
<ConnectorEditFlyout initialConnector={connector} onClose={() => {}} />
149141
</ActionsConnectorsContextProvider>
150142
</AppContextProvider>
151143
);

‎x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,7 @@ import './connector_edit_flyout.scss';
3939

4040
export interface ConnectorEditProps {
4141
initialConnector: ActionConnector;
42-
editFlyoutVisible: boolean;
43-
setEditFlyoutVisibility: React.Dispatch<React.SetStateAction<boolean>>;
42+
onClose: () => void;
4443
tab?: EditConectorTabs;
4544
}
4645

@@ -51,8 +50,7 @@ export enum EditConectorTabs {
5150

5251
export const ConnectorEditFlyout = ({
5352
initialConnector,
54-
editFlyoutVisible,
55-
setEditFlyoutVisibility,
53+
onClose,
5654
tab = EditConectorTabs.Configuration,
5755
}: ConnectorEditProps) => {
5856
const {
@@ -86,16 +84,12 @@ export const ConnectorEditFlyout = ({
8684
const [isExecutingAction, setIsExecutinAction] = useState<boolean>(false);
8785

8886
const closeFlyout = useCallback(() => {
89-
setEditFlyoutVisibility(false);
9087
setConnector('connector', { ...initialConnector, secrets: {} });
9188
setHasChanges(false);
9289
setTestExecutionResult(none);
90+
onClose();
9391
// eslint-disable-next-line react-hooks/exhaustive-deps
94-
}, [setEditFlyoutVisibility]);
95-
96-
if (!editFlyoutVisible) {
97-
return null;
98-
}
92+
}, [onClose]);
9993

10094
const actionTypeModel = actionTypeRegistry.get(connector.actionTypeId);
10195
const errorsInConnectorConfig = (!connector.isPreconfigured

‎x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
EuiEmptyPrompt,
2121
} from '@elastic/eui';
2222
import { i18n } from '@kbn/i18n';
23+
import { omit } from 'lodash';
2324
import { FormattedMessage } from '@kbn/i18n/react';
2425
import { useAppDependencies } from '../../../app_context';
2526
import { loadAllActions, loadActionTypes, deleteActions } from '../../../lib/action_connector_api';
@@ -56,7 +57,6 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {
5657
const [selectedItems, setSelectedItems] = useState<ActionConnectorTableItem[]>([]);
5758
const [isLoadingActionTypes, setIsLoadingActionTypes] = useState<boolean>(false);
5859
const [isLoadingActions, setIsLoadingActions] = useState<boolean>(false);
59-
const [editFlyoutVisible, setEditFlyoutVisibility] = useState<boolean>(false);
6060
const [addFlyoutVisible, setAddFlyoutVisibility] = useState<boolean>(false);
6161
const [editConnectorProps, setEditConnectorProps] = useState<{
6262
initialConnector?: ActionConnector;
@@ -134,7 +134,6 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {
134134

135135
async function editItem(actionConnector: ActionConnector, tab: EditConectorTabs) {
136136
setEditConnectorProps({ initialConnector: actionConnector, tab });
137-
setEditFlyoutVisibility(true);
138137
}
139138

140139
const actionsTableColumns = [
@@ -367,20 +366,24 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {
367366
docLinks,
368367
}}
369368
>
370-
<ConnectorAddFlyout
371-
addFlyoutVisible={addFlyoutVisible}
372-
setAddFlyoutVisibility={setAddFlyoutVisibility}
373-
onTestConnector={(connector) => editItem(connector, EditConectorTabs.Test)}
374-
/>
369+
{addFlyoutVisible ? (
370+
<ConnectorAddFlyout
371+
onClose={() => {
372+
setAddFlyoutVisibility(false);
373+
}}
374+
onTestConnector={(connector) => editItem(connector, EditConectorTabs.Test)}
375+
/>
376+
) : null}
375377
{editConnectorProps.initialConnector ? (
376378
<ConnectorEditFlyout
377379
key={`${editConnectorProps.initialConnector.id}${
378380
editConnectorProps.tab ? `:${editConnectorProps.tab}` : ``
379381
}`}
380382
initialConnector={editConnectorProps.initialConnector}
381383
tab={editConnectorProps.tab}
382-
editFlyoutVisible={editFlyoutVisible}
383-
setEditFlyoutVisibility={setEditFlyoutVisibility}
384+
onClose={() => {
385+
setEditConnectorProps(omit(editConnectorProps, 'initialConnector'));
386+
}}
384387
/>
385388
) : null}
386389
</ActionsConnectorsContextProvider>

‎x-pack/plugins/uptime/public/components/settings/add_connector_flyout.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,9 @@ export const AddConnectorFlyout = ({ focusInput }: Props) => {
7171
capabilities: application?.capabilities,
7272
}}
7373
>
74-
<ConnectorAddFlyout
75-
addFlyoutVisible={addFlyoutVisible}
76-
setAddFlyoutVisibility={setAddFlyoutVisibility}
77-
/>
74+
{addFlyoutVisible ? (
75+
<ConnectorAddFlyout onClose={() => setAddFlyoutVisibility(false)} />
76+
) : null}
7877
</ActionsConnectorsContextProvider>
7978
</>
8079
);

0 commit comments

Comments
 (0)