NestedFolders: Nested folder picker (#70148)

* Initial layout

* Add some styles

* Add checkbox functionality

* Add feature flag

* Extract list component

* remove feature flag

* expand folders

* Don't show empty folder indicators in nested folder picker, prevent opening folder from selecting that folder

* remove legend and button

* selection stuff

* new feature flag just for nested folder picker

* fix lint

* cleanup

* fix movemodal not showing selected item

* refactor styles, make only label clickable

---------

Co-authored-by: Tobias Skarhed <tobias.skarhed@gmail.com>

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

@@ -2,7 +2,10 @@ 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 { FolderChange, ROOT_FOLDER } from 'app/core/components/NestedFolderPicker/types';
 import { Page } from 'app/core/components/Page/Page';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import { updateTimeZoneDashboard, updateWeekStartDashboard } from 'app/features/dashboard/state/actions';
@@ -28,10 +31,11 @@ export function GeneralSettingsUnconnected({
 }: Props): JSX.Element {
   const [renderCounter, setRenderCounter] = useState(0);
 
-  const onFolderChange = (folder: { uid: string; title: string }) => {
-    dashboard.meta.folderUid = folder.uid;
-    dashboard.meta.folderTitle = folder.title;
+  const onFolderChange = (newFolder: FolderChange) => {
+    dashboard.meta.folderUid = newFolder.uid === ROOT_FOLDER ? '' : newFolder.uid;
+    dashboard.meta.folderTitle = newFolder.title;
     dashboard.meta.hasUnsavedFolderChange = true;
+    setRenderCounter(renderCounter + 1);
   };
 
   const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {
@@ -103,16 +107,21 @@ export function GeneralSettingsUnconnected({
           <Field label="Tags">
             <TagsInput id="tags-input" tags={dashboard.tags} onChange={onTagsChange} width={40} />
           </Field>
+
           <Field label="Folder">
-            <FolderPicker
-              inputId="dashboard-folder-input"
-              initialTitle={dashboard.meta.folderTitle}
-              initialFolderUid={dashboard.meta.folderUid}
-              onChange={onFolderChange}
-              enableCreateNew={true}
-              dashboardId={dashboard.id}
-              skipInitialLoad={true}
-            />
+            {config.featureToggles.nestedFolderPicker ? (
+              <NestedFolderPicker value={dashboard.meta.folderUid} onChange={onFolderChange} />
+            ) : (
+              <FolderPicker
+                inputId="dashboard-folder-input"
+                initialTitle={dashboard.meta.folderTitle}
+                initialFolderUid={dashboard.meta.folderUid}
+                onChange={onFolderChange}
+                enableCreateNew={true}
+                dashboardId={dashboard.id}
+                skipInitialLoad={true}
+              />
+            )}
           </Field>
 
           <Field

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

@@ -1,6 +1,8 @@
 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 { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { validationSrv } from 'app/features/manage-dashboards/services/ValidationSrv';
@@ -101,15 +103,19 @@ export const SaveDashboardAsForm = ({ dashboard, isNew, onSubmit, onCancel, onSu
           </Field>
           <Field label="Folder">
             <InputControl
-              render={({ field: { ref, ...field } }) => (
-                <FolderPicker
-                  {...field}
-                  dashboardId={dashboard.id}
-                  initialFolderUid={dashboard.meta.folderUid}
-                  initialTitle={dashboard.meta.folderTitle}
-                  enableCreateNew
-                />
-              )}
+              render={({ field: { ref, ...field } }) =>
+                config.featureToggles.nestedFolderPicker ? (
+                  <NestedFolderPicker {...field} value={field.value?.uid} />
+                ) : (
+                  <FolderPicker
+                    {...field}
+                    dashboardId={dashboard.id}
+                    initialFolderUid={dashboard.meta.folderUid}
+                    initialTitle={dashboard.meta.folderTitle}
+                    enableCreateNew
+                  />
+                )
+              }
               control={control}
               name="$folder"
             />