From 2e60752258cce7f19226d31c87ba2d3cc5a73f1a Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peterholmberg@users.noreply.github.com>
Date: Wed, 18 Dec 2019 13:57:07 +0100
Subject: [PATCH] Panel: Show inspect panel in Drawer instead of Modal (#21148)

---
 .../grafana-ui/src/components/Drawer/Drawer.tsx    |  2 +-
 packages/grafana-ui/src/components/index.ts        |  1 +
 .../components/Inspector/PanelInspector.tsx        | 14 ++++----------
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
index 1616b595594..d05ab950590 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
@@ -4,7 +4,7 @@ import RcDrawer from 'rc-drawer';
 import { css } from 'emotion';
 import { stylesFactory, useTheme, selectThemeVariant } from '../../themes';
 
-interface Props {
+export interface Props {
   children: ReactNode;
   /** Title shown at the top of the drawer */
   title?: string;
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 50747bc0dd2..724b3f05023 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -110,6 +110,7 @@ export { SlideOutTransition } from './transitions/SlideOutTransition';
 export { Segment, SegmentAsync, SegmentInput, SegmentSelect } from './Segment/';
 export { default as Chart } from './Chart';
 export { Icon } from './Icon/Icon';
+export { Drawer } from './Drawer/Drawer';
 
 // Next-gen forms
 export { default as Forms } from './Forms';
diff --git a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
index 0fdfb481737..58c2c851c5c 100644
--- a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
+++ b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
-import { JSONFormatter, Modal } from '@grafana/ui';
+import { Drawer, JSONFormatter } from '@grafana/ui';
 import { css } from 'emotion';
 import { getLocationSrv } from '@grafana/runtime';
 
@@ -11,13 +11,7 @@ interface Props {
   panel: PanelModel;
 }
 
-interface State {}
-
-export class PanelInspector extends PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-  }
-
+export class PanelInspector extends PureComponent<Props> {
   onDismiss = () => {
     getLocationSrv().update({
       query: { inspect: null },
@@ -39,11 +33,11 @@ export class PanelInspector extends PureComponent<Props, State> {
     // TODO? should we get the result with an observable once?
     const data = (panel.getQueryRunner() as any).lastResult;
     return (
-      <Modal title={panel.title} icon="info-circle" onDismiss={this.onDismiss} isOpen={true}>
+      <Drawer title={panel.title} onClose={this.onDismiss}>
         <div className={bodyStyle}>
           <JSONFormatter json={data} open={2} />
         </div>
-      </Modal>
+      </Drawer>
     );
   }
 }