FolderPicker: Fixes not being able to create new folder (#27092)

* FolderPicker: Fixes not being able to create new folder

* Update public/app/core/components/Select/FolderPicker.tsx

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* Refactor: Fixes import issues for tests that do not mock GrafanaBootConfig

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

public/app/core/components/Select/FolderPicker.test.tsx

@@ -11,6 +11,10 @@ jest.mock('@grafana/runtime', () => ({
   }),
 }));
 
+jest.mock('../../config', () => ({
+  getConfig: () => ({}),
+}));
+
 jest.mock('app/core/services/context_srv', () => ({
   contextSrv: {
     user: { orgId: 1 },

public/app/core/components/Select/FolderPicker.tsx

@@ -4,9 +4,11 @@ import { AsyncSelect } from '@grafana/ui';
 import { AppEvents, SelectableValue } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
 import { selectors } from '@grafana/e2e-selectors';
+
 import appEvents from '../../app_events';
 import { contextSrv } from 'app/core/services/context_srv';
 import { DashboardSearchHit } from 'app/features/search/types';
+import { createFolder } from 'app/features/manage-dashboards/state/actions';
 
 export interface Props {
   onChange: ($folder: { title: string; id: number }) => void;
@@ -89,7 +91,7 @@ export class FolderPicker extends PureComponent<Props, State> {
 
   createNewFolder = async (folderName: string) => {
     // @ts-ignore
-    const newFolder = await getBackendSrv().createFolder({ title: folderName });
+    const newFolder = await createFolder({ title: folderName });
     let folder = { value: -1, label: 'Not created' };
     if (newFolder.id > -1) {
       appEvents.emit(AppEvents.alertSuccess, ['Folder Created', 'OK']);

public/app/core/services/FetchQueueWorker.ts

 import { concatMap, filter } from 'rxjs/operators';
 
 import { FetchQueue, FetchStatus } from './FetchQueue';
-import { BackendSrvRequest } from '@grafana/runtime';
+import { BackendSrvRequest, GrafanaBootConfig } from '@grafana/runtime';
 import { isDataQuery } from '../utils/query';
 import { ResponseQueue } from './ResponseQueue';
-import { getConfig } from '../config';
 
 interface WorkerEntry {
   id: string;
@@ -12,8 +11,8 @@ interface WorkerEntry {
 }
 
 export class FetchQueueWorker {
-  constructor(fetchQueue: FetchQueue, responseQueue: ResponseQueue, config = getConfig()) {
-    const maxParallelRequests = config.http2Enabled ? 1000 : 5; // assuming that 1000 parallel requests are enough for http2
+  constructor(fetchQueue: FetchQueue, responseQueue: ResponseQueue, config: GrafanaBootConfig) {
+    const maxParallelRequests = config?.http2Enabled ? 1000 : 5; // for tests that don't mock GrafanaBootConfig the config param will be undefined
 
     // This will create an implicit live subscription for as long as this class lives.
     // But as FetchQueueWorker is used by the singleton backendSrv that also lives for as long as Grafana app lives

public/app/core/services/backend_srv.ts

@@ -5,7 +5,7 @@ import { BackendSrv as BackendService, BackendSrvRequest, FetchError, FetchRespo
 import { AppEvents } from '@grafana/data';
 
 import appEvents from 'app/core/app_events';
-import config from 'app/core/config';
+import config, { getConfig } from 'app/core/config';
 import { DashboardSearchHit } from 'app/features/search/types';
 import { FolderDTO } from 'app/types';
 import { coreModule } from 'app/core/core_module';
@@ -54,7 +54,7 @@ export class BackendSrv implements BackendService {
     this.internalFetch = this.internalFetch.bind(this);
     this.fetchQueue = new FetchQueue();
     this.responseQueue = new ResponseQueue(this.fetchQueue, this.internalFetch);
-    new FetchQueueWorker(this.fetchQueue, this.responseQueue);
+    new FetchQueueWorker(this.fetchQueue, this.responseQueue, getConfig());
   }
 
   async request<T = any>(options: BackendSrvRequest): Promise<T> {