mirror of https://github.com/apache/superset.git
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:
parent
9c854ff1f1
commit
d408ff8466
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue