Dashboard Links: Fix styles for very long dashboard titles (#52443)

This commit is contained in:
kay delaney 2022-07-19 16:15:59 +01:00 committed by GitHub
parent 3bdec4d138
commit 0142c8ccd1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 20 deletions

View File

@ -4363,12 +4363,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
[0, 0, 0, "Unexpected any. Specify a different type.", "2"],
[0, 0, 0, "Unexpected any. Specify a different type.", "3"]
],
"public/app/features/dashboard/components/SubMenu/SubMenu.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],

View File

@ -2,6 +2,7 @@ import { css, cx } from '@emotion/css';
import React, { useRef, useState, useLayoutEffect } from 'react';
import { useAsync } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
import { sanitize, sanitizeUrl } from '@grafana/data/src/text/sanitize';
import { selectors } from '@grafana/e2e-selectors';
import { Icon, ToolbarButton, Tooltip, useStyles2 } from '@grafana/ui';
@ -14,7 +15,7 @@ import { DashboardLink } from '../../state/DashboardModel';
interface Props {
link: DashboardLink;
linkInfo: { title: string; href: string };
dashboardId: any;
dashboardId: number;
}
export const DashboardLinksDashboard: React.FC<Props> = (props) => {
@ -23,13 +24,7 @@ export const DashboardLinksDashboard: React.FC<Props> = (props) => {
const [dropdownCssClass, setDropdownCssClass] = useState('invisible');
const [opened, setOpened] = useState(0);
const resolvedLinks = useResolvedLinks(props, opened);
const buttonStyle = useStyles2(
(theme) =>
css`
color: ${theme.colors.text.primary};
`
);
const styles = useStyles2(getStyles);
useLayoutEffect(() => {
setDropdownCssClass(getDropdownLocationCssClass(listRef.current));
@ -41,17 +36,22 @@ export const DashboardLinksDashboard: React.FC<Props> = (props) => {
<>
<ToolbarButton
onClick={() => setOpened(Date.now())}
className={cx('gf-form-label gf-form-label--dashlink', buttonStyle)}
className={cx('gf-form-label gf-form-label--dashlink', styles.button)}
data-placement="bottom"
data-toggle="dropdown"
aria-expanded={!!opened}
aria-controls="dropdown-list"
aria-haspopup="menu"
>
<Icon aria-hidden name="bars" style={{ marginRight: '4px' }} />
<Icon aria-hidden name="bars" className={styles.iconMargin} />
<span>{linkInfo.title}</span>
</ToolbarButton>
<ul id="dropdown-list" className={`dropdown-menu ${dropdownCssClass}`} role="menu" ref={listRef}>
<ul
id="dropdown-list"
className={`dropdown-menu ${styles.dropdown} ${dropdownCssClass}`}
role="menu"
ref={listRef}
>
{resolvedLinks.length > 0 &&
resolvedLinks.map((resolvedLink, index) => {
return (
@ -130,13 +130,13 @@ const useResolvedLinks = ({ link, dashboardId }: Props, opened: number): Resolve
};
interface ResolvedLinkDTO {
id: any;
id: number;
url: string;
title: string;
}
export async function searchForTags(
tags: any[],
tags: string[],
dependencies: { getBackendSrv: typeof getBackendSrv } = { getBackendSrv }
): Promise<DashboardSearchHit[]> {
const limit = 100;
@ -146,7 +146,7 @@ export async function searchForTags(
}
export function resolveLinks(
dashboardId: any,
dashboardId: number,
link: DashboardLink,
searchHits: DashboardSearchHit[],
dependencies: { getLinkSrv: typeof getLinkSrv; sanitize: typeof sanitize; sanitizeUrl: typeof sanitizeUrl } = {
@ -185,3 +185,24 @@ function getDropdownLocationCssClass(element: HTMLElement | null) {
return 'pull-right';
}
}
function getStyles(theme: GrafanaTheme2) {
return {
iconMargin: css({
marginRight: theme.spacing(0.5),
}),
dropdown: css({
maxWidth: 'max(30vw, 300px)',
maxHeight: '70vh',
overflowY: 'auto',
a: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
}),
button: css({
color: theme.colors.text.primary,
}),
};
}