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

.betterer.results

@@ -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"]
     ],

public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx

@@ -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 styles = useStyles2(getStyles);
-  const buttonStyle = useStyles2(
-    (theme) =>
-      css`
-        color: ${theme.colors.text.primary};
-      `
-  );
 
   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,
+    }),
+  };
+}