[SIEM][CASE] Configuration page action bar (#60608)

* Add bottom bar * Add listeners
elastic · Mar 19, 2020 · 6ed2918 · 6ed2918
1 parent ee6bb64
commit 6ed2918
Showing 1 changed file with 62 additions and 35 deletions.
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
@@ -7,8 +7,15 @@
 import React, { useReducer, useCallback, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import { EuiFlexGroup, EuiFlexItem, EuiButton, EuiSpacer, EuiCallOut } from '@elastic/eui';
-import { noop, isEmpty } from 'lodash/fp';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiCallOut,
+  EuiBottomBar,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+import { 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';
@@ -32,6 +39,9 @@ import { Mapping } from '../configure_cases/mapping';
 import { SectionWrapper } from '../wrappers';
 import { configureCasesReducer, State } from './reducer';
 import * as i18n from './translations';
+import { getCaseUrl } from '../../../../components/link_to';
+
+const CASE_URL = getCaseUrl();
 
 const FormWrapper = styled.div`
   ${({ theme }) => css`
@@ -68,6 +78,8 @@ const ConfigureCasesComponent: React.FC = () => {
     null
   );
 
+  const [actionBarVisible, setActionBarVisible] = useState(false);
+
   const handleShowAddFlyout = useCallback(() => setAddFlyoutVisibility(true), []);
 
   const [{ connectorId, closureType, mapping }, dispatch] = useReducer(
@@ -111,11 +123,22 @@ const ConfigureCasesComponent: React.FC = () => {
   const handleSubmit = useCallback(
     // TO DO give a warning/error to user when field are not mapped so they have chance to do it
     () => {
+      setActionBarVisible(false);
       persistCaseConfigure({ connectorId, closureType });
     },
     [connectorId, closureType, mapping]
   );
 
+  const onChangeConnector = useCallback((newConnectorId: string) => {
+    setActionBarVisible(true);
+    setConnectorId(newConnectorId);
+  }, []);
+
+  const onChangeClosureType = useCallback((newClosureType: ClosureType) => {
+    setActionBarVisible(true);
+    setClosureType(newClosureType);
+  }, []);
+
   useEffect(() => {
     if (
       !isEmpty(connectors) &&
@@ -171,7 +194,7 @@ const ConfigureCasesComponent: React.FC = () => {
           connectors={connectors ?? []}
           disabled={persistLoading || isLoadingConnectors}
           isLoading={isLoadingConnectors}
-          onChangeConnector={setConnectorId}
+          onChangeConnector={onChangeConnector}
           handleShowAddFlyout={handleShowAddFlyout}
           selectedConnector={connectorId}
         />
@@ -180,7 +203,7 @@ const ConfigureCasesComponent: React.FC = () => {
         <ClosureOptions
           closureTypeSelected={closureType}
           disabled={persistLoading || isLoadingConnectors || connectorId === 'none'}
-          onChangeClosureType={setClosureType}
+          onChangeClosureType={onChangeClosureType}
         />
       </SectionWrapper>
       <SectionWrapper>
@@ -192,37 +215,41 @@ const ConfigureCasesComponent: React.FC = () => {
           setEditFlyoutVisibility={setEditFlyoutVisibility}
         />
       </SectionWrapper>
-      <SectionWrapper>
-        <EuiSpacer />
-        <EuiFlexGroup
-          alignItems="center"
-          justifyContent="flexEnd"
-          gutterSize="xs"
-          responsive={false}
-        >
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              fill={false}
-              isDisabled={isLoadingAny}
-              isLoading={persistLoading}
-              onClick={noop} // TO DO redirect to the main page of cases
-            >
-              {i18n.CANCEL}
-            </EuiButton>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              fill
-              iconType="save"
-              isDisabled={isLoadingAny}
-              isLoading={persistLoading}
-              onClick={handleSubmit}
-            >
-              {i18n.SAVE_CHANGES}
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </SectionWrapper>
+      {actionBarVisible && (
+        <EuiBottomBar>
+          <EuiFlexGroup justifyContent="flexEnd" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup gutterSize="s">
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    color="ghost"
+                    iconType="cross"
+                    isDisabled={isLoadingAny}
+                    isLoading={persistLoading}
+                    aria-label="Cancel"
+                    href={CASE_URL}
+                  >
+                    {i18n.CANCEL}
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    fill
+                    color="secondary"
+                    iconType="save"
+                    aria-label="Save"
+                    isDisabled={isLoadingAny}
+                    isLoading={persistLoading}
+                    onClick={handleSubmit}
+                  >
+                    {i18n.SAVE_CHANGES}
+                  </EuiButton>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiBottomBar>
+      )}
       <ActionsConnectorsContextProvider
         value={{
           http,