Add a hint in selectors and a wizard table

src/i18n-keysets/dash.control-dialog.edit/en.json

@@ -29,6 +29,7 @@
   "field_end-time": "End time",
   "field_field": "Field",
   "field_field-name": "Field or parameter name",
+  "field_hint": "Hint",
   "field_inner-title": "Inner title",
   "field_inner-title-note": "The inner title allows you to specify a text inside the selector, e.g., to display an operation inside a selector.<br><br>Not available in the Checkbox selector type.",
   "field_inner-title-note-connection-selector": "The inner title allows you to specify a text inside the selector.",

src/i18n-keysets/dash.control-dialog.edit/ru.json

@@ -29,6 +29,7 @@
   "field_end-time": "Конец",
   "field_field": "Поле",
   "field_field-name": "Имя поля или параметра",
+  "field_hint": "Подсказка",
   "field_inner-title": "Внутренний заголовок",
   "field_inner-title-note": "Внутренний заголовок позволяет указать текст внутри селектора. Например, его можно использовать для отображения операции внутри селектора.<br><br>Недоступен в селекторах типа «Чекбокс».",
   "field_inner-title-note-connection-selector": "Внутренний заголовок позволяет указать текст внутри селектора.",

src/i18n-keysets/wizard/en.json

@@ -161,6 +161,7 @@
   "label_groupping": "Grouping",
   "label_header": "Header",
   "label_hide": "Hide",
+  "label_hint": "Hint",
   "label_holidays": "Holidays on the chart",
   "label_horizontal": "Horizontal",
   "label_hour": "Hour",

src/i18n-keysets/wizard/ru.json

@@ -161,6 +161,7 @@
   "label_groupping": "Группировка",
   "label_header": "Заголовок",
   "label_hide": "Скрыть",
+  "label_hint": "Подсказка",
   "label_holidays": "Выходные на графике",
   "label_horizontal": "Горизонтальные",
   "label_hour": "Час",

src/server/components/features/features-list/DatasetFieldHint.ts

@@ -0,0 +1,10 @@
+import {Feature} from '../../../../shared';
+import {createFeatureConfig} from '../utils';
+
+export default createFeatureConfig({
+    name: Feature.FieldHint,
+    state: {
+        development: true,
+        production: false,
+    },
+});

src/server/modes/charts/plugins/datalens/preparers/backend-pivot-table/table-head-generator.ts

