Make EditableTitleComponent more generic

elastic · Feb 17, 2020 · 41e0444 · 41e0444
1 parent 53f56d4
commit 41e0444
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 39 deletions.
diff --git a/x-pack/legacy/plugins/siem/public/components/header_page/editable_title.tsx b/x-pack/legacy/plugins/siem/public/components/header_page/editable_title.tsx
@@ -5,15 +5,35 @@
  */
 
 import React from 'react';
+import styled, { css } from 'styled-components';
 
-import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiFieldText } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFieldText,
+  EuiButtonIcon,
+} from '@elastic/eui';
+
+import { Title } from './title';
+
+const StyledEuiButtonIcon = styled(EuiButtonIcon)`
+  ${({ theme }) => css`
+    margin-left: ${theme.eui.euiSize};
+  `}
+`;
+
+StyledEuiButtonIcon.displayName = 'StyledEuiButtonIcon';
 
 interface Props {
   submitTitle: string;
   cancelTitle: string;
   isLoading: boolean;
+  onClickEditIcon: () => void;
   title: string | React.ReactNode;
-  isEditTitle?: boolean;
+  editMode: boolean;
+  editIcon?: string;
   onChange: (a: string) => void;
   onCancel: () => void;
   onSubmit: () => void;
@@ -25,25 +45,43 @@ const EditableTitleComponent: React.FC<Props> = ({
   onSubmit,
   isLoading,
   title,
+  onClickEditIcon,
   submitTitle,
   cancelTitle,
-}) => (
-  <EuiFlexGroup alignItems="center" gutterSize="m" justifyContent="spaceBetween">
-    <EuiFlexItem grow={false}>
-      <EuiFieldText onChange={e => onChange(e.target.value)} value={`${title}`} />
-    </EuiFlexItem>
-    <EuiFlexGroup gutterSize="none" responsive={false} wrap={true}>
+  editMode = false,
+  editIcon = 'pencil',
+}) => {
+  return editMode ? (
+    <EuiFlexGroup alignItems="center" gutterSize="m" justifyContent="spaceBetween">
+      <EuiFlexItem grow={false}>
+        <EuiFieldText onChange={e => onChange(e.target.value)} value={`${title}`} />
+      </EuiFlexItem>
+      <EuiFlexGroup gutterSize="none" responsive={false} wrap={true}>
+        <EuiFlexItem grow={false}>
+          <EuiButton fill isDisabled={isLoading} isLoading={isLoading} onClick={onSubmit}>
+            {submitTitle}
+          </EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty onClick={onCancel}>{cancelTitle}</EuiButtonEmpty>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiFlexItem />
+    </EuiFlexGroup>
+  ) : (
+    <EuiFlexGroup alignItems="center" gutterSize="none">
       <EuiFlexItem grow={false}>
-        <EuiButton fill isDisabled={isLoading} isLoading={isLoading} onClick={onSubmit}>
-          {submitTitle}
-        </EuiButton>
+        <Title title={title} />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiButtonEmpty onClick={onCancel}>{cancelTitle}</EuiButtonEmpty>
+        <StyledEuiButtonIcon
+          aria-label={title as string}
+          iconType={editIcon}
+          onClick={onClickEditIcon}
+        />
       </EuiFlexItem>
     </EuiFlexGroup>
-    <EuiFlexItem />
-  </EuiFlexGroup>
-);
+  );
+};
 
 export const EditableTitle = React.memo(EditableTitleComponent);
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/case_view/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/case_view/index.tsx
@@ -16,7 +16,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiLoadingSpinner,
-  EuiButtonIcon,
 } from '@elastic/eui';
 
 import styled, { css } from 'styled-components';
@@ -26,7 +25,6 @@ import { Case } from '../../../../containers/case/types';
 import { FormattedRelativePreferenceDate } from '../../../../components/formatted_date';
 import { getCaseUrl } from '../../../../components/link_to';
 import { HeaderPage } from '../../../../components/header_page';
-import { Title } from '../../../../components/header_page/title';
 import { EditableTitle } from '../../../../components/header_page/editable_title';
 import { Markdown } from '../../../../components/markdown';
 import { PropertyActions } from '../property_actions';
@@ -62,14 +60,6 @@ const BackgroundWrapper = styled.div`
   `}
 `;
 
-const StyledEuiButtonIcon = styled(EuiButtonIcon)`
-  ${({ theme }) => css`
-    margin-left: ${theme.eui.euiSize};
-  `}
-`;
-
-StyledEuiButtonIcon.displayName = 'StyledEuiButtonIcon';
-
 interface CasesProps {
   caseId: string;
   initialData: Case;
@@ -223,29 +213,18 @@ export const Cases = React.memo<CasesProps>(({ caseId, initialData, isLoading })
     },
   ];
 
-  const titleNode = isEditTitle ? (
+  const titleNode = (
     <EditableTitle
       isLoading={isLoading}
       title={title}
+      onClickEditIcon={() => setIsEditTitle(true)}
       onChange={newTitle => setTitle(newTitle)}
       onSubmit={() => onUpdateField('title', title)}
       onCancel={() => setIsEditTitle(false)}
       submitTitle={i18n.SUBMIT}
       cancelTitle={i18n.CANCEL}
+      editMode={isEditTitle}
     />
-  ) : (
-    <EuiFlexGroup alignItems="center" gutterSize="none">
-      <EuiFlexItem grow={false}>
-        <Title title={title} />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <StyledEuiButtonIcon
-          aria-label={title}
-          iconType="pencil"
-          onClick={() => setIsEditTitle(true)}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
   );
 
   return (