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 index 07126009bc319..54cbddd824a30 100644 --- 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 index c33b95350df98..9a96bda2575fd 100644 --- 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 index 7769e820d469c..3b0cd051ed4e6 100644 --- 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([]); 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) => { - setToggleCompressedIdSelected(optionId); + const onChangeOverflow = (optionId: React.SetStateAction) => { + setToggleOverflowIdSelected(optionId); }; const isEditingExisting = initialLinks || isByReference; @@ -213,9 +213,9 @@ const LinksEditor = ({ onChangeCompressed(id)} + options={toggleButtonsOverflow} + idSelected={toggleOverflowIdSelected} + onChange={(id) => onChangeOverflow(id)} buttonSize="compressed" /> @@ -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 index a0e495c32dc48..682ef682ab3c8 100644 --- 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 index df3eb7fc2b514..2662d6cafcf30 100644 --- 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 index ab106e1138dd0..182a67b3f3d2d 100644 --- 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/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_options.tsx b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_options.tsx index edd5ac695f8d7..faff3d4557b1e 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_options.tsx +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/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) => { - setToggleCompressedIdSelected(optionId); - }; return ( <> @@ -73,16 +55,6 @@ export const UrlDrilldownOptionsComponent = ({ onChange={() => onOptionChange({ encodeUrl: !options.encodeUrl })} data-test-subj="urlDrilldownEncodeUrl" /> - - - onChangeCompressed(id)} - buttonSize="compressed" - /> -