From 43172be747d9a8d080a11ff8f268bd68694d6f99 Mon Sep 17 00:00:00 2001
From: abbyhu2000 <abigailhu2000@gmail.com>
Date: Thu, 6 Jul 2023 07:13:54 +0000
Subject: [PATCH] revert back to grid, reference too much of issue without
 hooks

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>
---
 .../components/dashboard_editor.tsx           |  9 ---
 .../embeddable/grid/dashboard_grid.tsx        | 41 ++++++++-----
 .../embeddable/grid/dashboard_grid_item.tsx   | 58 -------------------
 3 files changed, 28 insertions(+), 80 deletions(-)
 delete mode 100644 src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid_item.tsx

diff --git a/src/plugins/dashboard/public/application/components/dashboard_editor.tsx b/src/plugins/dashboard/public/application/components/dashboard_editor.tsx
index d2b480e50fc7..075d8b99a0e1 100644
--- a/src/plugins/dashboard/public/application/components/dashboard_editor.tsx
+++ b/src/plugins/dashboard/public/application/components/dashboard_editor.tsx
@@ -39,15 +39,6 @@ export const DashboardEditor = () => {
     dashboard
   );
 
-  // const { dashboardContainer } = useDashboardContainer(
-  //   services,
-  //   isChromeVisible,
-  //   eventEmitter,
-  //   dashboard,
-  //   savedDashboardInstance,
-  //   appState
-  // );
-
   const { isEmbeddableRendered, currentAppState } = useEditorUpdates(
     eventEmitter,
     dashboard,
diff --git a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx b/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx
index 84196aefcc45..98c1d163a16f 100644
--- a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx
@@ -47,7 +47,6 @@ import { DashboardPanelState } from '../types';
 import { withOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { DashboardContainerInput } from '../dashboard_container';
 import { DashboardContainer, DashboardReactContextValue } from '../dashboard_container';
-import { DashboardGridItem } from './dashboard_grid_item';
 
 let lastValidGridSize = 0;
 
@@ -263,18 +262,34 @@ class DashboardGridUi extends React.Component<DashboardGridProps, State> {
       }
     });
 
-    return _.map(panelsInOrder, ({ explicitInput, type }) => (
-      <DashboardGridItem
-        expandedPanelId={expandedPanelId}
-        focusedPanelIndex={focusedPanelIndex}
-        id={explicitInput.id}
-        key={explicitInput.id}
-        type={type}
-        gridItems={this.gridItems}
-        container={this.props.container}
-        PanelComponent={this.props.PanelComponent}
-      />
-    ));
+    return _.map(panelsInOrder, (panel) => {
+      const expandPanel =
+        expandedPanelId !== undefined && expandedPanelId === panel.explicitInput.id;
+      const hidePanel = expandedPanelId !== undefined && expandedPanelId !== panel.explicitInput.id;
+      const classes = classNames({
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'dshDashboardGrid__item--expanded': expandPanel,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'dshDashboardGrid__item--hidden': hidePanel,
+      });
+      return (
+        <div
+          style={{ zIndex: focusedPanelIndex === panel.explicitInput.id ? 2 : 'auto' }}
+          className={classes}
+          key={panel.explicitInput.id}
+          data-test-subj="dashboardPanel"
+          ref={(reactGridItem) => {
+            this.gridItems[panel.explicitInput.id] = reactGridItem;
+          }}
+        >
+          <EmbeddableChildPanel
+            embeddableId={panel.explicitInput.id}
+            container={this.props.container}
+            PanelComponent={this.props.PanelComponent}
+          />
+        </div>
+      );
+    });
   }
 
   public render() {
diff --git a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid_item.tsx b/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid_item.tsx
deleted file mode 100644
index 9ef467e9cc9f..000000000000
--- a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid_item.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * SPDX-License-Identifier: Apache-2.0
- *
- * The OpenSearch Contributors require contributions made to
- * this file be licensed under the Apache-2.0 license or a
- * compatible open source license.
- *
- * Any modifications Copyright OpenSearch Contributors. See
- * GitHub history for details.
- */
-
-import { FC } from 'react';
-import classNames from 'classnames';
-import React from 'react';
-import { EmbeddableChildPanel } from '../../../embeddable_plugin';
-
-export const DashboardGridItem: FC<any> = (props: any) => {
-  const {
-    expandedPanelId,
-    focusedPanelIndex,
-    id,
-    type,
-    style,
-    gridItems,
-    container,
-    PanelComponent,
-    children,
-    className,
-  } = props;
-  const expandPanel = expandedPanelId !== undefined && expandedPanelId === id;
-  const hidePanel = expandedPanelId !== undefined && expandedPanelId !== id;
-  const classes = classNames({
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    'dshDashboardGrid__item--expanded': expandPanel,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    'dshDashboardGrid__item--hidden': hidePanel,
-  });
-  const panelClassName = [classes, className].join(' ');
-  return (
-    <div
-      style={{ ...style, zIndex: focusedPanelIndex === id ? 2 : 'auto' }}
-      className={panelClassName}
-      key={type}
-      data-test-subj="dashboardPanel"
-      id={`panel-${id}`}
-      ref={(reactGridItem) => {
-        gridItems[id] = reactGridItem;
-      }}
-    >
-      <EmbeddableChildPanel
-        embeddableId={id}
-        container={container}
-        PanelComponent={PanelComponent}
-      />
-      {children}
-    </div>
-  );
-};