Disable edit button

elastic · Mar 17, 2020 · d7118a1 · d7118a1
1 parent 0d5a680
commit d7118a1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 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
@@ -104,6 +104,7 @@ const ConfigureCasesComponent: React.FC = () => {
 
   const reloadConnectors = useCallback(async () => refetchConnectors(), []);
   const isLoadingAny = isLoadingConnectors || persistLoading || loadingCaseConfigure;
+  const updateConnectorDisabled = isLoadingAny || !connectorIsValid || connectorId === 'none';
 
   const handleSubmit = useCallback(
     // TO DO give a warning/error to user when field are not mapped so they have chance to do it
@@ -183,6 +184,7 @@ const ConfigureCasesComponent: React.FC = () => {
       <SectionWrapper>
         <Mapping
           disabled
+          updateConnectorDisabled={updateConnectorDisabled}
           mapping={mapping}
           onChangeMapping={setMapping}
           setEditFlyoutVisibility={setEditFlyoutVisibility}

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx
@@ -5,12 +5,14 @@
  */
 
 import React, { useCallback } from 'react';
+import styled from 'styled-components';
+
 import {
   EuiDescribedFormGroup,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiLink,
   EuiFormRow,
+  EuiButtonEmpty,
 } from '@elastic/eui';
 
 import * as i18n from './translations';
@@ -20,13 +22,20 @@ import { CasesConfigurationMapping } from '../../../../containers/case/configure
 
 interface MappingProps {
   disabled: boolean;
+  updateConnectorDisabled: boolean;
   mapping: CasesConfigurationMapping[] | null;
   onChangeMapping: (newMapping: CasesConfigurationMapping[]) => void;
   setEditFlyoutVisibility: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
+const EuiButtonEmptyExtended = styled(EuiButtonEmpty)`
+  font-size: 12px;
+  height: 24px;
+`;
+
 const MappingComponent: React.FC<MappingProps> = ({
   disabled,
+  updateConnectorDisabled,
   mapping,
   onChangeMapping,
   setEditFlyoutVisibility,
@@ -42,7 +51,9 @@ const MappingComponent: React.FC<MappingProps> = ({
       <EuiFormRow fullWidth>
         <EuiFlexGroup justifyContent="flexEnd">
           <EuiFlexItem grow={false} className="euiFormLabel">
-            <EuiLink onClick={onClick}>{i18n.UPDATE_CONNECTOR}</EuiLink>
+            <EuiButtonEmptyExtended onClick={onClick} disabled={updateConnectorDisabled}>
+              {i18n.UPDATE_CONNECTOR}
+            </EuiButtonEmptyExtended>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFormRow>