[SIEM][Case] Update connector through flyout (elastic#60307)

* Move add flyout to parent

* Disable mapping

* Show edit flyout

* Do not update connectors throught cases API

* Fix uncontrolled input error

* Disable edit button

* Add comments

* Change undefined to null

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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<CasesConnectorsFindResult> => {
   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<CasesConnectorsFindResult> => {
-  const response = await KibanaServices.get().http.fetch(
-    `${CASES_CONFIGURE_URL}/connectors/${connectorId}`,
-    {
-      method: 'PATCH',
-      body: JSON.stringify(config),
-      signal,
-    }
-  );
-
-  return response;
-};

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;
 }

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,
   };
 };

x-pack/legacy/plugins/siem/public/lib/connectors/servicenow.tsx

@@ -87,6 +87,10 @@ export function getActionType(): ActionTypeModel {
 const ServiceNowConnectorFields: React.FunctionComponent<ActionConnectorFieldsProps<
   ServiceNowActionConnector
 >> = ({ 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<ActionConnectorFieldsPr
               fullWidth
               isInvalid={isApiUrlInvalid}
               name="apiUrl"
-              value={apiUrl}
+              value={apiUrl || ''} // Needed to prevent uncontrolled input error when value is undefined
               data-test-subj="apiUrlFromInput"
               placeholder="https://<instance>.service-now.com"
               onChange={handleOnChangeActionConfig.bind(null, 'apiUrl')}
@@ -175,7 +179,7 @@ const ServiceNowConnectorFields: React.FunctionComponent<ActionConnectorFieldsPr
               fullWidth
               isInvalid={isUsernameInvalid}
               name="username"
-              value={username}
+              value={username || ''} // Needed to prevent uncontrolled input error when value is undefined
               data-test-subj="usernameFromInput"
               onChange={handleOnChangeSecretConfig.bind(null, 'username')}
               onBlur={handleOnBlurSecretConfig.bind(null, 'username')}
@@ -196,7 +200,7 @@ const ServiceNowConnectorFields: React.FunctionComponent<ActionConnectorFieldsPr
               fullWidth
               isInvalid={isPasswordInvalid}
               name="password"
-              value={password}
+              value={password || ''} // Needed to prevent uncontrolled input error when value is undefined
               data-test-subj="passwordFromInput"
               onChange={handleOnChangeSecretConfig.bind(null, 'password')}
               onBlur={handleOnBlurSecretConfig.bind(null, 'password')}

x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import {
   EuiDescribedFormGroup,
   EuiFormRow,
@@ -18,12 +18,7 @@ import styled from 'styled-components';
 import { ConnectorsDropdown } from './connectors_dropdown';
 import * as i18n from './translations';
 
-import {
-  ActionsConnectorsContextProvider,
-  ConnectorAddFlyout,
-} from '../../../../../../../../plugins/triggers_actions_ui/public';
 import { Connector } from '../../../../containers/case/configure/types';
-import { useKibana } from '../../../../lib/kibana';
 
 const EuiFormRowExtended = styled(EuiFormRow)`
   .euiFormRow__labelWrapper {
@@ -38,41 +33,26 @@ interface Props {
   disabled: boolean;
   isLoading: boolean;
   onChangeConnector: (id: string) => void;
-  refetchConnectors: () => void;
   selectedConnector: string;
+  handleShowAddFlyout: () => void;
 }
-const actionTypes = [
-  {
-    id: '.servicenow',
-    name: 'ServiceNow',
-    enabled: true,
-  },
-];
-
 const ConnectorsComponent: React.FC<Props> = ({
   connectors,
   disabled,
   isLoading,
   onChangeConnector,
-  refetchConnectors,
   selectedConnector,
+  handleShowAddFlyout,
 }) => {
-  const { http, triggers_actions_ui, notifications, application } = useKibana().services;
-  const [addFlyoutVisible, setAddFlyoutVisibility] = useState<boolean>(false);
-
-  const handleShowFlyout = useCallback(() => setAddFlyoutVisibility(true), []);
-
   const dropDownLabel = (
     <EuiFlexGroup justifyContent="spaceBetween">
       <EuiFlexItem grow={false}>{i18n.INCIDENT_MANAGEMENT_SYSTEM_LABEL}</EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiLink onClick={handleShowFlyout}>{i18n.ADD_NEW_CONNECTOR}</EuiLink>
+        <EuiLink onClick={handleShowAddFlyout}>{i18n.ADD_NEW_CONNECTOR}</EuiLink>
       </EuiFlexItem>
     </EuiFlexGroup>
   );
 
-  const reloadConnectors = useCallback(async () => refetchConnectors(), []);
-
   return (
     <>
       <EuiDescribedFormGroup
@@ -90,21 +70,6 @@ const ConnectorsComponent: React.FC<Props> = ({
           />
         </EuiFormRowExtended>
       </EuiDescribedFormGroup>
-      <ActionsConnectorsContextProvider
-        value={{
-          http,
-          actionTypeRegistry: triggers_actions_ui.actionTypeRegistry,
-          toastNotifications: notifications.toasts,
-          capabilities: application.capabilities,
-          reloadConnectors,
-        }}
-      >
-        <ConnectorAddFlyout
-          addFlyoutVisible={addFlyoutVisible}
-          setAddFlyoutVisibility={setAddFlyoutVisibility}
-          actionTypes={actionTypes}
-        />
-      </ActionsConnectorsContextProvider>
     </>
   );
 };