make empty dashboard experience a bit better

public/app/features/dashboard-scene/edit-pane/DashboardAddPanelPane.tsx

@@ -97,9 +97,15 @@ export function DashboardAddPanelPane({ editPane }: Props) {
     },
   ]);
 
-  // This defaults to open, but should probably not be open if there is a current datasource.
+  // Open datasource picker if no datasource is selected
-  // FIXME [HACK] it was set as false for fast development purposes
+  const [isDsPickerOpen, setIsDsPickerOpen] = useState(!currentDatasource);
-  const [isDsPickerOpen, setIsDsPickerOpen] = useState(false);
+
+  // Update datasource picker state when currentDatasource changes
+  useEffect(() => {
+    if (!currentDatasource && !isDsPickerOpen) {
+      setIsDsPickerOpen(true);
+    }
+  }, [currentDatasource, isDsPickerOpen]);
 
   const styles = useStyles2(getStyles);
   const clearButton = useStyles2(clearButtonStyles);

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import type { DragEvent as ReactDragEvent } from 'react';
+import { useEffect, type DragEvent as ReactDragEvent } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -63,6 +63,16 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
 
   const isProvisioned = dashboard instanceof DashboardScene && dashboard.isManagedRepository();
 
+  // Automatically open the add panel pane when DashboardEmpty is rendered for DashboardScene
+  useEffect(() => {
+    if (dashboard instanceof DashboardScene && canCreate && !isReadOnlyRepo) {
+      // Only open if not already adding and dashboard is editable
+      if (!dashboard.state.editPane.state.isAdding && dashboard.state.editable) {
+        dashboard.state.editPane.setState({ isAdding: true });
+      }
+    }
+  }, [dashboard, canCreate, isReadOnlyRepo]);
+
   const onDragOver = (e: ReactDragEvent<HTMLDivElement>) => {
     if (!(dashboard instanceof DashboardScene)) {
       return;