Canvas: Add canvas editor options to inline editor (#55970)

Co-authored-by: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com>

public/app/plugins/panel/canvas/InlineEdit.tsx

@@ -20,7 +20,7 @@ const OFFSET_X = 10;
 const OFFSET_Y = 32;
 
 export function InlineEdit({ onClose, id, scene }: Props) {
-  const root = scene.root.div!.getBoundingClientRect();
+  const root = scene.root.div?.getBoundingClientRect();
   const windowHeight = window.innerHeight;
   const windowWidth = window.innerWidth;
   const ref = useRef<HTMLDivElement>(null);
@@ -28,8 +28,9 @@ export function InlineEdit({ onClose, id, scene }: Props) {
   const inlineEditKey = 'inlineEditPanel' + id.toString();
 
   const defaultMeasurements = { width: 350, height: 400 };
-  const defaultX = root.x + root.width - defaultMeasurements.width - OFFSET_X;
+  const widthOffset = root?.width ?? defaultMeasurements.width + OFFSET_X * 2;
-  const defaultY = root.y + OFFSET_Y;
+  const defaultX = root?.x ?? 0 + widthOffset - defaultMeasurements.width - OFFSET_X;
+  const defaultY = root?.y ?? 0 + OFFSET_Y;
 
   const savedPlacement = store.getObject(inlineEditKey, {
     x: defaultX,

public/app/plugins/panel/canvas/InlineEditBody.tsx

@@ -14,6 +14,7 @@ import { setOptionImmutably } from 'app/features/dashboard/components/PanelEdito
 import { activePanelSubject, InstanceState } from './CanvasPanel';
 import { getElementEditor } from './editor/elementEditor';
 import { getLayerEditor } from './editor/layerEditor';
+import { addStandardCanvasEditorOptions } from './module';
 
 export function InlineEditBody() {
   const activePanel = useObservable(activePanelSubject);
@@ -41,6 +42,8 @@ export function InlineEditBody() {
           );
         }
       }
+
+      addStandardCanvasEditorOptions(builder);
     };
 
     return getOptionsPaneCategoryDescriptor(
@@ -53,7 +56,17 @@ export function InlineEditBody() {
     );
   }, [instanceState, activePanel]);
 
-  return <>{pane.categories.map((p) => renderOptionsPaneCategoryDescriptor(p))}</>;
+  const topLevelItemsContainerStyle = {
+    marginLeft: 15,
+    marginTop: 10,
+  };
+
+  return (
+    <>
+      {pane.categories.map((p) => renderOptionsPaneCategoryDescriptor(p))}
+      <div style={topLevelItemsContainerStyle}>{pane.items.map((item) => item.render())}</div>
+    </>
+  );
 }
 
 // Recursively render options

public/app/plugins/panel/canvas/module.tsx

@@ -1,4 +1,4 @@
-import { PanelPlugin } from '@grafana/data';
+import { PanelOptionsEditorBuilder, PanelPlugin } from '@grafana/data';
 import { FrameState } from 'app/features/canvas/runtime/frame';
 
 import { CanvasPanel, InstanceState } from './CanvasPanel';
@@ -6,25 +6,29 @@ import { getElementEditor } from './editor/elementEditor';
 import { getLayerEditor } from './editor/layerEditor';
 import { PanelOptions } from './models.gen';
 
+export const addStandardCanvasEditorOptions = (builder: PanelOptionsEditorBuilder<PanelOptions>) => {
+  builder.addBooleanSwitch({
+    path: 'inlineEditing',
+    name: 'Inline editing',
+    description: 'Enable editing the panel directly',
+    defaultValue: true,
+  });
+
+  builder.addBooleanSwitch({
+    path: 'showAdvancedTypes',
+    name: 'Show advanced element types',
+    description: '',
+    defaultValue: false,
+  });
+};
+
 export const plugin = new PanelPlugin<PanelOptions>(CanvasPanel)
   .setNoPadding() // extend to panel edges
   .useFieldConfig()
   .setPanelOptions((builder, context) => {
     const state: InstanceState = context.instanceState;
 
-    builder.addBooleanSwitch({
+    addStandardCanvasEditorOptions(builder);
-      path: 'inlineEditing',
-      name: 'Inline editing',
-      description: 'Enable editing the panel directly',
-      defaultValue: true,
-    });
-
-    builder.addBooleanSwitch({
-      path: 'showAdvancedTypes',
-      name: 'Show advanced element types',
-      description: '',
-      defaultValue: false,
-    });
 
     if (state) {
       builder.addNestedOptions(getLayerEditor(state));