Add bottom bar

cnasikas · cnasikas · commit 100140cf8b21 · 2020-03-19T12:12:30.000+02:00
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, setActionBarVisisble] = useState(false);
+
   const handleShowAddFlyout = useCallback(() => setAddFlyoutVisibility(true), []);
 
   const [{ connectorId, closureType, mapping }, dispatch] = useReducer(
@@ -80,6 +92,7 @@ const ConfigureCasesComponent: React.FC = () => {
       type: 'setConnectorId',
       connectorId: newConnectorId,
     });
+    setActionBarVisisble(true);
   }, []);
 
   const setClosureType = useCallback((newClosureType: ClosureType) => {
@@ -192,37 +205,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,
