PanelContext: Adds app property of type CoreApp enum to inform panel about what the outer container/app is (#39952)

* PanelContext: Adds a container enum / string to inform panel about what the outer container/app state is

* Changing to use existing CoreApp

* fixing unified alerting type errors

packages/grafana-data/src/types/app.ts

@@ -3,11 +3,17 @@ import { KeyValue } from './data';
 import { NavModel } from './navModel';
 import { PluginMeta, GrafanaPlugin, PluginIncludeType } from './plugin';
 
+/**
+ * @public
+ * The app container that is loading another plugin (panel or query editor)
+ * */
 export enum CoreApp {
+  CloudAlerting = 'cloud-alerting',
   Dashboard = 'dashboard',
   Explore = 'explore',
   Unknown = 'unknown',
-  CloudAlerting = 'cloud-alerting',
+  PanelEditor = 'panel-editor',
+  PanelViewer = 'panel-viewer',
 }
 
 export interface AppRootProps<T = KeyValue> {

packages/grafana-ui/src/components/PanelChrome/PanelContext.ts

@@ -5,6 +5,7 @@ import {
   AnnotationEventUIModel,
   ThresholdsConfig,
   SplitOpen,
+  CoreApp,
 } from '@grafana/data';
 import React from 'react';
 import { SeriesVisibilityChangeMode } from '.';
@@ -16,6 +17,9 @@ export interface PanelContext {
   /** Dashboard panels sync */
   sync?: DashboardCursorSync;
 
+  /** Information on what the outer container is */
+  app?: CoreApp | 'string';
+
   /**
    * Called when a component wants to change the color for a series
    *
@@ -43,6 +47,7 @@ export interface PanelContext {
    * @alpha -- experimental
    */
   onThresholdsChange?: (thresholds: ThresholdsConfig) => void;
+
   /**
    * onSplitOpen is used in Explore to open the split view. It can be used in panels which has intercations and used in Explore as well.
    * For example TimeSeries panel.

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -6,6 +6,7 @@ import {
   AbsoluteTimeRange,
   AnnotationChangeEvent,
   AnnotationEventUIModel,
+  CoreApp,
   DashboardCursorSync,
   EventFilterOptions,
   FieldConfigSource,
@@ -78,8 +79,9 @@ export class PanelChrome extends Component<Props, State> {
       renderCounter: 0,
       refreshWhenInView: false,
       context: {
-        sync: props.isEditing ? DashboardCursorSync.Off : props.dashboard.graphTooltip,
         eventBus,
+        sync: props.isEditing ? DashboardCursorSync.Off : props.dashboard.graphTooltip,
+        app: this.getPanelContextApp(),
         onSeriesColorChange: this.onSeriesColorChange,
         onToggleSeriesVisibility: this.onSeriesVisibilityChange,
         onAnnotationCreate: this.onAnnotationCreate,
@@ -104,6 +106,17 @@ export class PanelChrome extends Component<Props, State> {
     store.dispatch(setPanelInstanceState({ panelId: this.props.panel.id, value }));
   };
 
+  getPanelContextApp() {
+    if (this.props.isEditing) {
+      return CoreApp.PanelEditor;
+    }
+    if (this.props.isViewing) {
+      return CoreApp.PanelViewer;
+    }
+
+    return CoreApp.Dashboard;
+  }
+
   onSeriesColorChange = (label: string, color: string) => {
     this.onFieldConfigChange(changeSeriesColorConfigFactory(label, color, this.props.panel.fieldConfig));
   };
@@ -177,20 +190,18 @@ export class PanelChrome extends Component<Props, State> {
 
   componentDidUpdate(prevProps: Props) {
     const { isInView, isEditing, width } = this.props;
+    const { context } = this.state;
 
-    if (prevProps.dashboard.graphTooltip !== this.props.dashboard.graphTooltip) {
+    const app = this.getPanelContextApp();
-      this.setState((s) => {
+    const sync = isEditing ? DashboardCursorSync.Off : this.props.dashboard.graphTooltip;
-        return {
-          context: { ...s.context, sync: isEditing ? DashboardCursorSync.Off : this.props.dashboard.graphTooltip },
-        };
-      });
-    }
 
-    if (isEditing !== prevProps.isEditing) {
+    if (context.sync !== sync || context.app !== app) {
-      this.setState((s) => {
+      this.setState({
-        return {
+        context: {
-          context: { ...s.context, sync: isEditing ? DashboardCursorSync.Off : this.props.dashboard.graphTooltip },
+          ...context,
-        };
+          sync,
+          app,
+        },
       });
     }
 

public/app/features/query/components/QueryEditorRow.tsx

@@ -212,6 +212,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
           ds.components?.ExploreQueryField ||
           ds.components?.QueryEditor
         );
+      case CoreApp.PanelEditor:
       case CoreApp.Dashboard:
       default:
         return ds.components?.QueryEditor;
@@ -219,7 +220,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
   }
 
   renderPluginEditor = () => {
-    const { query, onChange, queries, onRunQuery, app = CoreApp.Dashboard, history } = this.props;
+    const { query, onChange, queries, onRunQuery, app = CoreApp.PanelEditor, history } = this.props;
     const { datasource, data } = this.state;
 
     if (datasource?.components?.QueryCtrl) {

public/app/plugins/panel/debug/StateView.tsx

@@ -13,9 +13,11 @@ export function StateView(props: PanelProps<DebugPanelOptions>) {
   };
 
   return (
-    <Field label="State name">
+    <>
-      <Input value={context.instanceState?.name ?? ''} onChange={onChangeName} />
+      <Field label="State name">
-    </Field>
+        <Input value={context.instanceState?.name ?? ''} onChange={onChangeName} />
+      </Field>
+    </>
   );
 }