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; }; /**