From 634f9d02b2ec8ecd8e35c2f1811f7bf7db9ef1ec Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Fri, 12 Jun 2020 12:46:27 +0200
Subject: [PATCH] refactor processors editor item to multiple files

also refactored i18n into it's own file. would be good to come
up with a pttaern for doing this more broadly.
---
 .../context_menu.tsx                          |  84 ++++++++++
 .../messages.ts                               |  58 +++++++
 .../pipeline_processors_editor_item.tsx       | 154 ++++--------------
 .../processors_tree/components/tree_node.tsx  |  13 +-
 .../pipeline_processors_editor.container.tsx  |   2 +-
 5 files changed, 183 insertions(+), 128 deletions(-)
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx
 create mode 100644 x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts

diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx
new file mode 100644
index 0000000000000..28c156acc07ef
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx
@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FunctionComponent, useState } from 'react';
+
+import { EuiContextMenuItem, EuiContextMenuPanel, EuiPopover, EuiButtonIcon } from '@elastic/eui';
+
+import { editorItemMessages } from './messages';
+
+interface Props {
+  disabled: boolean;
+  showAddOnFailure: boolean;
+  onDuplicate: () => void;
+  onDelete: () => void;
+  onAddOnFailure: () => void;
+}
+
+export const ContextMenu: FunctionComponent<Props> = ({
+  showAddOnFailure,
+  onDuplicate,
+  onAddOnFailure,
+  onDelete,
+  disabled,
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const contextMenuItems = [
+    <EuiContextMenuItem
+      key="duplicate"
+      icon="copy"
+      onClick={() => {
+        setIsOpen(false);
+        onDuplicate();
+      }}
+    >
+      {editorItemMessages.duplicateButtonLabel}
+    </EuiContextMenuItem>,
+    showAddOnFailure ? undefined : (
+      <EuiContextMenuItem
+        key="addOnFailure"
+        icon="indexClose"
+        onClick={() => {
+          setIsOpen(false);
+          onAddOnFailure();
+        }}
+      >
+        {editorItemMessages.addOnFailureButtonLabel}
+      </EuiContextMenuItem>
+    ),
+    <EuiContextMenuItem
+      key="delete"
+      icon="trash"
+      color="danger"
+      onClick={() => {
+        setIsOpen(false);
+        onDelete();
+      }}
+    >
+      {editorItemMessages.deleteButtonLabel}
+    </EuiContextMenuItem>,
+  ].filter(Boolean) as JSX.Element[];
+
+  return (
+    <EuiPopover
+      anchorPosition="leftCenter"
+      panelPaddingSize="none"
+      isOpen={isOpen}
+      closePopover={() => setIsOpen(false)}
+      button={
+        <EuiButtonIcon
+          disabled={disabled}
+          onClick={() => setIsOpen((v) => !v)}
+          iconType="boxesHorizontal"
+          aria-label={editorItemMessages.moreButtonAriaLabel}
+        />
+      }
+    >
+      <EuiContextMenuPanel items={contextMenuItems} />;
+    </EuiPopover>
+  );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts
new file mode 100644
index 0000000000000..67dbf2708d665
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts
@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const editorItemMessages = {
+  moveButtonLabel: i18n.translate('xpack.ingestPipelines.pipelineEditor.item.moveButtonLabel', {
+    defaultMessage: 'Move this processor',
+  }),
+  editorButtonLabel: i18n.translate(
+    'xpack.ingestPipelines.pipelineEditor.item.editButtonAriaLabel',
+    {
+      defaultMessage: 'Edit this processor',
+    }
+  ),
+  duplicateButtonLabel: i18n.translate(
+    'xpack.ingestPipelines.pipelineEditor.item.moreMenu.duplicateButtonLabel',
+    {
+      defaultMessage: 'Duplicate this processor',
+    }
+  ),
+  addOnFailureButtonLabel: i18n.translate(
+    'xpack.ingestPipelines.pipelineEditor.item.moreMenu.addOnFailureHandlerButtonLabel',
+    {
+      defaultMessage: 'Add on failure handler',
+    }
+  ),
+  cancelMoveButtonLabel: i18n.translate(
+    'xpack.ingestPipelines.pipelineEditor.item.cancelMoveButtonAriaLabel',
+    {
+      defaultMessage: 'Cancel moving this processor',
+    }
+  ),
+  deleteButtonLabel: i18n.translate(
+    'xpack.ingestPipelines.pipelineEditor.item.moreMenu.deleteButtonLabel',
+    {
+      defaultMessage: 'Delete',
+    }
+  ),
+  moreButtonAriaLabel: i18n.translate(
+    'xpack.ingestPipelines.pipelineEditor.item.moreButtonAriaLabel',
+    {
+      defaultMessage: 'Show more actions for this processor',
+    }
+  ),
+  processorTypeLabel: ({ type }: { type: string }) =>
+    i18n.translate('xpack.ingestPipelines.pipelineEditor.item.textInputAriaLabel', {
+      defaultMessage: 'Provide a description for this {type} processor',
+      values: { type },
+    }),
+  descriptionPlaceholder: i18n.translate(
+    'xpack.ingestPipelines.pipelineEditor.item.descriptionPlaceholder',
+    { defaultMessage: 'No description' }
+  ),
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
index ef587c35c50da..63c6ee6fe8add 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
@@ -4,18 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { i18n } from '@kbn/i18n';
-import React, { FunctionComponent, memo, useState } from 'react';
-import {
-  EuiButtonIcon,
-  EuiContextMenuItem,
-  EuiContextMenuPanel,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPopover,
-  EuiText,
-  EuiToolTip,
-} from '@elastic/eui';
+import React, { FunctionComponent, memo } from 'react';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
 
 import { ProcessorInternal, ProcessorSelector } from '../../types';
 
@@ -24,6 +14,8 @@ import { usePipelineProcessorsContext } from '../../context';
 import './pipeline_processors_editor_item.scss';
 
 import { InlineTextInput } from './inline_text_input';
+import { ContextMenu } from './context_menu';
+import { editorItemMessages } from './messages';
 
 export interface Handlers {
   onMove: () => void;
@@ -43,61 +35,11 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
     const {
       state: { editor, processorsDispatch },
     } = usePipelineProcessorsContext();
-    const [isContextMenuOpen, setIsContextMenuOpen] = useState<boolean>(false);
 
     const disabled = editor.mode.id !== 'idle';
-    const shouldDarkBold =
-      editor.mode.id === 'editingProcessor' ? processor.id === editor.mode.arg.processor.id : true;
+    const isDarkBold =
+      editor.mode.id !== 'editingProcessor' || processor.id === editor.mode.arg.processor.id;
 
-    const contextMenuItems = [
-      <EuiContextMenuItem
-        key="duplicate"
-        icon="copy"
-        onClick={() => {
-          setIsContextMenuOpen(false);
-          processorsDispatch({
-            type: 'duplicateProcessor',
-            payload: {
-              source: selector,
-            },
-          });
-        }}
-      >
-        {i18n.translate('xpack.ingestPipelines.pipelineEditor.item.moreMenu.duplicateButtonLabel', {
-          defaultMessage: 'Duplicate this processor',
-        })}
-      </EuiContextMenuItem>,
-      processor.onFailure?.length ? undefined : (
-        <EuiContextMenuItem
-          key="addOnFailure"
-          icon="indexClose"
-          onClick={() => {
-            setIsContextMenuOpen(false);
-            editor.setMode({ id: 'creatingProcessor', arg: { selector } });
-          }}
-        >
-          {i18n.translate(
-            'xpack.ingestPipelines.pipelineEditor.item.moreMenu.addOnFailureHandlerButtonLabel',
-            {
-              defaultMessage: 'Add on failure handler',
-            }
-          )}
-        </EuiContextMenuItem>
-      ),
-      <EuiContextMenuItem
-        key="delete"
-        icon="trash"
-        color="danger"
-        onClick={() => {
-          setIsContextMenuOpen(false);
-          editor.setMode({ id: 'removingProcessor', arg: { selector } });
-        }}
-      >
-        {i18n.translate('xpack.ingestPipelines.pipelineEditor.item.moreMenu.deleteButtonLabel', {
-          defaultMessage: 'Delete',
-        })}
-      </EuiContextMenuItem>,
-    ].filter(Boolean) as JSX.Element[];
     return (
       <EuiFlexGroup
         gutterSize="none"
@@ -108,7 +50,7 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="m" alignItems="center" responsive={false}>
             <EuiFlexItem grow={false}>
-              <EuiText color={shouldDarkBold ? undefined : 'subdued'}>
+              <EuiText color={isDarkBold ? undefined : 'subdued'}>
                 <b>{processor.type}</b>
               </EuiText>
             </EuiFlexItem>
@@ -136,29 +78,15 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
                     },
                   });
                 }}
