From 112e44181e8176b3e82d44c1ae0c4eff03b5674a Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Tue, 9 Nov 2021 09:47:01 +0200
Subject: [PATCH] Separate SoloPanel rendering logic (#41408)

---
 .../dashboard/containers/SoloPanelPage.tsx    | 79 +++++++++++--------
 1 file changed, 46 insertions(+), 33 deletions(-)

diff --git a/public/app/features/dashboard/containers/SoloPanelPage.tsx b/public/app/features/dashboard/containers/SoloPanelPage.tsx
index 315808283bd..7591fe88e2b 100644
--- a/public/app/features/dashboard/containers/SoloPanelPage.tsx
+++ b/public/app/features/dashboard/containers/SoloPanelPage.tsx
@@ -4,7 +4,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { DashboardPanel } from '../dashgrid/DashboardPanel';
 import { initDashboard } from '../state/initDashboard';
 import { StoreState } from 'app/types';
-import { PanelModel } from 'app/features/dashboard/state';
+import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 
 export interface DashboardPageRouteParams {
@@ -74,41 +74,54 @@ export class SoloPanelPage extends Component<Props, State> {
   }
 
   render() {
-    const { dashboard } = this.props;
-    const { notFound, panel } = this.state;
-
-    if (notFound) {
-      return <div className="alert alert-error">Panel with id {this.getPanelId()} not found</div>;
-    }
-
-    if (!panel || !dashboard) {
-      return <div>Loading & initializing dashboard</div>;
-    }
-
     return (
-      <div className="panel-solo">
-        <AutoSizer>
-          {({ width, height }) => {
-            if (width === 0) {
-              return null;
-            }
-            return (
-              <DashboardPanel
-                stateKey={panel.key}
-                width={width}
-                height={height}
-                dashboard={dashboard}
-                panel={panel}
-                isEditing={false}
-                isViewing={false}
-                isInView={true}
-              />
-            );
-          }}
-        </AutoSizer>
-      </div>
+      <SoloPanel
+        dashboard={this.props.dashboard}
+        notFound={this.state.notFound}
+        panel={this.state.panel}
+        panelId={this.getPanelId()}
+      />
     );
   }
 }
 
+export interface SoloPanelProps extends State {
+  dashboard: DashboardModel | null;
+  panelId: number;
+}
+
+export const SoloPanel = ({ dashboard, notFound, panel, panelId }: SoloPanelProps) => {
+  if (notFound) {
+    return <div className="alert alert-error">Panel with id {panelId} not found</div>;
+  }
+
+  if (!panel || !dashboard) {
+    return <div>Loading & initializing dashboard</div>;
+  }
+
+  return (
+    <div className="panel-solo">
+      <AutoSizer>
+        {({ width, height }) => {
+          if (width === 0) {
+            return null;
+          }
+          return (
+            <DashboardPanel
+              stateKey={panel.key}
+              width={width}
+              height={height}
+              dashboard={dashboard}
+              panel={panel}
+              isEditing={false}
+              isViewing={false}
+              isInView={true}
+            />
+          );
+        }}
+      </AutoSizer>
+    </div>
+  );
+};
+
 export default connector(SoloPanelPage);