Browse Dashboards: Imported dashboards now display immediately in the dashboard list (#81819)

* create importDashboard method in rtk query

* fix unit tests

* Revert "fix unit tests"

This reverts commit 72cd81c803.

* fix unit test

public/app/features/manage-dashboards/state/actions.test.ts

@@ -1,8 +1,8 @@
 import { thunkTester } from 'test/core/thunk/thunkTester';
 
 import { DataSourceInstanceSettings, ThresholdsMode } from '@grafana/data';
-import { BackendSrv, setBackendSrv } from '@grafana/runtime';
 import { defaultDashboard, FieldColorModeId } from '@grafana/schema';
+import { browseDashboardsAPI } from 'app/features/browse-dashboards/api/browseDashboardsAPI';
 import { getLibraryPanel } from 'app/features/library-panels/state/api';
 
 import { PanelModel } from '../../dashboard/state';
@@ -20,6 +20,15 @@ const mocks = {
 
 describe('importDashboard', () => {
   it('Should send data source uid', async () => {
+    // note: the actual action returned is more complicated
+    // but we don't really care about the return type in this test
+    // we're only testing that the correct data is passed to initiate
+    const mockAction = jest.fn().mockImplementation(() => ({
+      type: 'foo',
+    }));
+    const importDashboardRtkQueryMock = jest
+      .spyOn(browseDashboardsAPI.endpoints.importDashboard, 'initiate')
+      .mockImplementation(mockAction);
     const form: ImportDashboardDTO = {
       title: 'Asda',
       uid: '12',
@@ -40,17 +49,6 @@ describe('importDashboard', () => {
       },
     };
 
-    let postArgs: unknown;
-
-    setBackendSrv({
-      post: (url, args) => {
-        postArgs = args;
-        return Promise.resolve({
-          importedUrl: '/my/dashboard',
-        });
-      },
-    } as BackendSrv);
-
     await thunkTester({
       importDashboard: {
         ...initialImportDashboardState,
@@ -70,7 +68,7 @@ describe('importDashboard', () => {
       .givenThunk(importDashboard)
       .whenThunkIsDispatched(form);
 
-    expect(postArgs).toEqual({
+    expect(importDashboardRtkQueryMock).toHaveBeenCalledWith({
       dashboard: {
         title: 'Asda',
         uid: '12',

public/app/features/manage-dashboards/state/actions.ts

@@ -1,7 +1,8 @@
-import { DataSourceInstanceSettings, locationUtil } from '@grafana/data';
-import { getBackendSrv, getDataSourceSrv, isFetchError, locationService } from '@grafana/runtime';
+import { DataSourceInstanceSettings } from '@grafana/data';
+import { getBackendSrv, getDataSourceSrv, isFetchError } from '@grafana/runtime';
 import { notifyApp } from 'app/core/actions';
 import { createErrorNotification } from 'app/core/copy/appNotification';
+import { browseDashboardsAPI, ImportInputs } from 'app/features/browse-dashboards/api/browseDashboardsAPI';
 import { SaveDashboardCommand } from 'app/features/dashboard/components/SaveDashboard/types';
 import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
 import { FolderInfo, PermissionLevelString, SearchQueryType, ThunkResult } from 'app/types';
@@ -200,7 +201,7 @@ export function importDashboard(importDashboardForm: ImportDashboardDTO): ThunkR
     const dashboard = getState().importDashboard.dashboard;
     const inputs = getState().importDashboard.inputs;
 
-    let inputsToPersist = [] as any[];
+    const inputsToPersist: ImportInputs[] = [];
     importDashboardForm.dataSources?.forEach((dataSource: DataSourceInstanceSettings, index: number) => {
       const input = inputs.dataSources[index];
       inputsToPersist.push({
@@ -221,18 +222,17 @@ export function importDashboard(importDashboardForm: ImportDashboardDTO): ThunkR
       });
     });
 
-    const result = await getBackendSrv().post('api/dashboards/import', {
-      // uid: if user changed it, take the new uid from importDashboardForm,
-      // else read it from original dashboard
-      // by default the uid input is disabled, onSubmit ignores values from disabled inputs
-      dashboard: { ...dashboard, title: importDashboardForm.title, uid: importDashboardForm.uid || dashboard.uid },
-      overwrite: true,
-      inputs: inputsToPersist,
-      folderUid: importDashboardForm.folder.uid,
-    });
-
-    const dashboardUrl = locationUtil.stripBaseFromUrl(result.importedUrl);
-    locationService.push(dashboardUrl);
+    dispatch(
+      browseDashboardsAPI.endpoints.importDashboard.initiate({
+        // uid: if user changed it, take the new uid from importDashboardForm,
+        // else read it from original dashboard
+        // by default the uid input is disabled, onSubmit ignores values from disabled inputs
+        dashboard: { ...dashboard, title: importDashboardForm.title, uid: importDashboardForm.uid || dashboard.uid },
+        overwrite: true,
+        inputs: inputsToPersist,
+        folderUid: importDashboardForm.folder.uid,
+      })
+    );
   };
 }