-                ariaLabel={i18n.translate(
-                  'xpack.ingestPipelines.pipelineEditor.item.textInputAriaLabel',
-                  {
-                    defaultMessage: 'Provide a description for this {type} processor',
-                    values: { type: processor.type },
-                  }
-                )}
+                ariaLabel={editorItemMessages.processorTypeLabel({ type: processor.type })}
                 text={description}
-                placeholder={i18n.translate(
-                  'xpack.ingestPipelines.pipelineEditor.item.descriptionPlaceholder',
-                  { defaultMessage: 'No description' }
-                )}
+                placeholder={editorItemMessages.descriptionPlaceholder}
               />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiButtonIcon
                 disabled={disabled}
-                aria-label={i18n.translate(
-                  'xpack.ingestPipelines.pipelineEditor.item.editButtonAriaLabel',
-                  {
-                    defaultMessage: 'Edit this processor',
-                  }
-                )}
+                aria-label={editorItemMessages.editorButtonLabel}
                 iconType="pencil"
                 size="s"
                 onClick={() => {
@@ -172,33 +100,16 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
             <EuiFlexItem grow={false}>
               {selected ? (
                 <EuiButtonIcon
-                  aria-label={i18n.translate(
-                    'xpack.ingestPipelines.pipelineEditor.item.cancelMoveButtonAriaLabel',
-                    {
-                      defaultMessage: 'Cancel moving this processor',
-                    }
-                  )}
+                  aria-label={editorItemMessages.cancelMoveButtonLabel}
                   size="s"
                   onClick={onCancelMove}
                   iconType="crossInACircleFilled"
                 />
               ) : (
-                <EuiToolTip
-                  content={i18n.translate(
-                    'xpack.ingestPipelines.pipelineEditor.item.moveButtonLabel',
-                    {
-                      defaultMessage: 'Move this processor',
-                    }
-                  )}
-                >
+                <EuiToolTip content={editorItemMessages.moveButtonLabel}>
                   <EuiButtonIcon
                     disabled={disabled}
-                    aria-label={i18n.translate(
-                      'xpack.ingestPipelines.pipelineEditor.item.moveButtonAriaLabel',
-                      {
-                        defaultMessage: 'Move this processor',
-                      }
-                    )}
+                    aria-label={editorItemMessages.moveButtonLabel}
                     size="s"
                     onClick={onMove}
                     iconType="sortable"
@@ -209,27 +120,24 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
           </EuiFlexGroup>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiPopover
-            anchorPosition="leftCenter"
-            panelPaddingSize="none"
-            isOpen={isContextMenuOpen}
-            closePopover={() => setIsContextMenuOpen(false)}
-            button={
-              <EuiButtonIcon
-                disabled={disabled}
-                onClick={() => setIsContextMenuOpen((v) => !v)}
-                iconType="boxesHorizontal"
-                aria-label={i18n.translate(
-                  'xpack.ingestPipelines.pipelineEditor.item.moreButtonAriaLabel',
-                  {
-                    defaultMessage: 'Show more actions for this processor',
-                  }
-                )}
-              />
-            }
-          >
-            <EuiContextMenuPanel items={contextMenuItems} />
-          </EuiPopover>
+          <ContextMenu
+            disabled={disabled}
+            showAddOnFailure={!processor.onFailure?.length}
+            onAddOnFailure={() => {
+              editor.setMode({ id: 'creatingProcessor', arg: { selector } });
+            }}
+            onDelete={() => {
+              editor.setMode({ id: 'removingProcessor', arg: { selector } });
+            }}
+            onDuplicate={() => {
+              processorsDispatch({
+                type: 'duplicateProcessor',
+                payload: {
+                  source: selector,
+                },
+              });
+            }}
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
     );
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx
index 41e62cd8c722f..e35dde011ce28 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx
@@ -26,6 +26,8 @@ export interface Props {
   movingProcessor?: ProcessorInfo;
 }
 
+const INDENTATION_PX = 34;
+
 export const TreeNode: FunctionComponent<Props> = ({
   processor,
   processorInfo,
@@ -55,15 +57,18 @@ export const TreeNode: FunctionComponent<Props> = ({
     if (!processor.onFailure?.length) {
       return;
     }
+
     const onFailureHandlerLabelClasses = classNames({
-      'pipelineProcessorsEditor__tree__onFailureHandlerLabel--withDropZone': movingProcessor
-        ? movingProcessor.id !== processor.onFailure[0].id && movingProcessor.id !== processor.id
-        : false,
+      'pipelineProcessorsEditor__tree__onFailureHandlerLabel--withDropZone':
+        movingProcessor != null &&
+        movingProcessor.id !== processor.onFailure[0].id &&
+        movingProcessor.id !== processor.id,
     });
+
     return (
       <div
         className="pipelineProcessorsEditor__tree__onFailureHandlerContainer"
-        style={{ marginLeft: `${level * 34}px` }}
+        style={{ marginLeft: `${level * INDENTATION_PX}px` }}
       >
         <div className="pipelineProcessorsEditor__tree__onFailureHandlerLabelContainer">
           <EuiText
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.container.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.container.tsx
index d5d85117f0928..057f8638700a4 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.container.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.container.tsx
@@ -29,7 +29,7 @@ export interface Props {
   learnMoreAboutProcessorsUrl: string;
   learnMoreAboutOnFailureProcessorsUrl: string;
   /**
-   * Give users a why to react to this component opening a flyout
+   * Give users a way to react to this component opening a flyout
    */
   onFlyoutOpen: () => void;
 }