@grafana/ui
Version:
Grafana Components Library
219 lines (214 loc) • 7.52 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var e2eSelectors = require('@grafana/e2e-selectors');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var mixins = require('../../themes/mixins.cjs');
var Icon = require('../Icon/Icon.cjs');
var IconButton = require('../IconButton/IconButton.cjs');
var Link = require('../Link/Link.cjs');
var ToolbarButtonRow = require('../ToolbarButton/ToolbarButtonRow.cjs');
"use strict";
const PageToolbar = React.memo(
({
title,
section,
parent,
pageIcon,
onGoBack,
children,
titleHref,
parentHref,
leftItems,
isFullscreen,
className,
/** main nav-container aria-label **/
"aria-label": ariaLabel,
buttonOverflowAlignment = "right",
forceShowLeftItems = false,
"data-testid": testId
}) => {
const styles = ThemeContext.useStyles2(getStyles);
const mainStyle = css.cx(
"page-toolbar",
styles.toolbar,
{
["page-toolbar--fullscreen"]: isFullscreen,
[styles.noPageIcon]: !pageIcon
},
className
);
const titleEl = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.truncateText, children: title }),
section && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.pre, children: [
" / ",
section
] })
] });
const goBackLabel = i18n.t("grafana-ui.page-toolbar.go-back", "Go back (Esc)");
const searchParentFolderLabel = i18n.t(
"grafana-ui.page-toolbar.search-parent-folder",
"Search dashboard in the {{parent}} folder",
{ parent }
);
const searchDashboardNameLabel = i18n.t("grafana-ui.page-toolbar.search-dashboard-name", "Search dashboard by name");
const searchLinksLabel = i18n.t("grafana-ui.page-toolbar.search-links", "Search links");
return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: mainStyle, "aria-label": ariaLabel, "data-testid": testId, children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.leftWrapper, children: [
pageIcon && !onGoBack && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.pageIcon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: pageIcon, size: "lg", "aria-hidden": true }) }),
onGoBack && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.pageIcon, children: /* @__PURE__ */ jsxRuntime.jsx(
IconButton.IconButton,
{
name: "arrow-left",
tooltip: goBackLabel,
tooltipPlacement: "bottom",
size: "xxl",
"data-testid": e2eSelectors.selectors.components.BackButton.backArrow,
onClick: onGoBack
}
) }),
/* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-label": searchLinksLabel, className: styles.navElement, children: [
parent && parentHref && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsxs(
Link.Link,
{
"aria-label": searchParentFolderLabel,
className: css.cx(styles.titleText, styles.parentLink, styles.titleLink, styles.truncateText),
href: parentHref,
children: [
parent,
" ",
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.parentIcon })
]
}
),
titleHref && /* @__PURE__ */ jsxRuntime.jsx("span", { className: css.cx(styles.titleText, styles.titleDivider), "aria-hidden": true, children: "/" })
] }),
(title || Boolean(leftItems == null ? void 0 : leftItems.length)) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.titleWrapper, children: [
title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: styles.h1Styles, children: titleHref ? /* @__PURE__ */ jsxRuntime.jsx(
Link.Link,
{
"aria-label": searchDashboardNameLabel,
className: css.cx(styles.titleText, styles.titleLink),
href: titleHref,
children: titleEl
}
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.titleText, children: titleEl }) }),
leftItems == null ? void 0 : leftItems.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
className: css.cx(styles.leftActionItem, { [styles.forceShowLeftActionItems]: forceShowLeftItems }),
children: child
},
index
))
] })
] })
] }),
/* @__PURE__ */ jsxRuntime.jsx(ToolbarButtonRow.ToolbarButtonRow, { alignment: buttonOverflowAlignment, children: React.Children.toArray(children).filter(Boolean) })
] });
}
);
PageToolbar.displayName = "PageToolbar";
const getStyles = (theme) => {
const { spacing, typography } = theme;
const focusStyle = mixins.getFocusStyles(theme);
return {
pre: css.css({
whiteSpace: "pre"
}),
toolbar: css.css({
alignItems: "center",
// TODO change to page background when visual refresh is enabled
background: theme.colors.background.canvas,
display: "flex",
gap: theme.spacing(2),
justifyContent: "space-between",
padding: theme.spacing(2, 2),
[theme.breakpoints.down("md")]: {
paddingLeft: "53px"
}
}),
noPageIcon: css.css({
[theme.breakpoints.down("md")]: {
paddingLeft: theme.spacing(2)
}
}),
leftWrapper: css.css({
display: "flex",
flexWrap: "nowrap",
maxWidth: "70%"
}),
pageIcon: css.css({
display: "none",
[theme.breakpoints.up("sm")]: {
display: "flex",
paddingRight: theme.spacing(1),
alignItems: "center"
}
}),
truncateText: css.css({
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}),
titleWrapper: css.css({
display: "flex",
margin: 0,
minWidth: 0
}),
navElement: css.css({
display: "flex",
alignItems: "center",
minWidth: 0
}),
h1Styles: css.css({
margin: spacing(0, 1, 0, 0),
lineHeight: "inherit",
flexGrow: 1,
minWidth: 0
}),
parentIcon: css.css({
marginLeft: theme.spacing(0.5)
}),
titleText: css.css({
display: "flex",
fontSize: typography.size.lg,
margin: 0,
borderRadius: theme.shape.radius.default
}),
titleLink: css.css({
"&:focus-visible": focusStyle
}),
titleDivider: css.css({
padding: spacing(0, 0.5, 0, 0.5),
display: "none",
[theme.breakpoints.up("md")]: {
display: "unset"
}
}),
parentLink: css.css({
display: "none",
[theme.breakpoints.up("md")]: {
display: "unset",
flex: 1
}
}),
leftActionItem: css.css({
display: "none",
alignItems: "center",
paddingRight: spacing(0.5),
[theme.breakpoints.up("md")]: {
display: "flex"
}
}),
forceShowLeftActionItems: css.css({
display: "flex"
})
};
};
exports.PageToolbar = PageToolbar;
//# sourceMappingURL=PageToolbar.cjs.map