[ES|QL] Add line breaks redesign (elastic#173596)

## Summary Part of elastic#171831 Replaces the single boolean button with two ever-present buttons that allow the user to "Add line breaks on pipes" and "Remove line breaks on pipes" <img width="435" alt="image" src="https://github.com/elastic/kibana/assets/17003240/a7042e15-f5b4-4a24-aa68-a7b7ca980895"> ### Note I had to use the TooltipWrapper and realized we are using this in many places and every time we are duplicating the code. I moved it to visualization-utils and changed the occurences. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
tonyghiani · Dec 21, 2023 · b40b566 · b40b566
1 parent 1f3d3ea
commit b40b566
Show file tree

Hide file tree

Showing 27 changed files with 95 additions and 148 deletions.
diff --git a/...s/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_extra_actions.tsx b/...s/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_extra_actions.tsx
@@ -8,11 +8,11 @@
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { TooltipWrapper } from '@kbn/visualization-utils';
 import React, { useCallback, Dispatch, useContext } from 'react';
 import { EuiFlexGroup, EuiButtonEmpty, EuiFlexItem } from '@elastic/eui';
 
 import { DistributeEquallyIcon } from '../assets/distribute_equally';
-import { TooltipWrapper } from '../tooltip_wrapper';
 
 import type { ColorRangesActions } from './types';
 import { ColorRangesContext } from './color_ranges_context';

diff --git a/...es/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item_buttons.tsx b/...es/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item_buttons.tsx
@@ -10,11 +10,11 @@ import React, { Dispatch, useCallback, useContext } from 'react';
 import { i18n } from '@kbn/i18n';
 
 import { EuiButtonIcon, EuiIconProps } from '@elastic/eui';
+import { TooltipWrapper } from '@kbn/visualization-utils';
 
 import type { PaletteContinuity, CustomPaletteParams } from '../../../palettes';
 
 import { isLastItem } from './utils';
-import { TooltipWrapper } from '../tooltip_wrapper';
 
 import type { ColorRangesActions, ColorRange, ColorRangeAccessor } from './types';
 import { ColorRangesContext } from './color_ranges_context';

diff --git a/packages/kbn-coloring/tsconfig.json b/packages/kbn-coloring/tsconfig.json
@@ -22,6 +22,7 @@
     "@kbn/test-jest-helpers",
     "@kbn/data-plugin",
     "@kbn/ui-theme",
+    "@kbn/visualization-utils",
   ],
   "exclude": [
     "target/**/*",

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
@@ -22,6 +22,7 @@ import { getAggregateQueryMode, getLanguageDisplayName } from '@kbn/es-query';
 import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import type { ExpressionsStart } from '@kbn/expressions-plugin/public';
 import type { IndexManagementPluginSetup } from '@kbn/index-management-plugin/public';
+import { TooltipWrapper } from '@kbn/visualization-utils';
 import {
   type LanguageDocumentationSections,
   LanguageDocumentationPopover,
@@ -172,7 +173,6 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
   const [showLineNumbers, setShowLineNumbers] = useState(isCodeEditorExpanded);
   const [isCompactFocused, setIsCompactFocused] = useState(isCodeEditorExpanded);
   const [isCodeEditorExpandedFocused, setIsCodeEditorExpandedFocused] = useState(false);
-  const [isWordWrapped, setIsWordWrapped] = useState(false);
 
   const [editorMessages, setEditorMessages] = useState<{
     errors: MonacoMessage[];
@@ -478,15 +478,14 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
     }
   }, [calculateVisibleCode, code, isCompactFocused, queryString]);
 
