Show flyout

elastic · Mar 6, 2020 · 7e42a5d · 7e42a5d
1 parent 83523db
commit 7e42a5d
Showing 1 changed file with 35 additions and 11 deletions.
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx b/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 from 'react';
+import React, { useState } from 'react';
 import {
   EuiDescribedFormGroup,
   EuiFormRow,
@@ -18,6 +18,12 @@ 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 { useKibana } from '../../../../lib/kibana';
+
 const EuiFormRowExtended = styled(EuiFormRow)`
   .euiFormRow__labelWrapper {
     .euiFormRow__label {
@@ -27,25 +33,43 @@ const EuiFormRowExtended = styled(EuiFormRow)`
 `;
 
 const ConnectorsComponent: React.FC = () => {
+  const { http, triggers_actions_ui, notifications, application } = useKibana().services;
+  const [addFlyoutVisible, setAddFlyoutVisibility] = useState<boolean>(false);
+
   const dropDownLabel = (
     <EuiFlexGroup justifyContent="spaceBetween">
       <EuiFlexItem grow={false}>{i18n.INCIDENT_MANAGEMENT_SYSTEM_LABEL}</EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiLink>{i18n.ADD_NEW_CONNECTOR}</EuiLink>
+        <EuiLink onClick={() => setAddFlyoutVisibility(true)}>{i18n.ADD_NEW_CONNECTOR}</EuiLink>
       </EuiFlexItem>
     </EuiFlexGroup>
   );
 
   return (
-    <EuiDescribedFormGroup
-      fullWidth
-      title={<h3>{i18n.INCIDENT_MANAGEMENT_SYSTEM_TITLE}</h3>}
-      description={i18n.INCIDENT_MANAGEMENT_SYSTEM_DESC}
-    >
-      <EuiFormRowExtended fullWidth label={dropDownLabel}>
-        <ConnectorsDropdown />
-      </EuiFormRowExtended>
-    </EuiDescribedFormGroup>
+    <>
+      <EuiDescribedFormGroup
+        fullWidth
+        title={<h3>{i18n.INCIDENT_MANAGEMENT_SYSTEM_TITLE}</h3>}
+        description={i18n.INCIDENT_MANAGEMENT_SYSTEM_DESC}
+      >
+        <EuiFormRowExtended fullWidth label={dropDownLabel}>
+          <ConnectorsDropdown />
+        </EuiFormRowExtended>
+      </EuiDescribedFormGroup>
+      <ActionsConnectorsContextProvider
+        value={{
+          http,
+          actionTypeRegistry: triggers_actions_ui.actionTypeRegistry,
+          toastNotifications: notifications.toasts,
+          capabilities: application.capabilities,
+        }}
+      >
+        <ConnectorAddFlyout
+          addFlyoutVisible={addFlyoutVisible}
+          setAddFlyoutVisibility={setAddFlyoutVisibility}
+        />
+      </ActionsConnectorsContextProvider>
+    </>
   );
 };