diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx index 8cd1fdcfc83..67ab53f34fa 100644 --- a/packages/grafana-ui/src/components/Select/SelectBase.tsx +++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx @@ -332,6 +332,8 @@ export function SelectBase({ }), container: () => ({ position: 'relative', + // This puts the menu above Inputs (z-index: 1) + zIndex: theme.zIndex.dropdown, width: width ? `${8 * width}px` : '100%', }), }} diff --git a/public/app/features/manage-dashboards/DashboardImportPage.tsx b/public/app/features/manage-dashboards/DashboardImportPage.tsx index cdc07323151..d0cdf712945 100644 --- a/public/app/features/manage-dashboards/DashboardImportPage.tsx +++ b/public/app/features/manage-dashboards/DashboardImportPage.tsx @@ -1,9 +1,10 @@ import React, { FormEvent, PureComponent } from 'react'; -import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux'; +import { MapDispatchToProps, MapStateToProps } from 'react-redux'; import { css } from 'emotion'; import { AppEvents, NavModel } from '@grafana/data'; import { Button, stylesFactory, Input, TextArea, Field, Form, Legend } from '@grafana/ui'; import Page from 'app/core/components/Page/Page'; +import { connectWithCleanUp } from 'app/core/components/connectWithCleanUp'; import { ImportDashboardOverview } from './components/ImportDashboardOverview'; import { DashboardFileUpload } from './components/DashboardFileUpload'; import { validateDashboardJson, validateGcomDashboard } from './utils/validation'; @@ -142,7 +143,11 @@ const mapDispatchToProps: MapDispatchToProps = { importDashboardJson, }; -export const DashboardImportPage = connect(mapStateToProps, mapDispatchToProps)(DashboardImportUnConnected); +export const DashboardImportPage = connectWithCleanUp( + mapStateToProps, + mapDispatchToProps, + state => state.importDashboard +)(DashboardImportUnConnected); export default DashboardImportPage; DashboardImportPage.displayName = 'DashboardImport'; diff --git a/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx b/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx index 580cc6b7523..63b0b7a1235 100644 --- a/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx +++ b/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx @@ -58,18 +58,12 @@ export const ImportDashboardForm: FC = ({ type="text" ref={register({ required: 'Name is required', - validate: async (v: string) => await validateTitle(v, getValues().folderId), + validate: async (v: string) => await validateTitle(v, getValues().folder.id), })} /> - + { }; onCancel = () => { - this.props.resetDashboard(); + this.props.clearLoadedDashboard(); }; onUidReset = () => { @@ -46,7 +46,7 @@ class ImportDashboardOverviewUnConnected extends PureComponent { }; render() { - const { dashboard, inputs, meta, source, folderId } = this.props; + const { dashboard, inputs, meta, source, folder } = this.props; const { uidReset } = this.state; return ( @@ -81,7 +81,7 @@ class ImportDashboardOverviewUnConnected extends PureComponent { )}
{ onCancel={this.onCancel} onUidReset={this.onUidReset} onSubmit={this.onSubmit} - initialFolderId={folderId} + initialFolderId={folder.id} /> )}
@@ -111,11 +111,11 @@ const mapStateToProps: MapStateToProps = ( meta: state.importDashboard.meta, source: state.importDashboard.source, inputs: state.importDashboard.inputs, - folderId: state.location.routeParams.folderId ? Number(state.location.routeParams.folderId) : 0, + folder: state.location.routeParams.folderId ? { id: Number(state.location.routeParams.folderId) } : { id: 0 }, }); const mapDispatchToProps: MapDispatchToProps = { - resetDashboard, + clearLoadedDashboard, saveDashboard, }; diff --git a/public/app/features/manage-dashboards/state/actions.ts b/public/app/features/manage-dashboards/state/actions.ts index e25ce67b133..51e1da3f8e6 100644 --- a/public/app/features/manage-dashboards/state/actions.ts +++ b/public/app/features/manage-dashboards/state/actions.ts @@ -60,7 +60,7 @@ function processInputs(dashboardJson: any): ThunkResult { }; } -export function resetDashboard(): ThunkResult { +export function clearLoadedDashboard(): ThunkResult { return dispatch => { dispatch(clearDashboard()); }; @@ -96,7 +96,7 @@ export function saveDashboard(importDashboardForm: ImportDashboardDTO): ThunkRes dashboard: { ...dashboard, title: importDashboardForm.title, uid: importDashboardForm.uid }, overwrite: true, inputs: inputsToPersist, - folderId: importDashboardForm.folderId, + folderId: importDashboardForm.folder.id, }); const dashboardUrl = locationUtil.stripBaseFromUrl(result.importedUrl); dispatch(updateLocation({ path: dashboardUrl })); diff --git a/public/app/features/manage-dashboards/state/reducers.ts b/public/app/features/manage-dashboards/state/reducers.ts index a2c8fccf36d..ee23a8bf380 100644 --- a/public/app/features/manage-dashboards/state/reducers.ts +++ b/public/app/features/manage-dashboards/state/reducers.ts @@ -12,7 +12,7 @@ export interface ImportDashboardDTO { gnetId: string; constants: string[]; dataSources: DataSourceSelectItem[]; - folderId: number; + folder: { id: number; title?: string }; } export enum InputType {