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

Dashboards: add showMenuAlways prop to PanelChrome (#96868)

Browse Source 
* feat: add showMenuOnHover prop to always render menu in viz
This commit is contained in:
Galen Kistler 2024-11-26 17:28:56 -06:00 committed by GitHub
parent e73bb34cc0
commit 5fadc35664
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx
View File

@ -236,6 +236,11 @@ export const Examples = () => {
title: 'Default title',
collapsible: true,
})}
{renderPanel('Menu always visible', {
title: 'Menu always visible',
showMenuAlways: true,
menu,
})}
{renderPanel('Panel with action link', {
title: 'Panel with action link',
actions: (

7
packages/grafana-ui/src/components/PanelChrome/PanelChrome.test.tsx
View File

@ -111,6 +111,13 @@ it('renders panel with a show-on-hover menu icon if prop menu', () => {
expect(screen.getByTestId('panel-menu-button')).not.toBeVisible();
});
it('renders panel with an always visible menu icon if prop showMenuAlways is true', () => {
setup({ menu: <div> Menu </div>, showMenuAlways: true });
expect(screen.getByTestId('panel-menu-button')).toBeInTheDocument();
expect(screen.getByTestId('panel-menu-button')).toBeVisible();
});
it('renders error status in the panel header if any given', () => {
setup({ statusMessage: 'Error test' });

15
packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
View File

@ -83,6 +83,10 @@ interface AutoSize extends BaseProps {
interface Collapsible {
collapsible: boolean;
collapsed?: boolean;
/**
* If true, the VizPanelMenu will always be visible in the panel header. Defaults to false.
*/
showMenuAlways?: boolean;
/**
* callback when collapsing or expanding the panel
*/
@ -94,6 +98,7 @@ interface Collapsible {
interface HoverHeader {
collapsible?: never;
collapsed?: never;
showMenuAlways?: never;
onToggleCollapse?: never;
hoverHeader?: boolean;
hoverHeaderOffset?: number;
@ -134,6 +139,7 @@ export function PanelChrome({
onFocus,
onMouseMove,
onMouseEnter,
showMenuAlways = false,
}: PanelChromeProps) {
const theme = useTheme2();
const styles = useStyles2(getStyles);
@ -150,7 +156,7 @@ export function PanelChrome({
}
// hover menu is only shown on hover when not on touch devices
const showOnHoverClass = 'show-on-hover';
const showOnHoverClass = showMenuAlways ? 'always-show' : 'show-on-hover';
const isPanelTransparent = displayMode === 'transparent';
const headerHeight = getHeaderHeight(theme, hasHeader);
@ -390,6 +396,13 @@ const getStyles = (theme: GrafanaTheme2) => {
display: 'flex',
flexDirection: 'column',
'.always-show': {
background: 'none',
'&:focus-visible, &:hover': {
background: theme.colors.secondary.shade,
},
},
'.show-on-hover': {
opacity: '0',
visibility: 'hidden',