Folders: Refresh children at root level when creating new folder (#110591)

.github/CODEOWNERS

@@ -757,6 +757,7 @@ playwright.storybook.config.ts @grafana/grafana-frontend-platform
 
 # public folder
 /public/app/api/ @grafana/grafana-frontend-platform
+/public/app/api/clients/folder/ @grafana/grafana-search-navigate-organise
 /public/app/core/actions/ @grafana/grafana-frontend-platform
 /public/app/core/app_events.ts @grafana/grafana-frontend-platform
 /public/app/core/components/AccessControl/ @grafana/identity-access-team

public/app/api/clients/folder/v1beta1/hooks.test.ts

@@ -260,12 +260,22 @@ describe.each([
   });
 
   describe('useCreateFolder', () => {
-    it('creates a folder', async () => {
+    it('creates a folder at the root level', async () => {
       const { user } = setupCreateFolder();
 
-      await user.click(screen.getByText('Create Folder'));
+      await user.click(screen.getByText(/Create Folder at root/));
 
       expect(await screen.findByText('Folder created')).toBeInTheDocument();
+      expect(dispatchMockFn).toHaveBeenCalled();
+    });
+
+    it('creates a folder in a nested folder', async () => {
+      const { user } = setupCreateFolder();
+
+      await user.click(screen.getByText(/Create Folder in nested folder/));
+
+      expect(await screen.findByText('Folder created')).toBeInTheDocument();
+      expect(dispatchMockFn).toHaveBeenCalled();
     });
   });
 

public/app/api/clients/folder/v1beta1/hooks.ts

@@ -379,7 +379,8 @@ function useRefreshFolders() {
     if (options.parentsOf) {
       dispatch(refreshParents(options.parentsOf));
     }
-    if (options.childrenOf) {
+    // Refetch children even if we passed in `childrenOf: undefined`, as this corresponds to the root folder
+    if (options.childrenOf || 'childrenOf' in options) {
       dispatch(
         refetchChildren({
           parentUID: options.childrenOf,

public/app/api/clients/folder/v1beta1/test-utils.tsx

@@ -14,7 +14,10 @@ const TestCreationComponent = () => {
   return (
     <>
       <AppNotificationList />
-      <button onClick={() => createFolder({ title: 'test', parentUid: folderA.item.uid })}>Create Folder</button>
+      <button onClick={() => createFolder({ title: 'test' })}>Create Folder at root</button>
+      <button onClick={() => createFolder({ title: 'test', parentUid: folderA.item.uid })}>
+        Create Folder in nested folder
+      </button>
       <div>{result.isSuccess ? 'Folder created' : 'Error creating folder'}</div>
     </>
   );