Nested folders: use `FolderPicker` in dashboard settings (#72192)

* Use new NestedFolderPicker in SaveDashboardAsForm

* use FolderPicker wrapper in dashboard settings

* fix e2e test

* actually pass the deprecated props to the component

* just pass value

---------

Co-authored-by: joshhunt <josh@trtr.co>
pull/72129/head
Ashley Harrison 2 years ago committed by GitHub
parent 5bb280cb3f
commit 2374458e94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 16
      public/app/core/components/Select/FolderPicker.tsx
  2. 36
      public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx

@ -1,4 +1,4 @@
import React, { useCallback, useState } from 'react';
import React, { useCallback } from 'react';
import { config } from '@grafana/runtime';
@ -12,11 +12,17 @@ interface FolderPickerProps extends NestedFolderPickerProps {
/** @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
@ -37,9 +43,9 @@ function OldFolderPickerWrapper({
initialTitle,
dashboardId,
enableCreateNew,
inputId,
skipInitialLoad,
}: FolderPickerProps) {
const [initialFolderUID] = useState(value);
const handleOnChange = useCallback(
(newFolder: { title: string; uid: string }) => {
if (onChange) {
@ -53,8 +59,10 @@ function OldFolderPickerWrapper({
<OldFolderPicker
onChange={handleOnChange}
showRoot={showRootFolder}
initialFolderUid={initialFolderUID}
initialFolderUid={value}
initialTitle={initialTitle}
inputId={inputId}
skipInitialLoad={skipInitialLoad}
dashboardId={dashboardId}
enableCreateNew={enableCreateNew}
/>

@ -2,11 +2,9 @@ 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 { Page } from 'app/core/components/Page/Page';
import { OldFolderPicker } from 'app/core/components/Select/OldFolderPicker';
import { FolderPicker } from 'app/core/components/Select/FolderPicker';
import { updateTimeZoneDashboard, updateWeekStartDashboard } from 'app/features/dashboard/state/actions';
import { DeleteDashboardButton } from '../DeleteDashboard/DeleteDashboardButton';
@ -30,14 +28,7 @@ export function GeneralSettingsUnconnected({
}: Props): JSX.Element {
const [renderCounter, setRenderCounter] = useState(0);
const onFolderChange = (newFolder: { uid: string; title: string }) => {
dashboard.meta.folderUid = newFolder.uid;
dashboard.meta.folderTitle = newFolder.title;
dashboard.meta.hasUnsavedFolderChange = true;
setRenderCounter(renderCounter + 1);
};
const onNestedFolderChange = (newUID: string, newTitle: string) => {
const onFolderChange = (newUID: string, newTitle: string) => {
dashboard.meta.folderUid = newUID;
dashboard.meta.folderTitle = newTitle;
dashboard.meta.hasUnsavedFolderChange = true;
@ -115,19 +106,16 @@ export function GeneralSettingsUnconnected({
</Field>
<Field label="Folder">
{config.featureToggles.nestedFolderPicker ? (
<NestedFolderPicker value={dashboard.meta.folderUid} onChange={onNestedFolderChange} />
) : (
<OldFolderPicker
inputId="dashboard-folder-input"
initialTitle={dashboard.meta.folderTitle}
initialFolderUid={dashboard.meta.folderUid}
onChange={onFolderChange}
enableCreateNew={true}
dashboardId={dashboard.id}
skipInitialLoad={true}
/>
)}
<FolderPicker
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

Loading…
Cancel
Save