+
-
- {!isLoading && !chartAlert && isFaded && (
-
-
-
- )}
-
{isLoading && !isDeactivatedViz &&
}
diff --git a/superset-frontend/src/components/Chart/ChartRenderer.jsx b/superset-frontend/src/components/Chart/ChartRenderer.jsx
index b814b6fde6d36..45feb6ffd57ee 100644
--- a/superset-frontend/src/components/Chart/ChartRenderer.jsx
+++ b/superset-frontend/src/components/Chart/ChartRenderer.jsx
@@ -30,6 +30,7 @@ const propTypes = {
datasource: PropTypes.object,
initialValues: PropTypes.object,
formData: PropTypes.object.isRequired,
+ latestQueryFormData: PropTypes.object,
labelColors: PropTypes.object,
sharedLabelColors: PropTypes.object,
height: PropTypes.number,
@@ -42,7 +43,7 @@ const propTypes = {
chartStatus: PropTypes.string,
queriesResponse: PropTypes.arrayOf(PropTypes.object),
triggerQuery: PropTypes.bool,
- refreshOverlayVisible: PropTypes.bool,
+ chartIsStale: PropTypes.bool,
// dashboard callbacks
addFilter: PropTypes.func,
setDataMask: PropTypes.func,
@@ -58,6 +59,8 @@ const BLANK = {};
const BIG_NO_RESULT_MIN_WIDTH = 300;
const BIG_NO_RESULT_MIN_HEIGHT = 220;
+const behaviors = [Behavior.INTERACTIVE_CHART];
+
const defaultProps = {
addFilter: () => BLANK,
onFilterMenuOpen: () => BLANK,
@@ -93,8 +96,7 @@ class ChartRenderer extends React.Component {
const resultsReady =
nextProps.queriesResponse &&
['success', 'rendered'].indexOf(nextProps.chartStatus) > -1 &&
- !nextProps.queriesResponse?.[0]?.error &&
- !nextProps.refreshOverlayVisible;
+ !nextProps.queriesResponse?.[0]?.error;
if (resultsReady) {
this.hasQueryResponseChange =
@@ -170,16 +172,10 @@ class ChartRenderer extends React.Component {
}
render() {
- const { chartAlert, chartStatus, vizType, chartId, refreshOverlayVisible } =
- this.props;
+ const { chartAlert, chartStatus, chartId } = this.props;
// Skip chart rendering
- if (
- refreshOverlayVisible ||
- chartStatus === 'loading' ||
- !!chartAlert ||
- chartStatus === null
- ) {
+ if (chartStatus === 'loading' || !!chartAlert || chartStatus === null) {
return null;
}
@@ -193,11 +189,17 @@ class ChartRenderer extends React.Component {
initialValues,
ownState,
filterState,
+ chartIsStale,
formData,
+ latestQueryFormData,
queriesResponse,
postTransformProps,
} = this.props;
+ const currentFormData =
+ chartIsStale && latestQueryFormData ? latestQueryFormData : formData;
+ const vizType = currentFormData.viz_type || this.props.vizType;
+
// It's bad practice to use unprefixed `vizType` as classnames for chart
// container. It may cause css conflicts as in the case of legacy table chart.
// When migrating charts, we should gradually add a `superset-chart-` prefix
@@ -255,11 +257,11 @@ class ChartRenderer extends React.Component {
annotationData={annotationData}
datasource={datasource}
initialValues={initialValues}
- formData={formData}
+ formData={currentFormData}
ownState={ownState}
filterState={filterState}
hooks={this.hooks}
- behaviors={[Behavior.INTERACTIVE_CHART]}
+ behaviors={behaviors}
queriesData={queriesResponse}
onRenderSuccess={this.handleRenderSuccess}
onRenderFailure={this.handleRenderFailure}
diff --git a/superset-frontend/src/components/Chart/ChartRenderer.test.jsx b/superset-frontend/src/components/Chart/ChartRenderer.test.jsx
index 7e3a455631ff0..f3ce0415175fb 100644
--- a/superset-frontend/src/components/Chart/ChartRenderer.test.jsx
+++ b/superset-frontend/src/components/Chart/ChartRenderer.test.jsx
@@ -25,22 +25,25 @@ import ChartRenderer from 'src/components/Chart/ChartRenderer';
const requiredProps = {
chartId: 1,
datasource: {},
- formData: {},
- vizType: 'foo',
+ formData: { testControl: 'foo' },
+ latestQueryFormData: {
+ testControl: 'bar',
+ },
+ vizType: 'table',
};
describe('ChartRenderer', () => {
it('should render SuperChart', () => {
const wrapper = shallow(
-
,
+
,
);
expect(wrapper.find(SuperChart)).toExist();
});
- it('should not render SuperChart when refreshOverlayVisible is true', () => {
- const wrapper = shallow(
-
,
- );
- expect(wrapper.find(SuperChart)).not.toExist();
+ it('should use latestQueryFormData instead of formData when chartIsStale is true', () => {
+ const wrapper = shallow(
);
+ expect(wrapper.find(SuperChart).prop('formData')).toEqual({
+ testControl: 'bar',
+ });
});
});
diff --git a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
index 2387c2e2517fe..272249b549600 100644
--- a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
@@ -21,11 +21,12 @@ import React from 'react';
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import { SupersetClient } from '@superset-ui/core';
import userEvent from '@testing-library/user-event';
-import DatabaseSelector from '.';
+import DatabaseSelector, { DatabaseSelectorProps } from '.';
+import { EmptyStateSmall } from '../EmptyState';
const SupersetClientGet = jest.spyOn(SupersetClient, 'get');
-const createProps = () => ({
+const createProps = (): DatabaseSelectorProps => ({
db: {
id: 1,
database_name: 'test',
@@ -38,12 +39,10 @@ const createProps = () => ({
schema: undefined,
sqlLabMode: true,
getDbList: jest.fn(),
- getTableList: jest.fn(),
handleError: jest.fn(),
onDbChange: jest.fn(),
onSchemaChange: jest.fn(),
onSchemasLoad: jest.fn(),
- onUpdate: jest.fn(),
});
beforeEach(() => {
@@ -191,12 +190,10 @@ test('Refresh should work', async () => {
await waitFor(() => {
expect(SupersetClientGet).toBeCalledTimes(2);
expect(props.getDbList).toBeCalledTimes(0);
- expect(props.getTableList).toBeCalledTimes(0);
expect(props.handleError).toBeCalledTimes(0);
expect(props.onDbChange).toBeCalledTimes(0);
expect(props.onSchemaChange).toBeCalledTimes(0);
expect(props.onSchemasLoad).toBeCalledTimes(0);
- expect(props.onUpdate).toBeCalledTimes(0);
});
userEvent.click(screen.getByRole('button', { name: 'refresh' }));
@@ -204,12 +201,10 @@ test('Refresh should work', async () => {
await waitFor(() => {
expect(SupersetClientGet).toBeCalledTimes(3);
expect(props.getDbList).toBeCalledTimes(1);
- expect(props.getTableList).toBeCalledTimes(0);
expect(props.handleError).toBeCalledTimes(0);
expect(props.onDbChange).toBeCalledTimes(0);
expect(props.onSchemaChange).toBeCalledTimes(0);
expect(props.onSchemasLoad).toBeCalledTimes(2);
- expect(props.onUpdate).toBeCalledTimes(0);
});
});
@@ -224,6 +219,28 @@ test('Should database select display options', async () => {
expect(await screen.findByText('test-mysql')).toBeInTheDocument();
});
+test('should show empty state if there are no options', async () => {
+ SupersetClientGet.mockImplementation(
+ async () => ({ json: { result: [] } } as any),
+ );
+ const props = createProps();
+ render(
+
}
+ />,
+ { useRedux: true },
+ );
+ const select = screen.getByRole('combobox', {
+ name: 'Select database or type database name',
+ });
+ userEvent.click(select);
+ const emptystate = await screen.findByText('empty');
+ expect(emptystate).toBeInTheDocument();
+ expect(screen.queryByText('test-mysql')).not.toBeInTheDocument();
+});
+
test('Should schema select display options', async () => {
const props = createProps();
render(
, { useRedux: true });
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index 531a7a9e7194c..718177a13956f 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -86,13 +86,15 @@ export type DatabaseObject = {
type SchemaValue = { label: string; value: string };
-interface DatabaseSelectorProps {
+export interface DatabaseSelectorProps {
db?: DatabaseObject;
+ emptyState?: ReactNode;
formMode?: boolean;
getDbList?: (arg0: any) => {};
handleError: (msg: string) => void;
isDatabaseSelectEnabled?: boolean;
onDbChange?: (db: DatabaseObject) => void;
+ onEmptyResults?: (searchText?: string) => void;
onSchemaChange?: (schema?: string) => void;
onSchemasLoad?: (schemas: Array
