diff --git a/x-pack/legacy/plugins/siem/public/containers/case/configure/api.ts b/x-pack/legacy/plugins/siem/public/containers/case/configure/api.ts index a6db36d8f64e7..ed47cdc62a1b6 100644 --- a/x-pack/legacy/plugins/siem/public/containers/case/configure/api.ts +++ b/x-pack/legacy/plugins/siem/public/containers/case/configure/api.ts @@ -16,7 +16,7 @@ import { KibanaServices } from '../../../lib/kibana'; import { CASES_CONFIGURE_URL } from '../constants'; import { ApiProps } from '../types'; import { convertToCamelCase, decodeCaseConfigureResponse } from '../utils'; -import { CaseConfigure, PatchConnectorProps } from './types'; +import { CaseConfigure } from './types'; export const fetchConnectors = async ({ signal }: ApiProps): Promise => { const response = await KibanaServices.get().http.fetch( @@ -79,20 +79,3 @@ export const patchCaseConfigure = async ( decodeCaseConfigureResponse(response) ); }; - -export const patchConfigConnector = async ({ - connectorId, - config, - signal, -}: PatchConnectorProps): Promise => { - const response = await KibanaServices.get().http.fetch( - `${CASES_CONFIGURE_URL}/connectors/${connectorId}`, - { - method: 'PATCH', - body: JSON.stringify(config), - signal, - } - ); - - return response; -}; diff --git a/x-pack/legacy/plugins/siem/public/containers/case/configure/types.ts b/x-pack/legacy/plugins/siem/public/containers/case/configure/types.ts index 840828307163c..fc7aaa3643d77 100644 --- a/x-pack/legacy/plugins/siem/public/containers/case/configure/types.ts +++ b/x-pack/legacy/plugins/siem/public/containers/case/configure/types.ts @@ -4,10 +4,9 @@ * you may not use this file except in compliance with the Elastic License. */ -import { ElasticUser, ApiProps } from '../types'; +import { ElasticUser } from '../types'; import { ActionType, - CasesConnectorConfiguration, CasesConfigurationMaps, CaseField, ClosureType, @@ -33,11 +32,6 @@ export interface CaseConfigure { version: string; } -export interface PatchConnectorProps extends ApiProps { - connectorId: string; - config: CasesConnectorConfiguration; -} - export interface CCMapsCombinedActionAttributes extends CasesConfigurationMaps { actionType?: ActionType; } diff --git a/x-pack/legacy/plugins/siem/public/containers/case/configure/use_connectors.tsx b/x-pack/legacy/plugins/siem/public/containers/case/configure/use_connectors.tsx index f905ebe756d7d..d31dcdbee2a14 100644 --- a/x-pack/legacy/plugins/siem/public/containers/case/configure/use_connectors.tsx +++ b/x-pack/legacy/plugins/siem/public/containers/case/configure/use_connectors.tsx @@ -8,14 +8,13 @@ import { useState, useEffect, useCallback } from 'react'; import { useStateToaster, errorToToaster } from '../../../components/toasters'; import * as i18n from '../translations'; -import { fetchConnectors, patchConfigConnector } from './api'; -import { CasesConfigurationMapping, Connector } from './types'; +import { fetchConnectors } from './api'; +import { Connector } from './types'; export interface ReturnConnectors { loading: boolean; connectors: Connector[]; refetchConnectors: () => void; - updateConnector: (connectorId: string, mappings: CasesConfigurationMapping[]) => unknown; } export const useConnectors = (): ReturnConnectors => { @@ -53,55 +52,6 @@ export const useConnectors = (): ReturnConnectors => { }; }, []); - const updateConnector = useCallback( - (connectorId: string, mappings: CasesConfigurationMapping[]) => { - if (connectorId === 'none') { - return; - } - - let didCancel = false; - const abortCtrl = new AbortController(); - const update = async () => { - try { - setLoading(true); - await patchConfigConnector({ - connectorId, - config: { - cases_configuration: { - mapping: mappings.map(m => ({ - source: m.source, - target: m.target, - action_type: m.actionType, - })), - }, - }, - signal: abortCtrl.signal, - }); - if (!didCancel) { - setLoading(false); - refetchConnectors(); - } - } catch (error) { - if (!didCancel) { - setLoading(false); - refetchConnectors(); - errorToToaster({ - title: i18n.ERROR_TITLE, - error: error.body && error.body.message ? new Error(error.body.message) : error, - dispatchToaster, - }); - } - } - }; - update(); - return () => { - didCancel = true; - abortCtrl.abort(); - }; - }, - [] - ); - useEffect(() => { refetchConnectors(); }, []); @@ -110,6 +60,5 @@ export const useConnectors = (): ReturnConnectors => { loading, connectors, refetchConnectors, - updateConnector, }; }; diff --git a/x-pack/legacy/plugins/siem/public/lib/connectors/servicenow.tsx b/x-pack/legacy/plugins/siem/public/lib/connectors/servicenow.tsx index 877757df30fb3..8e947fbc0f9bb 100644 --- a/x-pack/legacy/plugins/siem/public/lib/connectors/servicenow.tsx +++ b/x-pack/legacy/plugins/siem/public/lib/connectors/servicenow.tsx @@ -87,6 +87,10 @@ export function getActionType(): ActionTypeModel { const ServiceNowConnectorFields: React.FunctionComponent> = ({ action, editActionConfig, editActionSecrets, errors }) => { + /* We do not provide defaults values to the fields (like empty string for apiUrl) intentionally. + * If we do, errors will be shown the first time the flyout is open even though the user did not + * interact with the form. Also, we would like to show errors for empty fields provided by the user. + /*/ const { apiUrl, casesConfiguration: { mapping = [] } = {} } = action.config; const { username, password } = action.secrets; @@ -153,7 +157,7 @@ const ServiceNowConnectorFields: React.FunctionComponent void; - refetchConnectors: () => void; selectedConnector: string; + handleShowAddFlyout: () => void; } -const actionTypes = [ - { - id: '.servicenow', - name: 'ServiceNow', - enabled: true, - }, -]; - const ConnectorsComponent: React.FC = ({ connectors, disabled, isLoading, onChangeConnector, - refetchConnectors, selectedConnector, + handleShowAddFlyout, }) => { - const { http, triggers_actions_ui, notifications, application } = useKibana().services; - const [addFlyoutVisible, setAddFlyoutVisibility] = useState(false); - - const handleShowFlyout = useCallback(() => setAddFlyoutVisibility(true), []); - const dropDownLabel = ( {i18n.INCIDENT_MANAGEMENT_SYSTEM_LABEL} - {i18n.ADD_NEW_CONNECTOR} + {i18n.ADD_NEW_CONNECTOR} ); - const reloadConnectors = useCallback(async () => refetchConnectors(), []); - return ( <> = ({ /> - - - ); }; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx index da715fb66953f..b3c424bef6a7a 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx @@ -9,8 +9,18 @@ import styled, { css } from 'styled-components'; import { EuiFlexGroup, EuiFlexItem, EuiButton, EuiSpacer, EuiCallOut } from '@elastic/eui'; import { noop, isEmpty } from 'lodash/fp'; +import { useKibana } from '../../../../lib/kibana'; import { useConnectors } from '../../../../containers/case/configure/use_connectors'; import { useCaseConfigure } from '../../../../containers/case/configure/use_configure'; +import { + ActionsConnectorsContextProvider, + ConnectorAddFlyout, + ConnectorEditFlyout, +} from '../../../../../../../../plugins/triggers_actions_ui/public'; + +// eslint-disable-next-line @kbn/eslint/no-restricted-paths +import { ActionConnectorTableItem } from '../../../../../../../../plugins/triggers_actions_ui/public/types'; + import { ClosureType, CasesConfigurationMapping, @@ -40,8 +50,25 @@ const initialState: State = { mapping: null, }; +const actionTypes = [ + { + id: '.servicenow', + name: 'ServiceNow', + enabled: true, + }, +]; + const ConfigureCasesComponent: React.FC = () => { + const { http, triggers_actions_ui, notifications, application } = useKibana().services; + const [connectorIsValid, setConnectorIsValid] = useState(true); + const [addFlyoutVisible, setAddFlyoutVisibility] = useState(false); + const [editFlyoutVisible, setEditFlyoutVisibility] = useState(false); + const [editedConnectorItem, setEditedConnectorItem] = useState( + null + ); + + const handleShowAddFlyout = useCallback(() => setAddFlyoutVisibility(true), []); const [{ connectorId, closureType, mapping }, dispatch] = useReducer( configureCasesReducer(), @@ -73,20 +100,18 @@ const ConfigureCasesComponent: React.FC = () => { setConnectorId, setClosureType, }); - const { - loading: isLoadingConnectors, - connectors, - refetchConnectors, - updateConnector, - } = useConnectors(); + const { loading: isLoadingConnectors, connectors, refetchConnectors } = useConnectors(); + // ActionsConnectorsContextProvider reloadConnectors prop expects a Promise. + // TODO: Fix it if reloadConnectors type change. + const reloadConnectors = useCallback(async () => refetchConnectors(), []); const isLoadingAny = isLoadingConnectors || persistLoading || loadingCaseConfigure; + const updateConnectorDisabled = isLoadingAny || !connectorIsValid || connectorId === 'none'; const handleSubmit = useCallback( // TO DO give a warning/error to user when field are not mapped so they have chance to do it () => { persistCaseConfigure({ connectorId, closureType }); - updateConnector(connectorId, mapping ?? []); }, [connectorId, closureType, mapping] ); @@ -124,6 +149,14 @@ const ConfigureCasesComponent: React.FC = () => { } }, [connectors, connectorId]); + useEffect(() => { + if (!isLoadingConnectors && connectorId !== 'none') { + setEditedConnectorItem( + connectors.find(c => c.id === connectorId) as ActionConnectorTableItem + ); + } + }, [connectors, connectorId]); + return ( {!connectorIsValid && ( @@ -139,7 +172,7 @@ const ConfigureCasesComponent: React.FC = () => { disabled={persistLoading || isLoadingConnectors} isLoading={isLoadingConnectors} onChangeConnector={setConnectorId} - refetchConnectors={refetchConnectors} + handleShowAddFlyout={handleShowAddFlyout} selectedConnector={connectorId} /> @@ -152,15 +185,11 @@ const ConfigureCasesComponent: React.FC = () => { @@ -194,6 +223,29 @@ const ConfigureCasesComponent: React.FC = () => { + + + {editedConnectorItem && ( + + )} + ); }; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx index 10c8f6b938023..2600a9f4e13ac 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx @@ -4,8 +4,16 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; -import { EuiDescribedFormGroup } from '@elastic/eui'; +import React, { useCallback } from 'react'; +import styled from 'styled-components'; + +import { + EuiDescribedFormGroup, + EuiFlexGroup, + EuiFlexItem, + EuiFormRow, + EuiButtonEmpty, +} from '@elastic/eui'; import * as i18n from './translations'; @@ -14,18 +22,44 @@ import { CasesConfigurationMapping } from '../../../../containers/case/configure interface MappingProps { disabled: boolean; + updateConnectorDisabled: boolean; mapping: CasesConfigurationMapping[] | null; onChangeMapping: (newMapping: CasesConfigurationMapping[]) => void; + setEditFlyoutVisibility: React.Dispatch>; } -const MappingComponent: React.FC = ({ disabled, mapping, onChangeMapping }) => ( - {i18n.FIELD_MAPPING_TITLE}} - description={i18n.FIELD_MAPPING_DESC} - > - - -); +const EuiButtonEmptyExtended = styled(EuiButtonEmpty)` + font-size: 12px; + height: 24px; +`; + +const MappingComponent: React.FC = ({ + disabled, + updateConnectorDisabled, + mapping, + onChangeMapping, + setEditFlyoutVisibility, +}) => { + const onClick = useCallback(() => setEditFlyoutVisibility(true), []); + + return ( + {i18n.FIELD_MAPPING_TITLE}} + description={i18n.FIELD_MAPPING_DESC} + > + + + + + {i18n.UPDATE_CONNECTOR} + + + + + + + ); +}; export const Mapping = React.memo(MappingComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/translations.ts b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/translations.ts index d24921a636082..dd9bf82fb0b0d 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/translations.ts +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/translations.ts @@ -186,3 +186,7 @@ export const FIELD_MAPPING_FIELD_COMMENTS = i18n.translate( defaultMessage: 'Comments', } ); + +export const UPDATE_CONNECTOR = i18n.translate('xpack.siem.case.configureCases.updateConnector', { + defaultMessage: 'Update connector', +}); diff --git a/x-pack/plugins/case/server/routes/api/cases/configure/patch_connector.ts b/x-pack/plugins/case/server/routes/api/cases/configure/patch_connector.ts deleted file mode 100644 index a9fbe0ef4f721..0000000000000 --- a/x-pack/plugins/case/server/routes/api/cases/configure/patch_connector.ts +++ /dev/null @@ -1,68 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import { schema } from '@kbn/config-schema'; -import Boom from 'boom'; -import { pipe } from 'fp-ts/lib/pipeable'; -import { fold } from 'fp-ts/lib/Either'; -import { identity } from 'fp-ts/lib/function'; - -import { ActionResult } from '../../../../../../actions/common'; -import { CasesConnectorConfigurationRT, throwErrors } from '../../../../../common/api'; -import { RouteDeps } from '../../types'; -import { wrapError, escapeHatch } from '../../utils'; - -export function initCaseConfigurePatchActionConnector({ caseService, router }: RouteDeps) { - router.patch( - { - path: '/api/cases/configure/connectors/{connector_id}', - validate: { - params: schema.object({ - connector_id: schema.string(), - }), - body: escapeHatch, - }, - }, - async (context, request, response) => { - try { - const query = pipe( - CasesConnectorConfigurationRT.decode(request.body), - fold(throwErrors(Boom.badRequest), identity) - ); - - const client = context.core.savedObjects.client; - const { connector_id: connectorId } = request.params; - const { cases_configuration: casesConfiguration } = query; - - const normalizedMapping = casesConfiguration.mapping.map(m => ({ - source: m.source, - target: m.target, - actionType: m.action_type, - })); - - const action = await client.get('action', connectorId); - - const { config } = action.attributes; - const res = await client.update('action', connectorId, { - config: { - ...config, - casesConfiguration: { ...casesConfiguration, mapping: normalizedMapping }, - }, - }); - - return response.ok({ - body: CasesConnectorConfigurationRT.encode({ - cases_configuration: - res.attributes.config?.casesConfiguration ?? - action.attributes.config.casesConfiguration, - }), - }); - } catch (error) { - return response.customError(wrapError(error)); - } - } - ); -} diff --git a/x-pack/plugins/case/server/routes/api/index.ts b/x-pack/plugins/case/server/routes/api/index.ts index 956f410c9c10a..60ee57a0efea7 100644 --- a/x-pack/plugins/case/server/routes/api/index.ts +++ b/x-pack/plugins/case/server/routes/api/index.ts @@ -26,7 +26,6 @@ import { initGetTagsApi } from './cases/tags/get_tags'; import { RouteDeps } from './types'; import { initCaseConfigureGetActionConnector } from './cases/configure/get_connectors'; -import { initCaseConfigurePatchActionConnector } from './cases/configure/patch_connector'; import { initGetCaseConfigure } from './cases/configure/get_configure'; import { initPatchCaseConfigure } from './cases/configure/patch_configure'; import { initPostCaseConfigure } from './cases/configure/post_configure'; @@ -48,7 +47,6 @@ export function initCaseApi(deps: RouteDeps) { initPostCommentApi(deps); // Cases Configure initCaseConfigureGetActionConnector(deps); - initCaseConfigurePatchActionConnector(deps); initGetCaseConfigure(deps); initPatchCaseConfigure(deps); initPostCaseConfigure(deps);