-  useEffect(() => {
-    if (isCodeEditorExpanded && !isWordWrapped) {
-      const pipes = code?.split('|');
-      const pipesWithNewLine = code?.split('\n|');
-      if (pipes?.length === pipesWithNewLine?.length) {
-        setIsWordWrapped(true);
-      }
-    }
-  }, [code, isCodeEditorExpanded, isWordWrapped]);
+  const linesBreaksButtonsStatus = useMemo(() => {
+    const pipes = code?.split('|');
+    const pipesWithNewLine = code?.split('\n|');
+    return {
+      addLineBreaksDisabled: pipes?.length === pipesWithNewLine?.length,
+      removeLineBreaksDisabled: pipesWithNewLine?.length === 1,
+    };
+  }, [code]);
 
   const onResize = ({ width }: { width: number }) => {
     setIsSpaceReduced(Boolean(editorIsInline && width < BREAKPOINT_WIDTH));
@@ -499,7 +498,6 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
   const onQueryUpdate = useCallback(
     (value: string) => {
       setCode(value);
-      setIsWordWrapped(false);
       onTextLangQueryChange({ [language]: value } as AggregateQuery);
     },
     [language, onTextLangQueryChange]
@@ -561,58 +559,72 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
           responsive={false}
         >
           <EuiFlexItem grow={false}>
-            <EuiToolTip
-              position="top"
-              content={
-                isWordWrapped
-                  ? i18n.translate(
-                      'textBasedEditor.query.textBasedLanguagesEditor.disableWordWrapLabel',
+            <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}
+                >
+                  <EuiButtonIcon
+                    iconType="pipeBreaks"
+                    color="text"
+                    size="s"
+                    data-test-subj="TextBasedLangEditor-toggleWordWrap"
+                    aria-label={i18n.translate(
+                      'textBasedEditor.query.textBasedLanguagesEditor.EnableWordWrapLabel',
                       {
-                        defaultMessage: 'Disable wrap with pipes',
+                        defaultMessage: 'Add line breaks on pipes',
                       }
-                    )
-                  : i18n.translate(
-                      'textBasedEditor.query.textBasedLanguagesEditor.EnableWordWrapLabel',
+                    )}
+                    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',
+                    }
+                  )}
+                  condition={!linesBreaksButtonsStatus.removeLineBreaksDisabled}
+                >
+                  <EuiButtonIcon
+                    iconType="pipeNoBreaks"
+                    color="text"
+                    size="s"
+                    data-test-subj="TextBasedLangEditor-toggleWordWrap"
+                    aria-label={i18n.translate(
+                      'textBasedEditor.query.textBasedLanguagesEditor.disableWordWrapLabel',
                       {
-                        defaultMessage: 'Wrap with pipes',
+                        defaultMessage: 'Remove line breaks on pipes',
                       }
-                    )
-              }
-            >
-              <EuiButtonIcon
-                iconType={isWordWrapped ? 'wordWrap' : 'wordWrapDisabled'}
-                color="text"
-                size="s"
-                data-test-subj="TextBasedLangEditor-toggleWordWrap"
-                aria-label={
-                  isWordWrapped
-                    ? i18n.translate(
-                        'textBasedEditor.query.textBasedLanguagesEditor.disableWordWrapLabel',
-                        {
-                          defaultMessage: 'Disable wrap with pipes',
-                        }
-                      )
-                    : i18n.translate(
-                        'textBasedEditor.query.textBasedLanguagesEditor.EnableWordWrapLabel',
-                        {
-                          defaultMessage: 'Wrap with pipes',
-                        }
-                      )
-                }
-                isSelected={!isWordWrapped}
-                onClick={() => {
-                  editor1.current?.updateOptions({
-                    wordWrap: isWordWrapped ? 'off' : 'on',
-                  });
-                  setIsWordWrapped(!isWordWrapped);
-                  const updatedCode = getWrappedInPipesCode(code, isWordWrapped);
-                  if (code !== updatedCode) {
-                    setCode(updatedCode);
-                    onTextLangQueryChange({ [language]: updatedCode } as AggregateQuery);
-                  }
-                }}
-              />
-            </EuiToolTip>
+                    )}
+                    isDisabled={linesBreaksButtonsStatus.removeLineBreaksDisabled}
+                    onClick={() => {
+                      const updatedCode = getWrappedInPipesCode(code, true);
+                      if (code !== updatedCode) {
+                        setCode(updatedCode);
+                        onTextLangQueryChange({ [language]: updatedCode } as AggregateQuery);
+                      }
+                    }}
+                  />
+                </TooltipWrapper>
+              </EuiFlexItem>
+            </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiFlexGroup responsive={false} gutterSize="none" alignItems="center">

diff --git a/packages/kbn-text-based-editor/tsconfig.json b/packages/kbn-text-based-editor/tsconfig.json
@@ -23,7 +23,8 @@
     "@kbn/data-plugin",
     "@kbn/expressions-plugin",
     "@kbn/data-views-plugin",
