From 2eb24bbc4e5be68efc3bc6caf720ce078c0d1692 Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Fri, 30 Sep 2022 09:52:30 -0700
Subject: [PATCH] Canvas: Add canvas editor options to inline editor (#55970)

Co-authored-by: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com>
---
 .../app/plugins/panel/canvas/InlineEdit.tsx   |  7 ++--
 .../plugins/panel/canvas/InlineEditBody.tsx   | 15 ++++++++-
 public/app/plugins/panel/canvas/module.tsx    | 32 +++++++++++--------
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/public/app/plugins/panel/canvas/InlineEdit.tsx b/public/app/plugins/panel/canvas/InlineEdit.tsx
index 932dfc14f1b..79c8bd03fe1 100644
--- a/public/app/plugins/panel/canvas/InlineEdit.tsx
+++ b/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 defaultY = root.y + OFFSET_Y;
+  const widthOffset = root?.width ?? defaultMeasurements.width + OFFSET_X * 2;
+  const defaultX = root?.x ?? 0 + widthOffset - defaultMeasurements.width - OFFSET_X;
+  const defaultY = root?.y ?? 0 + OFFSET_Y;
 
   const savedPlacement = store.getObject(inlineEditKey, {
     x: defaultX,
diff --git a/public/app/plugins/panel/canvas/InlineEditBody.tsx b/public/app/plugins/panel/canvas/InlineEditBody.tsx
index e454c083af2..5d63a82161c 100644
--- a/public/app/plugins/panel/canvas/InlineEditBody.tsx
+++ b/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
diff --git a/public/app/plugins/panel/canvas/module.tsx b/public/app/plugins/panel/canvas/module.tsx
index 4a9c8d4f58c..318efb6321c 100644
--- a/public/app/plugins/panel/canvas/module.tsx
+++ b/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({
-      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,
-    });
+    addStandardCanvasEditorOptions(builder);
 
     if (state) {
       builder.addNestedOptions(getLayerEditor(state));