From b742e809308eae277085d6f8cd0bc5ad5231a6ac Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Tue, 19 Jul 2022 12:37:37 -0500
Subject: [PATCH] Tree navigation in inline editor (#52427)

---
 .../app/plugins/panel/canvas/InlineEdit.tsx   |  1 +
 .../plugins/panel/canvas/InlineEditBody.tsx   | 22 ++++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/panel/canvas/InlineEdit.tsx b/public/app/plugins/panel/canvas/InlineEdit.tsx
index 1d16d230882..85c7a9ac0f6 100644
--- a/public/app/plugins/panel/canvas/InlineEdit.tsx
+++ b/public/app/plugins/panel/canvas/InlineEdit.tsx
@@ -103,6 +103,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: flex;
     flex-direction: column;
     background: ${theme.v1.colors.panelBg};
+    border: 1px solid ${theme.colors.border.strong};
     box-shadow: 5px 5px 20px -5px #000000;
     z-index: 1000;
     opacity: 1;
diff --git a/public/app/plugins/panel/canvas/InlineEditBody.tsx b/public/app/plugins/panel/canvas/InlineEditBody.tsx
index 68b5754ef23..66fe736a58d 100644
--- a/public/app/plugins/panel/canvas/InlineEditBody.tsx
+++ b/public/app/plugins/panel/canvas/InlineEditBody.tsx
@@ -1,10 +1,12 @@
+import { css } from '@emotion/css';
 import { get as lodashGet } from 'lodash';
 import React, { useMemo } from 'react';
 import { useObservable } from 'react-use';
 
-import { PanelOptionsEditorBuilder, StandardEditorContext } from '@grafana/data';
+import { GrafanaTheme2, PanelOptionsEditorBuilder, StandardEditorContext } from '@grafana/data';
 import { PanelOptionsSupplier } from '@grafana/data/src/panel/PanelPlugin';
 import { NestedValueAccess } from '@grafana/data/src/utils/OptionsUIBuilders';
+import { useStyles2 } from '@grafana/ui';
 import { FrameState } from 'app/features/canvas/runtime/frame';
 import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor';
 import { fillOptionsPaneItems } from 'app/features/dashboard/components/PanelEditor/getVisualizationOptions';
@@ -13,11 +15,14 @@ import { setOptionImmutably } from 'app/features/dashboard/components/PanelEdito
 import { activePanelSubject, InstanceState } from './CanvasPanel';
 import { getElementEditor } from './editor/elementEditor';
 import { getLayerEditor } from './editor/layerEditor';
+import { getTreeViewEditor } from './editor/treeViewEditor';
 
 export const InlineEditBody = () => {
   const activePanel = useObservable(activePanelSubject);
   const instanceState = activePanel?.panel.context?.instanceState;
 
+  const styles = useStyles2(getStyles);
+
   const pane = useMemo(() => {
     const state: InstanceState = instanceState;
     if (!state) {
@@ -25,6 +30,7 @@ export const InlineEditBody = () => {
     }
 
     const supplier = (builder: PanelOptionsEditorBuilder<any>, context: StandardEditorContext<any>) => {
+      builder.addNestedOptions(getTreeViewEditor(state));
       builder.addNestedOptions(getLayerEditor(instanceState));
 
       const selection = state.selected;
@@ -51,9 +57,9 @@ export const InlineEditBody = () => {
       <div>
         {pane.categories.map((c) => {
           return (
-            <div key={c.props.id}>
+            <div key={c.props.id} className={styles.wrap}>
               <h5>{c.props.title}</h5>
-              <div>{c.items.map((s) => s.render())}</div>
+              <div className={styles.item}>{c.items.map((s) => s.render())}</div>
             </div>
           );
         })}
@@ -97,3 +103,13 @@ function getOptionsPaneCategoryDescriptor<T = any>(
   fillOptionsPaneItems(supplier, access, getOptionsPaneCategory, context);
   return root;
 }
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  wrap: css`
+    border-top: 1px solid ${theme.colors.border.strong};
+    padding: 10px;
+  `,
+  item: css`
+    padding-left: 10px;
+  `,
+});