[Ingest Pipelines Editor] First round of UX improvements

packages/kbn-monaco/src/xjson/language.ts

@@ -52,7 +52,10 @@ export const registerGrammarChecker = (editor: monaco.editor.IEditor) => {
 
   const updateAnnos = async () => {
     const { annotations } = await wps.getAnnos();
-    const model = editor.getModel() as monaco.editor.ITextModel;
+    const model = editor.getModel() as monaco.editor.ITextModel | null;
+    if (!model) {
+      return;
+    }
     monaco.editor.setModelMarkers(
       model,
       OWNER,

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx

@@ -81,6 +81,7 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
   });
 
   const onEditorFlyoutOpen = useCallback(() => {
+    setIsTestingPipeline(false);
     setIsRequestVisible(false);
   }, [setIsRequestVisible]);
 

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx

@@ -24,8 +24,15 @@ jest.mock('@elastic/eui', () => {
         }}
       />
     ),
-    // Mocking EuiCodeEditor, which uses React Ace under the hood
-    EuiCodeEditor: (props: any) => (
+  };
+});
+
+jest.mock('../../../../../../../../src/plugins/kibana_react/public', () => {
+  const original = jest.requireActual('../../../../../../../../src/plugins/kibana_react/public');
+  return {
+    ...original,
+    // Mocking CodeEditor, which uses React Monaco under the hood
+    CodeEditor: (props: any) => (
       <input
         data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
         data-currentvalue={props.value}
@@ -95,8 +102,9 @@ const createActions = (testBed: TestBed<TestSubject>) => {
       act(() => {
         find(`${processorSelector}.moveItemButton`).simulate('click');
       });
+      component.update();
       act(() => {
-        find(dropZoneSelector).last().simulate('click');
+        find(dropZoneSelector).simulate('click');
       });
       component.update();
     },
@@ -129,16 +137,6 @@ const createActions = (testBed: TestBed<TestSubject>) => {
       });
     },
 
-    startAndCancelMove(processorSelector: string) {
-      act(() => {
-        find(`${processorSelector}.moveItemButton`).simulate('click');
-      });
-      component.update();
-      act(() => {
-        find(`${processorSelector}.cancelMoveItemButton`).simulate('click');
-      });
-    },
-
     toggleOnFailure() {
       find('pipelineEditorOnFailureToggle').simulate('click');
     },

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx

@@ -155,18 +155,6 @@ describe('Pipeline Editor', () => {
       ]);
     });
 
