Dashboard: Migration - Add public dashboard tag in the nav bar (#86204)

Migrate public dashboard badge to scenes dashboard
This commit is contained in:
Alexa V 2024-04-16 10:04:25 +02:00 committed by GitHub
parent 9015bfa3f4
commit 40f1b2c92c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -4,7 +4,17 @@ import React, { useEffect, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { config, locationService } from '@grafana/runtime';
import { Button, ButtonGroup, Dropdown, Icon, Menu, ToolbarButton, ToolbarButtonRow, useStyles2 } from '@grafana/ui';
import {
Badge,
Button,
ButtonGroup,
Dropdown,
Icon,
Menu,
ToolbarButton,
ToolbarButtonRow,
useStyles2,
} from '@grafana/ui';
import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
import { NavToolbarSeparator } from 'app/core/components/AppChrome/NavToolbar/NavToolbarSeparator';
import { contextSrv } from 'app/core/core';
@ -51,7 +61,7 @@ export function ToolbarActions({ dashboard }: Props) {
const canSaveAs = contextSrv.hasEditPermissionInFolders;
const toolbarActions: ToolbarAction[] = [];
const buttonWithExtraMargin = useStyles2(getStyles);
const styles = useStyles2(getStyles);
const isEditingPanel = Boolean(editPanel);
const isViewingPanel = Boolean(viewPanelScene);
const isEditingLibraryPanel = useEditingLibraryPanel(editPanel);
@ -88,6 +98,24 @@ export function ToolbarActions({ dashboard }: Props) {
},
});
if (meta.publicDashboardEnabled) {
toolbarActions.push({
group: 'icon-actions',
condition: uid && Boolean(meta.canStar) && isShowingDashboard && !isEditing,
render: () => {
return (
<Badge
color="blue"
text="Public"
key="public-dashboard-button-badge"
className={styles.publicBadge}
data-testid={selectors.pages.Dashboard.DashNav.publicDashboardTag}
/>
);
},
});
}
const isDevEnv = config.buildInfo.env === 'development';
toolbarActions.push({
@ -280,7 +308,7 @@ export function ToolbarActions({ dashboard }: Props) {
key="share-dashboard-button"
tooltip={t('dashboard.toolbar.share', 'Share dashboard')}
size="sm"
className={buttonWithExtraMargin}
className={styles.buttonWithExtraMargin}
fill="outline"
onClick={() => {
DashboardInteractions.toolbarShareClick();
@ -302,7 +330,7 @@ export function ToolbarActions({ dashboard }: Props) {
}}
tooltip="Enter edit mode"
key="edit"
className={buttonWithExtraMargin}
className={styles.buttonWithExtraMargin}
variant="primary"
size="sm"
>
@ -427,7 +455,7 @@ export function ToolbarActions({ dashboard }: Props) {
DashboardInteractions.toolbarSaveClick();
dashboard.openSaveDrawer({});
}}
className={buttonWithExtraMargin}
className={styles.buttonWithExtraMargin}
tooltip="Save changes"
key="save"
size="sm"
@ -446,7 +474,7 @@ export function ToolbarActions({ dashboard }: Props) {
DashboardInteractions.toolbarSaveClick();
dashboard.openSaveDrawer({ saveAsCopy: true });
}}
className={buttonWithExtraMargin}
className={styles.buttonWithExtraMargin}
tooltip="Save as copy"
key="save"
size="sm"
@ -480,7 +508,7 @@ export function ToolbarActions({ dashboard }: Props) {
);
return (
<ButtonGroup className={buttonWithExtraMargin} key="save">
<ButtonGroup className={styles.buttonWithExtraMargin} key="save">
<Button
onClick={() => {
DashboardInteractions.toolbarSaveClick();
@ -565,5 +593,14 @@ interface ToolbarAction {
}
function getStyles(theme: GrafanaTheme2) {
return css({ margin: theme.spacing(0, 0.5) });
return {
buttonWithExtraMargin: css({
margin: theme.spacing(0, 0.5),
}),
publicBadge: css({
color: 'grey',
backgroundColor: 'transparent',
border: '1px solid',
}),
};
}