From b569c1610f9ec44afd2042edbbbc12e48c1bea06 Mon Sep 17 00:00:00 2001
From: Juan Cabanas <juan.cabanas@grafana.com>
Date: Wed, 14 Aug 2024 10:49:10 -0300
Subject: [PATCH] ShareDrawer: Share embed panel (#90994)

---
 .../scene/PanelMenuBehavior.tsx               | 14 ++++
 .../scene/keyboardShortcuts.ts                | 12 +++
 .../sharing/SharePanelEmbedTab.tsx            |  1 +
 .../components/ShareModal/ShareEmbed.tsx      | 75 ++++++++++++-------
 public/locales/en-US/grafana.json             | 11 ++-
 public/locales/pseudo-LOCALE/grafana.json     | 11 ++-
 6 files changed, 92 insertions(+), 32 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx b/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx
index c3f2ced3c7e..c649726905f 100644
--- a/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx
+++ b/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx
@@ -23,6 +23,7 @@ import { ShowConfirmModalEvent } from 'app/types/events';
 
 import { ShareDrawer } from '../sharing/ShareDrawer/ShareDrawer';
 import { ShareModal } from '../sharing/ShareModal';
+import { SharePanelEmbedTab } from '../sharing/SharePanelEmbedTab';
 import { SharePanelInternally } from '../sharing/panel-share/SharePanelInternally';
 import { DashboardInteractions } from '../utils/interactions';
 import { getEditPanelUrl, getInspectUrl, getViewPanelUrl, tryGetExploreUrlForPanel } from '../utils/urlBuilders';
@@ -94,6 +95,19 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
           dashboard.showModal(drawer);
         },
       });
+      subMenu.push({
+        text: t('share-panel.menu.share-embed-title', 'Share embed'),
+        iconClassName: 'arrow',
+        shortcut: 'p e',
+        onClick: () => {
+          const drawer = new ShareDrawer({
+            title: t('share-panel.drawer.share-embed-title', 'Share embed'),
+            body: new SharePanelEmbedTab({ panelRef: panel.getRef() }),
+          });
+
+          dashboard.showModal(drawer);
+        },
+      });
 
       items.push({
         type: 'submenu',
diff --git a/public/app/features/dashboard-scene/scene/keyboardShortcuts.ts b/public/app/features/dashboard-scene/scene/keyboardShortcuts.ts
index eac3fb92a80..1991aef027b 100644
--- a/public/app/features/dashboard-scene/scene/keyboardShortcuts.ts
+++ b/public/app/features/dashboard-scene/scene/keyboardShortcuts.ts
@@ -7,6 +7,7 @@ import { KeybindingSet } from 'app/core/services/KeybindingSet';
 
 import { ShareDrawer } from '../sharing/ShareDrawer/ShareDrawer';
 import { ShareModal } from '../sharing/ShareModal';
+import { SharePanelEmbedTab } from '../sharing/SharePanelEmbedTab';
 import { SharePanelInternally } from '../sharing/panel-share/SharePanelInternally';
 import { dashboardSceneGraph } from '../utils/dashboardSceneGraph';
 import { getEditPanelUrl, getInspectUrl, getViewPanelUrl, tryGetExploreUrlForPanel } from '../utils/urlBuilders';
@@ -57,6 +58,17 @@ export function setupKeyboardShortcuts(scene: DashboardScene) {
           body: new SharePanelInternally({ panelRef: vizPanel.getRef() }),
         });
 
+        scene.showModal(drawer);
+      }),
+    });
+    keybindings.addBinding({
+      key: 'p e',
+      onTrigger: withFocusedPanel(scene, async (vizPanel: VizPanel) => {
+        const drawer = new ShareDrawer({
+          title: t('share-panel.drawer.share-embed-title', 'Share embed'),
+          body: new SharePanelEmbedTab({ panelRef: vizPanel.getRef() }),
+        });
+
         scene.showModal(drawer);
       }),
     });
diff --git a/public/app/features/dashboard-scene/sharing/SharePanelEmbedTab.tsx b/public/app/features/dashboard-scene/sharing/SharePanelEmbedTab.tsx
index 584d64868e4..23fe123d2e4 100644
--- a/public/app/features/dashboard-scene/sharing/SharePanelEmbedTab.tsx
+++ b/public/app/features/dashboard-scene/sharing/SharePanelEmbedTab.tsx
@@ -48,6 +48,7 @@ function SharePanelEmbedTabRenderer({ model }: SceneComponentProps<SharePanelEmb
       range={timeRangeState.state.value}
       dashboard={{ uid: dashUid ?? '', time: timeRangeState.state.value }}
       buildIframe={getIframeBuilder(dash)}
+      onCancelClick={() => dash.closeModal()}
     />
   );
 }
