Nested folders: use FolderPicker in dashboard settings (#72192)

* Use new NestedFolderPicker in SaveDashboardAsForm

* use FolderPicker wrapper in dashboard settings

* fix e2e test

* actually pass the deprecated props to the component

* just pass value

---------

Co-authored-by: joshhunt <josh@trtr.co>

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 
 import { config } from '@grafana/runtime';
 
@@ -12,11 +12,17 @@ interface FolderPickerProps extends NestedFolderPickerProps {
   /** @deprecated */
   initialTitle?: string;
 
+  /** @deprecated */
+  inputId?: string;
+
   /** @deprecated */
   dashboardId?: number | string;
 
   /** @deprecated */
   enableCreateNew?: boolean;
+
+  /** @deprecated */
+  skipInitialLoad?: boolean;
 }
 
 // Temporary wrapper component to switch between the NestedFolderPicker and the old flat
@@ -37,9 +43,9 @@ function OldFolderPickerWrapper({
   initialTitle,
   dashboardId,
   enableCreateNew,
+  inputId,
+  skipInitialLoad,
 }: FolderPickerProps) {
-  const [initialFolderUID] = useState(value);
-
   const handleOnChange = useCallback(
     (newFolder: { title: string; uid: string }) => {
       if (onChange) {
@@ -53,8 +59,10 @@ function OldFolderPickerWrapper({
     <OldFolderPicker
       onChange={handleOnChange}
       showRoot={showRootFolder}
-      initialFolderUid={initialFolderUID}
+      initialFolderUid={value}
       initialTitle={initialTitle}
+      inputId={inputId}
+      skipInitialLoad={skipInitialLoad}
       dashboardId={dashboardId}
       enableCreateNew={enableCreateNew}
     />

public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx

@@ -2,11 +2,9 @@ import React, { useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { TimeZone } from '@grafana/data';
-import { config } from '@grafana/runtime';
 import { CollapsableSection, Field, Input, RadioButtonGroup, TagsInput } from '@grafana/ui';
-import { NestedFolderPicker } from 'app/core/components/NestedFolderPicker/NestedFolderPicker';
 import { Page } from 'app/core/components/Page/Page';
-import { OldFolderPicker } from 'app/core/components/Select/OldFolderPicker';
+import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import { updateTimeZoneDashboard, updateWeekStartDashboard } from 'app/features/dashboard/state/actions';
 
 import { DeleteDashboardButton } from '../DeleteDashboard/DeleteDashboardButton';
@@ -30,14 +28,7 @@ export function GeneralSettingsUnconnected({
 }: Props): JSX.Element {
   const [renderCounter, setRenderCounter] = useState(0);
 
-  const onFolderChange = (newFolder: { uid: string; title: string }) => {
+  const onFolderChange = (newUID: string, newTitle: string) => {
-    dashboard.meta.folderUid = newFolder.uid;
-    dashboard.meta.folderTitle = newFolder.title;
-    dashboard.meta.hasUnsavedFolderChange = true;
-    setRenderCounter(renderCounter + 1);
-  };
-
-  const onNestedFolderChange = (newUID: string, newTitle: string) => {
     dashboard.meta.folderUid = newUID;
     dashboard.meta.folderTitle = newTitle;
     dashboard.meta.hasUnsavedFolderChange = true;
@@ -115,19 +106,16 @@ export function GeneralSettingsUnconnected({
           </Field>
 
           <Field label="Folder">
-            {config.featureToggles.nestedFolderPicker ? (
+            <FolderPicker
-              <NestedFolderPicker value={dashboard.meta.folderUid} onChange={onNestedFolderChange} />
+              value={dashboard.meta.folderUid}
-            ) : (
-              <OldFolderPicker
-                inputId="dashboard-folder-input"
-                initialTitle={dashboard.meta.folderTitle}
-                initialFolderUid={dashboard.meta.folderUid}
               onChange={onFolderChange}
-                enableCreateNew={true}
+              // TODO deprecated props that can be removed once NestedFolderPicker is enabled by default
+              initialTitle={dashboard.meta.folderTitle}
+              inputId="dashboard-folder-input"
+              enableCreateNew
               dashboardId={dashboard.id}
-                skipInitialLoad={true}
+              skipInitialLoad
             />
-            )}
           </Field>
 
           <Field