Add chart widget title hint (on dash) (#1951)

Co-authored-by: datalens-weblate-robot <[email protected]> Co-authored-by: Darya Tikhonova <[email protected]> Co-authored-by: Matthew Casserly <[email protected]> Co-authored-by: Taya Leutina <[email protected]>
datalens-tech · Dec 19, 2024 · 39b8a8f · 39b8a8f
1 parent eba58fa
commit 39b8a8f
Show file tree

Hide file tree

Showing 12 changed files with 250 additions and 49 deletions.
diff --git 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": "<link>More about filtration</link>",
+  "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
@@ -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": "<link>Подробнее о фильтрации</link>",
+  "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
@@ -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
@@ -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
@@ -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
@@ -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<DashTabItemWidgetTab>) => {
@@ -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 (
             <React.Fragment>
@@ -641,25 +674,50 @@ class DialogChartWidget extends React.PureComponent<
                     fieldId={INPUT_DESCRIPTION_ID}
                     label={i18n('dash.widget-dialog.edit', 'field_description')}
                 >
-                    <TextArea
-                        id={INPUT_DESCRIPTION_ID}
-                        size="m"
-                        className={b('textarea')}
-                        value={description}
-                        placeholder={i18n('dash.widget-dialog.edit', 'context_fill-description')}
-                        onUpdate={(value) =>
-                            this.setState({
-                                data: update(data, {
-                                    tabs: {
-                                        [tabIndex]: {
-                                            description: {$set: value},
-                                        },
-                                    },
-                                }),
-                            })
-                        }
-                        rows={3}
-                    />
+                    <div className={b('settings-container')}>
+                        <Checkbox
+                            onUpdate={this.handleUpdateEnableDesc}
+                            checked={hasDesc}
+                            size="m"
+                            className={b('checkbox')}
+                        />
+                        {hasDesc && (
+                            <MarkdownControl
+                                key={`md-desc-tab-${tabIndex}`}
+                                value={description || ''}
+                                onChange={this.handleUpdateDescription}
+                                disabled={!enableDescription}
+                            />
+                        )}
+                    </div>
+                </FormRow>
+                <FormRow
+                    className={b('row')}
+                    fieldId={INPUT_HINT_ID}
+                    label={i18n('dash.widget-dialog.edit', 'field_hint')}
+                    labelHelpPopover={
+                        <HelpPopover
+                            className={b('help-tooltip')}
+                            content={i18n('dash.widget-dialog.edit', 'context_hint-display-info')}
+                        />
+                    }
+                >
+                    <div className={b('settings-container')}>
+                        <Checkbox
+                            onUpdate={this.handleUpdateEnableHint}
+                            checked={Boolean(enableHint)}
+                            size="m"
+                            className={b('checkbox')}
+                        />
+                        {Boolean(enableHint) && (
+                            <MarkdownControl
+                                key={`md-hint-tab-${tabIndex}`}
+                                value={hint || ''}
+                                onChange={this.handleUpdateHint}
+                                disabled={!enableHint}
+                            />
+                        )}
+                    </div>
                 </FormRow>
                 {enableAutoheight && (
                     <FormRow

diff --git a/src/ui/components/MarkdownHelpPopover/MarkdownHelpPopover.tsx b/src/ui/components/MarkdownHelpPopover/MarkdownHelpPopover.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
+import type {HelpPopoverProps} from '@gravity-ui/components';
 import {HelpPopover} from '@gravity-ui/components';
+import type {ButtonProps} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {DL} from 'ui/constants';
 
@@ -10,22 +12,26 @@ import './MarkdownHelpPopover.scss';
 
 const b = block('markdown-help-popover');
 
-type Props = {
+type Props = Partial<Pick<HelpPopoverProps, 'onClick'>> & {
     markdown: string;
+    className?: string;
+    buttonProps?: ButtonProps;
 };
 
 export const MarkdownHelpPopover = (props: Props) => {
-    const {markdown} = props;
+    const {markdown, onClick, buttonProps} = props;
     const [isLoaded, setLoaded] = React.useState(false);
 
     return (
         <HelpPopover
             content={<Content value={markdown} onRender={() => setLoaded(true)} />}
-            className={b({mobile: DL.IS_MOBILE})}
+            className={props.className ? props.className : b({mobile: DL.IS_MOBILE})}
             contentClassName={b('content')}
             tooltipClassName={b('tooltip', {hidden: !isLoaded})}
             key={String(isLoaded)}
             initialOpen={isLoaded}
+            {...(buttonProps ? {buttonProps} : {})}
+            {...(onClick ? {onClick} : {})}
         />
     );
 };
diff --git a/src/ui/components/Widgets/Chart/ChartWidget.scss b/src/ui/components/Widgets/Chart/ChartWidget.scss
@@ -1,6 +1,8 @@
 $dashContainerClassName: '.dash-body';
 $dashPublicContainerClassName: '.dash';
 
+$hintOffset: 3px;
+
 .dl-widget {
     #{$dashContainerClassName} &,
     #{$dashPublicContainerClassName} & {
@@ -20,6 +22,41 @@ $dashPublicContainerClassName: '.dash';
         }
     }
 
+    &__chart-title-text {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: block;
+
+        &_with-hint {
+            display: inline-block;
+            vertical-align: middle;
+            max-width: calc(100% - #{$hintOffset} - 16px);
+        }
+    }
+
+    &__chart-title-wrap {
+        display: flex;
+        align-items: center;
+    }
+
+    &__chart-title-hint {
+        margin-left: $hintOffset;
+        display: inline-flex;
+
+        & > * {
+            display: inline-flex;
+        }
+    }
+
+    // hide in sheet only
+    .g-sheet__sheet &__chart-title-hint {
+        display: none;
+    }
+
+    &__chart-title-hint-button {
+        display: inline-flex;
+    }
+
     // styles for widgets with tabs below
 
     #{$dashPublicContainerClassName} &__container &__chart-header,