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

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,

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];
+          if (json.result.length > 1) {
-          setData(prevData => ({ ...prevData, [resultType]: result.data }));
+            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,

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 [result, setResult] = useState<Result[]>([]);
-  const [query, setQuery] = useState(null);
   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
+        setResult(ensureIsArray(json.result));
-        const result = json.result[0];
-        setLanguage(result.language);
-        setQuery(result.query);
         setIsLoading(false);
         setError(null);
       })
@@ -88,25 +89,31 @@ const ViewQueryModal: React.FC<Props> = props => {
   if (error) {
     return <pre>{error}</pre>;
   }
-  if (query) {
+  return (
-    return (
+    <>
-      <div>
+      {result.map(item =>
-        <CopyToClipboard
+        item.query ? (
-          text={query}
+          <div>
-          shouldShowText={false}
+            <CopyToClipboard
-          copyNode={
+              text={item.query}
-            <CopyButtonViewQuery buttonSize="xsmall">
+              shouldShowText={false}
-              <i className="fa fa-clipboard" />
+              copyNode={
-            </CopyButtonViewQuery>
+                <CopyButtonViewQuery buttonSize="xsmall">
-          }
+                  <i className="fa fa-clipboard" />
-        />
+                </CopyButtonViewQuery>
-        <SyntaxHighlighter language={language || undefined} style={github}>
+              }
-          {query}
+            />
-        </SyntaxHighlighter>
+            <SyntaxHighlighter
-      </div>
+              language={item.language || undefined}
-    );
+              style={github}
-  }
+            >
-  return null;
+              {item.query}
+            </SyntaxHighlighter>
+          </div>
+        ) : null,
+      )}
+    </>
+  );
 };
 
 export default ViewQueryModal;