[SIEM][CASE] Configuration page action bar (#60608)
* Add bottom bar * Add listeners
This commit is contained in:
parent
ee6bb64f13
commit
6ed2918b6c
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue