From aca8793e40303175b33bd25ce6cdb0b9c2f952f2 Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Wed, 3 Nov 2021 11:56:48 +0000
Subject: [PATCH] Dashboard: Disable image renderer link for unsaved dashboards
 (#41249) (#41251)

(cherry picked from commit 9fc5193ecd2f9b665f8a6ffd6999c84d58c0133e)
---
 .../components/ShareModal/ShareLink.test.tsx  |  2 ++
 .../components/ShareModal/ShareLink.tsx       | 27 ++++++++++++++-----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx b/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
index 4cf7c6512d9..879f619c4f6 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
@@ -6,6 +6,7 @@ import { ShareLink, Props, State } from './ShareLink';
 import { initTemplateSrv } from '../../../../../test/helpers/initTemplateSrv';
 import { variableAdapters } from '../../../variables/adapters';
 import { createQueryVariableAdapter } from '../../../variables/query/adapter';
+import { getDefaultTimeRange } from '@grafana/data';
 
 jest.mock('app/features/dashboard/services/TimeSrv', () => ({
   getTimeSrv: () => ({
@@ -75,6 +76,7 @@ function shareLinkScenario(description: string, scenarioFn: (ctx: ScenarioContex
       mount: (propOverrides?: any) => {
         const props: any = {
           panel: undefined,
+          dashboard: { time: getDefaultTimeRange() },
         };
 
         Object.assign(props, propOverrides);
diff --git a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
index 48bfc3ef8f0..57cebfbaa51 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
@@ -84,10 +84,11 @@ export class ShareLink extends PureComponent<Props, State> {
   };
 
   render() {
-    const { panel } = this.props;
-    const isRelativeTime = this.props.dashboard ? this.props.dashboard.time.to === 'now' : false;
+    const { panel, dashboard } = this.props;
+    const isRelativeTime = dashboard ? dashboard.time.to === 'now' : false;
     const { useCurrentTimeRange, useShortUrl, selectedTheme, shareUrl, imageUrl } = this.state;
     const selectors = e2eSelectors.pages.SharePanelModal;
+    const isDashboardSaved = Boolean(dashboard.id);
 
     return (
       <>
@@ -124,13 +125,25 @@ export class ShareLink extends PureComponent<Props, State> {
             />
           </Field>
         </FieldSet>
+
         {panel && config.rendererAvailable && (
-          <div className="gf-form">
-            <a href={imageUrl} target="_blank" rel="noreferrer" aria-label={selectors.linkToRenderedImage}>
-              <Icon name="camera" /> Direct link rendered image
-            </a>
-          </div>
+          <>
+            {isDashboardSaved && (
+              <div className="gf-form">
+                <a href={imageUrl} target="_blank" rel="noreferrer" aria-label={selectors.linkToRenderedImage}>
+                  <Icon name="camera" /> Direct link rendered image
+                </a>
+              </div>
+            )}
+
+            {!isDashboardSaved && (
+              <Alert severity="info" title="Dashboard is not saved" bottomSpacing={0}>
+                To render a panel image, you must save the dashboard first.
+              </Alert>
+            )}
+          </>
         )}
+
         {panel && !config.rendererAvailable && (
           <Alert severity="info" title="Image renderer plugin not installed" bottomSpacing={0}>
             <>To render a panel image, you must install the </>