[ENHANCEMENT]: Add dashboard-level links support

dashboards/src/components/DashboardLinks/DashboardLinks.tsx

@@ -0,0 +1,138 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { IconButton, Link as LinkComponent, Menu, MenuItem, Theme, Chip, Stack } from '@mui/material';
+import LaunchIcon from 'mdi-material-ui/Launch';
+import { Link } from '@perses-dev/core';
+import { MouseEvent, ReactElement, useState } from 'react';
+import { InfoTooltip } from '@perses-dev/components';
+import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
+
+export interface DashboardLinksProps {
+  links: Link[];
+}
+
+/**
+ * Displays dashboard-level links in the toolbar.
+ * Renders as chips for 1-3 links, or a dropdown menu for more.
+ * Supports variable replacement in URLs when renderVariables is enabled.
+ */
+export function DashboardLinks({ links }: DashboardLinksProps): ReactElement | null {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const isMenuOpened = Boolean(anchorEl);
+
+  const handleOpenMenu = (event: MouseEvent<HTMLButtonElement>): void => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = (): void => {
+    setAnchorEl(null);
+  };
+
+  if (links.length === 0) {
+    return null;
+  }
+
+  // If there is only one link, show it directly as a chip
+  if (links.length === 1 && links[0]) {
+    const link = links[0];
+    return <DashboardLinkChip link={link} />;
+  }
+
+  // If there are 2-3 links, show them all as chips
+  if (links.length <= 3) {
+    return (
+      <Stack direction="row" spacing={0.5} alignItems="center">
+        {links.map((link) => (
+          <DashboardLinkChip key={link.url} link={link} />
+        ))}
+      </Stack>
+    );
+  }
+
+  // For more than 3 links, show a menu
+  return (
+    <>
+      <InfoTooltip description={`${links.length} links`} enterDelay={100}>
+        <IconButton
+          aria-label="Dashboard links"
+          size="small"
+          onClick={handleOpenMenu}
+          sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: theme.spacing(0.5) })}
+        >
+          <LaunchIcon
+            aria-describedby="links-icon"
+            fontSize="inherit"
+            sx={{ color: (theme) => theme.palette.text.secondary }}
+          />
+        </IconButton>
+      </InfoTooltip>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={isMenuOpened}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'dashboard-links',
+        }}
+      >
+        {links.map((link: Link) => (
+          <DashboardLinkMenuItem key={link.url} link={link} />
+        ))}
+      </Menu>
+    </>
+  );
+}
+
+function DashboardLinkChip({ link }: { link: Link }): ReactElement {
+  const { url, name, tooltip, targetBlank } = useLink(link);
+
+  return (
+    <InfoTooltip description={tooltip ?? url} enterDelay={100}>
+      <Chip
+        label={name ?? url}
+        component="a"
+        href={url}
+        target={targetBlank ? '_blank' : '_self'}
+        clickable
+        size="small"
+        icon={<LaunchIcon fontSize="small" />}
+        sx={(theme) => ({ height: theme.spacing(3) })}
+      />
+    </InfoTooltip>
+  );
+}
+
+function DashboardLinkMenuItem({ link }: { link: Link }): ReactElement {
+  const { url, name, tooltip, targetBlank } = useLink(link);
+
+  return (
+    <InfoTooltip description={tooltip ?? url} enterDelay={100}>
+      <MenuItem component={LinkComponent} href={url} target={targetBlank ? '_blank' : '_self'}>
+        {name ?? url}
+      </MenuItem>
+    </InfoTooltip>
+  );
+}
+
+function useLink(link: Link): Link {
+  const url = useReplaceVariablesInString(link.url) ?? link.url;
+  const name = useReplaceVariablesInString(link.name);
+  const tooltip = useReplaceVariablesInString(link.tooltip);
+
+  if (link.renderVariables === false) {
+    return link;
+  }
+
+  return { ...link, url, name, tooltip };
+}