FolderPicker: Remove old folder picker (#105374)

* Remove newFolderPicker toggle

* Remove usage of the old folder picker

* fix some tests

* remove old test

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -456,10 +456,6 @@ export interface FeatureToggles {
   */
   alertingQueryOptimization?: boolean;
   /**
-  * Enables the nested folder picker without having nested folders enabled
-  */
-  newFolderPicker?: boolean;
-  /**
   * Distributes alert rule evaluations more evenly over time, including spreading out rules within the same group. Disables sequential evaluation if enabled.
   */
   jitterAlertRulesWithinGroups?: boolean;

pkg/services/featuremgmt/registry.go

@@ -1,10 +1,9 @@
-// To change feature flags, edit:
+// To change feature flags edit this file and run:
-//  pkg/services/featuremgmt/registry.go
+//     make gen-feature-toggles
-// Then run tests in:
+//
+// Alternatively run tests in:
 //     pkg/services/featuremgmt/toggles_gen_test.go
 // twice to generate and validate the feature flag files
-//
-// Alternatively, use `make gen-feature-toggles`
 
 package featuremgmt
 
@@ -766,13 +765,6 @@ var (
 			AllowSelfServe: false,
 			Expression:     "false",
 		},
-		{
-			Name:         "newFolderPicker",
-			Description:  "Enables the nested folder picker without having nested folders enabled",
-			Stage:        FeatureStageExperimental,
-			Owner:        grafanaFrontendPlatformSquad,
-			FrontendOnly: true,
-		},
 		{
 			Name:              "jitterAlertRulesWithinGroups",
 			Description:       "Distributes alert rule evaluations more evenly over time, including spreading out rules within the same group. Disables sequential evaluation if enabled.",

pkg/services/featuremgmt/toggles_gen.csv

@@ -100,7 +100,6 @@ lokiQueryHints,GA,@grafana/observability-logs,false,false,true
 kubernetesFeatureToggles,experimental,@grafana/grafana-operator-experience-squad,false,false,true
 cloudRBACRoles,preview,@grafana/identity-access-team,false,true,false
 alertingQueryOptimization,GA,@grafana/alerting-squad,false,false,false
-newFolderPicker,experimental,@grafana/grafana-frontend-platform,false,false,true
 jitterAlertRulesWithinGroups,preview,@grafana/alerting-squad,false,true,false
 onPremToCloudMigrations,GA,@grafana/grafana-operator-experience-squad,false,false,false
 secretsManagementAppPlatform,experimental,@grafana/grafana-operator-experience-squad,false,false,false

pkg/services/featuremgmt/toggles_gen.go

@@ -411,10 +411,6 @@ const (
 	// Optimizes eligible queries in order to reduce load on datasources
 	FlagAlertingQueryOptimization = "alertingQueryOptimization"
 
-	// FlagNewFolderPicker
-	// Enables the nested folder picker without having nested folders enabled
-	FlagNewFolderPicker = "newFolderPicker"
-
 	// FlagJitterAlertRulesWithinGroups
 	// Distributes alert rule evaluations more evenly over time, including spreading out rules within the same group. Disables sequential evaluation if enabled.
 	FlagJitterAlertRulesWithinGroups = "jitterAlertRulesWithinGroups"

pkg/services/featuremgmt/toggles_gen.json

@@ -2287,7 +2287,8 @@
       "metadata": {
         "name": "newFolderPicker",
         "resourceVersion": "1743693517832",
-        "creationTimestamp": "2024-01-15T11:43:19Z"
+        "creationTimestamp": "2024-01-15T11:43:19Z",
+        "deletionTimestamp": "2025-05-14T09:11:28Z"
       },
       "spec": {
         "description": "Enables the nested folder picker without having nested folders enabled",

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

@@ -1,70 +1,3 @@
-import { useCallback } from 'react';
+import { NestedFolderPicker } from '../NestedFolderPicker/NestedFolderPicker';
 
-import { config } from '@grafana/runtime';
+export const FolderPicker = NestedFolderPicker;
-
-import { NestedFolderPicker, NestedFolderPickerProps } from '../NestedFolderPicker/NestedFolderPicker';
-
-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 */
-  inputId?: string;
-
-  /** @deprecated */
-  dashboardId?: number | string;
-
-  /** @deprecated */
-  enableCreateNew?: boolean;
-
-  /** @deprecated */
-  skipInitialLoad?: boolean;
-}
-
-// Temporary wrapper component to switch between the NestedFolderPicker and the old flat
-// FolderPicker depending on feature flags
-export function FolderPicker(props: FolderPickerProps) {
-  const nestedEnabled = config.featureToggles.newFolderPicker || config.featureToggles.nestedFolders;
-  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,
-  initialTitle,
-  dashboardId,
-  enableCreateNew,
-  inputId,
-  skipInitialLoad,
-}: FolderPickerProps) {
-  const handleOnChange = useCallback(
-    (newFolder: { title: string; uid: string }) => {
-      if (onChange) {
-        onChange(newFolder.uid, newFolder.title);
-      }
-    },
-    [onChange]
-  );
-
-  return (
-    <OldFolderPicker
-      onChange={handleOnChange}
-      showRoot={showRootFolder}
-      initialFolderUid={value}
-      initialTitle={initialTitle}
-      inputId={inputId}
-      skipInitialLoad={skipInitialLoad}
-      dashboardId={dashboardId}
-      enableCreateNew={enableCreateNew}
-    />
-  );
-}

public/app/features/browse-dashboards/components/BrowseActions/MoveModal.test.tsx

@@ -1,35 +1,79 @@
-import { render as rtlRender, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { TestProvider } from 'test/helpers/TestProvider';
+import { HttpResponse, http } from 'msw';
-import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
+import { SetupServer, setupServer } from 'msw/node';
+import { render, screen } from 'test/test-utils';
 
-import { selectors } from '@grafana/e2e-selectors';
+import { backendSrv } from 'app/core/services/backend_srv';
-import { setBackendSrv } from '@grafana/runtime';
+
-import { backendSrv } from 'app/core/services/__mocks__/backend_srv';
+import { treeViewersCanEdit, wellFormedTree } from '../../fixtures/dashboardsTreeItem.fixture';
-import * as api from 'app/features/manage-dashboards/state/actions';
-import { DashboardSearchHit } from 'app/features/search/types';
 
 import { MoveModal, Props } from './MoveModal';
 
-function render(...[ui, options]: Parameters<typeof rtlRender>) {
+const [mockTree, { folderA }] = wellFormedTree();
-  rtlRender(<TestProvider>{ui}</TestProvider>, options);
+const [mockTreeThatViewersCanEdit /* shares folders with wellFormedTree */] = treeViewersCanEdit();
-}
+
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  getBackendSrv: () => backendSrv,
+}));
 
 describe('browse-dashboards MoveModal', () => {
   const mockOnDismiss = jest.fn();
   const mockOnConfirm = jest.fn();
-  const mockFolders = [
-    { title: 'Dashboards', uid: '' } as DashboardSearchHit,
-    { title: 'Folder 1', uid: 'wfTJJL5Wz' } as DashboardSearchHit,
-  ];
   let props: Props;
+  let server: SetupServer;
+  window.HTMLElement.prototype.scrollIntoView = () => {};
 
   beforeAll(() => {
-    setBackendSrv(backendSrv);
+    server = setupServer(
-    jest.spyOn(backendSrv, 'get').mockResolvedValue({
+      http.get('/api/folders/:uid', () => {
-      dashboard: 0,
+        return HttpResponse.json({
-      folder: 0,
+          title: folderA.item.title,
+          uid: folderA.item.uid,
+        });
+      }),
+
+      http.get('/api/folders/:uid/counts', () => {
+        return HttpResponse.json({
+          folder: 1,
+          dashboard: 2,
+          librarypanel: 3,
+          alertrule: 4,
+        });
+      }),
+
+      http.get('/apis/provisioning.grafana.app/v0alpha1/namespaces/default/settings', () => {
+        return HttpResponse.json({
+          items: [],
         });
+      }),
+
+      http.get('/api/folders', ({ request }) => {
+        const url = new URL(request.url);
+        const parentUid = url.searchParams.get('parentUid') ?? undefined;
+        const permission = url.searchParams.get('permission');
+
+        const limit = parseInt(url.searchParams.get('limit') ?? '1000', 10);
+        const page = parseInt(url.searchParams.get('page') ?? '1', 10);
+
+        const tree = permission === 'Edit' ? mockTreeThatViewersCanEdit : mockTree;
+
+        // reconstruct a folder API response from the flat tree fixture
+        const folders = tree
+          .filter((v) => v.item.kind === 'folder' && v.item.parentUID === parentUid)
+          .map((folder) => {
+            return {
+              uid: folder.item.uid,
+              title: folder.item.kind === 'folder' ? folder.item.title : "invalid - this shouldn't happen",
+            };
+          })
+          .slice(limit * (page - 1), limit * page);
+
+        return HttpResponse.json(folders);
+      })
+    );
+
+    server.listen();
   });
 
   beforeEach(() => {
@@ -44,9 +88,10 @@ describe('browse-dashboards MoveModal', () => {
         panel: {},
       },
     };
+  });
 
-    // mock the searchFolders api call so the folder picker has some folders in it
+  afterAll(() => {
-    jest.spyOn(api, 'searchFolders').mockResolvedValue(mockFolders);
+    server.close();
   });
 
   it('renders a dialog with the correct title', async () => {
@@ -70,7 +115,7 @@ describe('browse-dashboards MoveModal', () => {
   it('displays a folder picker', async () => {
     render(<MoveModal {...props} />);
 
-    expect(await screen.findByTestId(selectors.components.FolderPicker.input)).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'Select folder' })).toBeInTheDocument();
   });
 
   it('displays a warning about permissions if a folder is selected', async () => {
@@ -84,23 +129,24 @@ describe('browse-dashboards MoveModal', () => {
     ).toBeInTheDocument();
   });
 
-  it('only enables the `Move` button if a folder is selected', async () => {
+  it('enables the `Move` button once a folder is selected', async () => {
     render(<MoveModal {...props} />);
 
     expect(await screen.findByRole('button', { name: 'Move' })).toBeDisabled();
-    const folderPicker = await screen.findByTestId(selectors.components.FolderPicker.input);
 
-    await selectOptionInTest(folderPicker, mockFolders[1].title);
+    // Open the picker and wait for children to load
-    expect(await screen.findByRole('button', { name: 'Move' })).toBeEnabled();
+    const folderPicker = await screen.findByRole('button', { name: 'Select folder' });
-  });
+    await userEvent.click(folderPicker);
+    await screen.findByLabelText(folderA.item.title);
 
-  it('calls onConfirm when clicking the `Move` button', async () => {
+    // Select the folder
-    render(<MoveModal {...props} />);
+    await userEvent.click(screen.getByLabelText(folderA.item.title));
-    const folderPicker = await screen.findByTestId(selectors.components.FolderPicker.input);
+
+    const moveButton = await screen.findByRole('button', { name: 'Move' });
+    expect(moveButton).toBeEnabled();
 
-    await selectOptionInTest(folderPicker, mockFolders[1].title);
+    await userEvent.click(moveButton);
-    await userEvent.click(await screen.findByRole('button', { name: 'Move' }));
+    expect(mockOnConfirm).toHaveBeenCalledWith(folderA.item.uid);
-    expect(mockOnConfirm).toHaveBeenCalledWith(mockFolders[1].uid);
   });
 
   it('calls onDismiss when clicking the `Cancel` button', async () => {

public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx

@@ -43,7 +43,7 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) {
     },
   });
 
-  const { errors, isValid, defaultValues } = formState;
+  const { errors, isValid } = formState;
   const formValues = watch();
 
   const { state, onSaveDashboard } = useSaveDashboard(false);
@@ -158,11 +158,7 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) {
               },
             });
           }}
-          // Old folder picker fields
           value={formValues.folder?.uid}
-          initialTitle={defaultValues!.folder!.title}
-          dashboardId={dashboard.state.id ?? undefined}
-          enableCreateNew
         />
       </Field>
       {!changeInfo.isNew && (

public/app/features/dashboard-scene/saving/provisioned/SaveProvisionedDashboardForm.tsx

@@ -214,7 +214,6 @@ export function SaveProvisionedDashboardForm({
                 render={({ field: { ref, value, onChange, ...field } }) => {
                   return (
                     <FolderPicker
-                      inputId="dashboard-folder"
                       onChange={async (uid?: string, title?: string) => {
                         onChange({ uid, title });
                         // Update folderUid URL param

public/app/features/dashboard-scene/settings/GeneralSettingsEditView.tsx

@@ -227,15 +227,7 @@ export class GeneralSettingsEditView
               {dashboard.isManagedRepository() ? (
                 <Input readOnly value={meta.folderTitle} />
               ) : (
-                <FolderPicker
+                <FolderPicker value={meta.folderUid} onChange={model.onFolderChange} />
-                  value={meta.folderUid}
-                  onChange={model.onFolderChange}
-                  // TODO deprecated props that can be removed once NestedFolderPicker is enabled by default
-                  initialTitle={meta.folderTitle}
-                  inputId="dashboard-folder-input"
-                  enableCreateNew
-                  skipInitialLoad
-                />
               )}
             </Field>
 

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

@@ -165,16 +165,7 @@ export function GeneralSettingsUnconnected({
           </Field>
 
           <Field label={t('dashboard-settings.general.folder-label', 'Folder')}>
-            <FolderPicker
+            <FolderPicker value={dashboard.meta.folderUid} onChange={onFolderChange} />
-              value={dashboard.meta.folderUid}
-              onChange={onFolderChange}
-              // 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
-            />
           </Field>
 
           <Field

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

@@ -1,5 +1,5 @@
-import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { render, screen } from 'test/test-utils';
 
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
 import * as api from 'app/features/manage-dashboards/state/actions';

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

@@ -179,10 +179,6 @@ export const SaveDashboardAsForm = ({
                   {...field}
                   onChange={(uid: string | undefined, title: string | undefined) => field.onChange({ uid, title })}
                   value={field.value?.uid}
-                  // Old folder picker fields
-                  initialTitle={dashboard.meta.folderTitle}
-                  dashboardId={dashboard.id}
-                  enableCreateNew
                 />
               )}
               control={control}

public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx

@@ -86,11 +86,7 @@ export const AddLibraryPanelContents = ({
           'Library panel permissions are derived from the folder permissions'
         )}
       >
-        <FolderPicker
+        <FolderPicker onChange={(uid) => setFolderUid(uid)} value={folderUid} />
-          onChange={(uid) => setFolderUid(uid)}
-          value={folderUid}
-          inputId="share-panel-library-panel-folder-picker"
-        />
       </Field>
       {config.featureToggles.newDashboardSharingComponent ? (
         <Stack gap={1} justifyContent={'start'}>