wip

elastic · Nov 18, 2024 · 00c7384 · 00c7384
1 parent be4c8c1
commit 00c7384
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 41 deletions.
diff --git a/src/plugins/links/public/components/dashboard_link/dashboard_link_component.tsx b/src/plugins/links/public/components/dashboard_link/dashboard_link_component.tsx
@@ -171,6 +171,7 @@ export const DashboardLinkComponent = ({
         linkCurrent: link.destination === parentDashboardId,
         dashboardLinkError: Boolean(link.error),
         'dashboardLinkError--noLabel': !link.label,
+        overflowTextWrap: link.overflow === 'textWrap',
       })}
       label={linkLabel}
       external={link.options?.openInNewTab}

diff --git a/src/plugins/links/public/components/editor/links_editor.scss b/src/plugins/links/public/components/editor/links_editor.scss
@@ -78,3 +78,9 @@
 .linksDroppableLinksArea {
   margin: 0 (-$euiSizeXS);
 }
+
+// Add classname logic for the wrap text
+&.overflowTextWrap span:first-child {
+  white-space: normal !important;
+  overflow: auto !important;
+}
diff --git a/src/plugins/links/public/components/editor/links_editor.tsx b/src/plugins/links/public/components/editor/links_editor.tsx
@@ -91,20 +91,20 @@ const LinksEditor = ({
   const [isSaving, setIsSaving] = useState(false);
   const [orderedLinks, setOrderedLinks] = useState<ResolvedLink[]>([]);
   const [saveByReference, setSaveByReference] = useState(isByReference);
-  const [toggleCompressedIdSelected, setToggleCompressedIdSelected] = useState(`__1`);
-  const toggleButtonsCompressed = [
+  const [toggleOverflowIdSelected, setToggleOverflowIdSelected] = useState('textEllipsis');
+  const toggleButtonsOverflow = [
     {
-      id: `__0`,
+      id: 'textEllipsis',
       label: LinksStrings.editor.linkEditor.getOverflowEllipsis(),
     },
     {
-      id: `__1`,
+      id: 'textWrap',
       label: LinksStrings.editor.linkEditor.getOverflowTextWrap(),
     },
   ];
 
-  const onChangeCompressed = (optionId: React.SetStateAction<string>) => {
-    setToggleCompressedIdSelected(optionId);
+  const onChangeOverflow = (optionId: React.SetStateAction<string>) => {
+    setToggleOverflowIdSelected(optionId);
   };
 
   const isEditingExisting = initialLinks || isByReference;
@@ -213,9 +213,9 @@ const LinksEditor = ({
           <EuiFormRow label={LinksStrings.editor.linkEditor.getOverflowLegend()}>
             <EuiButtonGroup
               legend={LinksStrings.editor.linkEditor.getOverflowLegend()}
-              options={toggleButtonsCompressed}
-              idSelected={toggleCompressedIdSelected}
-              onChange={(id) => onChangeCompressed(id)}
+              options={toggleButtonsOverflow}
+              idSelected={toggleOverflowIdSelected}
+              onChange={(id) => onChangeOverflow(id)}
               buttonSize="compressed"
             />
           </EuiFormRow>
@@ -313,6 +313,13 @@ const LinksEditor = ({
                     disabled={hasZeroLinks}
                     data-test-subj={'links--panelEditor--saveBtn'}
                     onClick={async () => {
+                      setOrderedLinks(
+                        orderedLinks.map((link) => {
+                          return toggleOverflowIdSelected === 'textWrap'
+                            ? { ...link, overflow: 'textWrap' }
+                            : { ...link, overflow: 'ellipsis' };
+                        })
+                      );
                       if (saveByReference) {
                         setIsSaving(true);
                         onSaveToLibrary(orderedLinks, currentLayout)

diff --git a/src/plugins/links/public/components/external_link/external_link_component.tsx b/src/plugins/links/public/components/external_link/external_link_component.tsx
@@ -51,6 +51,7 @@ export const ExternalLinkComponent = ({
       external
       color="text"
       isDisabled={Boolean(link.error)}
+      className={'linksPanelLink'}
       showToolTip={Boolean(link.error)}
       toolTipProps={{
         content: link.error?.message,

diff --git a/src/plugins/links/public/types.ts b/src/plugins/links/public/types.ts
@@ -69,6 +69,7 @@ export type ResolvedLink = Link & {
   label?: string;
   description?: string;
   error?: Error;
+  overflow?: 'ellipsis' | 'textWrap';
 };
 
 export interface DashboardItem {

diff --git a/src/plugins/links/server/content_management/schema/v1/cm_services.ts b/src/plugins/links/server/content_management/schema/v1/cm_services.ts
@@ -38,8 +38,6 @@ const dashboardLinkSchema = schema.object({
         openInNewTab: schema.boolean(),
         useCurrentFilters: schema.boolean(),
         useCurrentDateRange: schema.boolean(),
-        overflowTextWrap: schema.boolean(),
-        overflowEllipsis: schema.boolean(),
       },
       { unknowns: 'forbid' }
     )

diff --git a/...rilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_options.tsx b/...rilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_options.tsx
@@ -7,16 +7,13 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useState } from 'react';
-import { EuiButtonGroup, EuiFormRow, EuiSpacer, EuiSwitch, EuiTextColor } from '@elastic/eui';
+import React from 'react';
+import { EuiFormRow, EuiSpacer, EuiSwitch, EuiTextColor } from '@elastic/eui';
 
 import {
   txtUrlTemplateEncodeDescription,
   txtUrlTemplateEncodeUrl,
   txtUrlTemplateOpenInNewTab,
-  txtUrlTemplateOverflow,
-  txtUrlTemplateOverflowEllipsis,
-  txtUrlTemplateOverflowTextWrap,
 } from './i18n';
 import { UrlDrilldownOptions } from '../../types';
 
@@ -29,21 +26,6 @@ export const UrlDrilldownOptionsComponent = ({
   options,
   onOptionChange,
 }: UrlDrilldownOptionsProps) => {
-  const [toggleCompressedIdSelected, setToggleCompressedIdSelected] = useState(`__1`);
-  const toggleButtonsCompressed = [
-    {
-      id: `__0`,
-      label: txtUrlTemplateOverflowEllipsis,
-    },
-    {
-      id: `__1`,
-      label: txtUrlTemplateOverflowTextWrap,
-    },
-  ];
-
-  const onChangeCompressed = (optionId: React.SetStateAction<string>) => {
-    setToggleCompressedIdSelected(optionId);
-  };
   return (
     <>
       <EuiFormRow>
@@ -73,16 +55,6 @@ export const UrlDrilldownOptionsComponent = ({
             onChange={() => onOptionChange({ encodeUrl: !options.encodeUrl })}
             data-test-subj="urlDrilldownEncodeUrl"
           />
-          <EuiSpacer size="s" />
-          <EuiFormRow label={txtUrlTemplateOverflow}>
-            <EuiButtonGroup
-              legend={txtUrlTemplateOverflow}
-              options={toggleButtonsCompressed}
-              idSelected={toggleCompressedIdSelected}
-              onChange={(id) => onChangeCompressed(id)}
-              buttonSize="compressed"
-            />
-          </EuiFormRow>
         </div>
       </EuiFormRow>
     </>