New Dashboard: Fix "build a dashboard" when empty dash page feature is enabled (#66816)

* New Dashboard: Fix "build a dashboard" when used with empty dash page feature

Closes #66659

public/app/features/dashboard/components/AddPanelButton/AddPanelMenu.tsx

@@ -12,6 +12,9 @@ import {
   onCreateNewRow,
   onPasteCopiedPanel,
 } from 'app/features/dashboard/utils/dashboard';
+import { useDispatch, useSelector } from 'app/types';
+
+import { setInitialDatasource } from '../../state/reducers';
 
 interface Props {
   dashboard: DashboardModel;
@@ -19,6 +22,8 @@ interface Props {
 
 export const AddPanelMenu = ({ dashboard }: Props) => {
   const copiedPanelPlugin = useMemo(() => getCopiedPanelPlugin(), []);
+  const dispatch = useDispatch();
+  const initialDatasource = useSelector((state) => state.dashboard.initialDatasource);
 
   return (
     <Menu>
@@ -27,9 +32,10 @@ export const AddPanelMenu = ({ dashboard }: Props) => {
         label={t('dashboard.add-menu.visualization', 'Visualization')}
         testId={selectors.components.PageToolbar.itemButton('Add new visualization menu item')}
         onClick={() => {
+          const id = onCreateNewPanel(dashboard, initialDatasource);
           reportInteraction('dashboards_toolbar_add_clicked', { item: 'add_visualization' });
-          const id = onCreateNewPanel(dashboard);
           locationService.partial({ editPanel: id });
+          dispatch(setInitialDatasource(undefined));
         }}
       />
       <Menu.Item

public/app/features/dashboard/containers/NewDashboardWithDS.tsx

@@ -1,14 +1,17 @@
 import React, { useEffect, useState } from 'react';
 
-import { getDataSourceSrv, locationService } from '@grafana/runtime';
+import { config, getDataSourceSrv, locationService } from '@grafana/runtime';
 import { Page } from 'app/core/components/Page/Page';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
+import { useDispatch } from 'app/types';
 
 import { getNewDashboardModelData, setDashboardToFetchFromLocalStorage } from '../state/initDashboard';
+import { setInitialDatasource } from '../state/reducers';
 
 export default function NewDashboardWithDS(props: GrafanaRouteComponentProps<{ datasourceUid: string }>) {
   const [error, setError] = useState<string | null>(null);
   const { datasourceUid } = props.match.params;
+  const dispatch = useDispatch();
 
   useEffect(() => {
     const ds = getDataSourceSrv().getInstanceSettings(datasourceUid);
@@ -17,19 +20,24 @@ export default function NewDashboardWithDS(props: GrafanaRouteComponentProps<{ d
       return;
     }
 
-    const newDashboard = getNewDashboardModelData();
+    if (!config.featureToggles.emptyDashboardPage) {
-    const { dashboard } = newDashboard;
+      const newDashboard = getNewDashboardModelData();
-    dashboard.panels[0] = {
+      const { dashboard } = newDashboard;
-      ...dashboard.panels[0],
+      dashboard.panels[0] = {
-      datasource: {
+        ...dashboard.panels[0],
-        uid: ds.uid,
+        datasource: {
-        type: ds.type,
+          uid: ds.uid,
-      },
+          type: ds.type,
-    };
+        },
+      };
+
+      setDashboardToFetchFromLocalStorage(newDashboard);
+    } else {
+      dispatch(setInitialDatasource(datasourceUid));
+    }
 
-    setDashboardToFetchFromLocalStorage(newDashboard);
     locationService.replace('/dashboard/new');
-  }, [datasourceUid]);
+  }, [datasourceUid, dispatch]);
 
   if (error) {
     return (

public/app/features/dashboard/dashgrid/DashboardEmpty.tsx

@@ -7,6 +7,9 @@ import { Button, useStyles2 } from '@grafana/ui';
 import { Trans } from 'app/core/internationalization';
 import { DashboardModel } from 'app/features/dashboard/state';
 import { onAddLibraryPanel, onCreateNewPanel, onCreateNewRow } from 'app/features/dashboard/utils/dashboard';
+import { useDispatch, useSelector } from 'app/types';
+
+import { setInitialDatasource } from '../state/reducers';
 
 export interface Props {
   dashboard: DashboardModel;
@@ -15,6 +18,8 @@ export interface Props {
 
 export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
   const styles = useStyles2(getStyles);
+  const dispatch = useDispatch();
+  const initialDatasource = useSelector((state) => state.dashboard.initialDatasource);
 
   return (
     <div className={styles.centeredContent}>
@@ -36,9 +41,10 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
             icon="plus"
             aria-label="Add new panel"
             onClick={() => {
+              const id = onCreateNewPanel(dashboard, initialDatasource);
               reportInteraction('dashboards_emptydashboard_clicked', { item: 'add_visualization' });
-              const id = onCreateNewPanel(dashboard);
               locationService.partial({ editPanel: id });
+              dispatch(setInitialDatasource(undefined));
             }}
             disabled={!canCreate}
           >

public/app/features/dashboard/state/reducers.ts

@@ -14,6 +14,7 @@ export const initialState: DashboardState = {
   getModel: () => null,
   permissions: [],
   initError: null,
+  initialDatasource: undefined,
 };
 
 const dashboardSlice = createSlice({
@@ -53,6 +54,9 @@ const dashboardSlice = createSlice({
     addPanel: (state, action: PayloadAction<PanelModel>) => {
       //state.panels[action.payload.id] = { pluginId: action.payload.type };
     },
+    setInitialDatasource: (state, action: PayloadAction<string | undefined>) => {
+      state.initialDatasource = action.payload;
+    },
   },
 });
 
@@ -79,6 +83,7 @@ export const {
   dashboardInitServices,
   cleanUpDashboard,
   addPanel,
+  setInitialDatasource,
 } = dashboardSlice.actions;
 
 export const dashboardReducer = dashboardSlice.reducer;

public/app/features/dashboard/utils/dashboard.ts

@@ -7,11 +7,12 @@ import store from 'app/core/store';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { calculateNewPanelGridPos } from 'app/features/dashboard/utils/panel';
 
-export function onCreateNewPanel(dashboard: DashboardModel): number | undefined {
+export function onCreateNewPanel(dashboard: DashboardModel, datasource?: string): number | undefined {
   const newPanel: Partial<PanelModel> = {
     type: 'timeseries',
     title: 'Panel Title',
     gridPos: calculateNewPanelGridPos(dashboard),
+    datasource: datasource ? { uid: datasource } : null,
     isNew: true,
   };
 

public/app/types/dashboard.ts

@@ -1,5 +1,5 @@
 import { DataQuery } from '@grafana/data';
-import { Dashboard } from '@grafana/schema';
+import { Dashboard, DataSourceRef } from '@grafana/schema';
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
 
 import { DashboardAcl } from './acl';
@@ -101,6 +101,7 @@ export interface QueriesToUpdateOnDashboardLoad {
 export interface DashboardState {
   getModel: GetMutableDashboardModelFn;
   initPhase: DashboardInitPhase;
+  initialDatasource?: DataSourceRef['uid'];
   initError: DashboardInitError | null;
   permissions: DashboardAcl[];
 }