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

Migrate public dashboard badge to scenes dashboard

Author: axelavargas

public/app/features/dashboard-scene/scene/NavToolbarActions.tsx

@@ -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',
+    }),
+  };
 }