PublicDashboards: Use API to render public dashboard badge (#107638)

* PublicDashboards: Use API to render public dashboard badge

* i18n

* Keine console bitte

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

* Update tests

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

@@ -5,17 +5,7 @@ import { GrafanaTheme2, store } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
 import { config, locationService } from '@grafana/runtime';
-import {
-  Badge,
-  Button,
-  ButtonGroup,
-  Dropdown,
-  Icon,
-  Menu,
-  ToolbarButton,
-  ToolbarButtonRow,
-  useStyles2,
-} from '@grafana/ui';
+import { 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 grafanaConfig from 'app/core/config';
@@ -39,6 +29,7 @@ import { GoToSnapshotOriginButton } from './GoToSnapshotOriginButton';
 import ManagedDashboardNavBarBadge from './ManagedDashboardNavBarBadge';
 import { LeftActions } from './new-toolbar/LeftActions';
 import { RightActions } from './new-toolbar/RightActions';
+import { PublicDashboardBadge } from './new-toolbar/actions/PublicDashboardBadge';
 
 interface Props {
   dashboard: DashboardScene;
@@ -119,23 +110,13 @@ 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={t('dashboard.toolbar.public-dashboard', 'Public')}
-            key="public-dashboard-button-badge"
-            className={styles.publicBadge}
-            data-testid={selectors.pages.Dashboard.DashNav.publicDashboardTag}
-          />
-        );
-      },
-    });
-  }
+  toolbarActions.push({
+    group: 'icon-actions',
+    condition: uid && Boolean(meta.canStar) && isShowingDashboard && !isEditing,
+    render: () => {
+      return <PublicDashboardBadge key="public-dashboard-badge" dashboard={dashboard} />;
+    },
+  });
 
   if (dashboard.isManaged() && meta.canEdit) {
     toolbarActions.push({

public/app/features/dashboard-scene/scene/new-toolbar/LeftActions.tsx

@@ -16,7 +16,6 @@ export const LeftActions = ({ dashboard }: { dashboard: DashboardScene }) => {
   const isViewingPanel = Boolean(viewPanelScene);
   const isEditingDashboard = Boolean(isEditing);
   const isEditingPanel = Boolean(editPanel);
-  const isPublicDashboard = Boolean(meta.publicDashboardEnabled);
   const hasUid = Boolean(uid);
   const canEdit = Boolean(meta.canEdit);
   const canStar = Boolean(meta.canStar);
@@ -37,7 +36,7 @@ export const LeftActions = ({ dashboard }: { dashboard: DashboardScene }) => {
         key: 'public-dashboard-badge',
         component: PublicDashboardBadge,
         group: 'actions',
-        condition: isPublicDashboard && hasUid && canStar && isShowingDashboard && !isEditingDashboard,
+        condition: hasUid && canStar && isShowingDashboard && !isEditingDashboard,
       },
       {
         key: 'managed-dashboard-badge',

public/app/features/dashboard-scene/scene/new-toolbar/actions/PublicDashboardBadge.tsx

@@ -3,10 +3,32 @@ import { css } from '@emotion/css';
 import { selectors } from '@grafana/e2e-selectors';
 import { t } from '@grafana/i18n';
 import { Badge, useStyles2 } from '@grafana/ui';
+import { useGetPublicDashboardQuery } from 'app/features/dashboard/api/publicDashboardApi';
 
 import { ToolbarActionProps } from '../types';
 
-export const PublicDashboardBadge = ({}: ToolbarActionProps) => {
+export const PublicDashboardBadge = ({ dashboard }: ToolbarActionProps) => {
+  if (!dashboard.state.uid) {
+    return null;
+  }
+
+  return <PublicDashboardBadgeInternal uid={dashboard.state.uid} />;
+};
+
+// Used in old architecture
+export const PublicDashboardBadgeLegacy = PublicDashboardBadgeInternal;
+
+function PublicDashboardBadgeInternal({ uid }: { uid?: string }) {
+  if (!uid) {
+    return null;
+  }
+
+  const { data: publicDashboard } = useGetPublicDashboardQuery(uid);
+
+  if (!publicDashboard) {
+    return null;
+  }
+
   const styles = useStyles2(getStyles);
 
   return (
@@ -17,7 +39,7 @@ export const PublicDashboardBadge = ({}: ToolbarActionProps) => {
       data-testid={selectors.pages.Dashboard.DashNav.publicDashboardTag}
     />
   );
-};
+}
 
 const getStyles = () => ({
   badge: css({

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -4,7 +4,6 @@ import { connect, ConnectedProps } from 'react-redux';
 import { useLocation } from 'react-router-dom-v5-compat';
 
 import { textUtil } from '@grafana/data';
-import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
 import { Trans, t } from '@grafana/i18n';
 import { locationService } from '@grafana/runtime';
 import {
@@ -14,7 +13,6 @@ import {
   useForceUpdate,
   ToolbarButtonRow,
   ConfirmModal,
-  Badge,
 } from '@grafana/ui';
 import { updateNavIndex } from 'app/core/actions';
 import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
@@ -29,6 +27,7 @@ import AddPanelButton from 'app/features/dashboard/components/AddPanelButton/Add
 import { SaveDashboardDrawer } from 'app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
+import { PublicDashboardBadgeLegacy } from 'app/features/dashboard-scene/scene/new-toolbar/actions/PublicDashboardBadge';
 import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';
 import { playlistSrv } from 'app/features/playlist/PlaylistSrv';
 import { updateTimeZoneForSession } from 'app/features/profile/state/reducers';
@@ -58,8 +57,6 @@ const mapStateToProps = (state: StoreState) => ({
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
 
-const selectors = e2eSelectors.pages.Dashboard.DashNav;
-
 export interface OwnProps {
   dashboard: DashboardModel;
   isFullscreen: boolean;
@@ -215,18 +212,7 @@ export const DashNav = memo<Props>((props) => {
       );
     }
 
-    if (dashboard.meta.publicDashboardEnabled) {
-      // TODO: This will be replaced with the new badge component. Color is required but gets override by css
-      buttons.push(
-        <Badge
-          color="blue"
-          text={t('dashboard.dash-nav.render-left-actions.text-public', 'Public')}
-          key="public-dashboard-button-badge"
-          className={publicBadgeStyle}
-          data-testid={selectors.publicDashboardTag}
-        />
-      );
-    }
+    buttons.push(<PublicDashboardBadgeLegacy key="public-dashboard-badge" uid={dashboard.uid} />);
 
     if (isDevEnv && config.featureToggles.dashboardScene) {
       buttons.push(
@@ -377,9 +363,3 @@ const modalStyles = css({
   width: 'max-content',
   maxWidth: '80vw',
 });
-
-const publicBadgeStyle = css({
-  color: 'grey',
-  backgroundColor: 'transparent',
-  border: '1px solid',
-});

public/locales/en-US/grafana.json

@@ -4399,7 +4399,6 @@
         }
       },
       "render-left-actions": {
-        "text-public": "Public",
         "tooltip-view-as-scene": "View as Scene"
       }
     },
@@ -5173,7 +5172,6 @@
       "playlist-next": "Go to next dashboard",
       "playlist-previous": "Go to previous dashboard",
       "playlist-stop": "Stop playlist",
-      "public-dashboard": "Public",
       "refresh": "Refresh dashboard",
       "save": "Save dashboard",
       "save-dashboard": {