Do not completely hide the move button, prevent ui from jumping

elastic · Jul 6, 2020 · 41aadce · 41aadce
1 parent f30529b
commit 41aadce
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 18 deletions.
diff --git a/...rs_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.scss b/...rs_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.scss
@@ -3,6 +3,7 @@
 .pipelineProcessorsEditor__item {
   transition: border-color 1s;
   min-height: 50px;
+
   &--selected {
     border: 1px solid $euiColorPrimary;
   }

diff --git a/...ors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx b/...ors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
@@ -82,6 +82,30 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
       'pipelineProcessorsEditor__item--displayNone': !isMovingThisProcessor,
     });
 
+    const moveButtonClasses = classNames({
+      'pipelineProcessorsEditor__item--displayNone': isMovingThisProcessor,
+    });
+
+    const moveButton = (
+      <EuiButtonIcon
+        data-test-subj="moveItemButton"
+        size="s"
+        disabled={isDisabled}
+        aria-label={i18nTexts.moveButtonLabel}
+        onClick={onMove}
+        iconType="sortable"
+      />
+    );
+
+    // Remove the tooltip from the DOM to prevent it from lingering if the mouse leave event
+    // did not fire.
+    const renderMoveButton = () =>
+      !isInMoveMode ? (
+        <EuiToolTip content={i18nTexts.moveButtonLabel}>{moveButton}</EuiToolTip>
+      ) : (
+        moveButton
+      );
+
     return (
       <EuiPanel className={panelClasses} paddingSize="s">
         <EuiFlexGroup
@@ -93,19 +117,17 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
         >
           <EuiFlexItem>
             <EuiFlexGroup gutterSize="m" alignItems="center" responsive={false}>
-              <EuiFlexItem className={actionElementClasses} grow={false}>
-                {!isInMoveMode && (
-                  <EuiToolTip content={i18nTexts.moveButtonLabel}>
-                    <EuiButtonIcon
-                      data-test-subj="moveItemButton"
-                      size="s"
-                      disabled={isDisabled}
-                      aria-label={i18nTexts.moveButtonLabel}
-                      onClick={onMove}
-                      iconType="sortable"
-                    />
-                  </EuiToolTip>
-                )}
+              <EuiFlexItem grow={false} className={moveButtonClasses}>
+                {renderMoveButton()}
+              </EuiFlexItem>
+              <EuiFlexItem grow={false} className={cancelMoveButtonClasses}>
+                <EuiButtonIcon
+                  iconType="crossInACircleFilled"
+                  data-test-subj="cancelMoveItemButton"
+                  size="s"
+                  onClick={onCancelMove}
+                  aria-label={i18nTexts.cancelMoveButtonLabel}
+                />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiText
@@ -145,11 +167,6 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
                   placeholder={i18nTexts.descriptionPlaceholder}
                 />
               </EuiFlexItem>
-              <EuiFlexItem grow={false} className={cancelMoveButtonClasses}>
-                <EuiButton data-test-subj="cancelMoveItemButton" size="s" onClick={onCancelMove}>
-                  {i18nTexts.cancelMoveButtonLabel}
-                </EuiButton>
-              </EuiFlexItem>
               <EuiFlexItem className={actionElementClasses} grow={false}>
                 {!isInMoveMode && (
                   <EuiToolTip content={i18nTexts.editButtonLabel}>