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
This commit is contained in:
Kamil Gabryjelski
2021-07-23 17:04:22 +02:00
committed by GitHub
parent 9c854ff1f1
commit d408ff8466
3 changed files with 58 additions and 31 deletions

View File

@@ -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;