DashboardSave: Correctly overwrite dashboard when saving (#22650)

This commit is contained in:
Dominik Prokop 2020-03-09 18:16:10 +01:00 committed by GitHub
parent 5d8fc6a1a9
commit 0304493bd2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 10 deletions

View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { css } from 'emotion';
import { Modal } from '@grafana/ui';
import { SaveDashboardAsForm } from './forms/SaveDashboardAsForm';
@ -10,10 +10,17 @@ export const SaveDashboardAsModal: React.FC<SaveDashboardModalProps & {
isNew?: boolean;
}> = ({ dashboard, onDismiss, isNew }) => {
const { state, onDashboardSave } = useDashboardSave(dashboard);
const [dashboardSaveModelClone, setDashboardSaveModelClone] = useState();
return (
<>
{state.error && <SaveDashboardErrorProxy error={state.error} dashboard={dashboard} onDismiss={onDismiss} />}
{state.error && (
<SaveDashboardErrorProxy
error={state.error}
dashboard={dashboard}
dashboardSaveModel={dashboardSaveModelClone}
onDismiss={onDismiss}
/>
)}
{!state.error && (
<Modal
isOpen={true}
@ -28,7 +35,10 @@ export const SaveDashboardAsModal: React.FC<SaveDashboardModalProps & {
dashboard={dashboard}
onCancel={onDismiss}
onSuccess={onDismiss}
onSubmit={onDashboardSave}
onSubmit={(clone, options, dashboard) => {
setDashboardSaveModelClone(clone);
return onDashboardSave(clone, options, dashboard);
}}
isNew={isNew}
/>
</Modal>

View File

@ -8,12 +8,20 @@ import { SaveDashboardModalProps } from './types';
import { SaveDashboardAsButton } from './SaveDashboardButton';
interface SaveDashboardErrorProxyProps {
/** original dashboard */
dashboard: DashboardModel;
/** dashboard save model with applied modifications, i.e. title */
dashboardSaveModel: any;
error: any;
onDismiss: () => void;
}
export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = ({ dashboard, error, onDismiss }) => {
export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = ({
dashboard,
dashboardSaveModel,
error,
onDismiss,
}) => {
const { onDashboardSave } = useDashboardSave(dashboard);
useEffect(() => {
@ -35,7 +43,7 @@ export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = (
}
confirmText="Save & Overwrite"
onConfirm={async () => {
await onDashboardSave(dashboard.getSaveModelClone(), { overwrite: true }, dashboard);
await onDashboardSave(dashboardSaveModel, { overwrite: true }, dashboard);
onDismiss();
}}
onDismiss={onDismiss}
@ -53,7 +61,7 @@ export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = (
}
confirmText="Save & Overwrite"
onConfirm={async () => {
await onDashboardSave(dashboard.getSaveModelClone(), { overwrite: true }, dashboard);
await onDashboardSave(dashboardSaveModel, { overwrite: true }, dashboard);
onDismiss();
}}
onDismiss={onDismiss}

View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { Modal } from '@grafana/ui';
import { css } from 'emotion';
import { SaveDashboardForm } from './forms/SaveDashboardForm';
@ -8,9 +8,17 @@ import { SaveDashboardModalProps } from './types';
export const SaveDashboardModal: React.FC<SaveDashboardModalProps> = ({ dashboard, onDismiss, onSaveSuccess }) => {
const { state, onDashboardSave } = useDashboardSave(dashboard);
const [dashboardSaveModelClone, setDashboardSaveModelClone] = useState();
return (
<>
{state.error && <SaveDashboardErrorProxy error={state.error} dashboard={dashboard} onDismiss={onDismiss} />}
{state.error && (
<SaveDashboardErrorProxy
error={state.error}
dashboard={dashboard}
dashboardSaveModel={dashboardSaveModelClone}
onDismiss={onDismiss}
/>
)}
{!state.error && (
<Modal
isOpen={true}
@ -30,7 +38,10 @@ export const SaveDashboardModal: React.FC<SaveDashboardModalProps> = ({ dashboar
onSaveSuccess();
}
}}
onSubmit={onDashboardSave}
onSubmit={(clone, options, dashboard) => {
setDashboardSaveModelClone(clone);
return onDashboardSave(clone, options, dashboard);
}}
/>
</Modal>
)}

View File

@ -39,6 +39,8 @@ export const useDashboardSave = (dashboard: DashboardModel) => {
dispatch(
updateLocation({
path: newUrl,
replace: true,
query: {},
})
);
}