ShareModal: Implement panel embed tab for scenes (#77062)

* ShareModal: Implement panel embed tab for scenes

* Fix url generation

* Locale

---------

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

public/app/features/dashboard-scene/sharing/ShareModal.tsx

@@ -11,6 +11,7 @@ import { getDashboardSceneFor } from '../utils/utils';
 
 import { ShareExportTab } from './ShareExportTab';
 import { ShareLinkTab } from './ShareLinkTab';
+import { SharePanelEmbedTab } from './SharePanelEmbedTab';
 import { ShareSnapshotTab } from './ShareSnapshotTab';
 import { ModalSceneObjectLike, SceneShareTab } from './types';
 
@@ -49,6 +50,10 @@ export class ShareModal extends SceneObjectBase<ShareModalState> implements Moda
       tabs.push(new ShareSnapshotTab({ panelRef, dashboardRef, modalRef: this.getRef() }));
     }
 
+    if (panelRef) {
+      tabs.push(new SharePanelEmbedTab({ panelRef, dashboardRef }));
+    }
+
     this.setState({ tabs });
 
     // if (panel) {

public/app/features/dashboard-scene/sharing/SharePanelEmbedTab.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import { TimeRange } from '@grafana/data';
+import { SceneComponentProps, sceneGraph, SceneObjectBase, SceneObjectRef, VizPanel } from '@grafana/scenes';
+import { t } from 'app/core/internationalization';
+import { ShareEmbed } from 'app/features/dashboard/components/ShareModal/ShareEmbed';
+import { buildParams } from 'app/features/dashboard/components/ShareModal/utils';
+
+import { DashboardScene } from '../scene/DashboardScene';
+import { getDashboardUrl } from '../utils/urlBuilders';
+import { getPanelIdForVizPanel } from '../utils/utils';
+
+import { SceneShareTabState } from './types';
+
+export interface SharePanelEmbedTabState extends SceneShareTabState {
+  panelRef: SceneObjectRef<VizPanel>;
+  dashboardRef: SceneObjectRef<DashboardScene>;
+}
+
+export class SharePanelEmbedTab extends SceneObjectBase<SharePanelEmbedTabState> {
+  static Component = SharePanelEmbedTabRenderer;
+
+  public constructor(state: SharePanelEmbedTabState) {
+    super(state);
+  }
+
+  public getTabLabel() {
+    return t('share-modal.tab-title.panel-embed', 'Embed');
+  }
+}
+
+function SharePanelEmbedTabRenderer({ model }: SceneComponentProps<SharePanelEmbedTab>) {
+  const { panelRef, dashboardRef } = model.useState();
+  const p = panelRef.resolve();
+
+  const dash = dashboardRef.resolve();
+  const { uid: dashUid } = dash.useState();
+  const id = getPanelIdForVizPanel(p);
+  const timeRangeState = sceneGraph.getTimeRange(p);
+
+  return (
+    <ShareEmbed
+      panel={{
+        id,
+        timeFrom:
+          typeof timeRangeState.state.value.raw.from === 'string' ? timeRangeState.state.value.raw.from : undefined,
+      }}
+      range={timeRangeState.state.value}
+      dashboard={{ uid: dashUid ?? '', time: timeRangeState.state.value }}
+      buildIframe={buildIframe}
+    />
+  );
+}
+
+function buildIframe(
+  useCurrentTimeRange: boolean,
+  dashboardUid: string,
+  selectedTheme?: string,
+  panel?: { timeFrom?: string; id: number },
+  range?: TimeRange
+) {
+  const params = buildParams({ useCurrentTimeRange, selectedTheme, panel, range });
+  const panelId = params.get('editPanel') ?? params.get('viewPanel') ?? '';
+  params.set('panelId', panelId);
+  params.delete('editPanel');
+  params.delete('viewPanel');
+
+  const soloUrl = getDashboardUrl({
+    absolute: true,
+    soloRoute: true,
+    uid: dashboardUid,
+    currentQueryParams: params.toString(),
+  });
+  return `<iframe src="${soloUrl}" width="450" height="200" frameborder="0"></iframe>`;
+}

public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx

@@ -1,6 +1,8 @@
-import React, { FormEvent, PureComponent } from 'react';
+import React, { FormEvent, useEffect, useState } from 'react';
+import { useEffectOnce } from 'react-use';
 
-import { reportInteraction } from '@grafana/runtime/src';
+import { RawTimeRange, TimeRange } from '@grafana/data';
+import { reportInteraction } from '@grafana/runtime';
 import { ClipboardButton, Field, Modal, Switch, TextArea } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
@@ -8,103 +10,76 @@ import { ThemePicker } from './ThemePicker';
 import { ShareModalTabProps } from './types';
 import { buildIframeHtml } from './utils';
 
