LibraryPanels: Adds back library panel information to panel edit (#32923)

* LibraryPanels: Adds back library panel information to panel edit

* Chore: fixes merge issue

public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx

@@ -5,15 +5,29 @@ import { RepeatRowSelect } from '../RepeatRowSelect/RepeatRowSelect';
 import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
 import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
 import { OptionPaneRenderProps } from './types';
+import { isPanelModelLibraryPanel } from '../../../library-panels/guard';
+import { LibraryPanelInformation } from 'app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo';
 
 export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPaneCategoryDescriptor {
-  const { panel, onPanelConfigChange } = props;
+  const { panel, onPanelConfigChange, dashboard } = props;
-
+  const descriptor = new OptionsPaneCategoryDescriptor({
-  return new OptionsPaneCategoryDescriptor({
     title: 'Panel options',
     id: 'Panel options',
     isOpenDefault: true,
-  })
+  });
+
+  if (isPanelModelLibraryPanel(panel)) {
+    descriptor.addItem(
+      new OptionsPaneItemDescriptor({
+        title: 'Global panel information',
+        render: function renderLibraryPanelInformation() {
+          return <LibraryPanelInformation panel={panel} formatDate={dashboard.formatDate} />;
+        },
+      })
+    );
+  }
+
+  return descriptor
     .addItem(
       new OptionsPaneItemDescriptor({
         title: 'Title',

public/app/features/dashboard/state/PanelModel.ts

@@ -578,10 +578,6 @@ function getPluginVersion(plugin: PanelPlugin): string {
   return plugin && plugin.meta.info.version ? plugin.meta.info.version : config.buildInfo.version;
 }
 
-export function isLibraryPanel(panel: PanelModel): panel is PanelModel & Required<Pick<PanelModel, 'libraryPanel'>> {
-  return panel.libraryPanel !== undefined;
-}
-
 interface PanelOptionsCache {
   properties: any;
   fieldConfig: FieldConfigSource;

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

@@ -1,47 +1,50 @@
 import { DateTimeInput, GrafanaTheme } from '@grafana/data';
-import { stylesFactory, useStyles } from '@grafana/ui';
+import { useStyles } from '@grafana/ui';
-import { OptionsPaneCategory } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategory';
-import { PanelModel } from 'app/features/dashboard/state';
 import { css } from '@emotion/css';
 import React from 'react';
+import { PanelModelWithLibraryPanel } from '../../types';
+import { isPanelModelLibraryPanel } from '../../guard';
 
 interface Props {
-  panel: PanelModel & Required<Pick<PanelModel, 'libraryPanel'>>;
+  panel: PanelModelWithLibraryPanel;
   formatDate?: (dateString: DateTimeInput, format?: string) => string;
 }
 
 export const LibraryPanelInformation: React.FC<Props> = ({ panel, formatDate }) => {
   const styles = useStyles(getStyles);
 
+  if (!isPanelModelLibraryPanel(panel)) {
+    return null;
+  }
+
   return (
-    <OptionsPaneCategory title="Reusable panel information" id="Shared Panel Info" key="Shared Panel Info">
+    <>
-      {panel.libraryPanel.uid && (
+      <p className={styles.libraryPanelInfo}>
-        <p className={styles.libraryPanelInfo}>
+        {`Used on ${panel.libraryPanel.meta.connectedDashboards} `}
-          {`Used on ${panel.libraryPanel.meta.connectedDashboards} `}
+        {panel.libraryPanel.meta.connectedDashboards === 1 ? 'dashboard' : 'dashboards'}
-          {panel.libraryPanel.meta.connectedDashboards === 1 ? 'dashboard' : 'dashboards'}
+        <br />
-          <br />
+        Last edited on {formatDate?.(panel.libraryPanel.meta.updated, 'L') ?? panel.libraryPanel.meta.updated} by
-          Last edited on {formatDate?.(panel.libraryPanel.meta.updated, 'L') ?? panel.libraryPanel.meta.updated} by
+        {panel.libraryPanel.meta.updatedBy.avatarUrl && (
-          {panel.libraryPanel.meta.updatedBy.avatarUrl && (
+          <img
-            <img
+            width="22"
-              width="22"
+            height="22"
-              height="22"
+            className={styles.userAvatar}
-              className={styles.userAvatar}
+            src={panel.libraryPanel.meta.updatedBy.avatarUrl}
-              src={panel.libraryPanel.meta.updatedBy.avatarUrl}
+            alt={`Avatar for ${panel.libraryPanel.meta.updatedBy.name}`}
-              alt={`Avatar for ${panel.libraryPanel.meta.updatedBy.name}`}
+          />
-            />
+        )}
-          )}
+        {panel.libraryPanel.meta.updatedBy.name}
-          {panel.libraryPanel.meta.updatedBy.name}
+      </p>
-        </p>
+    </>
-      )}
-    </OptionsPaneCategory>
   );
 };
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme) => {
   return {
     libraryPanelInfo: css`
       color: ${theme.colors.textSemiWeak};
       font-size: ${theme.typography.size.sm};
+      margin-left: ${theme.spacing.xxs};
     `,
     userAvatar: css`
       border-radius: 50%;
@@ -52,4 +55,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       padding-right: ${theme.spacing.sm};
     `,
   };
-});
+};