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

---
 .../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 70025821539..28ad3bf65d2 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
@@ -7,6 +7,7 @@ import { initTemplateSrv } from '../../../../../test/helpers/initTemplateSrv';
 import { variableAdapters } from '../../../variables/adapters';
 import { createQueryVariableAdapter } from '../../../variables/query/adapter';
 import { PanelModel } from '../../state';
+import { getDefaultTimeRange } from '@grafana/data';
 
 jest.mock('app/features/dashboard/services/TimeSrv', () => ({
   getTimeSrv: () => ({
@@ -76,6 +77,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 32b93cd5423..51b24ab346e 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
@@ -81,10 +81,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 (
       <>
@@ -122,13 +123,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 </>