-    "@kbn/index-management-plugin"
+    "@kbn/index-management-plugin",
+    "@kbn/visualization-utils"
   ],
   "exclude": [
     "target/**/*",

diff --git a/packages/kbn-visualization-ui-components/components/color_picker.tsx b/packages/kbn-visualization-ui-components/components/color_picker.tsx
@@ -8,6 +8,7 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import { i18n } from '@kbn/i18n';
+import { TooltipWrapper } from '@kbn/visualization-utils';
 import {
   EuiFormRow,
   EuiColorPicker,
@@ -17,7 +18,6 @@ import {
   euiPaletteColorBlind,
 } from '@elastic/eui';
 import { getColorAlpha, makeColorWithAlpha } from '@kbn/coloring';
-import { TooltipWrapper } from './tooltip_wrapper';
 
 const tooltipContent = {
   auto: i18n.translate('visualizationUiComponents.colorPicker.tooltip.auto', {

diff --git a/.../kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx b/.../kbn-visualization-ui-components/components/drag_drop_bucket/default_bucket_container.tsx
@@ -16,7 +16,7 @@ import {
   EuiPanel,
   useEuiTheme,
 } from '@elastic/eui';
-import { TooltipWrapper } from '../tooltip_wrapper';
+import { TooltipWrapper } from '@kbn/visualization-utils';
 import type { BucketContainerProps } from './types';
 
 export const DefaultBucketContainer = ({

diff --git a/...s/kbn-visualization-ui-components/components/drag_drop_bucket/fields_bucket_container.tsx b/...s/kbn-visualization-ui-components/components/drag_drop_bucket/fields_bucket_container.tsx
@@ -16,7 +16,7 @@ import {
   EuiPanel,
   useEuiTheme,
 } from '@elastic/eui';
-import { TooltipWrapper } from '../tooltip_wrapper';
+import { TooltipWrapper } from '@kbn/visualization-utils';
 import type { BucketContainerProps } from './types';
 
 export const FieldsBucketContainer = ({

diff --git a/packages/kbn-visualization-ui-components/components/index.ts b/packages/kbn-visualization-ui-components/components/index.ts
@@ -14,8 +14,6 @@ export * from './debounced_input';
 
 export * from './debounced_value';
 
-export * from './tooltip_wrapper';
-
 export * from './color_picker';
 
 export * from './icon_select';

diff --git a/packages/kbn-visualization-ui-components/index.ts b/packages/kbn-visualization-ui-components/index.ts
@@ -11,7 +11,6 @@ export {
   NameInput,
   DebouncedInput,
   useDebouncedValue,
-  TooltipWrapper,
   ColorPicker,
   IconSelect,
   IconSelectSetting,

diff --git a/packages/kbn-visualization-ui-components/tsconfig.json b/packages/kbn-visualization-ui-components/tsconfig.json
@@ -31,6 +31,7 @@
     "@kbn/coloring",
     "@kbn/field-formats-plugin",
     "@kbn/field-utils",
-    "@kbn/calculate-width-from-char-count"
+    "@kbn/calculate-width-from-char-count",
+    "@kbn/visualization-utils"
   ],
 }
diff --git a/packages/kbn-visualization-utils/index.ts b/packages/kbn-visualization-utils/index.ts
@@ -7,3 +7,4 @@
  */
 
 export { getTimeZone } from './src/get_timezone';
+export { TooltipWrapper } from './src/tooltip_wrapper';
diff --git a/...components/components/tooltip_wrapper.tsx → ...sualization-utils/src/tooltip_wrapper.tsx b/...components/components/tooltip_wrapper.tsx → ...sualization-utils/src/tooltip_wrapper.tsx
diff --git a/x-pack/packages/kbn-random-sampling/src/ui/slider_control/index.tsx b/x-pack/packages/kbn-random-sampling/src/ui/slider_control/index.tsx
@@ -8,7 +8,7 @@
 import { EuiFlexGroup, EuiFlexItem, EuiRange, EuiText, useEuiTheme } from '@elastic/eui';
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { TooltipWrapper } from './tooltip_wrapper';
+import { TooltipWrapper } from '@kbn/visualization-utils';
 
 export interface ControlSliderProps {
   /** Allowed values to show on the Control Slider */

diff --git a/x-pack/packages/kbn-random-sampling/src/ui/slider_control/tooltip_wrapper.tsx b/x-pack/packages/kbn-random-sampling/src/ui/slider_control/tooltip_wrapper.tsx
diff --git a/x-pack/packages/kbn-random-sampling/tsconfig.json b/x-pack/packages/kbn-random-sampling/tsconfig.json
@@ -13,6 +13,7 @@
   ],
   "kbn_references": [
     "@kbn/i18n-react",
+    "@kbn/visualization-utils",
   ],
   "exclude": [
     "target/**/*",

diff --git a/x-pack/plugins/graph/public/components/search_bar.tsx b/x-pack/plugins/graph/public/components/search_bar.tsx
@@ -12,6 +12,7 @@ import { i18n } from '@kbn/i18n';
 import { connect } from 'react-redux';
 import { toElasticsearchQuery, fromKueryExpression, Query } from '@kbn/es-query';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { TooltipWrapper } from '@kbn/visualization-utils';
 import { QueryStringInput } from '@kbn/unified-search-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { IUnifiedSearchPluginServices } from '@kbn/unified-search-plugin/public/types';
@@ -27,8 +28,6 @@ import {
   selectedFieldsSelector,
 } from '../state_management';
 
-import { TooltipWrapper } from './tooltip_wrapper';
-
 export interface SearchBarProps {
   isLoading: boolean;
   urlQuery: string | null;

diff --git a/x-pack/plugins/graph/public/components/tooltip_wrapper.tsx b/x-pack/plugins/graph/public/components/tooltip_wrapper.tsx
diff --git a/x-pack/plugins/graph/tsconfig.json b/x-pack/plugins/graph/tsconfig.json
@@ -49,6 +49,7 @@
     "@kbn/content-management-utils",
     "@kbn/logging",
     "@kbn/content-management-table-list-view-common",
+    "@kbn/visualization-utils",
   ],
   "exclude": [
     "target/**/*",

diff --git a/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/date_histogram.tsx b/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/date_histogram.tsx
@@ -29,7 +29,7 @@ import {
 } from '@kbn/data-plugin/public';
 import { extendedBoundsToAst, intervalOptions } from '@kbn/data-plugin/common';
 import { buildExpressionFunction } from '@kbn/expressions-plugin/public';
-import { TooltipWrapper } from '@kbn/visualization-ui-components';
+import { TooltipWrapper } from '@kbn/visualization-utils';
 import { updateColumnParam } from '../layer_helpers';
 import { OperationDefinition, ParamEditorProps } from '.';
 import { FieldBasedIndexPatternColumn } from './column_types';