From afe72a01b9393c9999325d8b20d04a155151d2ce Mon Sep 17 00:00:00 2001
From: Cody Leff <cody@preset.io>
Date: Wed, 31 Aug 2022 15:05:15 -0700
Subject: [PATCH 1/3] Fix scrolling.

---
 .../components/ResultsPaneOnDashboard.tsx       | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
index 3f27929f5cd8b..817e327cd0f8a 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { t } from '@superset-ui/core';
+import { t, css } from '@superset-ui/core';
 import Tabs from 'src/components/Tabs';
 import { ResultTypes, ResultsPaneProps } from '../types';
 import { useResultsPane } from './useResultsPane';
@@ -43,7 +43,20 @@ export const ResultsPaneOnDashboard = ({
     isVisible,
   });
   if (resultsPanes.length === 1) {
-    return resultsPanes[0];
+    return (
+      <div
+        css={css`
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          .table-condensed {
+            overflow: auto;
+          }
+        `}
+      >
+        {resultsPanes[0]}
+      </div>
+    );
   }
 
   const panes = resultsPanes.map((pane, idx) => {

From b32f33762f206fc0229cfd869d28e8215e093ada Mon Sep 17 00:00:00 2001
From: Cody Leff <cody@preset.io>
Date: Wed, 31 Aug 2022 15:50:12 -0700
Subject: [PATCH 2/3] Updated to support multi-query panel.

---
 .../components/ResultsPaneOnDashboard.tsx     | 76 ++++++++++++-------
 1 file changed, 47 insertions(+), 29 deletions(-)

diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
index 817e327cd0f8a..4492c2c9a3b30 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
@@ -42,41 +42,59 @@ export const ResultsPaneOnDashboard = ({
     dataSize,
     isVisible,
   });
+
+  let resultsPane;
   if (resultsPanes.length === 1) {
-    return (
-      <div
-        css={css`
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          .table-condensed {
-            overflow: auto;
-          }
-        `}
-      >
-        {resultsPanes[0]}
-      </div>
-    );
-  }
+    resultsPane = resultsPanes[0];
+  } else {
+    const panes = resultsPanes.map((pane, idx) => {
+      if (idx === 0) {
+        return (
+          <Tabs.TabPane tab={t('Results')} key={ResultTypes.Results}>
+            {pane}
+          </Tabs.TabPane>
+        );
+      }
 
-  const panes = resultsPanes.map((pane, idx) => {
-    if (idx === 0) {
       return (
-        <Tabs.TabPane tab={t('Results')} key={ResultTypes.Results}>
+        <Tabs.TabPane
+          tab={t('Results %s', idx + 1)}
+          key={`${ResultTypes.Results} ${idx + 1}`}
+        >
           {pane}
         </Tabs.TabPane>
       );
-    }
+    });
 
-    return (
-      <Tabs.TabPane
-        tab={t('Results %s', idx + 1)}
-        key={`${ResultTypes.Results} ${idx + 1}`}
-      >
-        {pane}
-      </Tabs.TabPane>
-    );
-  });
+    resultsPane = <Tabs fullWidth={false}>{panes}</Tabs>;
+  }
+
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        .ant-tabs {
+          height: 100%;
+        }
+
+        .ant-tabs-content {
+          height: 100%;
+        }
+
+        .ant-tabs-tabpane {
+          display: flex;
+          flex-direction: column;
+        }
 
-  return <Tabs fullWidth={false}> {panes} </Tabs>;
+        .table-condensed {
+          overflow: auto;
+        }
+      `}
+    >
+      {resultsPane}
+    </div>
+  );
 };

From 54a059d62e41e259f384390df2ef2caa540b2ccd Mon Sep 17 00:00:00 2001
From: Cody Leff <cody@preset.io>
Date: Fri, 2 Sep 2022 16:28:18 -0700
Subject: [PATCH 3/3] Refactor styles.

---
 .../components/ResultsPaneOnDashboard.tsx     | 87 +++++++++----------
 1 file changed, 42 insertions(+), 45 deletions(-)

diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
index 4492c2c9a3b30..ade2c1519dfc4 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/ResultsPaneOnDashboard.tsx
@@ -17,11 +17,34 @@
  * under the License.
  */
 import React from 'react';
-import { t, css } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import Tabs from 'src/components/Tabs';
 import { ResultTypes, ResultsPaneProps } from '../types';
 import { useResultsPane } from './useResultsPane';
 
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .ant-tabs {
+    height: 100%;
+  }
+
+  .ant-tabs-content {
+    height: 100%;
+  }
+
+  .ant-tabs-tabpane {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .table-condensed {
+    overflow: auto;
+  }
+`;
+
 export const ResultsPaneOnDashboard = ({
   isRequest,
   queryFormData,
@@ -43,58 +66,32 @@ export const ResultsPaneOnDashboard = ({
     isVisible,
   });
 
-  let resultsPane;
   if (resultsPanes.length === 1) {
-    resultsPane = resultsPanes[0];
-  } else {
-    const panes = resultsPanes.map((pane, idx) => {
-      if (idx === 0) {
-        return (
-          <Tabs.TabPane tab={t('Results')} key={ResultTypes.Results}>
-            {pane}
-          </Tabs.TabPane>
-        );
-      }
+    return <Wrapper>{resultsPanes[0]}</Wrapper>;
+  }
 
+  const panes = resultsPanes.map((pane, idx) => {
+    if (idx === 0) {
       return (
-        <Tabs.TabPane
-          tab={t('Results %s', idx + 1)}
-          key={`${ResultTypes.Results} ${idx + 1}`}
-        >
+        <Tabs.TabPane tab={t('Results')} key={ResultTypes.Results}>
           {pane}
         </Tabs.TabPane>
       );
-    });
+    }
 
-    resultsPane = <Tabs fullWidth={false}>{panes}</Tabs>;
-  }
+    return (
+      <Tabs.TabPane
+        tab={t('Results %s', idx + 1)}
+        key={`${ResultTypes.Results} ${idx + 1}`}
+      >
+        {pane}
+      </Tabs.TabPane>
+    );
+  });
 
   return (
-    <div
-      css={css`
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-
-        .ant-tabs {
-          height: 100%;
-        }
-
-        .ant-tabs-content {
-          height: 100%;
-        }
-
-        .ant-tabs-tabpane {
-          display: flex;
-          flex-direction: column;
-        }
-
-        .table-condensed {
-          overflow: auto;
-        }
-      `}
-    >
-      {resultsPane}
-    </div>
+    <Wrapper>
+      <Tabs fullWidth={false}>{panes}</Tabs>
+    </Wrapper>
   );
 };