From d408ff8466b11c12de6cae69e7ca872c50cf5506 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Fri, 23 Jul 2021 17:04:22 +0200
Subject: [PATCH] fix(explore): show multi queries results in View query modal
 and data pane (#15840)

* fix(explore): show multiple queries in View query modal

* show multiple queries result in data pane

* fix tests

* lint fix
---
 .../DataTablesPane/DataTablesPane.test.tsx    |  6 +-
 .../components/DataTablesPane/index.tsx       | 24 +++++++-
 .../components/controls/ViewQueryModal.tsx    | 59 +++++++++++--------
 3 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.test.tsx b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.test.tsx
index 1199deeccc..7df51908ad 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.test.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.test.tsx
@@ -73,7 +73,7 @@ test('Rendering DataTablesPane correctly', () => {
   expect(screen.getByRole('img', { name: 'right' })).toBeVisible();
 });
 
-test('Shoud show tabs', async () => {
+test('Should show tabs', async () => {
   const props = createProps();
   render(<DataTablesPane {...props} />, { useRedux: true });
   expect(screen.queryByText('View results')).not.toBeInTheDocument();
@@ -83,7 +83,7 @@ test('Shoud show tabs', async () => {
   expect(screen.getByText('View samples')).toBeVisible();
 });
 
-test('Shoud show tabs: View results', async () => {
+test('Should show tabs: View results', async () => {
   const props = createProps();
   render(<DataTablesPane {...props} />, {
     useRedux: true,
@@ -93,7 +93,7 @@ test('Shoud show tabs: View results', async () => {
   expect(screen.getByText('0 rows retrieved')).toBeVisible();
 });
 
-test('Shoud show tabs: View samples', async () => {
+test('Should show tabs: View samples', async () => {
   const props = createProps();
   render(<DataTablesPane {...props} />, {
     useRedux: true,
diff --git a/superset-frontend/src/explore/components/DataTablesPane/index.tsx b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
index 4e122b0e1b..3d83089811 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/index.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
@@ -155,8 +155,28 @@ export const DataTablesPane = ({
       })
         .then(({ json }) => {
           // Only displaying the first query is currently supported
-          const result = json.result[0];
-          setData(prevData => ({ ...prevData, [resultType]: result.data }));
+          if (json.result.length > 1) {
+            const data: any[] = [];
+            json.result.forEach((item: { data: any[] }) => {
+              item.data.forEach((row, i) => {
+                if (data[i] !== undefined) {
+                  data[i] = { ...data[i], ...row };
+                } else {
+                  data[i] = row;
+                }
+              });
+            });
+            setData(prevData => ({
+              ...prevData,
+              [resultType]: data,
+            }));
+          } else {
+            setData(prevData => ({
+              ...prevData,
+              [resultType]: json.result[0].data,
+            }));
+          }
+
           setIsLoading(prevIsLoading => ({
             ...prevIsLoading,
             [resultType]: false,
diff --git a/superset-frontend/src/explore/components/controls/ViewQueryModal.tsx b/superset-frontend/src/explore/components/controls/ViewQueryModal.tsx
index 70308ed961..88391bf995 100644
--- a/superset-frontend/src/explore/components/controls/ViewQueryModal.tsx
+++ b/superset-frontend/src/explore/components/controls/ViewQueryModal.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { useEffect, useState } from 'react';
-import { styled, t } from '@superset-ui/core';
+import { ensureIsArray, styled, t } from '@superset-ui/core';
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
 import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
 import CopyToClipboard from 'src/components/CopyToClipboard';
@@ -45,9 +45,13 @@ interface Props {
   latestQueryFormData: object;
 }
 
+type Result = {
+  query: string;
+  language: string;
+};
+
 const ViewQueryModal: React.FC<Props> = props => {
-  const [language, setLanguage] = useState(null);
-  const [query, setQuery] = useState(null);
+  const [result, setResult] = useState<Result[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -59,10 +63,7 @@ const ViewQueryModal: React.FC<Props> = props => {
       resultType,
     })
       .then(({ json }) => {
-        // Only displaying the first query is currently supported
-        const result = json.result[0];
-        setLanguage(result.language);
-        setQuery(result.query);
+        setResult(ensureIsArray(json.result));
         setIsLoading(false);
         setError(null);
       })
@@ -88,25 +89,31 @@ const ViewQueryModal: React.FC<Props> = props => {
   if (error) {
     return <pre>{error}</pre>;
   }
-  if (query) {
-    return (
-      <div>
-        <CopyToClipboard
-          text={query}
-          shouldShowText={false}
-          copyNode={
-            <CopyButtonViewQuery buttonSize="xsmall">
-              <i className="fa fa-clipboard" />
-            </CopyButtonViewQuery>
-          }
-        />
-        <SyntaxHighlighter language={language || undefined} style={github}>
-          {query}
-        </SyntaxHighlighter>
-      </div>
-    );
-  }
-  return null;
+  return (
+    <>
+      {result.map(item =>
+        item.query ? (
+          <div>
+            <CopyToClipboard
+              text={item.query}
+              shouldShowText={false}
+              copyNode={
+                <CopyButtonViewQuery buttonSize="xsmall">
+                  <i className="fa fa-clipboard" />
+                </CopyButtonViewQuery>
+              }
+            />
+            <SyntaxHighlighter
+              language={item.language || undefined}
+              style={github}
+            >
+              {item.query}
+            </SyntaxHighlighter>
+          </div>
+        ) : null,
+      )}
+    </>
+  );
 };
 
 export default ViewQueryModal;