diff --git a/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx b/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
index 64b416053a7..def9aee5f5c 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
@@ -2,8 +2,8 @@ import { FormEvent, useEffect, useState } from 'react';
 import { useEffectOnce } from 'react-use';
 
 import { RawTimeRange, TimeRange } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
-import { ClipboardButton, Field, Modal, Switch, TextArea } from '@grafana/ui';
+import { config, reportInteraction } from '@grafana/runtime';
+import { Button, ClipboardButton, Field, Label, Modal, Stack, Switch, TextArea } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';
 
@@ -16,9 +16,10 @@ interface Props extends Omit<ShareModalTabProps, 'panel' | 'dashboard'> {
   dashboard: { uid: string; time: RawTimeRange };
   range?: TimeRange;
   buildIframe?: typeof buildIframeHtml;
+  onCancelClick?: () => void;
 }
 
-export function ShareEmbed({ panel, dashboard, range, buildIframe = buildIframeHtml }: Props) {
+export function ShareEmbed({ panel, dashboard, range, onCancelClick, buildIframe = buildIframeHtml }: Props) {
   const [useCurrentTimeRange, setUseCurrentTimeRange] = useState(true);
   const [selectedTheme, setSelectedTheme] = useState('current');
   const [iframeHtml, setIframeHtml] = useState('');
@@ -44,21 +45,45 @@ export function ShareEmbed({ panel, dashboard, range, buildIframe = buildIframeH
     setSelectedTheme(value);
   };
 
-  const isRelativeTime = dashboard.time.to === 'now';
-  const timeRangeDescription = isRelativeTime
-    ? t(
-        'share-modal.embed.time-range-description',
-        'Transforms the current relative time range to an absolute time range'
-      )
-    : '';
+  const clipboardButton = (
+    <ClipboardButton
+      icon="copy"
+      variant="primary"
+      getText={() => iframeHtml}
+      onClipboardCopy={() => {
+        DashboardInteractions.embedSnippetCopy({
+          currentTimeRange: useCurrentTimeRange,
+          theme: selectedTheme,
+          shareResource: getTrackingSource(panel),
+        });
+      }}
+    >
+      <Trans i18nKey="share-modal.embed.copy">Copy to clipboard</Trans>
+    </ClipboardButton>
+  );
 
   return (
     <>
       <p>
         <Trans i18nKey="share-modal.embed.info">Generate HTML for embedding an iframe with this panel.</Trans>
       </p>
-      <Field label={t('share-modal.embed.time-range', 'Current time range')} description={timeRangeDescription}>
-        <Switch id="share-current-time-range" value={useCurrentTimeRange} onChange={onUseCurrentTimeRangeChange} />
+      <Field>
+        <Stack gap={1} alignItems="start">
+          <Switch
+            label={t('share-modal.embed.time-range', 'Time range')}
+            id="share-current-time-range"
+            value={useCurrentTimeRange}
+            onChange={onUseCurrentTimeRangeChange}
+          />
+          <Label
+            description={t(
+              'embed.share.time-range-description',
+              'Change the current relative time range to an absolute time range'
+            )}
+          >
+            <Trans i18nKey="embed.share.time-range-label">Time range</Trans>
+          </Label>
+        </Stack>
       </Field>
       <ThemePicker selectedTheme={selectedTheme} onChange={onThemeChange} />
       <Field
@@ -76,22 +101,16 @@ export function ShareEmbed({ panel, dashboard, range, buildIframe = buildIframeH
           onChange={onIframeHtmlChange}
         />
       </Field>
-      <Modal.ButtonRow>
-        <ClipboardButton
-          icon="copy"
-          variant="primary"
-          getText={() => iframeHtml}
-          onClipboardCopy={() => {
-            DashboardInteractions.embedSnippetCopy({
-              currentTimeRange: useCurrentTimeRange,
-              theme: selectedTheme,
-              shareResource: getTrackingSource(panel),
-            });
-          }}
-        >
-          <Trans i18nKey="share-modal.embed.copy">Copy to clipboard</Trans>
-        </ClipboardButton>
-      </Modal.ButtonRow>
+      {config.featureToggles.newDashboardSharingComponent ? (
+        <Stack gap={1} justifyContent={'start'}>
+          {clipboardButton}
+          <Button variant="secondary" fill="outline" onClick={onCancelClick}>
+            <Trans i18nKey="snapshot.share.cancel-button">Cancel</Trans>
+          </Button>
+        </Stack>
+      ) : (
+        <Modal.ButtonRow>{clipboardButton}</Modal.ButtonRow>
+      )}
     </>
   );
 }
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 3e657aa3b23..685a46c6580 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -694,6 +694,12 @@
       "message": "No data sources found"
     }
   },
+  "embed": {
+    "share": {
+      "time-range-description": "Change the current relative time range to an absolute time range",
+      "time-range-label": "Time range"
+    }
+  },
   "explore": {
     "add-to-dashboard": "Add to dashboard",
     "add-to-library-modal": {
@@ -2046,8 +2052,7 @@
       "html": "Embed HTML",
       "html-description": "The HTML code below can be pasted and included in another web page. Unless anonymous access is enabled, the user viewing that page need to be signed into Grafana for the graph to load.",
       "info": "Generate HTML for embedding an iframe with this panel.",
-      "time-range": "Current time range",
-      "time-range-description": "Transforms the current relative time range to an absolute time range"
+      "time-range": "Time range"
     },
     "export": {
       "back-button": "Back to export config",
@@ -2117,9 +2122,11 @@
   },
   "share-panel": {
     "drawer": {
+      "share-embed-title": "Share embed",
       "share-link-title": "Link settings"
     },
     "menu": {
+      "share-embed-title": "Share embed",
       "share-link-title": "Share link"
     }
   },
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index fb6a4e4577f..01c8396aca1 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -694,6 +694,12 @@
       "message": "Ńő đäŧä şőūřčęş ƒőūʼnđ"
     }
   },
+  "embed": {
+    "share": {
+      "time-range-description": "Cĥäʼnģę ŧĥę čūřřęʼnŧ řęľäŧįvę ŧįmę řäʼnģę ŧő äʼn äþşőľūŧę ŧįmę řäʼnģę",
+      "time-range-label": "Ŧįmę řäʼnģę"
+    }
+  },
   "explore": {
     "add-to-dashboard": "Åđđ ŧő đäşĥþőäřđ",
     "add-to-library-modal": {
@@ -2046,8 +2052,7 @@
       "html": "Ēmþęđ ĦŦMĿ",
       "html-description": "Ŧĥę ĦŦMĿ čőđę þęľőŵ čäʼn þę päşŧęđ äʼnđ įʼnčľūđęđ įʼn äʼnőŧĥęř ŵęþ päģę. Ůʼnľęşş äʼnőʼnymőūş äččęşş įş ęʼnäþľęđ, ŧĥę ūşęř vįęŵįʼnģ ŧĥäŧ päģę ʼnęęđ ŧő þę şįģʼnęđ įʼnŧő Ğřäƒäʼnä ƒőř ŧĥę ģřäpĥ ŧő ľőäđ.",
       "info": "Ğęʼnęřäŧę ĦŦMĿ ƒőř ęmþęđđįʼnģ äʼn įƒřämę ŵįŧĥ ŧĥįş päʼnęľ.",
-      "time-range": "Cūřřęʼnŧ ŧįmę řäʼnģę",
-      "time-range-description": "Ŧřäʼnşƒőřmş ŧĥę čūřřęʼnŧ řęľäŧįvę ŧįmę řäʼnģę ŧő äʼn äþşőľūŧę ŧįmę řäʼnģę"
+      "time-range": "Ŧįmę řäʼnģę"
     },
     "export": {
       "back-button": "ßäčĸ ŧő ęχpőřŧ čőʼnƒįģ",
@@ -2117,9 +2122,11 @@
   },
   "share-panel": {
     "drawer": {
+      "share-embed-title": "Ŝĥäřę ęmþęđ",
       "share-link-title": "Ŀįʼnĸ şęŧŧįʼnģş"
     },
     "menu": {
+      "share-embed-title": "Ŝĥäřę ęmþęđ",
       "share-link-title": "Ŝĥäřę ľįʼnĸ"
     }
   },