ShareDrawer: Schedule Report (#89802)

public/app/features/dashboard-scene/sharing/ShareButton/ShareMenu.tsx

@@ -1,13 +1,16 @@
+import { useCallback } from 'react';
+
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';
-import { VizPanel } from '@grafana/scenes';
+import { SceneObject, VizPanel } from '@grafana/scenes';
-import { Menu } from '@grafana/ui';
+import { IconName, Menu } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { t } from 'app/core/internationalization';
 
 import { isPublicDashboardsEnabled } from '../../../dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboardUtils';
 import { DashboardScene } from '../../scene/DashboardScene';
 import { ShareDrawer } from '../ShareDrawer/ShareDrawer';
+import { SceneShareDrawerState } from '../types';
 
 import { ShareExternally } from './share-externally/ShareExternally';
 import { ShareInternally } from './share-internally/ShareInternally';
@@ -15,59 +18,86 @@ import { ShareSnapshot } from './share-snapshot/ShareSnapshot';
 
 const newShareButtonSelector = e2eSelectors.pages.Dashboard.DashNav.newShareButton.menu;
 
+type CustomDashboardDrawer = new (...args: SceneShareDrawerState[]) => SceneObject;
+
+export interface ShareDrawerMenuItem {
+  testId: string;
+  label: string;
+  description?: string;
+  icon: IconName;
+  renderCondition: boolean;
+  onClick: (d: DashboardScene) => void;
+}
+
+const customShareDrawerItem: ShareDrawerMenuItem[] = [];
+
+export function addDashboardShareDrawerItem(item: ShareDrawerMenuItem) {
+  customShareDrawerItem.push(item);
+}
+
 export default function ShareMenu({ dashboard, panel }: { dashboard: DashboardScene; panel?: VizPanel }) {
-  const onShareInternallyClick = () => {
+  const onMenuItemClick = useCallback(
-    const drawer = new ShareDrawer({
+    (title: string, component: CustomDashboardDrawer) => {
-      title: t('share-dashboard.menu.share-internally-title', 'Share internally'),
+      const drawer = new ShareDrawer({
-      body: new ShareInternally({ panelRef: panel?.getRef() }),
+        title,
+        body: new component({ dashboardRef: dashboard.getRef(), panelRef: panel?.getRef() }),
+      });
+
+      dashboard.showModal(drawer);
+    },
+    [dashboard, panel]
+  );
+
+  const buildMenuItems = useCallback(() => {
+    const menuItems: ShareDrawerMenuItem[] = [];
+
+    menuItems.push({
+      testId: newShareButtonSelector.shareInternally,
+      icon: 'building',
+      label: t('share-dashboard.menu.share-internally-title', 'Share internally'),
+      description: t('share-dashboard.menu.share-internally-description', 'Advanced settings'),
+      renderCondition: true,
+      onClick: () =>
+        onMenuItemClick(t('share-dashboard.menu.share-internally-title', 'Share internally'), ShareInternally),
     });
 
-    dashboard.showModal(drawer);
+    menuItems.push({
-  };
+      testId: newShareButtonSelector.shareExternally,
-
+      icon: 'share-alt',
-  const onShareExternallyClick = () => {
+      label: t('share-dashboard.menu.share-externally-title', 'Share externally'),
-    const drawer = new ShareDrawer({
+      renderCondition: !panel && isPublicDashboardsEnabled(),
-      title: t('share-dashboard.menu.share-externally-title', 'Share externally'),
+      onClick: () => {
-      body: new ShareExternally({}),
+        onMenuItemClick(t('share-dashboard.menu.share-externally-title', 'Share externally'), ShareExternally);
+      },
     });
 
-    dashboard.showModal(drawer);
+    customShareDrawerItem.forEach((d) => menuItems.push(d));
-  };
 
-  const onShareSnapshotClick = () => {
+    menuItems.push({
-    const drawer = new ShareDrawer({
+      testId: newShareButtonSelector.shareSnapshot,
-      title: t('share-dashboard.menu.share-snapshot-title', 'Share snapshot'),
+      icon: 'camera',
-      body: new ShareSnapshot({ dashboardRef: dashboard.getRef() }),
+      label: t('share-dashboard.menu.share-snapshot-title', 'Share snapshot'),
+      renderCondition: contextSrv.isSignedIn && config.snapshotEnabled && dashboard.canEditDashboard(),
+      onClick: () => {
+        onMenuItemClick(t('share-dashboard.menu.share-snapshot-title', 'Share snapshot'), ShareSnapshot);
+      },
     });
 
-    dashboard.showModal(drawer);
+    return menuItems.filter((item) => item.renderCondition);
-  };
+  }, [onMenuItemClick, dashboard, panel]);
 
   return (
     <Menu data-testid={newShareButtonSelector.container}>
-      <Menu.Item
+      {buildMenuItems().map((item) => (
-        testId={newShareButtonSelector.shareInternally}
-        label={t('share-dashboard.menu.share-internally-title', 'Share internally')}
-        description={t('share-dashboard.menu.share-internally-description', 'Advanced settings')}
-        icon="building"
-        onClick={onShareInternallyClick}
-      />
-      {isPublicDashboardsEnabled() && (
         <Menu.Item
-          testId={newShareButtonSelector.shareExternally}
+          key={item.label}
-          label={t('share-dashboard.menu.share-externally-title', 'Share externally')}
+          testId={item.testId}
-          icon="share-alt"
+          label={item.label}
-          onClick={onShareExternallyClick}
+          icon={item.icon}
+          description={item.description}
+          onClick={() => item.onClick(dashboard)}
         />
-      )}
+      ))}
-      {contextSrv.isSignedIn && config.snapshotEnabled && dashboard.canEditDashboard() && (
-        <Menu.Item
-          testId={newShareButtonSelector.shareSnapshot}
-          label={t('share-dashboard.menu.share-snapshot-title', 'Share snapshot')}
-          icon="camera"
-          onClick={onShareSnapshotClick}
-        />
-      )}
     </Menu>
   );
 }

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

@@ -59,7 +59,9 @@ export class ShareSnapshotTab extends SceneObjectBase<ShareSnapshotTabState> {
   public tabId = shareDashboardType.snapshot;
   static Component = ShareSnapshotTabRenderer;
 
-  public constructor(state: Omit<ShareSnapshotTabState, 'snapshotName' | 'selectedExpireOption'>) {
+  public constructor(
+    state: Omit<ShareSnapshotTabState, 'snapshotName' | 'selectedExpireOption' | 'snapshotSharingOptions'>
+  ) {
     super({
       ...state,
       snapshotName: state.dashboardRef.resolve().state.title,

public/app/features/dashboard-scene/sharing/types.ts

@@ -1,4 +1,6 @@
-import { SceneObject, SceneObjectRef, SceneObjectState } from '@grafana/scenes';
+import { SceneObject, SceneObjectRef, SceneObjectState, VizPanel } from '@grafana/scenes';
+
+import { DashboardScene } from '../scene/DashboardScene';
 
 export interface ModalSceneObjectLike {
   onDismiss: () => void;
@@ -12,3 +14,8 @@ export interface SceneShareTab<T extends SceneShareTabState = SceneShareTabState
   getTabLabel(): string;
   tabId: string;
 }
+
+export interface SceneShareDrawerState extends SceneObjectState {
+  dashboardRef: SceneObjectRef<DashboardScene>;
+  panelRef?: SceneObjectRef<VizPanel>;
+}