From 39b8a8f980231b873ae31041b707f2b29ff9f54c Mon Sep 17 00:00:00 2001 From: Elena Martynova Date: Thu, 19 Dec 2024 18:32:34 +0300 Subject: [PATCH] Add chart widget title hint (on dash) (#1951) Co-authored-by: datalens-weblate-robot Co-authored-by: Darya Tikhonova Co-authored-by: Matthew Casserly Co-authored-by: Taya Leutina --- .../dash.widget-dialog.edit/en.json | 3 +- .../dash.widget-dialog.edit/ru.json | 3 +- src/shared/types/dash.ts | 3 + .../DashKit/plugins/Widget/types.ts | 4 + .../DialogChartWidget/DialogChartWidget.scss | 8 + .../DialogChartWidget/DialogChartWidget.tsx | 138 +++++++++++++----- .../MarkdownHelpPopover.tsx | 12 +- .../components/Widgets/Chart/ChartWidget.scss | 37 +++++ .../components/Widgets/Chart/ChartWidget.tsx | 29 ++++ .../Widgets/Chart/components/WidgetFooter.tsx | 7 +- .../Chart/components/WidgetHeader.scss | 20 +++ .../Widgets/Chart/components/WidgetHeader.tsx | 35 ++++- 12 files changed, 250 insertions(+), 49 deletions(-) diff --git a/src/i18n-keysets/dash.widget-dialog.edit/en.json b/src/i18n-keysets/dash.widget-dialog.edit/en.json index 003a7b35a3..77a0cce09e 100644 --- a/src/i18n-keysets/dash.widget-dialog.edit/en.json +++ b/src/i18n-keysets/dash.widget-dialog.edit/en.json @@ -5,15 +5,16 @@ "button_params-setup": "Configure", "button_save": "Save", "context_autoheight-availability-hint": "Available only for charts with \"Table\" and \"Markdown\" types", - "context_fill-description": "Enter description", "context_fill-title": "Enter title", "context_filtering-other-charts": "This option enables you to apply filtering from this chart to other charts on the dashboard", "context_filtering-usage-limitations": "More about filtration", + "context_hint-display-info": "The hint appears in the widget title if the title is enabled", "field_autoheight": "Auto height", "field_background": "Background", "field_background-enable": "Enable", "field_description": "Description", "field_enable-filtering-other-charts": "Enable", + "field_hint": "Hint", "field_param-name": "Name", "field_param-value": "Value", "field_params": "Parameters", diff --git a/src/i18n-keysets/dash.widget-dialog.edit/ru.json b/src/i18n-keysets/dash.widget-dialog.edit/ru.json index 7456c84754..e365db968f 100644 --- a/src/i18n-keysets/dash.widget-dialog.edit/ru.json +++ b/src/i18n-keysets/dash.widget-dialog.edit/ru.json @@ -5,15 +5,16 @@ "button_params-setup": "Настроить", "button_save": "Сохранить", "context_autoheight-availability-hint": "Доступно для чартов типа \"Таблица\" и \"Markdown\"", - "context_fill-description": "Введите описание", "context_fill-title": "Введите заголовок", "context_filtering-other-charts": "Опция позволяет применить фильтрацию из этого чарта к другим чартам на дашборде", "context_filtering-usage-limitations": "Подробнее о фильтрации", + "context_hint-display-info": "Подсказка показывается в заголовке виджета, если он включён", "field_autoheight": "Автовысота", "field_background": "Фон", "field_background-enable": "Включить", "field_description": "Описание", "field_enable-filtering-other-charts": "Включить", + "field_hint": "Подсказка", "field_param-name": "Имя", "field_param-value": "Значение", "field_params": "Параметры", diff --git a/src/shared/types/dash.ts b/src/shared/types/dash.ts index a2f9d40436..72cc3539e7 100644 --- a/src/shared/types/dash.ts +++ b/src/shared/types/dash.ts @@ -163,6 +163,9 @@ export interface DashTabItemWidgetTab { id: string; title: string; description: string; + hint?: string; + enableHint?: boolean; + enableDescription?: boolean; chartId: string; isDefault: boolean; params: StringParams; diff --git a/src/ui/components/DashKit/plugins/Widget/types.ts b/src/ui/components/DashKit/plugins/Widget/types.ts index c0e2389724..6e1b6f2976 100644 --- a/src/ui/components/DashKit/plugins/Widget/types.ts +++ b/src/ui/components/DashKit/plugins/Widget/types.ts @@ -15,6 +15,10 @@ export type CurrentTab = { id: string; title: string; description: string; + displayedTitle?: string | React.ReactNode; + hint?: string; + enableHint?: boolean; + enableDescription?: boolean; chartId: string; isDefault: boolean; params: StringParams; diff --git a/src/ui/components/DialogChartWidget/DialogChartWidget.scss b/src/ui/components/DialogChartWidget/DialogChartWidget.scss index 9b7cfd2533..2dd91dfec9 100644 --- a/src/ui/components/DialogChartWidget/DialogChartWidget.scss +++ b/src/ui/components/DialogChartWidget/DialogChartWidget.scss @@ -55,6 +55,14 @@ margin-bottom: var(--g-spacing-2); } + &__settings-container { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 5px; + gap: 8px; + } + &__checkbox { margin-block-start: var(--g-spacing-2); } diff --git a/src/ui/components/DialogChartWidget/DialogChartWidget.tsx b/src/ui/components/DialogChartWidget/DialogChartWidget.tsx index da52096121..4bb9992ce6 100644 --- a/src/ui/components/DialogChartWidget/DialogChartWidget.tsx +++ b/src/ui/components/DialogChartWidget/DialogChartWidget.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {FormRow, HelpPopover} from '@gravity-ui/components'; -import {Checkbox, Dialog, Flex, Link, Popup, Text, TextArea, TextInput} from '@gravity-ui/uikit'; +import {Checkbox, Dialog, Flex, Link, Popup, Text, TextInput} from '@gravity-ui/uikit'; import block from 'bem-cn-lite'; import {i18n} from 'i18n'; import type {CustomCommands, Spec} from 'immutability-helper'; @@ -21,6 +21,7 @@ import {Collapse} from 'ui/components/Collapse/Collapse'; import {Interpolate} from 'ui/components/Interpolate'; import {DL} from 'ui/constants/common'; +import {registry} from '../../registry'; import NavigationInput from '../../units/dash/components/NavigationInput/NavigationInput'; import {ParamsSettings} from '../../units/dash/components/ParamsSettings/ParamsSettings'; import { @@ -111,6 +112,7 @@ const INPUT_FILTERING_ID = 'chartFilteringField'; const INPUT_NAME_ID = 'chartNameField'; const INPUT_DESCRIPTION_ID = 'chartDescriptionField'; const INPUT_AUTOHEIGHT_ID = 'chartAutoheightField'; +const INPUT_HINT_ID = 'chartHintField'; // TODO: put in defaultPath navigation key from entry class DialogChartWidget extends React.PureComponent< @@ -133,6 +135,9 @@ class DialogChartWidget extends React.PureComponent< background: { color: 'transparent', }, + enableHint: false, + hint: '', + enableDescription: false, }, ], } as DashTabItemWidget['data'], @@ -214,6 +219,19 @@ class DialogChartWidget extends React.PureComponent< return Boolean(this.props.openedItemId); } + handleUpdateField = (field: keyof DashTabItemWidgetTab, value: string | boolean) => { + const {data, tabIndex} = this.state; + this.setState({ + data: update(data, { + tabs: { + [tabIndex]: { + [field]: {$set: value}, + }, + }, + }), + }); + }; + onApply = () => { const isValidateParamTitle = Utils.isEnabledFeature( Feature.DashBoardWidgetParamsStrictValidation, @@ -342,16 +360,25 @@ class DialogChartWidget extends React.PureComponent< }; onAutoHeightRadioButtonChange = () => { - const {data, tabIndex} = this.state; - const currentCondition = this.state.data.tabs[tabIndex].autoHeight; + const currentCondition = this.state.data.tabs[this.state.tabIndex].autoHeight; - this.setState({ - data: update(data, { - tabs: { - [tabIndex]: {autoHeight: {$set: !currentCondition}}, - }, - }), - }); + this.handleUpdateField('autoHeight', !currentCondition); + }; + + handleUpdateEnableDesc = (val: boolean) => { + this.handleUpdateField('enableDescription', val); + }; + + handleUpdateEnableHint = (val: boolean) => { + this.handleUpdateField('enableHint', val); + }; + + handleUpdateDescription = (val: string) => { + this.handleUpdateField('description', val); + }; + + handleUpdateHint = (val: string) => { + this.handleUpdateField('hint', val); }; handleBackgroundColorSelected = (color: string) => { @@ -371,16 +398,8 @@ class DialogChartWidget extends React.PureComponent< }; handleChangeFiltering = () => { - const {data, tabIndex} = this.state; - const currentCondition = this.state.data.tabs[tabIndex].enableActionParams; - - this.setState({ - data: update(data, { - tabs: { - [tabIndex]: {enableActionParams: {$set: !currentCondition}}, - }, - }), - }); + const currentCondition = this.state.data.tabs[this.state.tabIndex].enableActionParams; + this.handleUpdateField('enableActionParams', !currentCondition); }; updateTabMenu = ({items, selectedItemIndex, action}: UpdateState) => { @@ -564,7 +583,21 @@ class DialogChartWidget extends React.PureComponent< /> ); - const {title, chartId, description, autoHeight, background} = data.tabs[tabIndex]; + const { + title, + chartId, + description, + autoHeight, + background, + hint, + enableHint, + enableDescription, + } = data.tabs[tabIndex]; + + const hasDesc = + enableDescription === undefined ? Boolean(description) : Boolean(enableDescription); + + const {MarkdownControl} = registry.common.components.getAll(); return ( @@ -641,25 +674,50 @@ class DialogChartWidget extends React.PureComponent< fieldId={INPUT_DESCRIPTION_ID} label={i18n('dash.widget-dialog.edit', 'field_description')} > -