@@ -299,6 +299,10 @@ export const generateTableHead = ({
             if (cellType === 'date') {
                 head[index].format = field.format || getDefaultDateFormat(field.data_type);
             }
+
+            if (field.hintSettings?.enabled) {
+                head[index].hint = field.hintSettings?.text;
+            }
         }
 
         head[index].name = fieldName;

src/server/modes/charts/plugins/datalens/preparers/flat-table/index.ts

@@ -107,6 +107,10 @@ function prepareFlatTable({
             width: getColumnWidthValue(widthSettings),
         };
 
+        if (item.hintSettings?.enabled) {
+            headCell.hint = item.hintSettings.text;
+        }
+
         if (!isLastColumn && index < pinnedColumns) {
             headCell.pinned = true;
         }

src/shared/types/chartkit/table.ts

@@ -72,6 +72,7 @@ export type CommonTableColumn = {
     /** Reserved subspace to store options and values for customized functionality */
     custom?: Record<string, any>;
     pinned?: boolean;
+    hint?: string;
 };
 export type TableColumnFormatter = {
     format?: 'number' | 'percent';

src/shared/types/config/wizard/v10.ts

@@ -5,6 +5,7 @@ import {
     AxisMode,
     ChartsConfigVersion,
     ColumnSettings,
+    HintSettings,
     LabelsPositions,
     NumberFormatType,
     NumberFormatUnit,
@@ -262,6 +263,7 @@ export type V10Field = {
     subTotalsSettings?: TableSubTotalsSettings;
     backgroundSettings?: TableFieldBackgroundSettings;
     columnSettings?: ColumnSettings;
+    hintSettings?: HintSettings;
 } & V10ClientOnlyFields;
 
 export type V10ColorsConfig = {

src/shared/types/dash.ts

@@ -214,6 +214,8 @@ export interface DashTabItemControlElementBase {
     innerTitle?: string;
     fieldType?: string;
     required?: boolean;
+    showHint?: boolean;
+    hint?: string;
 }
 
 export interface DashTabItemControlElementSelect extends DashTabItemControlElementBase {

src/shared/types/feature.ts

@@ -73,6 +73,9 @@ export enum Feature {
     ChartWithFnLogging = 'ChartWithFnLogging',
     PinnedColumns = 'PinnedColumns',
     CustomAccessDescription = 'CustomAccessDescription',
+    /** An additional field in the settings of the dashboard selectors and in the fields of the d Wizard dataset for table columns.
+     * When specify the text, an icon with a hint is added. */
+    FieldHint = 'FieldHint',
     EnableFooter = 'EnableFooter',
 }
 

src/shared/types/wizard/field.ts

@@ -44,8 +44,14 @@ export interface WizardDatasetField extends DatasetField {
     backgroundSettings?: TableFieldBackgroundSettings;
     distincts?: string[];
     displayMode?: TableFieldDisplayMode;
+    hintSettings?: HintSettings;
 }
 
+export type HintSettings = {
+    enabled?: boolean;
+    text?: string;
+};
+
 export interface FilterField extends WizardDatasetField {
     filter: FilterBody;
     is_default_filter?: boolean;

src/ui/components/DashKit/plugins/Control/Control.tsx

@@ -641,6 +641,7 @@ class Control extends React.PureComponent<PluginControlProps, PluginControlState
                 label,
                 required,
                 hasValidationError: Boolean(validationError),
+                hint: source.showHint ? source.hint : undefined,
             };
 
             if (type === TYPE.RANGE_DATEPICKER || type === TYPE.DATEPICKER) {

src/ui/components/DashKit/plugins/Control/ControlItems/ControlItemSelect.tsx

@@ -362,6 +362,7 @@ export const ControlItemSelect = ({
         loadingItems,
         placeholder,
         required: source.required,
+        hint: source.hint,
         hasValidationError: Boolean(selectValidationError),
         renderOverlay,
         ...selectProps,

src/ui/components/DashKit/plugins/Control/types.ts

@@ -108,6 +108,7 @@ export interface SelectControlProps {
     hasValidationError: boolean;
     renderOverlay?: () => React.ReactNode;
     style?: React.CSSProperties;
+    hint?: string;
 }
 
 export type ChartControlRef =

src/ui/components/MarkdownControl/MarkdownControl.scss

@@ -0,0 +1,5 @@
+.markdown-control {
+    &__textarea {
+        max-height: 40vh;
+    }
+}

src/ui/components/MarkdownControl/MarkdownControl.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {TextArea} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+
+import {MarkdownControlProps} from '../../registry/units/common/types/components/MarkdownControl';
+
+import './MarkdownControl.scss';
+
+const b = block('markdown-control');
+
+export const MarkdownControl = (props: MarkdownControlProps) => {
+    const {value, onChange, disabled} = props;
+
+    return (
+        <TextArea
+            className={b()}
+            value={value}
+            onUpdate={onChange}
+            hasClear={true}
+            disabled={disabled}
+            controlProps={{className: b('textarea')}}
+        />
+    );
+};

src/ui/components/MarkdownHelpPopover/Content.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {useMarkdown} from '../../hooks/useMarkdown';
+
+type Props = {
+    value: string;
+    onRender: () => void;
+};
+
+export const Content = (props: Props) => {
+    const {value, onRender} = props;
+    const {markdown, isLoading} = useMarkdown({value});
+
+    React.useEffect(() => {
+        if (!isLoading) {
+            onRender();
+        }
+    }, [isLoading, onRender]);
+
+    return <React.Fragment>{markdown}</React.Fragment>;
+};

src/ui/components/MarkdownHelpPopover/MarkdownHelpPopover.scss

@@ -0,0 +1,14 @@
+.markdown-help-popover {
+    margin-left: 4px;
+
+    &__content {
+        max-height: calc(100vh - 34px);
+        overflow: hidden;
+    }
+
+    &__tooltip {
+        &_hidden {
+            display: none;
+        }
+    }
+}

src/ui/components/MarkdownHelpPopover/MarkdownHelpPopover.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import {HelpPopover} from '@gravity-ui/components';
+import block from 'bem-cn-lite';
+
+import {Content} from './Content';
+
+import './MarkdownHelpPopover.scss';
+
+const b = block('markdown-help-popover');
+
+type Props = {
+    markdown: string;
+};
+
+export const MarkdownHelpPopover = (props: Props) => {
+    const {markdown} = props;
+    const [isLoaded, setLoaded] = React.useState(false);
+
+    return (
+        <HelpPopover
+            content={<Content value={markdown} onRender={() => setLoaded(true)} />}
+            className={b()}
+            contentClassName={b('content')}
+            tooltipClassName={b('tooltip', {hidden: !isLoaded})}
+            key={String(isLoaded)}
+            initialOpen={isLoaded}
+        />
+    );
+};

src/ui/hooks/useMarkdown.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import {YfmWrapper} from '../components/YfmWrapper/YfmWrapper';
+import {DL} from '../constants';
+import {getSdk} from '../libs/schematic-sdk';
+
+type Props = {
+    value: string;
+};
+
+const MD_COLLECTION_MAX_SIZE = 1000;
+const MarkdownCollection = new Map();
+async function renderMarkdown(value: string) {
+    if (!MarkdownCollection.has(value)) {
+        try {
+            if (MarkdownCollection.size > MD_COLLECTION_MAX_SIZE) {
+                const firstKey = MarkdownCollection.keys().next().value;
+                MarkdownCollection.delete(firstKey);
+            }
+
+            const response = await getSdk().mix.renderMarkdown({text: value, lang: DL.USER_LANG});
+            const yfmString = response.result;
+            MarkdownCollection.set(value, yfmString);
+        } catch (e) {
+            console.error('useMarkdown failed ', e);
+        }
+    }
+
+    return MarkdownCollection.get(value);
+}
+
+export const useMarkdown = (props: Props) => {
+    const {value} = props;
+    const [markdown, setMarkdown] = React.useState('');
+    const [isLoading, setIsLoading] = React.useState<boolean>(true);
+
+    React.useEffect(() => {
+        if (!value) {
+            return;
+        }
+
+        renderMarkdown(value).then((val) => {
+            setMarkdown(val);
+            setIsLoading(false);
+        });
+    }, [value]);
+
+    return {markdown: <YfmWrapper content={markdown} setByInnerHtml={true} />, isLoading};
+};

src/ui/libs/DatalensChartkit/ChartKit/components/Widget/components/Table/Table.scss

@@ -151,6 +151,10 @@
             transform: rotate(90deg);
         }
     }
+
+    &__column-hint {
+        margin-left: 4px;
+    }
 }
 
 .chartkit-table .data-table {

src/ui/libs/DatalensChartkit/ChartKit/components/Widget/components/Table/utils/render.tsx

@@ -25,6 +25,7 @@ import {
     isMarkupItem,
 } from 'shared';
 
+import {MarkdownHelpPopover} from '../../../../../../../../components/MarkdownHelpPopover/MarkdownHelpPopover';
 import {Markup} from '../../../../../../../../components/Markup';
 import {markupToRawString} from '../../../../../../modules/table';
 import {ChartKitDataTable, DataTableData} from '../../../../../../types';
@@ -388,7 +389,7 @@ export const getColumnsAndNames = ({
                 result.columns.push(columnData);
                 result.names = result.names.concat(names);
             } else {
-                const {id, name, type, css: columnCss, group, autogroup, ...options} = column;
+                const {id, name, type, css: columnCss, group, autogroup, hint, ...options} = column;
                 const columnWidth = topLevelWidth || column.width;
                 const columnName = generateName({id, name, level, shift, index});
 
@@ -430,6 +431,7 @@ export const getColumnsAndNames = ({
                             ) : (
                                 column.formattedName ?? column.name
                             )}
+                            {hint && <MarkdownHelpPopover markdown={hint} />}
                         </span>
                     ),
                     className: b('cell', {
@@ -459,7 +461,7 @@ export const getColumnsAndNames = ({
                             width: columnWidth,
                             tableWidth,
                             resize: resizeTable,
-                        }),
+                        } as RestOptions),
                     customStyle: ({row, header, name}) => {
                         if (header) {
                             return camelCaseCss(columnCss);

src/ui/libs/DatalensChartkit/components/Control/Items/withWrapForControls.js

@@ -6,6 +6,7 @@ import {ControlQA} from 'shared';
 import {DL} from 'ui/constants';
 import {isMobileView} from 'ui/utils/mobile';
 
+import {MarkdownHelpPopover} from '../../../../../components/MarkdownHelpPopover/MarkdownHelpPopover';
 import {CONTROL_TYPE} from '../../../modules/constants/constants';
 
 const b = block('chartkit-control-item');
@@ -22,6 +23,7 @@ function withWrapForControls(WrappedComponent) {
             style,
             renderOverlay,
             labelClassName,
+            hint,
         } = props;
 
         if (hidden) {
@@ -52,6 +54,7 @@ function withWrapForControls(WrappedComponent) {
                         title={label}
                     >
                         {label}
+                        {hint && <MarkdownHelpPopover markdown={hint} />}
                     </span>
                 )}
                 <WrappedComponent {...props} />

src/ui/registry/units/common/components-map.tsx

@@ -16,6 +16,7 @@ import type {DialogAddParticipantsProps} from './types/components/DialogAddParti
 import type {DownloadScreenshotProps} from './types/components/DownloadScreenshot';
 import type {EntryBreadcrumbsProps} from './types/components/EntryBreadcrumbs';
 import type {IamAccessDialogProps} from './types/components/IamAccessDialog';
+import type {MarkdownControlProps} from './types/components/MarkdownControl';
 import type {MarkupShareLinkProps} from './types/components/MarkupShareLink';
 import type {MarkupUserInfoProps} from './types/components/MarkupUserInfo';
 import type {MobileHeaderComponentProps} from './types/components/MobileHeaderComponent';
@@ -48,5 +49,6 @@ export const commonComponentsMap = {
     OAuthTokenButton: makeDefaultEmpty<OAuthTokenButtonProps>(),
     MarkupShareLink: makeDefaultEmpty<MarkupShareLinkProps>(),
     MarkupUserInfo: makeDefaultEmpty<MarkupUserInfoProps>(),
+    MarkdownControl: makeDefaultEmpty<MarkdownControlProps>(),
     Footer: makeDefaultEmpty(),
 } as const;

src/ui/registry/units/common/register.tsx

@@ -10,6 +10,7 @@ import {getEntryName} from '../../../components/EntryTitle/utils';
 import {Illustration} from '../../../components/Illustration/Illustration';
 import {getIllustrationStore} from '../../../components/Illustration/getIllustrationStore';
 import {getLoginById} from '../../../components/Login/utils';
+import {MarkdownControl} from '../../../components/MarkdownControl/MarkdownControl';
 import {MobileHeaderComponent} from '../../../components/MobileHeader/MobileHeaderComponent/MobileHeaderComponent';
 import {getQuickItems} from '../../../components/Navigation/Base/configure';
 import {getInitDestination} from '../../../components/Navigation/Base/utils';
@@ -33,6 +34,7 @@ export const registerCommonPlugins = () => {
         EntryBreadcrumbs,
         YfmWrapperContent,
         DatepickerControl,
+        MarkdownControl,
     });
 
     registry.common.functions.register({