mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
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();
|
expect(screen.getByRole('img', { name: 'right' })).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Shoud show tabs', async () => {
|
test('Should show tabs', async () => {
|
||||||
const props = createProps();
|
const props = createProps();
|
||||||
render(<DataTablesPane {...props} />, { useRedux: true });
|
render(<DataTablesPane {...props} />, { useRedux: true });
|
||||||
expect(screen.queryByText('View results')).not.toBeInTheDocument();
|
expect(screen.queryByText('View results')).not.toBeInTheDocument();
|
||||||
@ -83,7 +83,7 @@ test('Shoud show tabs', async () => {
|
|||||||
expect(screen.getByText('View samples')).toBeVisible();
|
expect(screen.getByText('View samples')).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Shoud show tabs: View results', async () => {
|
test('Should show tabs: View results', async () => {
|
||||||
const props = createProps();
|
const props = createProps();
|
||||||
render(<DataTablesPane {...props} />, {
|
render(<DataTablesPane {...props} />, {
|
||||||
useRedux: true,
|
useRedux: true,
|
||||||
@ -93,7 +93,7 @@ test('Shoud show tabs: View results', async () => {
|
|||||||
expect(screen.getByText('0 rows retrieved')).toBeVisible();
|
expect(screen.getByText('0 rows retrieved')).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Shoud show tabs: View samples', async () => {
|
test('Should show tabs: View samples', async () => {
|
||||||
const props = createProps();
|
const props = createProps();
|
||||||
render(<DataTablesPane {...props} />, {
|
render(<DataTablesPane {...props} />, {
|
||||||
useRedux: true,
|
useRedux: true,
|
||||||
|
@ -155,8 +155,28 @@ export const DataTablesPane = ({
|
|||||||
})
|
})
|
||||||
.then(({ json }) => {
|
.then(({ json }) => {
|
||||||
// Only displaying the first query is currently supported
|
// 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 => ({
|
setIsLoading(prevIsLoading => ({
|
||||||
...prevIsLoading,
|
...prevIsLoading,
|
||||||
[resultType]: false,
|
[resultType]: false,
|
||||||
|
@ -17,7 +17,7 @@
|
|||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React, { useEffect, useState } from 'react';
|
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 SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
|
||||||
import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
|
import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
|
||||||
import CopyToClipboard from 'src/components/CopyToClipboard';
|
import CopyToClipboard from 'src/components/CopyToClipboard';
|
||||||
@ -45,9 +45,13 @@ interface Props {
|
|||||||
latestQueryFormData: object;
|
latestQueryFormData: object;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type Result = {
|
||||||
|
query: string;
|
||||||
|
language: string;
|
||||||
|
};
|
||||||
|
|
||||||
const ViewQueryModal: React.FC<Props> = props => {
|
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 [isLoading, setIsLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
@ -59,10 +63,7 @@ const ViewQueryModal: React.FC<Props> = props => {
|
|||||||
resultType,
|
resultType,
|
||||||
})
|
})
|
||||||
.then(({ json }) => {
|
.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);
|
setIsLoading(false);
|
||||||
setError(null);
|
setError(null);
|
||||||
})
|
})
|
||||||
@ -88,25 +89,31 @@ const ViewQueryModal: React.FC<Props> = props => {
|
|||||||
if (error) {
|
if (error) {
|
||||||
return <pre>{error}</pre>;
|
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;
|
export default ViewQueryModal;
|
||||||
|
Loading…
Reference in New Issue
Block a user