From b4ae7e01d5b57f98f1906354b31c45ba3d36664e Mon Sep 17 00:00:00 2001 From: rshen91 Date: Tue, 12 Nov 2024 10:57:58 -0700 Subject: [PATCH 01/13] initial commit --- .../dashboard_drilldown_options.tsx | 28 +++++++++++ .../dashboard_drilldown_options/types.ts | 4 ++ .../i18n/dashboard_drilldown_config.tsx | 8 +++ .../url_drilldown_collect_config/i18n.ts | 28 +++++++++++ .../url_drilldown_options.tsx | 50 +++++++++++++++++++ .../drilldowns/url_drilldown/constants.ts | 2 + .../public/drilldowns/url_drilldown/types.ts | 2 + 7 files changed, 122 insertions(+) diff --git a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx index 63ff89da2ec17..93eec859a9232 100644 --- a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx +++ b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx @@ -52,6 +52,34 @@ export const DashboardDrilldownOptionsComponent = ({ onChange={() => onOptionChange({ openInNewTab: !options.openInNewTab })} data-test-subj="dashboardDrillDownOptions--openInNewTab--checkbox" /> + + + onOptionChange({ + overflowTextWrap: !options.overflowTextWrap, + overflowEllipsis: !options.overflowEllipsis, + }) + } + data-test-subj="dashboardDrillDownOptions--overflowTextWrap--checkbox" + /> + + + onOptionChange({ + overflowEllipsis: !options.overflowEllipsis, + overflowTextWrap: !options.overflowTextWrap, + }) + } + data-test-subj="dashboardDrillDownOptions--overflowEllipsis--checkbox" + /> diff --git a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/types.ts b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/types.ts index 98e868a7269db..4c0059267f3dc 100644 --- a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/types.ts +++ b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/types.ts @@ -12,10 +12,14 @@ export type DashboardDrilldownOptions = { useCurrentFilters: boolean; useCurrentDateRange: boolean; openInNewTab: boolean; + overflowTextWrap: boolean; + overflowEllipsis: boolean; }; export const DEFAULT_DASHBOARD_DRILLDOWN_OPTIONS: DashboardDrilldownOptions = { openInNewTab: false, useCurrentDateRange: true, useCurrentFilters: true, + overflowEllipsis: false, + overflowTextWrap: true, }; diff --git a/src/plugins/presentation_util/public/i18n/dashboard_drilldown_config.tsx b/src/plugins/presentation_util/public/i18n/dashboard_drilldown_config.tsx index 81e53252bafd4..ded0d4f59faa1 100644 --- a/src/plugins/presentation_util/public/i18n/dashboard_drilldown_config.tsx +++ b/src/plugins/presentation_util/public/i18n/dashboard_drilldown_config.tsx @@ -26,5 +26,13 @@ export const dashboardDrilldownConfigStrings = { i18n.translate('presentationUtil.dashboardDrilldownConfig.components.openInNewTab', { defaultMessage: 'Open dashboard in new tab', }), + getOverflowTextWrap: () => + i18n.translate('presentationUtil.dashboardDrilldownConfig.components.overflowTextWrap', { + defaultMessage: 'Wrap text', + }), + getOverflowEllipsis: () => + i18n.translate('presentationUtil.dashboardDrilldownConfig.components.overflowEllipsis', { + defaultMessage: 'Truncate text with ellipsis', + }), }, }; diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/i18n.ts b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/i18n.ts index d357897c32395..1a5d3aaadaaaa 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/i18n.ts +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/i18n.ts @@ -83,3 +83,31 @@ export const txtUrlTemplateEncodeDescription = i18n.translate( defaultMessage: 'If enabled, URL will be escaped using percent encoding', } ); + +export const txtUrlTemplateOverflowTextWrap = i18n.translate( + 'uiActionsEnhanced.drilldowns.urlDrilldownCollectConfig.overflowTextWrap', + { + defaultMessage: 'Wrap text', + } +); + +export const txtUrlTemplateOverflowTextWrapDescription = i18n.translate( + 'uiActionsEnhanced.drilldowns.urlDrilldownCollectConfig.overflowTextWrapDescription', + { + defaultMessage: 'If enabled, text will wrap instead of being truncated', + } +); + +export const txtUrlTemplateOverflowEllipsis = i18n.translate( + 'uiActionsEnhanced.drilldowns.urlDrilldownCollectConfig.overflowEllipsis', + { + defaultMessage: 'Truncate text with ellipsis', + } +); + +export const txtUrlTemplateOverflowEllipsisDescription = i18n.translate( + 'uiActionsEnhanced.drilldowns.urlDrilldownCollectConfig.overflowEllipsisDescription', + { + defaultMessage: 'If enabled, text will be truncated with ellipsis', + } +); 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 faff3d4557b1e..3b83120316e76 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 @@ -14,6 +14,10 @@ import { txtUrlTemplateEncodeDescription, txtUrlTemplateEncodeUrl, txtUrlTemplateOpenInNewTab, + txtUrlTemplateOverflowEllipsis, + txtUrlTemplateOverflowEllipsisDescription, + txtUrlTemplateOverflowTextWrap, + txtUrlTemplateOverflowTextWrapDescription, } from './i18n'; import { UrlDrilldownOptions } from '../../types'; @@ -55,6 +59,52 @@ export const UrlDrilldownOptionsComponent = ({ onChange={() => onOptionChange({ encodeUrl: !options.encodeUrl })} data-test-subj="urlDrilldownEncodeUrl" /> + + + {txtUrlTemplateOverflowTextWrap} + + + {txtUrlTemplateOverflowTextWrapDescription} + + + } + checked={options.overflowTextWrap} + onChange={() => + onOptionChange({ + overflowTextWrap: !options.overflowTextWrap, + overflowEllipsis: !options.overflowEllipsis, + }) + } + data-test-subj="urlDrilldownOverflowTextWrap" + /> + + + {txtUrlTemplateOverflowEllipsis} + + + {txtUrlTemplateOverflowEllipsisDescription} + + + } + checked={options.overflowEllipsis} + onChange={() => + onOptionChange({ + overflowEllipsis: !options.overflowEllipsis, + overflowTextWrap: !options.overflowTextWrap, + }) + } + data-test-subj="urlDrilldownOverflowEllipsis" + /> diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts index 45ec9c27c8217..8b0e55cf18037 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts @@ -12,4 +12,6 @@ import { UrlDrilldownOptions } from './types'; export const DEFAULT_URL_DRILLDOWN_OPTIONS: UrlDrilldownOptions = { encodeUrl: true, openInNewTab: true, + overflowTextWrap: true, + overflowEllipsis: false, }; diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts index 973fcb1c8ebbf..b6dd35215d6c9 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts @@ -18,6 +18,8 @@ export type UrlDrilldownConfig = { export type UrlDrilldownOptions = { openInNewTab: boolean; encodeUrl: boolean; + overflowTextWrap: boolean; + overflowEllipsis: boolean; }; /** From b676affa0dccf2505e97ab95e82b5e80fc71f382 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Wed, 13 Nov 2024 08:14:28 -0700 Subject: [PATCH 02/13] span:first-child --- .../dashboard_link/dashboard_link_component.tsx | 11 +++++++++++ .../links/public/components/links_component.scss | 13 ++++++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) 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..302c378f4eac6 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 @@ -147,6 +147,15 @@ export const DashboardLinkComponent = ({ timeRange, ]); + const overflowStyles: React.CSSProperties = {}; + if (link.options?.overflowEllipsis) { + overflowStyles.textOverflow = 'ellipsis'; + overflowStyles.overflow = 'hidden'; + overflowStyles.whiteSpace = 'nowrap'; + } else if (link.options?.overflowTextWrap) { + overflowStyles.overflow = 'visible !important'; + overflowStyles.whiteSpace = 'normal'; + } const id = `dashboardLink--${link.id}`; return ( @@ -171,6 +180,8 @@ export const DashboardLinkComponent = ({ linkCurrent: link.destination === parentDashboardId, dashboardLinkError: Boolean(link.error), 'dashboardLinkError--noLabel': !link.label, + overflowEllipsis: link.options?.overflowEllipsis, + overflowTextWrap: link.options?.overflowTextWrap, })} label={linkLabel} external={link.options?.openInNewTab} diff --git a/src/plugins/links/public/components/links_component.scss b/src/plugins/links/public/components/links_component.scss index ecd801492b9e4..355c7f7ac594c 100644 --- a/src/plugins/links/public/components/links_component.scss +++ b/src/plugins/links/public/components/links_component.scss @@ -15,11 +15,22 @@ &.linkCurrent { border-radius: 0; - .euiListGroupItem__text { + &.euiListGroupItem__text { cursor: default; color: $euiColorPrimary; } } + + &.overflowTextWrap span:first-child { + white-space: normal !important; + overflow: auto !important; + } + + &.overflowTextEllipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } .verticalLayoutWrapper { From b6e11f25a101a5e93b889dcd1f069542caaa8fc5 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Wed, 13 Nov 2024 09:25:30 -0700 Subject: [PATCH 03/13] fix external links --- .../dashboard_link_component.tsx | 9 ------ .../external_link/external_link_component.tsx | 6 +++- .../dashboard_drilldown_options.tsx | 20 ++++++------- .../url_drilldown_options.tsx | 28 +++++++++---------- 4 files changed, 29 insertions(+), 34 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 index 302c378f4eac6..8458030f83bdf 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 @@ -147,15 +147,6 @@ export const DashboardLinkComponent = ({ timeRange, ]); - const overflowStyles: React.CSSProperties = {}; - if (link.options?.overflowEllipsis) { - overflowStyles.textOverflow = 'ellipsis'; - overflowStyles.overflow = 'hidden'; - overflowStyles.whiteSpace = 'nowrap'; - } else if (link.options?.overflowTextWrap) { - overflowStyles.overflow = 'visible !important'; - overflowStyles.whiteSpace = 'normal'; - } const id = `dashboardLink--${link.id}`; return ( 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 682ef682ab3c8..489b11bfa60fd 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 @@ -7,6 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ +import classNames from 'classnames'; import React, { useMemo } from 'react'; import { EuiListGroupItem } from '@elastic/eui'; import { METRIC_TYPE } from '@kbn/analytics'; @@ -51,7 +52,10 @@ export const ExternalLinkComponent = ({ external color="text" isDisabled={Boolean(link.error)} - className={'linksPanelLink'} + className={classNames('linksPanelLink', { + overflowEllipsis: linkOptions?.overflowEllipsis, + overflowTextWrap: linkOptions?.overflowTextWrap, + })} showToolTip={Boolean(link.error)} toolTipProps={{ content: link.error?.message, diff --git a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx index 93eec859a9232..7a23567306438 100644 --- a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx +++ b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx @@ -55,30 +55,30 @@ export const DashboardDrilldownOptionsComponent = ({ onOptionChange({ - overflowTextWrap: !options.overflowTextWrap, overflowEllipsis: !options.overflowEllipsis, + overflowTextWrap: !options.overflowTextWrap, }) } - data-test-subj="dashboardDrillDownOptions--overflowTextWrap--checkbox" + data-test-subj="dashboardDrillDownOptions--overflowEllipsis--checkbox" /> onOptionChange({ - overflowEllipsis: !options.overflowEllipsis, overflowTextWrap: !options.overflowTextWrap, + overflowEllipsis: !options.overflowEllipsis, }) } - data-test-subj="dashboardDrillDownOptions--overflowEllipsis--checkbox" + data-test-subj="dashboardDrillDownOptions--overflowTextWrap--checkbox" /> 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 3b83120316e76..8e80a96fe2511 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 @@ -62,48 +62,48 @@ export const UrlDrilldownOptionsComponent = ({ - {txtUrlTemplateOverflowTextWrap} + {txtUrlTemplateOverflowEllipsis} - {txtUrlTemplateOverflowTextWrapDescription} + {txtUrlTemplateOverflowEllipsisDescription} } - checked={options.overflowTextWrap} + checked={options.overflowEllipsis} onChange={() => onOptionChange({ - overflowTextWrap: !options.overflowTextWrap, overflowEllipsis: !options.overflowEllipsis, + overflowTextWrap: !options.overflowTextWrap, }) } - data-test-subj="urlDrilldownOverflowTextWrap" + data-test-subj="urlDrilldownOverflowEllipsis" /> - {txtUrlTemplateOverflowEllipsis} + {txtUrlTemplateOverflowTextWrap} - {txtUrlTemplateOverflowEllipsisDescription} + {txtUrlTemplateOverflowTextWrapDescription} } - checked={options.overflowEllipsis} + checked={options.overflowTextWrap} onChange={() => onOptionChange({ - overflowEllipsis: !options.overflowEllipsis, overflowTextWrap: !options.overflowTextWrap, + overflowEllipsis: !options.overflowEllipsis, }) } - data-test-subj="urlDrilldownOverflowEllipsis" + data-test-subj="urlDrilldownOverflowTextWrap" /> From 68dfef403b049c7e6f1b611d3e98cef40330d213 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Wed, 13 Nov 2024 09:26:37 -0700 Subject: [PATCH 04/13] type check --- .../url_drilldown_collect_config/test_samples/demo.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx index 247b62f081809..10d94d0e4fefd 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx @@ -16,6 +16,8 @@ export const Demo = () => { openInNewTab: false, encodeUrl: true, url: { template: '' }, + overflowEllipsis: true, + overflowTextWrap: false, }); return ( From b4d644e2ce7a8e777e5016a23770b7be771e89a5 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Wed, 13 Nov 2024 10:27:17 -0700 Subject: [PATCH 05/13] clean up --- src/plugins/links/public/components/links_component.scss | 2 ++ .../public/components/dashboard_drilldown_options/types.ts | 4 ++-- .../public/drilldowns/url_drilldown/constants.ts | 4 ++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/plugins/links/public/components/links_component.scss b/src/plugins/links/public/components/links_component.scss index 355c7f7ac594c..6dcab0bb3be04 100644 --- a/src/plugins/links/public/components/links_component.scss +++ b/src/plugins/links/public/components/links_component.scss @@ -24,6 +24,8 @@ &.overflowTextWrap span:first-child { white-space: normal !important; overflow: auto !important; + overflow-wrap: anywhere !important; + text-overflow: unset !important; } &.overflowTextEllipsis { diff --git a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/types.ts b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/types.ts index 4c0059267f3dc..2942dd7fbd1d0 100644 --- a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/types.ts +++ b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/types.ts @@ -20,6 +20,6 @@ export const DEFAULT_DASHBOARD_DRILLDOWN_OPTIONS: DashboardDrilldownOptions = { openInNewTab: false, useCurrentDateRange: true, useCurrentFilters: true, - overflowEllipsis: false, - overflowTextWrap: true, + overflowEllipsis: true, + overflowTextWrap: false, }; diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts index 8b0e55cf18037..8123d08f20bc0 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts @@ -12,6 +12,6 @@ import { UrlDrilldownOptions } from './types'; export const DEFAULT_URL_DRILLDOWN_OPTIONS: UrlDrilldownOptions = { encodeUrl: true, openInNewTab: true, - overflowTextWrap: true, - overflowEllipsis: false, + overflowTextWrap: false, + overflowEllipsis: true, }; From 775c9491fd635f81b5a6d6b186c1a6283b1d40fa Mon Sep 17 00:00:00 2001 From: rshen91 Date: Wed, 13 Nov 2024 11:04:49 -0700 Subject: [PATCH 06/13] type checks --- ...embeddable_to_dashboard_drilldown.test.tsx | 6 ++++ .../public/lib/url_drilldown.test.tsx | 30 +++++++++++++++++++ .../public/lib/url_drilldown.tsx | 2 ++ 3 files changed, 38 insertions(+) diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx index f71c955126428..159fff4c51d6b 100644 --- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx +++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx @@ -25,6 +25,8 @@ describe('.isConfigValid()', () => { useCurrentDateRange: false, useCurrentFilters: false, openInNewTab: false, + overflowEllipsis: true, + overflowTextWrap: false, }) ).toBe(false); }); @@ -36,6 +38,8 @@ describe('.isConfigValid()', () => { useCurrentDateRange: false, useCurrentFilters: false, openInNewTab: false, + overflowEllipsis: true, + overflowTextWrap: false, }) ).toBe(true); }); @@ -111,6 +115,8 @@ describe('.execute() & getHref', () => { useCurrentFilters: false, useCurrentDateRange: false, openInNewTab: false, + overflowEllipsis: true, + overflowTextWrap: false, ...config, }; diff --git a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.tsx b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.tsx index 8eefae138b6c3..66e88b24b2031 100644 --- a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.tsx +++ b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.tsx @@ -124,6 +124,8 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, + overflowEllipsis: true, + overflowTextWrap: false, }; const context: ValueClickContext = { @@ -142,6 +144,8 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, + overflowEllipsis: true, + overflowTextWrap: false, }; const context: ValueClickContext = { @@ -162,6 +166,8 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, + overflowEllipsis: true, + overflowTextWrap: false, }; const context: ValueClickContext = { @@ -183,6 +189,8 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, + overflowEllipsis: true, + overflowTextWrap: false, }; const context: ValueClickContext = { @@ -208,6 +216,8 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, + overflowEllipsis: true, + overflowTextWrap: false, }; const context: ValueClickContext = { @@ -229,6 +239,8 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, + overflowEllipsis: true, + overflowTextWrap: false, }; const context: ValueClickContext = { @@ -251,6 +263,8 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, + overflowEllipsis: true, + overflowTextWrap: false, }; const context: ValueClickContext = { @@ -280,6 +294,8 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, + overflowEllipsis: true, + overflowTextWrap: false, }; const context: ValueClickContext = { @@ -306,6 +322,8 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, + overflowEllipsis: true, + overflowTextWrap: false, }; const context: ValueClickContext = { @@ -334,6 +352,8 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, + overflowEllipsis: true, + overflowTextWrap: false, }; const context: ValueClickContext = { @@ -588,6 +608,8 @@ describe('encoding', () => { }, openInNewTab: false, encodeUrl: true, + overflowEllipsis: true, + overflowTextWrap: false, }; const url = await urlDrilldown.getHref(config, context); @@ -601,6 +623,8 @@ describe('encoding', () => { }, openInNewTab: false, encodeUrl: true, + overflowEllipsis: true, + overflowTextWrap: false, }; const url = await urlDrilldown.getHref(config, context); @@ -614,6 +638,8 @@ describe('encoding', () => { }, openInNewTab: false, encodeUrl: false, + overflowEllipsis: true, + overflowTextWrap: false, }; const url = await urlDrilldown.getHref(config, context); @@ -627,6 +653,8 @@ describe('encoding', () => { }, openInNewTab: false, encodeUrl: false, + overflowEllipsis: true, + overflowTextWrap: false, }; const url = await urlDrilldown.getHref(config, context); @@ -640,6 +668,8 @@ describe('encoding', () => { }, openInNewTab: false, encodeUrl: false, + overflowEllipsis: true, + overflowTextWrap: false, }; const url = await urlDrilldown.getHref(config, context); diff --git a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx index fed0542883611..871bbfcd7c4bd 100644 --- a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx +++ b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx @@ -165,6 +165,8 @@ export class UrlDrilldown implements Drilldown { From 765ba9f4348f1b76e875d80bde80e433a02bc009 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Wed, 13 Nov 2024 13:04:28 -0700 Subject: [PATCH 07/13] fix validation issue --- .../links/server/content_management/schema/v1/cm_services.ts | 2 ++ 1 file changed, 2 insertions(+) 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 182a67b3f3d2d..ab106e1138dd0 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,6 +38,8 @@ const dashboardLinkSchema = schema.object({ openInNewTab: schema.boolean(), useCurrentFilters: schema.boolean(), useCurrentDateRange: schema.boolean(), + overflowTextWrap: schema.boolean(), + overflowEllipsis: schema.boolean(), }, { unknowns: 'forbid' } ) From 461a43a85bc2aef8eaad04b7736a43fb55883d01 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Thu, 14 Nov 2024 14:52:46 +0000 Subject: [PATCH 08/13] [CI] Auto-commit changed files from 'make api-docs' --- oas_docs/output/kibana.serverless.yaml | 12 +++--------- oas_docs/output/kibana.yaml | 12 +++--------- 2 files changed, 6 insertions(+), 18 deletions(-) diff --git a/oas_docs/output/kibana.serverless.yaml b/oas_docs/output/kibana.serverless.yaml index 32d38c3569148..9f0c38baded7d 100644 --- a/oas_docs/output/kibana.serverless.yaml +++ b/oas_docs/output/kibana.serverless.yaml @@ -16693,14 +16693,10 @@ paths: type: object properties: active: - description: >- - When false, the enrollment API key is revoked and - cannot be used for enrolling Elastic Agents. + description: When false, the enrollment API key is revoked and cannot be used for enrolling Elastic Agents. type: boolean api_key: - description: >- - The enrollment API key (token) used for enrolling - Elastic Agents. + description: The enrollment API key (token) used for enrolling Elastic Agents. type: string api_key_id: description: The ID of the API key in the Security API. @@ -16713,9 +16709,7 @@ paths: description: The name of the enrollment API key. type: string policy_id: - description: >- - The ID of the agent policy the Elastic Agent will be - enrolled in. + description: The ID of the agent policy the Elastic Agent will be enrolled in. type: string required: - id diff --git a/oas_docs/output/kibana.yaml b/oas_docs/output/kibana.yaml index 8a3d4d3634b8d..50fd92fdc8a9c 100644 --- a/oas_docs/output/kibana.yaml +++ b/oas_docs/output/kibana.yaml @@ -19477,14 +19477,10 @@ paths: type: object properties: active: - description: >- - When false, the enrollment API key is revoked and - cannot be used for enrolling Elastic Agents. + description: When false, the enrollment API key is revoked and cannot be used for enrolling Elastic Agents. type: boolean api_key: - description: >- - The enrollment API key (token) used for enrolling - Elastic Agents. + description: The enrollment API key (token) used for enrolling Elastic Agents. type: string api_key_id: description: The ID of the API key in the Security API. @@ -19497,9 +19493,7 @@ paths: description: The name of the enrollment API key. type: string policy_id: - description: >- - The ID of the agent policy the Elastic Agent will be - enrolled in. + description: The ID of the agent policy the Elastic Agent will be enrolled in. type: string required: - id From 1ac9d8df66a704875b065eed0bbe2c5958ab80b7 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Thu, 14 Nov 2024 08:44:24 -0700 Subject: [PATCH 09/13] update toggles ui code review --- .../dashboard_drilldown_options.tsx | 56 +++++++------- .../i18n/dashboard_drilldown_config.tsx | 6 +- .../url_drilldown_collect_config/i18n.ts | 21 ++--- .../url_drilldown_options.tsx | 76 +++++++------------ 4 files changed, 66 insertions(+), 93 deletions(-) diff --git a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx index 7a23567306438..4cee045d2fb9e 100644 --- a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx +++ b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx @@ -7,8 +7,8 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import React from 'react'; -import { EuiFormRow, EuiSpacer, EuiSwitch } from '@elastic/eui'; +import React, { useState } from 'react'; +import { EuiButtonGroup, EuiFormRow, EuiSpacer, EuiSwitch } from '@elastic/eui'; import { DashboardDrilldownOptions } from './types'; import { dashboardDrilldownConfigStrings } from '../../i18n/dashboard_drilldown_config'; @@ -22,6 +22,22 @@ export const DashboardDrilldownOptionsComponent = ({ options, onOptionChange, }: DashboardDrilldownOptionsProps) => { + const [toggleCompressedIdSelected, setToggleCompressedIdSelected] = useState(`__1`); + const toggleButtonsCompressed = [ + { + id: `__0`, + label: dashboardDrilldownConfigStrings.component.getOverflowEllipsis(), + }, + { + id: `__1`, + label: dashboardDrilldownConfigStrings.component.getOverflowTextWrap(), + }, + ]; + + const onChangeCompressed = (optionId: React.SetStateAction) => { + setToggleCompressedIdSelected(optionId); + }; + return ( <> @@ -53,33 +69,15 @@ export const DashboardDrilldownOptionsComponent = ({ data-test-subj="dashboardDrillDownOptions--openInNewTab--checkbox" /> - - onOptionChange({ - overflowEllipsis: !options.overflowEllipsis, - overflowTextWrap: !options.overflowTextWrap, - }) - } - data-test-subj="dashboardDrillDownOptions--overflowEllipsis--checkbox" - /> - - - onOptionChange({ - overflowTextWrap: !options.overflowTextWrap, - overflowEllipsis: !options.overflowEllipsis, - }) - } - data-test-subj="dashboardDrillDownOptions--overflowTextWrap--checkbox" - /> + + onChangeCompressed(id)} + buttonSize="compressed" + /> + diff --git a/src/plugins/presentation_util/public/i18n/dashboard_drilldown_config.tsx b/src/plugins/presentation_util/public/i18n/dashboard_drilldown_config.tsx index ded0d4f59faa1..749a8e40d8c1a 100644 --- a/src/plugins/presentation_util/public/i18n/dashboard_drilldown_config.tsx +++ b/src/plugins/presentation_util/public/i18n/dashboard_drilldown_config.tsx @@ -26,13 +26,17 @@ export const dashboardDrilldownConfigStrings = { i18n.translate('presentationUtil.dashboardDrilldownConfig.components.openInNewTab', { defaultMessage: 'Open dashboard in new tab', }), + getOverflowLegend: () => + i18n.translate('presentationUtil.dashboardDrilldownConfig.components.overflowLegend', { + defaultMessage: 'Text Overflow', + }), getOverflowTextWrap: () => i18n.translate('presentationUtil.dashboardDrilldownConfig.components.overflowTextWrap', { defaultMessage: 'Wrap text', }), getOverflowEllipsis: () => i18n.translate('presentationUtil.dashboardDrilldownConfig.components.overflowEllipsis', { - defaultMessage: 'Truncate text with ellipsis', + defaultMessage: 'Ellipsis', }), }, }; diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/i18n.ts b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/i18n.ts index 1a5d3aaadaaaa..c4aee591ff833 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/i18n.ts +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/i18n.ts @@ -84,30 +84,23 @@ export const txtUrlTemplateEncodeDescription = i18n.translate( } ); -export const txtUrlTemplateOverflowTextWrap = i18n.translate( - 'uiActionsEnhanced.drilldowns.urlDrilldownCollectConfig.overflowTextWrap', +export const txtUrlTemplateOverflow = i18n.translate( + 'uiActionsEnhanced.drilldowns.urlDrilldownCollectConfig.overflow', { - defaultMessage: 'Wrap text', + defaultMessage: 'Text Overflow', } ); -export const txtUrlTemplateOverflowTextWrapDescription = i18n.translate( - 'uiActionsEnhanced.drilldowns.urlDrilldownCollectConfig.overflowTextWrapDescription', +export const txtUrlTemplateOverflowTextWrap = i18n.translate( + 'uiActionsEnhanced.drilldowns.urlDrilldownCollectConfig.overflowTextWrap', { - defaultMessage: 'If enabled, text will wrap instead of being truncated', + defaultMessage: 'Wrap text', } ); export const txtUrlTemplateOverflowEllipsis = i18n.translate( 'uiActionsEnhanced.drilldowns.urlDrilldownCollectConfig.overflowEllipsis', { - defaultMessage: 'Truncate text with ellipsis', - } -); - -export const txtUrlTemplateOverflowEllipsisDescription = i18n.translate( - 'uiActionsEnhanced.drilldowns.urlDrilldownCollectConfig.overflowEllipsisDescription', - { - defaultMessage: 'If enabled, text will be truncated with ellipsis', + defaultMessage: 'Ellipsis', } ); 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 8e80a96fe2511..edd5ac695f8d7 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,17 +7,16 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import React from 'react'; -import { EuiFormRow, EuiSpacer, EuiSwitch, EuiTextColor } from '@elastic/eui'; +import React, { useState } from 'react'; +import { EuiButtonGroup, EuiFormRow, EuiSpacer, EuiSwitch, EuiTextColor } from '@elastic/eui'; import { txtUrlTemplateEncodeDescription, txtUrlTemplateEncodeUrl, txtUrlTemplateOpenInNewTab, + txtUrlTemplateOverflow, txtUrlTemplateOverflowEllipsis, - txtUrlTemplateOverflowEllipsisDescription, txtUrlTemplateOverflowTextWrap, - txtUrlTemplateOverflowTextWrapDescription, } from './i18n'; import { UrlDrilldownOptions } from '../../types'; @@ -30,6 +29,21 @@ 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 ( <> @@ -60,51 +74,15 @@ export const UrlDrilldownOptionsComponent = ({ data-test-subj="urlDrilldownEncodeUrl" /> - - {txtUrlTemplateOverflowEllipsis} - - - {txtUrlTemplateOverflowEllipsisDescription} - - - } - checked={options.overflowEllipsis} - onChange={() => - onOptionChange({ - overflowEllipsis: !options.overflowEllipsis, - overflowTextWrap: !options.overflowTextWrap, - }) - } - data-test-subj="urlDrilldownOverflowEllipsis" - /> - - - {txtUrlTemplateOverflowTextWrap} - - - {txtUrlTemplateOverflowTextWrapDescription} - - - } - checked={options.overflowTextWrap} - onChange={() => - onOptionChange({ - overflowTextWrap: !options.overflowTextWrap, - overflowEllipsis: !options.overflowEllipsis, - }) - } - data-test-subj="urlDrilldownOverflowTextWrap" - /> + + onChangeCompressed(id)} + buttonSize="compressed" + /> + From f93d22a8c38ae144d301dfe5924544f4e65a812b Mon Sep 17 00:00:00 2001 From: rshen91 Date: Mon, 18 Nov 2024 09:19:29 -0700 Subject: [PATCH 10/13] partial refactor --- .../dashboard_link_component.tsx | 2 -- .../public/components/editor/links_editor.tsx | 24 +++++++++++++++ .../links/public/components/links_strings.ts | 12 ++++++++ .../dashboard_drilldown_options.tsx | 30 ++----------------- .../i18n/dashboard_drilldown_config.tsx | 12 -------- .../test_samples/demo.tsx | 2 -- .../drilldowns/url_drilldown/constants.ts | 2 -- .../public/drilldowns/url_drilldown/types.ts | 2 -- ...embeddable_to_dashboard_drilldown.test.tsx | 6 ---- .../public/lib/url_drilldown.test.tsx | 30 ------------------- .../public/lib/url_drilldown.tsx | 2 -- 11 files changed, 38 insertions(+), 86 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 index 8458030f83bdf..07126009bc319 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,8 +171,6 @@ export const DashboardLinkComponent = ({ linkCurrent: link.destination === parentDashboardId, dashboardLinkError: Boolean(link.error), 'dashboardLinkError--noLabel': !link.label, - overflowEllipsis: link.options?.overflowEllipsis, - overflowTextWrap: link.options?.overflowTextWrap, })} label={linkLabel} external={link.options?.openInNewTab} diff --git a/src/plugins/links/public/components/editor/links_editor.tsx b/src/plugins/links/public/components/editor/links_editor.tsx index 8fa33fd4ebcaa..7769e820d469c 100644 --- a/src/plugins/links/public/components/editor/links_editor.tsx +++ b/src/plugins/links/public/components/editor/links_editor.tsx @@ -91,6 +91,21 @@ const LinksEditor = ({ const [isSaving, setIsSaving] = useState(false); const [orderedLinks, setOrderedLinks] = useState([]); const [saveByReference, setSaveByReference] = useState(isByReference); + const [toggleCompressedIdSelected, setToggleCompressedIdSelected] = useState(`__1`); + const toggleButtonsCompressed = [ + { + id: `__0`, + label: LinksStrings.editor.linkEditor.getOverflowEllipsis(), + }, + { + id: `__1`, + label: LinksStrings.editor.linkEditor.getOverflowTextWrap(), + }, + ]; + + const onChangeCompressed = (optionId: React.SetStateAction) => { + setToggleCompressedIdSelected(optionId); + }; const isEditingExisting = initialLinks || isByReference; @@ -195,6 +210,15 @@ const LinksEditor = ({ legend={LinksStrings.editor.panelEditor.getLayoutSettingsLegend()} /> + + onChangeCompressed(id)} + buttonSize="compressed" + /> + {/* Needs to be surrounded by a div rather than a fragment so the EuiFormRow can respond to the focus of the inner elements */} diff --git a/src/plugins/links/public/components/links_strings.ts b/src/plugins/links/public/components/links_strings.ts index 73d0eddf94b81..98191316e5dd2 100644 --- a/src/plugins/links/public/components/links_strings.ts +++ b/src/plugins/links/public/components/links_strings.ts @@ -135,6 +135,18 @@ export const LinksStrings = { i18n.translate('links.linkEditor.linkOptionsLabel', { defaultMessage: 'Options', }), + getOverflowLegend: () => + i18n.translate('links.linkEditor.overflowLegend', { + defaultMessage: 'Text Overflow', + }), + getOverflowTextWrap: () => + i18n.translate('links.linkEditor.overflowTextWrap', { + defaultMessage: 'Wrap text', + }), + getOverflowEllipsis: () => + i18n.translate('links.linkEditor.overflowEllipsis', { + defaultMessage: 'Ellipsis', + }), }, }, }; diff --git a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx index 4cee045d2fb9e..63ff89da2ec17 100644 --- a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx +++ b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx @@ -7,8 +7,8 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import React, { useState } from 'react'; -import { EuiButtonGroup, EuiFormRow, EuiSpacer, EuiSwitch } from '@elastic/eui'; +import React from 'react'; +import { EuiFormRow, EuiSpacer, EuiSwitch } from '@elastic/eui'; import { DashboardDrilldownOptions } from './types'; import { dashboardDrilldownConfigStrings } from '../../i18n/dashboard_drilldown_config'; @@ -22,22 +22,6 @@ export const DashboardDrilldownOptionsComponent = ({ options, onOptionChange, }: DashboardDrilldownOptionsProps) => { - const [toggleCompressedIdSelected, setToggleCompressedIdSelected] = useState(`__1`); - const toggleButtonsCompressed = [ - { - id: `__0`, - label: dashboardDrilldownConfigStrings.component.getOverflowEllipsis(), - }, - { - id: `__1`, - label: dashboardDrilldownConfigStrings.component.getOverflowTextWrap(), - }, - ]; - - const onChangeCompressed = (optionId: React.SetStateAction) => { - setToggleCompressedIdSelected(optionId); - }; - return ( <> @@ -68,16 +52,6 @@ export const DashboardDrilldownOptionsComponent = ({ onChange={() => onOptionChange({ openInNewTab: !options.openInNewTab })} data-test-subj="dashboardDrillDownOptions--openInNewTab--checkbox" /> - - - onChangeCompressed(id)} - buttonSize="compressed" - /> - diff --git a/src/plugins/presentation_util/public/i18n/dashboard_drilldown_config.tsx b/src/plugins/presentation_util/public/i18n/dashboard_drilldown_config.tsx index 749a8e40d8c1a..81e53252bafd4 100644 --- a/src/plugins/presentation_util/public/i18n/dashboard_drilldown_config.tsx +++ b/src/plugins/presentation_util/public/i18n/dashboard_drilldown_config.tsx @@ -26,17 +26,5 @@ export const dashboardDrilldownConfigStrings = { i18n.translate('presentationUtil.dashboardDrilldownConfig.components.openInNewTab', { defaultMessage: 'Open dashboard in new tab', }), - getOverflowLegend: () => - i18n.translate('presentationUtil.dashboardDrilldownConfig.components.overflowLegend', { - defaultMessage: 'Text Overflow', - }), - getOverflowTextWrap: () => - i18n.translate('presentationUtil.dashboardDrilldownConfig.components.overflowTextWrap', { - defaultMessage: 'Wrap text', - }), - getOverflowEllipsis: () => - i18n.translate('presentationUtil.dashboardDrilldownConfig.components.overflowEllipsis', { - defaultMessage: 'Ellipsis', - }), }, }; diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx index 10d94d0e4fefd..247b62f081809 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx @@ -16,8 +16,6 @@ export const Demo = () => { openInNewTab: false, encodeUrl: true, url: { template: '' }, - overflowEllipsis: true, - overflowTextWrap: false, }); return ( diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts index 8123d08f20bc0..45ec9c27c8217 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts @@ -12,6 +12,4 @@ import { UrlDrilldownOptions } from './types'; export const DEFAULT_URL_DRILLDOWN_OPTIONS: UrlDrilldownOptions = { encodeUrl: true, openInNewTab: true, - overflowTextWrap: false, - overflowEllipsis: true, }; diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts index b6dd35215d6c9..973fcb1c8ebbf 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts @@ -18,8 +18,6 @@ export type UrlDrilldownConfig = { export type UrlDrilldownOptions = { openInNewTab: boolean; encodeUrl: boolean; - overflowTextWrap: boolean; - overflowEllipsis: boolean; }; /** diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx index 159fff4c51d6b..f71c955126428 100644 --- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx +++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx @@ -25,8 +25,6 @@ describe('.isConfigValid()', () => { useCurrentDateRange: false, useCurrentFilters: false, openInNewTab: false, - overflowEllipsis: true, - overflowTextWrap: false, }) ).toBe(false); }); @@ -38,8 +36,6 @@ describe('.isConfigValid()', () => { useCurrentDateRange: false, useCurrentFilters: false, openInNewTab: false, - overflowEllipsis: true, - overflowTextWrap: false, }) ).toBe(true); }); @@ -115,8 +111,6 @@ describe('.execute() & getHref', () => { useCurrentFilters: false, useCurrentDateRange: false, openInNewTab: false, - overflowEllipsis: true, - overflowTextWrap: false, ...config, }; diff --git a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.tsx b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.tsx index 66e88b24b2031..8eefae138b6c3 100644 --- a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.tsx +++ b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.tsx @@ -124,8 +124,6 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, - overflowEllipsis: true, - overflowTextWrap: false, }; const context: ValueClickContext = { @@ -144,8 +142,6 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, - overflowEllipsis: true, - overflowTextWrap: false, }; const context: ValueClickContext = { @@ -166,8 +162,6 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, - overflowEllipsis: true, - overflowTextWrap: false, }; const context: ValueClickContext = { @@ -189,8 +183,6 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, - overflowEllipsis: true, - overflowTextWrap: false, }; const context: ValueClickContext = { @@ -216,8 +208,6 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, - overflowEllipsis: true, - overflowTextWrap: false, }; const context: ValueClickContext = { @@ -239,8 +229,6 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, - overflowEllipsis: true, - overflowTextWrap: false, }; const context: ValueClickContext = { @@ -263,8 +251,6 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, - overflowEllipsis: true, - overflowTextWrap: false, }; const context: ValueClickContext = { @@ -294,8 +280,6 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, - overflowEllipsis: true, - overflowTextWrap: false, }; const context: ValueClickContext = { @@ -322,8 +306,6 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, - overflowEllipsis: true, - overflowTextWrap: false, }; const context: ValueClickContext = { @@ -352,8 +334,6 @@ describe('UrlDrilldown', () => { }, openInNewTab: false, encodeUrl: true, - overflowEllipsis: true, - overflowTextWrap: false, }; const context: ValueClickContext = { @@ -608,8 +588,6 @@ describe('encoding', () => { }, openInNewTab: false, encodeUrl: true, - overflowEllipsis: true, - overflowTextWrap: false, }; const url = await urlDrilldown.getHref(config, context); @@ -623,8 +601,6 @@ describe('encoding', () => { }, openInNewTab: false, encodeUrl: true, - overflowEllipsis: true, - overflowTextWrap: false, }; const url = await urlDrilldown.getHref(config, context); @@ -638,8 +614,6 @@ describe('encoding', () => { }, openInNewTab: false, encodeUrl: false, - overflowEllipsis: true, - overflowTextWrap: false, }; const url = await urlDrilldown.getHref(config, context); @@ -653,8 +627,6 @@ describe('encoding', () => { }, openInNewTab: false, encodeUrl: false, - overflowEllipsis: true, - overflowTextWrap: false, }; const url = await urlDrilldown.getHref(config, context); @@ -668,8 +640,6 @@ describe('encoding', () => { }, openInNewTab: false, encodeUrl: false, - overflowEllipsis: true, - overflowTextWrap: false, }; const url = await urlDrilldown.getHref(config, context); diff --git a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx index 871bbfcd7c4bd..fed0542883611 100644 --- a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx +++ b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx @@ -165,8 +165,6 @@ export class UrlDrilldown implements Drilldown { From cdad4881593432b77f4164b2e582577451a8cd16 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Mon, 18 Nov 2024 10:02:41 -0700 Subject: [PATCH 11/13] type check --- .../public/components/dashboard_drilldown_options/types.ts | 4 ---- .../url_drilldown_collect_config/test_samples/demo.tsx | 2 ++ .../public/drilldowns/url_drilldown/constants.ts | 2 ++ .../public/drilldowns/url_drilldown/types.ts | 2 ++ 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/types.ts b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/types.ts index 2942dd7fbd1d0..98e868a7269db 100644 --- a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/types.ts +++ b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/types.ts @@ -12,14 +12,10 @@ export type DashboardDrilldownOptions = { useCurrentFilters: boolean; useCurrentDateRange: boolean; openInNewTab: boolean; - overflowTextWrap: boolean; - overflowEllipsis: boolean; }; export const DEFAULT_DASHBOARD_DRILLDOWN_OPTIONS: DashboardDrilldownOptions = { openInNewTab: false, useCurrentDateRange: true, useCurrentFilters: true, - overflowEllipsis: true, - overflowTextWrap: false, }; diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx index 247b62f081809..10d94d0e4fefd 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx @@ -16,6 +16,8 @@ export const Demo = () => { openInNewTab: false, encodeUrl: true, url: { template: '' }, + overflowEllipsis: true, + overflowTextWrap: false, }); return ( diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts index 45ec9c27c8217..ae4b00622ed1d 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts @@ -12,4 +12,6 @@ import { UrlDrilldownOptions } from './types'; export const DEFAULT_URL_DRILLDOWN_OPTIONS: UrlDrilldownOptions = { encodeUrl: true, openInNewTab: true, + overflowEllipsis: true, + overflowTextWrap: false, }; diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts index 973fcb1c8ebbf..e2d2ecf42108b 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts @@ -18,6 +18,8 @@ export type UrlDrilldownConfig = { export type UrlDrilldownOptions = { openInNewTab: boolean; encodeUrl: boolean; + overflowEllipsis: boolean; + overflowTextWrap: boolean; }; /** From be4c8c16112437b9556ff35a747e65246e5e659b Mon Sep 17 00:00:00 2001 From: rshen91 Date: Mon, 18 Nov 2024 13:03:09 -0700 Subject: [PATCH 12/13] types --- .../components/external_link/external_link_component.tsx | 5 ----- .../url_drilldown_collect_config/test_samples/demo.tsx | 2 -- .../public/drilldowns/url_drilldown/constants.ts | 2 -- .../public/drilldowns/url_drilldown/types.ts | 2 -- 4 files changed, 11 deletions(-) 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 489b11bfa60fd..a0e495c32dc48 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 @@ -7,7 +7,6 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import classNames from 'classnames'; import React, { useMemo } from 'react'; import { EuiListGroupItem } from '@elastic/eui'; import { METRIC_TYPE } from '@kbn/analytics'; @@ -52,10 +51,6 @@ export const ExternalLinkComponent = ({ external color="text" isDisabled={Boolean(link.error)} - className={classNames('linksPanelLink', { - overflowEllipsis: linkOptions?.overflowEllipsis, - overflowTextWrap: linkOptions?.overflowTextWrap, - })} showToolTip={Boolean(link.error)} toolTipProps={{ content: link.error?.message, diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx index 10d94d0e4fefd..247b62f081809 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/test_samples/demo.tsx @@ -16,8 +16,6 @@ export const Demo = () => { openInNewTab: false, encodeUrl: true, url: { template: '' }, - overflowEllipsis: true, - overflowTextWrap: false, }); return ( diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts index ae4b00622ed1d..45ec9c27c8217 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/constants.ts @@ -12,6 +12,4 @@ import { UrlDrilldownOptions } from './types'; export const DEFAULT_URL_DRILLDOWN_OPTIONS: UrlDrilldownOptions = { encodeUrl: true, openInNewTab: true, - overflowEllipsis: true, - overflowTextWrap: false, }; diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts index e2d2ecf42108b..973fcb1c8ebbf 100644 --- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts +++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts @@ -18,8 +18,6 @@ export type UrlDrilldownConfig = { export type UrlDrilldownOptions = { openInNewTab: boolean; encodeUrl: boolean; - overflowEllipsis: boolean; - overflowTextWrap: boolean; }; /** From 00c73842c25f0e46151f5cde9aa29c5573fc0bf0 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Mon, 18 Nov 2024 14:21:35 -0700 Subject: [PATCH 13/13] wip --- .../dashboard_link_component.tsx | 1 + .../components/editor/links_editor.scss | 6 ++++ .../public/components/editor/links_editor.tsx | 25 +++++++++------ .../external_link/external_link_component.tsx | 1 + src/plugins/links/public/types.ts | 1 + .../schema/v1/cm_services.ts | 2 -- .../url_drilldown_options.tsx | 32 ++----------------- 7 files changed, 27 insertions(+), 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 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" - /> -