-    it('can cancel a move', () => {
-      const { actions, exists } = testBed;
-      const processorSelector = 'processors>0';
-      actions.startAndCancelMove(processorSelector);
-      // Assert that we have exited move mode for this processor
-      expect(exists(`moveItemButton-${processorSelector}`));
-      const [onUpdateResult] = onUpdate.mock.calls[onUpdate.mock.calls.length - 1];
-      const { processors } = onUpdateResult.getData();
-      // Assert that nothing has changed
-      expect(processors).toEqual(testProcessors.processors);
-    });
-
     it('moves to and from the global on-failure tree', async () => {
       const { actions } = testBed;
       actions.toggleOnFailure();

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx

@@ -31,7 +31,7 @@ export const OnFailureProcessorsTitle: FunctionComponent = () => {
         <EuiText size="s" color="subdued">
           <FormattedMessage
             id="xpack.ingestPipelines.pipelineEditor.onFailureTreeDescription"
-            defaultMessage="The processors used to pre-process documents before indexing. {learnMoreLink}"
+            defaultMessage="The processors used to handle exceptions in this pipeline. {learnMoreLink}"
             values={{
               learnMoreLink: (
                 <EuiLink

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import classNames from 'classnames';
 import React, { FunctionComponent, useState } from 'react';
 
 import { EuiContextMenuItem, EuiContextMenuPanel, EuiPopover, EuiButtonIcon } from '@elastic/eui';
@@ -12,6 +13,7 @@ import { editorItemMessages } from './messages';
 
 interface Props {
   disabled: boolean;
+  hidden: boolean;
   showAddOnFailure: boolean;
   onDuplicate: () => void;
   onDelete: () => void;
@@ -20,9 +22,13 @@ interface Props {
 }
 
 export const ContextMenu: FunctionComponent<Props> = (props) => {
-  const { showAddOnFailure, onDuplicate, onAddOnFailure, onDelete, disabled } = props;
+  const { showAddOnFailure, onDuplicate, onAddOnFailure, onDelete, disabled, hidden } = props;
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
+  const containerClasses = classNames({
+    'pipelineProcessorsEditor__item--displayNone': hidden,
+  });
+
   const contextMenuItems = [
     <EuiContextMenuItem
       data-test-subj="duplicateButton"
@@ -63,23 +69,25 @@ export const ContextMenu: FunctionComponent<Props> = (props) => {
   ].filter(Boolean) as JSX.Element[];
 
   return (
-    <EuiPopover
-      data-test-subj={props['data-test-subj']}
-      anchorPosition="leftCenter"
-      panelPaddingSize="none"
-      isOpen={isOpen}
-      closePopover={() => setIsOpen(false)}
-      button={
-        <EuiButtonIcon
-          data-test-subj="button"
-          disabled={disabled}
-          onClick={() => setIsOpen((v) => !v)}
-          iconType="boxesHorizontal"
-          aria-label={editorItemMessages.moreButtonAriaLabel}
-        />
-      }
-    >
-      <EuiContextMenuPanel items={contextMenuItems} />
-    </EuiPopover>
+    <div className={containerClasses}>
+      <EuiPopover
+        data-test-subj={props['data-test-subj']}
+        anchorPosition="leftCenter"
+        panelPaddingSize="none"
+        isOpen={isOpen}
+        closePopover={() => setIsOpen(false)}
+        button={
+          <EuiButtonIcon
+            data-test-subj="button"
+            disabled={disabled}
+            onClick={() => setIsOpen((v) => !v)}
+            iconType="boxesHorizontal"
+            aria-label={editorItemMessages.moreButtonAriaLabel}
+          />
+        }
+      >
+        <EuiContextMenuPanel items={contextMenuItems} />
+      </EuiPopover>
+    </div>
   );
 };

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx

@@ -3,18 +3,20 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
+import classNames from 'classnames';
 import React, { FunctionComponent, useState, useEffect, useCallback } from 'react';
 import { EuiFieldText, EuiText, keyCodes } from '@elastic/eui';
 
 export interface Props {
   placeholder: string;
   ariaLabel: string;
   onChange: (value: string) => void;
+  disabled: boolean;
   text?: string;
 }
 
 export const InlineTextInput: FunctionComponent<Props> = ({
+  disabled,
   placeholder,
   text,
   ariaLabel,
@@ -23,26 +25,17 @@ export const InlineTextInput: FunctionComponent<Props> = ({
   const [isShowingTextInput, setIsShowingTextInput] = useState<boolean>(false);
   const [textValue, setTextValue] = useState<string>(text ?? '');
 
-  const content = isShowingTextInput ? (
-    <EuiFieldText
-      controlOnly
-      fullWidth
-      compressed
-      value={textValue}
-      aria-label={ariaLabel}
-      className="pipelineProcessorsEditor__item__textInput"
-      inputRef={(el) => el?.focus()}
-      onChange={(event) => setTextValue(event.target.value)}
-    />
-  ) : (
-    <EuiText size="s" color="subdued">
-      {text || <em>{placeholder}</em>}
-    </EuiText>
-  );
+  const containerClasses = classNames({
+    'pipelineProcessorsEditor__item__textContainer--notEditing': !isShowingTextInput && !disabled,
+  });
 
   const submitChange = useCallback(() => {
-    setIsShowingTextInput(false);
-    onChange(textValue);
+    // Give any on blur handlers the chance to complete if the user is
+    // tabbing over this component.
+    setTimeout(() => {
+      setIsShowingTextInput(false);
+      onChange(textValue);
+    });
   }, [setIsShowingTextInput, onChange, textValue]);
 
   useEffect(() => {
@@ -62,14 +55,31 @@ export const InlineTextInput: FunctionComponent<Props> = ({
     };
   }, [isShowingTextInput, submitChange, setIsShowingTextInput]);
 
-  return (
+  return isShowingTextInput && !disabled ? (
+    <div className={`pipelineProcessorsEditor__item__textContainer ${containerClasses}`}>
+      <EuiFieldText
+        controlOnly
+        onBlur={submitChange}
+        fullWidth
+        compressed
+        value={textValue}
+        aria-label={ariaLabel}
+        className="pipelineProcessorsEditor__item__textInput"
+        inputRef={(el) => el?.focus()}
+        onChange={(event) => setTextValue(event.target.value)}
+      />
+    </div>
+  ) : (
     <div
-      className="pipelineProcessorsEditor__item__textContainer"
+      className={`pipelineProcessorsEditor__item__textContainer ${containerClasses}`}
       tabIndex={0}
       onFocus={() => setIsShowingTextInput(true)}
-      onBlur={submitChange}
     >
-      {content}
+      <EuiText size="s" color="subdued">
+        <div className="pipelineProcessorsEditor__item__description">
+          {text || <em>{placeholder}</em>}
+        </div>
+      </EuiText>
     </div>
   );
 };

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.scss

@@ -1,17 +1,41 @@
 .pipelineProcessorsEditor__item {
+  transition: border-color 1s;
+  min-height: 50px;
+  &--selected {
+    border: 1px solid $euiColorPrimary;
+  }
+
+  &--displayNone {
+    display: none;
+  }
+
+  &--dimmed {
+    box-shadow: none;
+  }
+
   &__textContainer {
     padding: 4px;
     border-radius: 2px;
 
-    transition: border-color .3s;
-    border: 2px solid #FFF;
+    transition: border-color 0.3s;
+    border: 2px solid transparent;
 
-    &:hover {
-      border: 2px solid $euiColorLightShade;
+    &--notEditing {
+      &:hover {
+        border: 2px solid $euiColorLightShade;
+      }
     }
   }
+
+  &__description {
+    overflow-x: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 600px;
+  }
+
   &__textInput {
     height: 21px;
-    min-width: 100px;
+    min-width: 150px;
   }
 }