[ES|QL] Some UI enhancements in the editor (#184733)

## Summary Part of #184691 ```[tasklist] ### Things addressed - [x] Fix double bottom border on header - [x] Fix missing bottom border on footer/editor - [x] Reduce left and right padding on header to 4px - [x] Consolidate _Add/remove line breaks on pipes_ to a single icon (toggle between) - [x] Fix 1px gap above editor footer - [x] Changed the icon of the history component ```
elastic · Jun 7, 2024 · 28c16e7 · 28c16e7
1 parent 00153fd
commit 28c16e7
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 72 deletions.
diff --git a/packages/kbn-text-based-editor/src/query_history.tsx b/packages/kbn-text-based-editor/src/query_history.tsx
@@ -66,7 +66,7 @@ export function QueryHistoryAction({
             }
           >
             <EuiIcon
-              type="clock"
+              type="clockCounter"
               color="primary"
               size="m"
               onClick={toggleHistory}
@@ -90,7 +90,7 @@ export function QueryHistoryAction({
             css={css`
               padding-inline: 0;
             `}
-            iconType="clock"
+            iconType="clockCounter"
             data-test-subj="TextBasedLangEditor-toggle-query-history-button"
           >
             {isHistoryOpen

diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.styles.ts b/packages/kbn-text-based-editor/src/text_based_languages_editor.styles.ts
@@ -56,10 +56,12 @@ export const textBasedLanguageEditorStyles = (
       width: isCodeEditorExpanded ? '100%' : `calc(100% - ${hasReference ? 80 : 40}px)`,
       alignItems: isCompactFocused ? 'flex-start' : 'center',
       border: !isCompactFocused ? euiTheme.border.thin : 'none',
-      borderTopLeftRadius: euiTheme.border.radius.medium,
-      borderBottomLeftRadius: euiTheme.border.radius.medium,
+      borderTopLeftRadius: isCodeEditorExpanded ? 0 : euiTheme.border.radius.medium,
+      borderBottomLeftRadius: isCodeEditorExpanded ? 0 : euiTheme.border.radius.medium,
       borderBottomWidth: hasErrors ? '2px' : '1px',
       borderBottomColor: hasErrors ? euiTheme.colors.danger : euiTheme.colors.lightShade,
+      borderRight: isCodeEditorExpanded ? euiTheme.border.thin : 'none',
+      ...(isCodeEditorExpanded && { overflow: 'hidden' }),
     },
     linesBadge: {
       position: 'absolute' as const,
@@ -84,15 +86,16 @@ export const textBasedLanguageEditorStyles = (
             ? `2px solid ${euiTheme.colors.danger}`
             : euiTheme.border.thin
           : `2px solid ${bottomContainerBorderColor}`,
+      borderBottom: editorIsInline ? 'none' : euiTheme.border.thin,
       backgroundColor: euiTheme.colors.lightestShade,
       paddingLeft: euiTheme.size.base,
       paddingRight: euiTheme.size.base,
       paddingTop: editorIsInline ? euiTheme.size.s : euiTheme.size.xs,
       paddingBottom: editorIsInline ? euiTheme.size.s : euiTheme.size.xs,
-      width: 'calc(100% + 2px)',
+      width: isCodeEditorExpanded ? '100%' : 'calc(100% + 2px)',
       position: 'relative' as const,
       marginTop: 0,
-      marginLeft: 0,
+      marginLeft: isCodeEditorExpanded ? 0 : -1,
       marginBottom: 0,
       borderBottomLeftRadius: editorIsInline || historyIsOpen ? 0 : euiTheme.border.radius.medium,
       borderBottomRightRadius: editorIsInline || historyIsOpen ? 0 : euiTheme.border.radius.medium,
@@ -103,7 +106,7 @@ export const textBasedLanguageEditorStyles = (
       borderLeft: editorIsInline ? 'none' : euiTheme.border.thin,
       borderRight: editorIsInline ? 'none' : euiTheme.border.thin,
       backgroundColor: euiTheme.colors.lightestShade,
-      width: 'calc(100% + 2px)',
+      width: '100%',
       position: 'relative' as const,
       marginTop: 0,
       marginLeft: 0,
@@ -116,14 +119,15 @@ export const textBasedLanguageEditorStyles = (
       borderTopLeftRadius: editorIsInline ? 0 : euiTheme.border.radius.medium,
       borderTopRightRadius: editorIsInline ? 0 : euiTheme.border.radius.medium,
       backgroundColor: euiTheme.colors.lightestShade,
-      paddingLeft: euiTheme.size.base,
-      paddingRight: euiTheme.size.base,
+      paddingLeft: euiTheme.size.xs,
+      paddingRight: euiTheme.size.xs,
       paddingTop: showHeader ? euiTheme.size.s : euiTheme.size.xs,
       paddingBottom: showHeader ? euiTheme.size.s : euiTheme.size.xs,
-      width: 'calc(100% + 2px)',
+      width: '100%',
       position: 'relative' as const,
       marginLeft: 0,
       marginTop: editorIsInline ? 0 : euiTheme.size.s,
+      borderBottom: 'none',
     },
     dragResizeContainer: {
       width: '100%',

diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
@@ -29,7 +29,6 @@ import {
   type LanguageDocumentationSections,
 } from '@kbn/language-documentation-popover';
 import { ESQLLang, ESQL_LANG_ID, ESQL_THEME_ID, monaco, type ESQLCallbacks } from '@kbn/monaco';
-import { TooltipWrapper } from '@kbn/visualization-utils';
 import classNames from 'classnames';
 import memoize from 'lodash/memoize';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -624,13 +623,10 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
     }
   }, [isCodeEditorExpanded, queryString]);
 
-  const linesBreaksButtonsStatus = useMemo(() => {
+  const isWrappedInPipes = useMemo(() => {
     const pipes = code?.split('|');
     const pipesWithNewLine = code?.split('\n|');
-    return {
-      addLineBreaksDisabled: pipes?.length === pipesWithNewLine?.length,
-      removeLineBreaksDisabled: pipesWithNewLine?.length === 1,
-    };
+    return pipes?.length === pipesWithNewLine?.length;
   }, [code]);
 
   useEffect(() => {
@@ -698,68 +694,53 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
           <EuiFlexItem grow={false}>
             <EuiFlexGroup responsive={false} gutterSize="none" alignItems="center">
               <EuiFlexItem grow={false}>
-                <TooltipWrapper
-                  tooltipContent={i18n.translate(
-                    'textBasedEditor.query.textBasedLanguagesEditor.EnableWordWrapLabel',
-                    {
-                      defaultMessage: 'Add line breaks on pipes',
-                    }
-                  )}
-                  condition={!linesBreaksButtonsStatus.addLineBreaksDisabled}
+                <EuiToolTip
+                  position="top"
+                  content={
+                    isWrappedInPipes
+                      ? i18n.translate(
+                          'textBasedEditor.query.textBasedLanguagesEditor.disableWordWrapLabel',
+                          {
+                            defaultMessage: 'Remove line breaks on pipes',
+                          }
+                        )
+                      : i18n.translate(
+                          'textBasedEditor.query.textBasedLanguagesEditor.EnableWordWrapLabel',
+                          {
+                            defaultMessage: 'Add line breaks on pipes',
+                          }
+                        )
+                  }
                 >
                   <EuiButtonIcon
-                    iconType="pipeBreaks"
+                    iconType={isWrappedInPipes ? 'pipeNoBreaks' : 'pipeBreaks'}
                     color="text"
                     size="s"
                     data-test-subj="TextBasedLangEditor-toggleWordWrap"
-                    aria-label={i18n.translate(
-                      'textBasedEditor.query.textBasedLanguagesEditor.EnableWordWrapLabel',
-                      {
-                        defaultMessage: 'Add line breaks on pipes',
-                      }
-                    )}
-                    isDisabled={linesBreaksButtonsStatus.addLineBreaksDisabled}
-                    onClick={() => {
-                      const updatedCode = getWrappedInPipesCode(code, false);
-                      if (code !== updatedCode) {
-                        setCode(updatedCode);
-                        onTextLangQueryChange({ [language]: updatedCode } as AggregateQuery);
-                      }
-                    }}
-                  />
-                </TooltipWrapper>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <TooltipWrapper
-                  tooltipContent={i18n.translate(
-                    'textBasedEditor.query.textBasedLanguagesEditor.disableWordWrapLabel',
-                    {
-                      defaultMessage: 'Remove line breaks on pipes',
+                    aria-label={
+                      isWrappedInPipes
+                        ? i18n.translate(
+                            'textBasedEditor.query.textBasedLanguagesEditor.disableWordWrapLabel',
+                            {
+                              defaultMessage: 'Remove line breaks on pipes',
+                            }
+                          )
+                        : i18n.translate(
+                            'textBasedEditor.query.textBasedLanguagesEditor.EnableWordWrapLabel',
+                            {
+                              defaultMessage: 'Add line breaks on pipes',
+                            }
+                          )
                     }
-                  )}
-                  condition={!linesBreaksButtonsStatus.removeLineBreaksDisabled}
-                >
-                  <EuiButtonIcon
-                    iconType="pipeNoBreaks"
-                    color="text"
-                    size="s"
-                    data-test-subj="TextBasedLangEditor-toggleWordWrap"
-                    aria-label={i18n.translate(
-                      'textBasedEditor.query.textBasedLanguagesEditor.disableWordWrapLabel',
-                      {
-                        defaultMessage: 'Remove line breaks on pipes',
-                      }
-                    )}
-                    isDisabled={linesBreaksButtonsStatus.removeLineBreaksDisabled}
                     onClick={() => {
-                      const updatedCode = getWrappedInPipesCode(code, true);
+                      const updatedCode = getWrappedInPipesCode(code, isWrappedInPipes);
                       if (code !== updatedCode) {
                         setCode(updatedCode);
                         onTextLangQueryChange({ [language]: updatedCode } as AggregateQuery);
                       }
                     }}
                   />
-                </TooltipWrapper>
+                </EuiToolTip>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
@@ -824,12 +805,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
           </EuiFlexItem>
         </EuiFlexGroup>
       )}
-      <EuiFlexGroup
-        gutterSize="none"
-        responsive={false}
-        css={{ margin: '0 0 1px 0' }}
-        ref={containerRef}
-      >
+      <EuiFlexGroup gutterSize="none" responsive={false} ref={containerRef}>
         <EuiOutsideClickDetector
           onOutsideClick={() => {
             restoreInitialMode();

diff --git a/packages/kbn-text-based-editor/tsconfig.json b/packages/kbn-text-based-editor/tsconfig.json
@@ -24,7 +24,6 @@
     "@kbn/expressions-plugin",
     "@kbn/data-views-plugin",
     "@kbn/index-management",
-    "@kbn/visualization-utils",
     "@kbn/code-editor",
     "@kbn/shared-ux-markdown",
   ],