From 2de2c70f75687ad7ec76e374ed1ff66381718dbb Mon Sep 17 00:00:00 2001
From: Wylie Conlon <william.conlon@elastic.co>
Date: Tue, 6 Oct 2020 11:50:44 -0400
Subject: [PATCH] [Lens] Break long titles into multiple lines (#79580)

---
 .../editor_frame/config_panel/layer_panel.scss         |  1 +
 .../dimension_panel/dimension_panel.tsx                | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
index c77db2e65ce2..54c922957d29 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
@@ -50,6 +50,7 @@
   width: 100%;
   padding: $euiSizeS;
   min-height: $euiSizeXXL - 2;
+  word-break: break-word;
 
   &:focus {
     background-color: transparent !important; // sass-lint:disable-line no-important
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx
index 12b8d91c35ad..ff6840bc16a5 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx
@@ -229,6 +229,13 @@ export function onDrop(props: DatasourceDimensionDropHandlerProps<IndexPatternPr
   return true;
 }
 
+function wrapOnDot(str?: string) {
+  // u200B is a non-width white-space character, which allows
+  // the browser to efficiently word-wrap right after the dot
+  // without us having to draw a lot of extra DOM elements, etc
+  return str ? str.replace(/\./g, '.\u200B') : '';
+}
+
 export const IndexPatternDimensionTriggerComponent = function IndexPatternDimensionTrigger(
   props: IndexPatternDimensionTriggerProps
 ) {
@@ -249,6 +256,7 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens
   if (!selectedColumn) {
     return null;
   }
+  const formattedLabel = wrapOnDot(uniqueLabel);
 
   const triggerLinkA11yText = i18n.translate('xpack.lens.configure.editConfig', {
     defaultMessage: 'Click to edit configuration or drag to move',
@@ -299,7 +307,7 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens
       aria-label={triggerLinkA11yText}
       title={triggerLinkA11yText}
     >
-      {uniqueLabel}
+      {formattedLabel}
     </EuiLink>
   );
 };