Library Panels: Add library panel tab to share modal (#32953)

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { PanelModel } from 'app/features/dashboard/state';
+import { AddLibraryPanelContents } from 'app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal';
+
+interface Props {
+  onDismiss?: () => void;
+  panel?: PanelModel;
+  initialFolderId?: number;
+}
+
+export const ShareGlobalPanel = ({ panel, initialFolderId, onDismiss }: Props) => {
+  if (!panel) {
+    return null;
+  }
+
+  return (
+    <div className="share-modal-body">
+      <div className="share-modal-header">
+        <div className="share-modal-content">
+          <p className="share-modal-info-text">Add this panel to the panel library.</p>
+          <AddLibraryPanelContents panel={panel} initialFolderId={initialFolderId} onDismiss={onDismiss!} />
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import { Modal, ModalTabsHeader, TabContent } from '@grafana/ui';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
+import { isPanelModelLibraryPanel } from 'app/features/library-panels/guard';
 import { ShareLink } from './ShareLink';
 import { ShareSnapshot } from './ShareSnapshot';
 import { ShareExport } from './ShareExport';
 import { ShareEmbed } from './ShareEmbed';
 import { ShareModalTabModel } from './types';
 import { contextSrv } from 'app/core/core';
+import { ShareGlobalPanel } from './ShareGlobalPanel';
 
 const customDashboardTabs: ShareModalTabModel[] = [];
 const customPanelTabs: ShareModalTabModel[] = [];
@@ -38,6 +40,10 @@ function getTabs(props: Props) {
 
   if (panel) {
     tabs.push({ label: 'Embed', value: 'embed', component: ShareEmbed });
+
+    if (!isPanelModelLibraryPanel(panel)) {
+      tabs.push({ label: 'Global panel', value: 'global_panel', component: ShareGlobalPanel });
+    }
     tabs.push(...customPanelTabs);
   } else {
     tabs.push({ label: 'Export', value: 'export', component: ShareExport });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PanelModel } from '@grafana/data';
-import { DashboardModel } from 'app/features/dashboard/state';
+import { DashboardModel, PanelModel as InternalPanelModel } from 'app/features/dashboard/state';
 
 export interface ShareModalTabProps {
   dashboard: DashboardModel;
@@ -8,7 +8,10 @@ export interface ShareModalTabProps {
   onDismiss?(): void;
 }
 
-export type ShareModalTab = React.ComponentType<ShareModalTabProps>;
+type ShareModalTabPropsWithInternalModel = ShareModalTabProps & { panel?: InternalPanelModel };
+export type ShareModalTab =
+  | React.ComponentType<ShareModalTabProps>
+  | React.ComponentType<ShareModalTabPropsWithInternalModel>;
 
 export interface ShareModalTabModel {
   label: string;

public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx

@@ -4,22 +4,20 @@ import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import { PanelModel } from '../../../dashboard/state';
 import { css } from '@emotion/css';
 import { usePanelSave } from '../../utils/usePanelSave';
-
+interface AddLibraryPanelContentsProps {
-interface Props {
   onDismiss: () => void;
-  isOpen?: boolean;
   panel: PanelModel;
   initialFolderId?: number;
 }
 
-export const AddLibraryPanelModal: React.FC<Props> = ({ isOpen = false, panel, initialFolderId, ...props }) => {
+export const AddLibraryPanelContents = ({ panel, initialFolderId, onDismiss }: AddLibraryPanelContentsProps) => {
   const styles = useStyles(getStyles);
   const [folderId, setFolderId] = useState(initialFolderId);
   const [panelTitle, setPanelTitle] = useState(panel.title);
   const { saveLibraryPanel } = usePanelSave();
 
   return (
-    <Modal title="Add this panel to the panel library" isOpen={isOpen} onDismiss={props.onDismiss}>
+    <>
       <Field label="Library panel name">
         <Input name="name" value={panelTitle} onChange={(e) => setPanelTitle(e.currentTarget.value)} />
       </Field>
@@ -31,15 +29,27 @@ export const AddLibraryPanelModal: React.FC<Props> = ({ isOpen = false, panel, i
         <Button
           onClick={() => {
             panel.title = panelTitle;
-            saveLibraryPanel(panel, folderId!).then(() => props.onDismiss());
+            saveLibraryPanel(panel, folderId!).then(() => onDismiss());
           }}
         >
           Add panel to the panel library
         </Button>
-        <Button variant="secondary" onClick={props.onDismiss}>
+        <Button variant="secondary" onClick={onDismiss}>
           Cancel
         </Button>
       </div>
+    </>
+  );
+};
+
+interface Props extends AddLibraryPanelContentsProps {
+  isOpen?: boolean;
+}
+
+export const AddLibraryPanelModal: React.FC<Props> = ({ isOpen = false, panel, initialFolderId, ...props }) => {
+  return (
+    <Modal title="Add this panel to the panel library" isOpen={isOpen} onDismiss={props.onDismiss}>
+      <AddLibraryPanelContents panel={panel} initialFolderId={initialFolderId} onDismiss={props.onDismiss} />
     </Modal>
   );
 };