Use new NestedFolderPicker in SaveDashboardAsForm (#72189)

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

@@ -6,17 +6,40 @@ import { NestedFolderPicker, NestedFolderPickerProps } from '../NestedFolderPick
 
 import { OldFolderPicker } from './OldFolderPicker';
 
+interface FolderPickerProps extends NestedFolderPickerProps {
+  // These props are only used by the old folder picker, and should be removed when old picker is removed
+
+  /** @deprecated */
+  initialTitle?: string;
+
+  /** @deprecated */
+  dashboardId?: number | string;
+
+  /** @deprecated */
+  enableCreateNew?: boolean;
+}
+
 // Temporary wrapper component to switch between the NestedFolderPicker and the old flat
 // FolderPicker depending on feature flags
-export function FolderPicker(props: NestedFolderPickerProps) {
+export function FolderPicker(props: FolderPickerProps) {
   const nestedEnabled = config.featureToggles.nestedFolders && config.featureToggles.nestedFolderPicker;
-  return nestedEnabled ? <NestedFolderPicker {...props} /> : <OldFolderPickerWrapper {...props} />;
+  const { initialTitle, dashboardId, enableCreateNew, ...newFolderPickerProps } = props;
+
+  return nestedEnabled ? <NestedFolderPicker {...newFolderPickerProps} /> : <OldFolderPickerWrapper {...props} />;
 }
 
 // Converts new NestedFolderPicker props to old non-nested folder picker props
 // Seperate component so the hooks aren't created if not used
-function OldFolderPickerWrapper({ value, showRootFolder, onChange }: NestedFolderPickerProps) {
+function OldFolderPickerWrapper({
+  value,
+  showRootFolder,
+  onChange,
+  initialTitle,
+  dashboardId,
+  enableCreateNew,
+}: FolderPickerProps) {
   const [initialFolderUID] = useState(value);
+
   const handleOnChange = useCallback(
     (newFolder: { title: string; uid: string }) => {
       if (onChange) {
@@ -26,5 +49,14 @@ function OldFolderPickerWrapper({ value, showRootFolder, onChange }: NestedFolde
     [onChange]
   );
 
-  return <OldFolderPicker onChange={handleOnChange} initialFolderUid={initialFolderUID} showRoot={showRootFolder} />;
+  return (
+    <OldFolderPicker
+      onChange={handleOnChange}
+      showRoot={showRootFolder}
+      initialFolderUid={initialFolderUID}
+      initialTitle={initialTitle}
+      dashboardId={dashboardId}
+      enableCreateNew={enableCreateNew}
+    />
+  );
 }

public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
 
-import { config } from '@grafana/runtime';
 import { Button, Input, Switch, Form, Field, InputControl, HorizontalGroup } from '@grafana/ui';
-import { NestedFolderPicker } from 'app/core/components/NestedFolderPicker/NestedFolderPicker';
+import { FolderPicker } from 'app/core/components/Select/FolderPicker';
-import { OldFolderPicker } from 'app/core/components/Select/OldFolderPicker';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { validationSrv } from 'app/features/manage-dashboards/services/ValidationSrv';
 
@@ -110,23 +108,17 @@ export const SaveDashboardAsForm = ({
           </Field>
           <Field label="Folder">
             <InputControl
-              render={({ field: { ref, ...field } }) =>
+              render={({ field: { ref, ...field } }) => (
-                config.featureToggles.nestedFolderPicker ? (
+                <FolderPicker
-                  <NestedFolderPicker
                   {...field}
                   onChange={(uid: string, title: string) => field.onChange({ uid, title })}
                   value={field.value?.uid}
-                  />
+                  // Old folder picker fields
-                ) : (
-                  <OldFolderPicker
-                    {...field}
-                    dashboardId={dashboard.id}
-                    initialFolderUid={dashboard.meta.folderUid}
                   initialTitle={dashboard.meta.folderTitle}
+                  dashboardId={dashboard.id}
                   enableCreateNew
                 />
-                )
+              )}
-              }
               control={control}
               name="$folder"
             />