Add anchor to titles on dash (#1784)

Co-authored-by: WeblateGravity <[email protected]> Co-authored-by: Darya Tikhonova <[email protected]>
datalens-tech · Dec 3, 2024 · ca1347b · ca1347b
1 parent 3b8bbc3
commit ca1347b
Show file tree

Hide file tree

Showing 18 changed files with 439 additions and 61 deletions.
diff --git a/src/shared/constants/common.ts b/src/shared/constants/common.ts
@@ -54,6 +54,8 @@ export const TIME_FORMAT_24 = 'HH:mm';
 
 export const UPDATE_STATE_DEBOUNCE_TIME = 1000;
 
+export const SCROLL_TITLE_DEBOUNCE_TIME = 400;
+
 export const SHARED_URL_OPTIONS = {
     SAFE_CHART: '_safe_chart',
     WITHOUT_UI_SANDBOX_LIMIT: '_without_sandbox_time_limit',

diff --git a/src/shared/constants/qa/components.ts b/src/shared/constants/qa/components.ts
@@ -179,3 +179,8 @@ export enum DatalensTabs {
     Item = 'dash-tab-item',
     SwitcherItem = 'dash-tab-switcher-item',
 }
+
+export enum DatalensHeaderQa {
+    DesktopContainer = 'datalens-header-desktop-container',
+    MobileContainer = 'datalens-header-mobile-container',
+}
diff --git a/src/shared/constants/qa/dash.ts b/src/shared/constants/qa/dash.ts
@@ -49,6 +49,7 @@ export enum DashEntryQa {
 export enum TableOfContentQa {
     TableOfContent = 'table-of-content',
     CloseBtn = 'table-of-content-close',
+    MobileTableOfContent = 'mobile-table-of-content',
 }
 
 export enum DashMetaQa {
@@ -101,6 +102,11 @@ export enum DashBodyQa {
     ContentWrapper = 'dash-body-content-wrapper',
 }
 
+export enum FixedHeaderQa {
+    Container = 'dash-fixed-header-containter',
+    Controls = 'dash-fixed-header-controls',
+}
+
 export enum DashTabsQA {
     Root = 'dash-tabs',
 }
diff --git a/src/ui/components/DashKit/DashKit.ts b/src/ui/components/DashKit/DashKit.ts
@@ -10,7 +10,7 @@ import pluginControl from './plugins/Control/Control';
 import pluginGroupControl from './plugins/GroupControl/GroupControl';
 import {pluginImage} from './plugins/Image/Image';
 import textPlugin from './plugins/Text/Text';
-import pluginTitle from './plugins/Title/Title';
+import titlePlugin from './plugins/Title/Title';
 import widgetPlugin from './plugins/Widget/WidgetPlugin';
 
 let isConfigured = false;
@@ -33,8 +33,15 @@ const wrapPlugins = (plugins: Plugin[], pluginDefaultsGetter?: typeof currentDef
     });
 };
 
-export const getConfiguredDashKit = (pluginDefaultsGetter: typeof currentDefaultsGetter = null) => {
+export const getConfiguredDashKit = (
+    pluginDefaultsGetter: typeof currentDefaultsGetter = null,
+    options?: {disableHashNavigation?: boolean},
+) => {
     if (currentDefaultsGetter !== pluginDefaultsGetter || !isConfigured) {
+        const titleSettings = {
+            hideAnchor: options?.disableHashNavigation,
+        };
+
         const textSettings = {
             apiHandler: MarkdownProvider.getMarkdown,
         };
@@ -45,7 +52,7 @@ export const getConfiguredDashKit = (pluginDefaultsGetter: typeof currentDefault
 
         const plugins = wrapPlugins(
             [
-                pluginTitle,
+                titlePlugin.setSettings(titleSettings),
                 textPlugin.setSettings(textSettings),
                 pluginControl.setSettings(controlSettings),
                 pluginGroupControl.setSettings(controlSettings),

diff --git a/src/ui/components/DashKit/plugins/RendererWrapper/RendererWrapper.scss b/src/ui/components/DashKit/plugins/RendererWrapper/RendererWrapper.scss
@@ -1,3 +1,5 @@
+@import '../mixins.scss';
+
 .dashkit-plugin-container {
     &__wrapper {
         height: 100%;
@@ -10,16 +12,27 @@
             background-color: var(--g-color-base-float);
         }
 
+        .dashkit-grid-item__item_editMode &_text,
+        .dashkit-grid-item__item_editMode &_title {
+            background-color: var(--g-color-base-float);
+        }
+
         &_title {
-            overflow: hidden;
+            scroll-margin-left: calc(24px + var(--gn-aside-header-size, 0px));
+            overflow: clip;
             display: flex;
             align-items: center;
             max-height: 100%;
         }
 
-        .dashkit-grid-item__item_editMode &_text,
-        .dashkit-grid-item__item_editMode &_title {
-            background-color: var(--g-color-base-float);
+        &_title:hover {
+            .dashkit-plugin-title-container__anchor {
+                opacity: 1;
+            }
+
+            .dashkit-plugin-title-container_with-absolute-anchor::after {
+                @include with-fade-effect;
+            }
         }
     }
 }
diff --git a/src/ui/components/DashKit/plugins/RendererWrapper/RendererWrapper.tsx b/src/ui/components/DashKit/plugins/RendererWrapper/RendererWrapper.tsx
@@ -15,24 +15,28 @@ type RendererProps = {
     nodeRef?: React.RefObject<HTMLDivElement>;
     classMod?: string;
     style?: React.CSSProperties;
+    beforeContentNode?: React.ReactNode;
 };
 
 export const RendererWrapper: React.FC<RendererProps> = React.memo(
-    ({children, type, nodeRef, classMod, ...props}) => {
+    ({children, type, nodeRef, classMod, beforeContentNode, ...props}) => {
         const innerNodeRef = React.useRef(null);
         useWidgetContext(props.id, nodeRef || innerNodeRef);
 
         return (
-            <div
-                ref={nodeRef || innerNodeRef}
-                className={b('wrapper', {
-                    [type]: Boolean(type),
-                    [String(classMod)]: Boolean(classMod),
-                })}
-                {...props}
-            >
-                {children}
-            </div>
+            <React.Fragment>
+                {beforeContentNode}
+                <div
+                    ref={nodeRef || innerNodeRef}
+                    className={b('wrapper', {
+                        [type]: Boolean(type),
+                        [String(classMod)]: Boolean(classMod),
+                    })}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </React.Fragment>
         );
     },
 );

diff --git a/src/ui/components/DashKit/plugins/Title/AnchorLink/AnchorLink.tsx b/src/ui/components/DashKit/plugins/Title/AnchorLink/AnchorLink.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import type {PluginTitleProps} from '@gravity-ui/dashkit';
+import block from 'bem-cn-lite';
+import {useLocation} from 'react-router';
+import {Link} from 'react-router-dom';
+import {DL} from 'ui/constants';
+
+import '../Title.scss';
+
+const b = block('dashkit-plugin-title-container');
+
+interface AnchorLinkProps {
+    size: PluginTitleProps['data']['size'];
+    to: string;
+    show?: boolean;
+    absolute?: boolean;
+    top: number;
+}
+
+export const AnchorLink = ({size, to, show, absolute, top}: AnchorLinkProps) => {
+    const location = useLocation();
+    const hash = `#${encodeURIComponent(to)}`;
+
+    const link = {...location, hash};
+
+    if (DL.IS_MOBILE || !show) {
+        return null;
+    }
+
+    return (
+        <Link
+            className={b('anchor', {
+                size,
+                absolute,
+            })}
+            to={link}
+            style={{top}}
+        >
+            #
+        </Link>
+    );
+};
diff --git a/src/ui/components/DashKit/plugins/Title/Title.scss b/src/ui/components/DashKit/plugins/Title/Title.scss
@@ -1,10 +1,11 @@
+@import '../mixins.scss';
+
 .dashkit-plugin-title-container {
+    $class: &;
     height: fit-content;
-    overflow: hidden;
+    overflow: clip;
 
     &_with-auto-height {
-        overflow-y: auto;
-
         [data-plugin-root-el='title'] {
             height: fit-content;
         }
@@ -14,14 +15,74 @@
     &_with-color {
         display: flex;
 
-        & .dashkit-plugin-title {
+        .dashkit-plugin-title {
             padding: 5px 10px;
             align-items: center;
         }
+
+        #{$class}__anchor {
+            padding: 5px;
+        }
+    }
+
+    &_with-inline-anchor {
+        display: flex;
+
+        .dashkit-plugin-title {
+            padding-right: 0;
+        }
+    }
+
+    &:has(&__anchor_absolute:focus-visible)::after {
+        @include with-fade-effect;
     }
 
     .dashkit-grid-item__item_editMode .dashkit-plugin-container__wrapper_with-color & {
         // it has own color bg for contrast in edit mod
         background-color: transparent;
     }
+
+    &__anchor {
+        opacity: 0;
+        padding: 0 5px 5px;
+        position: relative;
+        height: fit-content;
+        text-decoration: none;
+        color: var(--g-color-text-link);
+
+        &:focus-visible {
+            opacity: 1;
+        }
+
+        &:hover {
+            color: var(--g-color-text-link-hover);
+        }
+
+        &_absolute {
+            position: absolute;
+            padding: 0 5px;
+            right: 0;
+            z-index: 1;
+        }
+
+        &_size_l {
+            font-size: 24px;
+            line-height: 28px;
+        }
+
+        &_size_m {
+            font-size: 20px;
+            line-height: 24px;
+        }
+
+        &_size_s {
+            font-size: var(--g-text-body-3-font-size);
+            line-height: 24px;
+        }
+
+        &_size_xs {
+            font-size: 15px;
+            line-height: 20px;
+        }
+    }
 }