Folder: Provide adhoc ui for nested folder creation (#59126)

chore: provide adhoc ui for nested folder creation

public/app/features/folders/components/NewDashboardsFolder.tsx

@@ -1,10 +1,11 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { NavModelItem } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { Button, Input, Form, Field } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
+import { useQueryParams } from 'app/core/hooks/useQueryParams';
 
 import { validationSrv } from '../../manage-dashboards/services/ValidationSrv';
 import { createNewFolder } from '../state/actions';
@@ -21,16 +22,22 @@ interface FormModel {
   folderName: string;
 }
 
-const initialFormModel: FormModel = { folderName: '' };
-
 type Props = OwnProps & ConnectedProps<typeof connector>;
 
-export class NewDashboardsFolder extends PureComponent<Props> {
-  onSubmit = (formData: FormModel) => {
-    this.props.createNewFolder(formData.folderName);
-  };
+const initialFormModel: FormModel = { folderName: '' };
 
-  validateFolderName = (folderName: string) => {
+const pageNav: NavModelItem = {
+  text: 'Create a new folder',
+  subTitle: 'Folders provide a way to group dashboards and alert rules.',
+  breadcrumbs: [{ title: 'Dashboards', url: 'dashboards' }],
+};
+
+function NewDashboardsFolder({ createNewFolder }: Props) {
+  const [queryParams] = useQueryParams();
+  const onSubmit = (formData: FormModel) => {
+    createNewFolder(formData.folderName, String(queryParams['folderUid']));
+  };
+  const validateFolderName = (folderName: string) => {
     return validationSrv
       .validateNewFolderName(folderName)
       .then(() => {
@@ -41,18 +48,11 @@ export class NewDashboardsFolder extends PureComponent<Props> {
       });
   };
 
-  pageNav: NavModelItem = {
-    text: 'Create a new folder',
-    subTitle: 'Folders provide a way to group dashboards and alert rules.',
-    breadcrumbs: [{ title: 'Dashboards', url: 'dashboards' }],
-  };
-
-  render() {
   return (
-      <Page navId="dashboards/browse" pageNav={this.pageNav}>
+    <Page navId="dashboards/browse" pageNav={pageNav}>
       <Page.Contents>
         {!config.featureToggles.topnav && <h3>New dashboard folder</h3>}
-          <Form defaultValues={initialFormModel} onSubmit={this.onSubmit}>
+        <Form defaultValues={initialFormModel} onSubmit={onSubmit}>
           {({ register, errors }) => (
             <>
               <Field
@@ -64,7 +64,7 @@ export class NewDashboardsFolder extends PureComponent<Props> {
                   id="folder-name-input"
                   {...register('folderName', {
                     required: 'Folder name is required.',
-                      validate: async (v) => await this.validateFolderName(v),
+                    validate: async (v) => await validateFolderName(v),
                   })}
                 />
               </Field>
@@ -75,7 +75,6 @@ export class NewDashboardsFolder extends PureComponent<Props> {
       </Page.Contents>
     </Page>
   );
-  }
 }
 
 export default connector(NewDashboardsFolder);

public/app/features/folders/state/actions.ts

@@ -143,9 +143,9 @@ export function addFolderPermission(newItem: NewDashboardAclItem): ThunkResult<v
   };
 }
 
-export function createNewFolder(folderName: string): ThunkResult<void> {
+export function createNewFolder(folderName: string, uid?: string): ThunkResult<void> {
   return async (dispatch) => {
-    const newFolder = await getBackendSrv().post('/api/folders', { title: folderName });
+    const newFolder = await getBackendSrv().post('/api/folders', { title: folderName, parentUid: uid });
     await contextSrv.fetchUserPermissions();
     dispatch(notifyApp(createSuccessNotification('Folder Created', 'OK')));
     locationService.push(locationUtil.stripBaseFromUrl(newFolder.url));

public/app/features/search/components/DashboardActions.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 
+import { config } from '@grafana/runtime';
 import { Menu, Dropdown, Button, Icon } from '@grafana/ui';
 
 export interface Props {
@@ -11,8 +12,13 @@ export interface Props {
 export const DashboardActions: FC<Props> = ({ folderUid, canCreateFolders = false, canCreateDashboards = false }) => {
   const actionUrl = (type: string) => {
     let url = `dashboard/${type}`;
+    const isTypeNewFolder = type === 'new_folder';
 
-    if (folderUid) {
+    if (isTypeNewFolder) {
+      url = `dashboards/folder/new/`;
+    }
+
+    if ((isTypeNewFolder && config.featureToggles.nestedFolders) || folderUid) {
       url += `?folderUid=${folderUid}`;
     }
 
@@ -23,7 +29,9 @@ export const DashboardActions: FC<Props> = ({ folderUid, canCreateFolders = fals
     return (
       <Menu>
         {canCreateDashboards && <Menu.Item url={actionUrl('new')} label="New Dashboard" />}
-        {!folderUid && canCreateFolders && <Menu.Item url="dashboards/folder/new" label="New Folder" />}
+        {canCreateFolders && (config.featureToggles.nestedFolders || !folderUid) && (
+          <Menu.Item url={actionUrl('new_folder')} label="New Folder" />
+        )}
         {canCreateDashboards && <Menu.Item url={actionUrl('import')} label="Import" />}
       </Menu>
     );