Add anchors to dashboard

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 getTitlePlugin from './plugins/Title/Title';
 import widgetPlugin from './plugins/Widget/WidgetPlugin';
 
 let isConfigured = false;
@@ -33,15 +33,18 @@ const wrapPlugins = (plugins: Plugin[], pluginDefaultsGetter?: typeof currentDef
     });
 };
 
-export const getConfiguredDashKit = (pluginDefaultsGetter: typeof currentDefaultsGetter = null) => {
+export const getConfiguredDashKit = (
+    pluginDefaultsGetter: typeof currentDefaultsGetter = null,
+    disableHashNavigation?: boolean,
+) => {
     const controlSettings = {
         getDistincts: getDistinctsAction(),
     };
 
     if (currentDefaultsGetter !== pluginDefaultsGetter || !isConfigured) {
         const plugins = wrapPlugins(
             [
-                pluginTitle,
+                getTitlePlugin(disableHashNavigation),
                 textPlugin.setSettings({
                     apiHandler: MarkdownProvider.getMarkdown,
                 }),

src/ui/components/DashKit/plugins/RendererWrapper/RendererWrapper.scss

@@ -1,7 +1,53 @@
 .dashkit-plugin-container {
+    &__anchor {
+        opacity: 0;
+        right: 100%;
+        padding-right: 4px;
+        height: 100%;
+        float: left;
+
+        &_visible,
+        &:hover,
+        &:focus-visible {
+            opacity: 1;
+        }
+
+        &_absolute {
+            position: absolute;
+        }
+
+        &_size_l {
+            padding-top: 5px;
+            font-size: 24px;
+            line-height: 28px;
+        }
+
+        &_size_m {
+            padding-top: 7px;
+            font-size: 20px;
+            line-height: 24px;
+        }
+
+        &_size_s {
+            padding-top: 7px;
+            font-size: var(--g-text-body-3-font-size);
+            line-height: 24px;
+        }
+
+        &_size_xs {
+            padding-top: 9px;
+            font-size: 15px;
+            line-height: 20px;
+        }
+    }
+
     &__wrapper {
         height: 100%;
 
+        &:hover .dashkit-plugin-container__anchor {
+            opacity: 1;
+        }
+
         &_widget {
             width: 100%;
         }
@@ -11,7 +57,8 @@
         }
 
         &_title {
-            overflow: hidden;
+            scroll-margin-left: calc(24px + var(--gn-aside-header-size, 0px));
+            overflow: clip;
             display: flex;
             align-items: center;
             max-height: 100%;

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

@@ -15,24 +15,28 @@ type RendererProps = {
     nodeRef?: React.RefObject<HTMLDivElement>;
     classMod?: string;
     style?: React.CSSProperties;
+    childContent?: React.ReactNode;
 };
 
 export const RendererWrapper: React.FC<RendererProps> = React.memo(
-    ({children, type, nodeRef, classMod, ...props}) => {
+    ({children, type, nodeRef, classMod, childContent, ...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>
+                {childContent}
+                <div
+                    ref={nodeRef || innerNodeRef}
+                    className={b('wrapper', {
+                        [type]: Boolean(type),
+                        [String(classMod)]: Boolean(classMod),
+                    })}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </React.Fragment>
         );
     },
 );

src/ui/components/DashKit/plugins/Title/DashAnchorLink/DashAnchorLink.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import type {PluginTitleProps} from '@gravity-ui/dashkit';
+import {Link} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+import {useHistory, useLocation} from 'react-router';
+
+const b = block('dashkit-plugin-container');
+
+interface DashAnchorLinkProps {
+    size: PluginTitleProps['data']['size'];
+    x: number;
+    to: string;
+}
+
+const DashAnchorLink = ({size, x, to}: DashAnchorLinkProps) => {
+    const location = useLocation();
+    const history = useHistory();
+    const hash = `#${encodeURIComponent(to)}`;
+    const isLinkVisible = false || location.hash === hash;
+
+    return (
+        <Link
+            onClick={(e) => {
+                e.preventDefault();
+                history.push({...location, hash});
+            }}
+            className={b('anchor', {
+                size,
+                absolute: x === 0,
+                visible: isLinkVisible,
+            })}
+            href={hash}
+        >
+            #
+        </Link>
+    );
+};
+
+export default DashAnchorLink;

src/ui/components/DashKit/plugins/Title/Title.scss

@@ -1,10 +1,8 @@
 .dashkit-plugin-title-container {
     height: fit-content;
-    overflow: hidden;
+    overflow: clip;
 
     &_with-auto-height {
-        overflow-y: auto;
-
         [data-plugin-root-el='title'] {
             height: fit-content;
         }

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

@@ -13,6 +13,8 @@ import {
 import {useBeforeLoad} from '../../../../hooks/useBeforeLoad';
 import {RendererWrapper} from '../RendererWrapper/RendererWrapper';
 
+import DashAnchorLink from './DashAnchorLink/DashAnchorLink';
+
 import './Title.scss';
 
 const b = block('dashkit-plugin-title-container');
@@ -21,7 +23,7 @@ type Props = PluginTitleProps;
 
 const WIDGET_RESIZE_DEBOUNCE_TIMEOUT = 100;
 
-const titlePlugin = {
+const getTitlePlugin = (disableHashNavigation?: boolean) => ({
     ...pluginTitle,
     renderer: function Wrapper(
         props: Props,
@@ -97,10 +99,16 @@ const titlePlugin = {
             data.text,
         ]);
 
+        const anchor =
+            disableHashNavigation || props.editMode ? null : (
+                <DashAnchorLink size={data.size} x={currentLayout.x || 0} to={data.text} />
+            );
+
         return (
             <RendererWrapper
                 id={props.id}
                 type="title"
+                childContent={anchor}
                 nodeRef={rootNodeRef}
                 style={style as React.StyleHTMLAttributes<HTMLDivElement>}
                 classMod={classMod}
@@ -116,6 +124,6 @@ const titlePlugin = {
             </RendererWrapper>
         );
     },
-};
+});
 
-export default titlePlugin;
+export default getTitlePlugin;

src/ui/hooks/useUpdateEffect.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const useUpdateEffect = (effect: React.EffectCallback, deps: React.DependencyList) => {
+    const isInitialMount = React.useRef(true);
+
+    React.useEffect(() => {
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+        } else {
+            return effect();
+        }
+    }, deps);
+};

src/ui/styles/base.scss

@@ -5,6 +5,7 @@ body,
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    scroll-behavior: smooth;
 }
 
 html,

src/ui/units/dash/containers/Body/Body.tsx

@@ -65,7 +65,7 @@ import {getIsAsideHeaderEnabled} from '../../../../components/AsideHeaderAdapter
 import {getConfiguredDashKit} from '../../../../components/DashKit/DashKit';
 import {DL} from '../../../../constants';
 import type SDK from '../../../../libs/sdk';
-import Utils from '../../../../utils';
+import Utils, {scrollToHash} from '../../../../utils';
 import {TYPES_TO_DIALOGS_MAP, getActionPanelItems} from '../../../../utils/getActionPanelItems';
 import {EmptyState} from '../../components/EmptyState/EmptyState';
 import Loader from '../../components/Loader/Loader';
@@ -152,6 +152,7 @@ type DashBodyState = {
     loaded: boolean;
     prevMeta: {tabId: string | null; entryId: string | null};
     loadedItemsMap: Map<string, boolean>;
+    hash: string;
 };
 
 type BodyProps = StateProps & DispatchProps & RouteComponentProps & OwnProps;
@@ -180,18 +181,27 @@ const GROUPS_WEIGHT = {
 // Body is used as a core in different environments
 class Body extends React.PureComponent<BodyProps> {
     static getDerivedStateFromProps(props: BodyProps, state: DashBodyState) {
+        let newState: Partial<DashBodyState> = {};
+
         const {
             prevMeta: {entryId, tabId},
         } = state;
-
         // reset loaded before new tab/entry items are mounted
         if (props.entryId !== entryId || props.tabId !== tabId) {
             state.loadedItemsMap.clear();
+            newState = {
+                prevMeta: {tabId: props.tabId, entryId: props.entryId},
+                loaded: false,
+            };
+        }
 
-            return {prevMeta: {tabId: props.tabId, entryId: props.entryId}, loaded: false};
+        const newHash = props.location.hash;
+        if (newHash !== state.hash) {
+            newState.hash = newHash;
+            scrollToHash({hash: newHash.replace('#', ''), withDelay: props.tabId !== tabId});
         }
 
-        return null;
+        return Object.keys(newState).length ? newState : null;
     }
 
     dashKitRef = React.createRef<DashKitComponent>();
@@ -250,6 +260,7 @@ class Body extends React.PureComponent<BodyProps> {
         prevMeta: {tabId: null, entryId: null},
         loaded: false,
         loadedItemsMap: new Map<string, boolean>(),
+        hash: '',
     };
 
     groups: DashKitGroup[] = [
@@ -289,6 +300,8 @@ class Body extends React.PureComponent<BodyProps> {
         // if localStorage already have a dash item, we need to set it to state
         this.storageHandler();
 
+        scrollToHash({hash: this.props.location.hash, withDelay: true, checkUserScroll: true});
+
         window.addEventListener('storage', this.storageHandler);
     }
 
@@ -853,14 +866,16 @@ class Body extends React.PureComponent<BodyProps> {
             isEditModeLoading,
             globalParams,
             dashkitSettings,
+            disableHashNavigation,
         } = this.props;
 
         const tabDataConfig = DL.IS_MOBILE
             ? this.getMobileLayout()
             : (tabData as DashKitProps['config'] | null);
 
         const isEmptyTab = !tabDataConfig?.items.length;
-        const DashKit = getConfiguredDashKit();
+
+        const DashKit = getConfiguredDashKit(undefined, disableHashNavigation);
 
         return isEmptyTab && !isGlobalDragging ? (
             <EmptyState

src/ui/units/dash/containers/TableOfContent/TableOfContent.tsx

@@ -11,13 +11,13 @@ import {useDispatch} from 'react-redux';
 import {Link, useLocation} from 'react-router-dom';
 import {TableOfContentQa} from 'shared';
 import {DL} from 'ui/constants';
+import {scrollToHash} from 'ui/utils';
 import {
     selectHashStates,
     selectShowTableOfContent,
     selectTabId,
     selectTabs,
 } from 'units/dash/store/selectors/dashTypedSelectors';
-import {scrollIntoView} from 'utils';
 
 import {
     appendSearchQuery,
@@ -33,9 +33,7 @@ const i18n = I18n.keyset('dash.table-of-content.view');
 
 const b = block('table-of-content');
 
-const scrollIntoViewOptions: ScrollIntoViewOptions = {behavior: 'smooth'};
 const dispatchResizeTimeout = 200;
-const scrollDelay = 300;
 
 const getHash = ({
     itemTitle,
@@ -53,16 +51,6 @@ const getHash = ({
     return itemTitle ? `#${encodeURIComponent(itemTitle)}` : '';
 };
 
-const scrollIntoViewWithTimeout = (itemId: string) => {
-    setTimeout(
-        () => scrollIntoView(itemId, scrollIntoViewOptions),
-        // to have time to change the height of the react-grid-layout (200ms)
-        // DashKit rendering ended after location change (with manual page refresh) (50-70ms)
-        // small margin
-        scrollDelay,
-    );
-};
-
 const TableOfContent: React.FC<{disableHashNavigation?: boolean}> = React.memo(
     ({disableHashNavigation}) => {
         const dispatch = useDispatch();
@@ -98,7 +86,7 @@ const TableOfContent: React.FC<{disableHashNavigation?: boolean}> = React.memo(
                     handleToggleTableOfContent();
                 }
                 if (disableHashNavigation) {
-                    scrollIntoViewWithTimeout(encodeURIComponent(itemTitle));
+                    scrollToHash({hash: `#${encodeURIComponent(itemTitle)}`, withDelay: true});
                 }
             },
             [isSelectedTab, disableHashNavigation, dispatch, handleToggleTableOfContent],
@@ -125,11 +113,6 @@ const TableOfContent: React.FC<{disableHashNavigation?: boolean}> = React.memo(
             [disableHashNavigation, hashStates, isSelectedTab, location],
         );
 
-        React.useEffect(() => {
-            if (location.hash && !disableHashNavigation) {
-                scrollIntoViewWithTimeout(location.hash.replace('#', ''));
-            }
-        }, [location.hash, disableHashNavigation]);
         React.useEffect(() => {
             // to recalculate ReactGridLayout
             dispatchResize(dispatchResizeTimeout);