IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

DashboardLinks: Fix dropdown positioning (#34909) (#34961)

Browse Source 
(cherry picked from commit fd028fd798)

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
This commit is contained in:
Grot (@grafanabot) 2021-05-31 03:26:43 -04:00 committed by GitHub
parent f6b0cd714d
commit bf3ce22358
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef, useState } from 'react';
import React, { useRef, useState, useLayoutEffect } from 'react';
import { Icon, Tooltip } from '@grafana/ui';
import { sanitize, sanitizeUrl } from '@grafana/data/src/text/sanitize';
import { getBackendSrv } from 'app/core/services/backend_srv';
@ -17,9 +17,14 @@ interface Props {
export const DashboardLinksDashboard: React.FC<Props> = (props) => {
const { link, linkInfo } = props;
const listRef = useRef<HTMLUListElement>(null);
const [dropdownCssClass, setDropdownCssClass] = useState('invisible');
const [opened, setOpened] = useState(0);
const resolvedLinks = useResolvedLinks(props, opened);
useLayoutEffect(() => {
setDropdownCssClass(getDropdownLocationCssClass(listRef.current));
}, [resolvedLinks]);
if (link.asDropdown) {
return (
<LinkElement link={link} key="dashlinks-dropdown" aria-label={selectors.components.DashboardLinks.dropDown}>
@ -33,7 +38,7 @@ export const DashboardLinksDashboard: React.FC<Props> = (props) => {
<Icon name="bars" style={{ marginRight: '4px' }} />
<span>{linkInfo.title}</span>
</a>
<ul className={`dropdown-menu ${getDropdownLocationCssClass(listRef.current)}`} role="menu" ref={listRef}>
<ul className={`dropdown-menu ${dropdownCssClass}`} role="menu" ref={listRef}>
{resolvedLinks.length > 0 &&
resolvedLinks.map((resolvedLink, index) => {
return (