-interface Props extends ShareModalTabProps {}
+interface Props extends Omit<ShareModalTabProps, 'panel' | 'dashboard'> {
-
+  panel?: { timeFrom?: string; id: number };
-interface State {
+  dashboard: { uid: string; time: RawTimeRange };
-  useCurrentTimeRange: boolean;
+  range?: TimeRange;
-  selectedTheme: string;
+  buildIframe?: typeof buildIframeHtml;
-  iframeHtml: string;
 }
 
-export class ShareEmbed extends PureComponent<Props, State> {
+export function ShareEmbed({ panel, dashboard, range, buildIframe = buildIframeHtml }: Props) {
-  constructor(props: Props) {
+  const [useCurrentTimeRange, setUseCurrentTimeRange] = useState(true);
-    super(props);
+  const [selectedTheme, setSelectedTheme] = useState('current');
-    this.state = {
+  const [iframeHtml, setIframeHtml] = useState('');
-      useCurrentTimeRange: true,
-      selectedTheme: 'current',
-      iframeHtml: '',
-    };
-  }
 
-  componentDidMount() {
+  useEffectOnce(() => {
     reportInteraction('grafana_dashboards_embed_share_viewed');
-    this.buildIframeHtml();
+  });
-  }
 
-  buildIframeHtml = () => {
+  useEffect(() => {
-    const { panel, dashboard } = this.props;
+    const newIframeHtml = buildIframe(useCurrentTimeRange, dashboard.uid, selectedTheme, panel, range);
-    const { useCurrentTimeRange, selectedTheme } = this.state;
+    setIframeHtml(newIframeHtml);
+  }, [selectedTheme, useCurrentTimeRange, dashboard, panel, range, buildIframe]);
 
-    const iframeHtml = buildIframeHtml(useCurrentTimeRange, dashboard.uid, selectedTheme, panel);
+  const onIframeHtmlChange = (event: FormEvent<HTMLTextAreaElement>) => {
-    this.setState({ iframeHtml });
+    setIframeHtml(event.currentTarget.value);
   };
 
-  onIframeHtmlChange = (event: FormEvent<HTMLTextAreaElement>) => {
+  const onUseCurrentTimeRangeChange = () => {
-    this.setState({ iframeHtml: event.currentTarget.value });
+    setUseCurrentTimeRange((useCurTimeRange) => !useCurTimeRange);
   };
 
-  onUseCurrentTimeRangeChange = () => {
+  const onThemeChange = (value: string) => {
-    this.setState(
+    setSelectedTheme(value);
-      {
-        useCurrentTimeRange: !this.state.useCurrentTimeRange,
-      },
-      this.buildIframeHtml
-    );
   };
 
-  onThemeChange = (value: string) => {
+  const isRelativeTime = dashboard.time.to === 'now';
-    this.setState({ selectedTheme: value }, this.buildIframeHtml);
+  const timeRangeDescription = isRelativeTime
-  };
+    ? t(
+        'share-modal.embed.time-range-description',
+        'Transforms the current relative time range to an absolute time range'
+      )
+    : '';
 
-  getIframeHtml = () => {
+  return (
-    return this.state.iframeHtml;
+    <>
-  };
+      <p className="share-modal-info-text">
-
+        <Trans i18nKey="share-modal.embed.info">Generate HTML for embedding an iframe with this panel.</Trans>
-  render() {
+      </p>
-    const { useCurrentTimeRange, selectedTheme, iframeHtml } = this.state;
+      <Field label={t('share-modal.embed.time-range', 'Current time range')} description={timeRangeDescription}>
-    const isRelativeTime = this.props.dashboard ? this.props.dashboard.time.to === 'now' : false;
+        <Switch id="share-current-time-range" value={useCurrentTimeRange} onChange={onUseCurrentTimeRangeChange} />
-
+      </Field>
-    const timeRangeDescription = isRelativeTime
+      <ThemePicker selectedTheme={selectedTheme} onChange={onThemeChange} />
-      ? t(
+      <Field
-          'share-modal.embed.time-range-description',
+        label={t('share-modal.embed.html', 'Embed HTML')}
-          'Transforms the current relative time range to an absolute time range'
+        description={t(
-        )
+          'share-modal.embed.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.'
-
+        )}
-    return (
+      >
-      <>
+        <TextArea
-        <p className="share-modal-info-text">
+          data-testid="share-embed-html"
-          <Trans i18nKey="share-modal.embed.info">Generate HTML for embedding an iframe with this panel.</Trans>
+          id="share-panel-embed-embed-html-textarea"
-        </p>
+          rows={5}
-        <Field label={t('share-modal.embed.time-range', 'Current time range')} description={timeRangeDescription}>
+          value={iframeHtml}
-          <Switch
+          onChange={onIframeHtmlChange}
-            id="share-current-time-range"
+        />
-            value={useCurrentTimeRange}
+      </Field>
-            onChange={this.onUseCurrentTimeRangeChange}
+      <Modal.ButtonRow>
-          />
+        <ClipboardButton icon="copy" variant="primary" getText={() => iframeHtml}>
-        </Field>
+          <Trans i18nKey="share-modal.embed.copy">Copy to clipboard</Trans>
-        <ThemePicker selectedTheme={selectedTheme} onChange={this.onThemeChange} />
+        </ClipboardButton>
-        <Field
+      </Modal.ButtonRow>
-          label={t('share-modal.embed.html', 'Embed HTML')}
+    </>
-          description={t(
+  );
-            'share-modal.embed.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.'
-          )}
-        >
-          <TextArea
-            data-testid="share-embed-html"
-            id="share-panel-embed-embed-html-textarea"
-            rows={5}
-            value={iframeHtml}
-            onChange={this.onIframeHtmlChange}
-          />
-        </Field>
-        <Modal.ButtonRow>
-          <ClipboardButton icon="copy" variant="primary" getText={this.getIframeHtml}>
-            <Trans i18nKey="share-modal.embed.copy">Copy to clipboard</Trans>
-          </ClipboardButton>
-        </Modal.ButtonRow>
-      </>
-    );
-  }
 }

public/app/features/dashboard/components/ShareModal/utils.ts

@@ -8,7 +8,7 @@ import { PanelModel } from '../../state';
 export interface BuildParamsArgs {
   useCurrentTimeRange: boolean;
   selectedTheme?: string;
-  panel?: PanelModel;
+  panel?: { timeFrom?: string; id: number };
   search?: string;
   range?: TimeRange;
   orgId?: number;
@@ -82,10 +82,11 @@ export function buildSoloUrl(
   useCurrentTimeRange: boolean,
   dashboardUid: string,
   selectedTheme?: string,
-  panel?: PanelModel
+  panel?: { timeFrom?: string; id: number },
+  range?: TimeRange
 ) {
   const baseUrl = buildBaseUrl();
-  const params = buildParams({ useCurrentTimeRange, selectedTheme, panel });
+  const params = buildParams({ useCurrentTimeRange, selectedTheme, panel, range });
 
   let soloUrl = baseUrl.replace(config.appSubUrl + '/dashboard/', config.appSubUrl + '/dashboard-solo/');
   soloUrl = soloUrl.replace(config.appSubUrl + '/d/', config.appSubUrl + '/d-solo/');
@@ -121,10 +122,11 @@ export function buildIframeHtml(
   useCurrentTimeRange: boolean,
   dashboardUid: string,
   selectedTheme?: string,
-  panel?: PanelModel
+  panel?: { timeFrom?: string; id: number },
+  range?: TimeRange
 ) {
-  let soloUrl = buildSoloUrl(useCurrentTimeRange, dashboardUid, selectedTheme, panel);
+  let soloUrl = buildSoloUrl(useCurrentTimeRange, dashboardUid, selectedTheme, panel, range);
-  return '<iframe src="' + soloUrl + '" width="450" height="200" frameborder="0"></iframe>';
+  return `<iframe src="${soloUrl}" width="450" height="200" frameborder="0"></iframe>`;
 }
 
 export function getLocalTimeZone() {

public/locales/de-DE/grafana.json

@@ -1090,6 +1090,7 @@
       "export": "Exportieren",
       "library-panel": "Bibliotheks-Panel",
       "link": "Link",
+      "panel-embed": "",
       "snapshot": "Schnappschuss"
     },
     "theme-picker": {

public/locales/en-US/grafana.json

@@ -1090,6 +1090,7 @@
       "export": "Export",
       "library-panel": "Library panel",
       "link": "Link",
+      "panel-embed": "Embed",
       "snapshot": "Snapshot"
     },
     "theme-picker": {

public/locales/es-ES/grafana.json

@@ -1096,6 +1096,7 @@
       "export": "Exportar",
       "library-panel": "Panel de librería",
       "link": "Enlace",
+      "panel-embed": "",
       "snapshot": "Instantánea"
     },
     "theme-picker": {

public/locales/fr-FR/grafana.json

@@ -1096,6 +1096,7 @@
       "export": "Exporter",
       "library-panel": "Panneau de bibliothèque",
       "link": "Lien",
+      "panel-embed": "",
       "snapshot": "Instantané"
     },
     "theme-picker": {

public/locales/pseudo-LOCALE/grafana.json

@@ -1090,6 +1090,7 @@
       "export": "Ēχpőřŧ",
       "library-panel": "Ŀįþřäřy päʼnęľ",
       "link": "Ŀįʼnĸ",
+      "panel-embed": "Ēmþęđ",
       "snapshot": "Ŝʼnäpşĥőŧ"
     },
     "theme-picker": {

public/locales/zh-Hans/grafana.json

@@ -1084,6 +1084,7 @@
       "export": "导出",
       "library-panel": "库面板",
       "link": "链接",
+      "panel-embed": "",
       "snapshot": "快照"
     },
     "theme-picker": {