diff --git a/public/app/core/components/CopyToClipboard/CopyToClipboard.tsx b/public/app/core/components/CopyToClipboard/CopyToClipboard.tsx index 0a7675a21fa..235cb83fd9d 100644 --- a/public/app/core/components/CopyToClipboard/CopyToClipboard.tsx +++ b/public/app/core/components/CopyToClipboard/CopyToClipboard.tsx @@ -20,6 +20,17 @@ export class CopyToClipboard extends PureComponent { } componentDidMount() { + this.initClipboardJS(); + } + + componentDidUpdate() { + if (this.clipboardjs) { + this.clipboardjs.destroy(); + } + this.initClipboardJS(); + } + + initClipboardJS = () => { const { text, onSuccess, onError } = this.props; this.clipboardjs = new ClipboardJS(this.myRef.current, { @@ -40,7 +51,7 @@ export class CopyToClipboard extends PureComponent { onError(evt); }); } - } + }; componentWillUnmount() { if (this.clipboardjs) { diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx index 3cceb48aca6..452d27cd02c 100644 --- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx +++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx @@ -1,37 +1,31 @@ -import React, { useCallback, useMemo } from 'react'; +import React, { useCallback, useState } from 'react'; import { css } from 'emotion'; import { saveAs } from 'file-saver'; -import { - CustomScrollbar, - Button, - HorizontalGroup, - JSONFormatter, - VerticalGroup, - useTheme, - stylesFactory, -} from '@grafana/ui'; +import { Button, HorizontalGroup, stylesFactory, TextArea, useTheme, VerticalGroup } from '@grafana/ui'; import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard'; import { SaveDashboardFormProps } from '../types'; -import { GrafanaTheme } from '@grafana/data'; +import { AppEvents, GrafanaTheme } from '@grafana/data'; +import appEvents from '../../../../../core/app_events'; export const SaveProvisionedDashboardForm: React.FC = ({ dashboard, onCancel }) => { const theme = useTheme(); - const dashboardJSON = useMemo(() => { + const [dashboardJSON, setDashboardJson] = useState(() => { const clone = dashboard.getSaveModelClone(); delete clone.id; - return clone; - }, [dashboard]); - - const getClipboardText = useCallback(() => { - return JSON.stringify(dashboardJSON, null, 2); - }, [dashboard]); + return JSON.stringify(clone, null, 2); + }); const saveToFile = useCallback(() => { - const blob = new Blob([JSON.stringify(dashboardJSON, null, 2)], { + const blob = new Blob([dashboardJSON], { type: 'application/json;charset=utf-8', }); saveAs(blob, dashboard.title + '-' + new Date().getTime() + '.json'); }, [dashboardJSON]); + + const onCopyToClipboardSuccess = useCallback(() => { + appEvents.emit(AppEvents.alertSuccess, ['Dashboard JSON copied to clipboard']); + }, []); + const styles = getStyles(theme); return ( <> @@ -55,13 +49,16 @@ export const SaveProvisionedDashboardForm: React.FC = ({
File path: {dashboard.meta.provisionedExternalId}
-
- - - -
+