DashboardScene: Show insights icon (#84877)

* DashboardScene: Show insights icon

* Update

* Create separate group for precence indicators

* fix

* Update

* fix tests

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

@@ -9,13 +9,14 @@ import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
 import { NavToolbarSeparator } from 'app/core/components/AppChrome/NavToolbar/NavToolbarSeparator';
 import { contextSrv } from 'app/core/core';
 import { Trans, t } from 'app/core/internationalization';
+import { DashNavModalContextProvider, DashNavModalRoot } from 'app/features/dashboard/components/DashNav/DashNav';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { playlistSrv } from 'app/features/playlist/PlaylistSrv';
 
 import { PanelEditor } from '../panel-edit/PanelEditor';
 import { ShareModal } from '../sharing/ShareModal';
 import { DashboardInteractions } from '../utils/interactions';
-import { dynamicDashNavActions } from '../utils/registerDynamicDashNavAction';
+import { DynamicDashNavButtonModel, dynamicDashNavActions } from '../utils/registerDynamicDashNavAction';
 
 import { DashboardScene } from './DashboardScene';
 import { GoToSnapshotOriginButton } from './GoToSnapshotOriginButton';
@@ -27,9 +28,12 @@ interface Props {
 
 export const NavToolbarActions = React.memo<Props>(({ dashboard }) => {
   const actions = (
-    <ToolbarButtonRow alignment="right">
-      <ToolbarActions dashboard={dashboard} />
-    </ToolbarButtonRow>
+    <DashNavModalContextProvider>
+      <ToolbarButtonRow alignment="right">
+        <ToolbarActions dashboard={dashboard} />
+      </ToolbarButtonRow>
+      <DashNavModalRoot />
+    </DashNavModalContextProvider>
   );
 
   return <AppChromeUpdate actions={actions} />;
@@ -64,6 +68,11 @@ export function ToolbarActions({ dashboard }: Props) {
   const isShowingDashboard = !editview && !isViewingPanel && !isEditingPanel;
   const isEditingAndShowingDashboard = isEditing && isShowingDashboard;
 
+  if (!isEditingPanel) {
+    // This adds the precence indicators in enterprise
+    addDynamicActions(toolbarActions, dynamicDashNavActions.left, 'left-actions');
+  }
+
   toolbarActions.push({
     group: 'icon-actions',
     condition: isEditingAndShowingDashboard,
@@ -221,18 +230,9 @@ export function ToolbarActions({ dashboard }: Props) {
     ),
   });
 
-  if (dynamicDashNavActions.left.length > 0 && !isEditingPanel) {
-    dynamicDashNavActions.left.map((action, index) => {
-      const props = { dashboard: getDashboardSrv().getCurrent()! };
-      if (action.show(props)) {
-        const Component = action.component;
-        toolbarActions.push({
-          group: 'icon-actions',
-          condition: true,
-          render: () => <Component {...props} />,
-        });
-      }
-    });
+  if (!isEditingPanel) {
+    // This adds the alert rules button and the dashboard insights button
+    addDynamicActions(toolbarActions, dynamicDashNavActions.right, 'icon-actions');
   }
 
   toolbarActions.push({
@@ -521,6 +521,26 @@ export function ToolbarActions({ dashboard }: Props) {
   return actionElements;
 }
 
+function addDynamicActions(
+  toolbarActions: ToolbarAction[],
+  registeredActions: DynamicDashNavButtonModel[],
+  group: string
+) {
+  if (registeredActions.length > 0) {
+    for (const action of registeredActions) {
+      const props = { dashboard: getDashboardSrv().getCurrent()! };
+      if (action.show(props)) {
+        const Component = action.component;
+        toolbarActions.push({
+          group: group,
+          condition: true,
+          render: () => <Component {...props} key={toolbarActions.length} />,
+        });
+      }
+    }
+  }
+}
+
 function useEditingLibraryPanel(panelEditor?: PanelEditor) {
   const [isEditingLibraryPanel, setEditingLibraryPanel] = useState<Boolean>(false);