DynamicDashboards: Open edit overlay on selection if pane is collapsed (#99885)

* open edit pane on selection

* stuff

* use drawer instead for override panel options

* reverts

* closing edit pane while selection exists should also clear selection

* set width

public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx

@@ -1,4 +1,5 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
+import { Resizable } from 're-resizable';
 import { useEffect, useRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -120,13 +121,14 @@ export class DashboardEditPane extends SceneObjectBase<DashboardEditPaneState> {
 export interface Props {
   editPane: DashboardEditPane;
   isCollapsed: boolean;
+  openOverlay?: boolean;
   onToggleCollapse: () => void;
 }
 
 /**
  * Making the EditPane rendering completely standalone (not using editPane.Component) in order to pass custom react props
  */
-export function DashboardEditPaneRenderer({ editPane, isCollapsed, onToggleCollapse }: Props) {
+export function DashboardEditPaneRenderer({ editPane, isCollapsed, onToggleCollapse, openOverlay }: Props) {
   // Activate the edit pane
   useEffect(() => {
     if (!editPane.state.selection) {
@@ -143,6 +145,12 @@ export function DashboardEditPaneRenderer({ editPane, isCollapsed, onToggleColla
     };
   }, [editPane]);
 
+  useEffect(() => {
+    if (isCollapsed && editPane.state.selection?.getSelectionEntries().length) {
+      editPane.clearSelection();
+    }
+  }, [editPane, isCollapsed]);
+
   const { selection } = useSceneObjectState(editPane, { shouldActivateOrKeepAlive: true });
   const styles = useStyles2(getStyles);
   const paneRef = useRef<HTMLDivElement>(null);
@@ -154,16 +162,24 @@ export function DashboardEditPaneRenderer({ editPane, isCollapsed, onToggleColla
 
   if (isCollapsed) {
     return (
-      <div className={styles.expandOptionsWrapper}>
-        <ToolbarButton
-          tooltip={'Open options pane'}
-          icon={'arrow-to-right'}
-          onClick={onToggleCollapse}
-          variant="canvas"
-          className={styles.rotate180}
-          aria-label={'Open options pane'}
-        />
-      </div>
+      <>
+        <div className={styles.expandOptionsWrapper}>
+          <ToolbarButton
+            tooltip={'Open options pane'}
+            icon={'arrow-to-right'}
+            onClick={onToggleCollapse}
+            variant="canvas"
+            className={styles.rotate180}
+            aria-label={'Open options pane'}
+          />
+        </div>
+
+        {openOverlay && (
+          <Resizable className={cx(styles.fixed, styles.container)} defaultSize={{ height: '100%', width: '20vw' }}>
+            <ElementEditPane element={editableElement} key={editableElement.getTypeName()} />
+          </Resizable>
+        )}
+      </>
     );
   }
 
@@ -190,5 +206,18 @@ function getStyles(theme: GrafanaTheme2) {
       flexDirection: 'column',
       padding: theme.spacing(2, 1),
     }),
+    // @ts-expect-error csstype doesn't allow !important. see https://github.com/frenic/csstype/issues/114
+    fixed: css({
+      position: 'absolute !important',
+    }),
+    container: css({
+      right: 0,
+      background: theme.colors.background.primary,
+      borderLeft: `1px solid ${theme.colors.border.weak}`,
+      boxShadow: theme.shadows.z3,
+      zIndex: theme.zIndex.navbarFixed,
+      overflowX: 'hidden',
+      overflowY: 'scroll',
+    }),
   };
 }

public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx

@@ -100,6 +100,7 @@ export function DashboardEditPaneSplitter({ dashboard, isEditing, body, controls
               editPane={editPane}
               isCollapsed={splitterState.collapsed}
               onToggleCollapse={onToggleCollapse}
+              openOverlay={selectionContext.selected.length > 0}
             />
           </div>
         </>