PublicDashboards: Tag is rerendered when dashboard meta changes in state (#55414)

Can update dashboard meta state using dashboard events.

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

@@ -0,0 +1,54 @@
+import { act, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+
+import { locationService } from '@grafana/runtime/src';
+import { GrafanaContext } from 'app/core/context/GrafanaContext';
+
+import { getGrafanaContextMock } from '../../../../../test/mocks/getGrafanaContextMock';
+import { setStarred } from '../../../../core/reducers/navBarTree';
+import { configureStore } from '../../../../store/configureStore';
+import { updateTimeZoneForSession } from '../../../profile/state/reducers';
+import { DashboardModel } from '../../state';
+
+import { DashNav } from './DashNav';
+
+describe('Public dashboard title tag', () => {
+  it('will be rendered when publicDashboardEnabled set to true in dashboard meta', async () => {
+    let dashboard = new DashboardModel({}, { publicDashboardEnabled: false });
+
+    const store = configureStore();
+    const context = getGrafanaContextMock();
+    const props = {
+      setStarred: jest.fn() as unknown as typeof setStarred,
+      updateTimeZoneForSession: jest.fn() as unknown as typeof updateTimeZoneForSession,
+    };
+
+    render(
+      <Provider store={store}>
+        <GrafanaContext.Provider value={context}>
+          <Router history={locationService.getHistory()}>
+            <DashNav
+              {...props}
+              dashboard={dashboard}
+              hideTimePicker={true}
+              isFullscreen={false}
+              onAddPanel={() => {}}
+              title="test"
+            />
+          </Router>
+        </GrafanaContext.Provider>
+      </Provider>
+    );
+
+    const publicTag = screen.queryByText('Public');
+    expect(publicTag).not.toBeInTheDocument();
+
+    act(() => {
+      dashboard.updateMeta({ publicDashboardEnabled: true });
+    });
+
+    await waitFor(() => screen.getByText('Public'));
+  });
+});

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

@@ -19,12 +19,14 @@ import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
 import { NavToolbarSeparator } from 'app/core/components/AppChrome/NavToolbarSeparator';
 import config from 'app/core/config';
 import { useGrafana } from 'app/core/context/GrafanaContext';
+import { useBusEvent } from 'app/core/hooks/useBusEvent';
 import { DashboardCommentsModal } from 'app/features/dashboard/components/DashboardComments/DashboardCommentsModal';
 import { SaveDashboardDrawer } from 'app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer';
 import { ShareModal } from 'app/features/dashboard/components/ShareModal';
 import { playlistSrv } from 'app/features/playlist/PlaylistSrv';
 import { updateTimeZoneForSession } from 'app/features/profile/state/reducers';
 import { KioskMode } from 'app/types';
+import { DashboardMetaChangedEvent } from 'app/types/events';
 
 import { setStarred } from '../../../../core/reducers/navBarTree';
 import { getDashboardSrv } from '../../services/DashboardSrv';
@@ -75,6 +77,9 @@ export const DashNav = React.memo<Props>((props) => {
   const forceUpdate = useForceUpdate();
   const { chrome } = useGrafana();
 
+  // We don't really care about the event payload here only that it triggeres a re-render of this component
+  useBusEvent(props.dashboard.events, DashboardMetaChangedEvent);
+
   const onStarDashboard = () => {
     const dashboardSrv = getDashboardSrv();
     const { dashboard, setStarred } = props;