From bb618a47ff1e1747cf66bffa8bceee133a5c9064 Mon Sep 17 00:00:00 2001
From: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
Date: Wed, 16 Mar 2022 14:09:19 -0500
Subject: [PATCH] fix(sqllab): Updated blank states for query results and query
history (#19111)
* Empty states updated on result tab and query history tab
* Testing on query history blank state
* Testing on result tab with empty state
* Forgot to remove a comment
* Corrected empty state image size and centered with drag bar
* Centered blank states vertically
---
.../QueryHistory/QueryHistory.test.tsx | 50 +++++++++++++++++++
.../SqlLab/components/QueryHistory/index.tsx | 22 ++++++--
.../components/SouthPane/SouthPane.test.jsx | 50 +++++++++++++++++--
.../src/SqlLab/components/SouthPane/index.tsx | 19 ++++++-
4 files changed, 134 insertions(+), 7 deletions(-)
create mode 100644 superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx
diff --git a/superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx b/superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx
new file mode 100644
index 0000000000..782b147839
--- /dev/null
+++ b/superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx
@@ -0,0 +1,50 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import QueryHistory from 'src/SqlLab/components/QueryHistory';
+
+const NOOP = () => {};
+const mockedProps = {
+ queries: [],
+ actions: {
+ queryEditorSetSql: NOOP,
+ cloneQueryToNewTab: NOOP,
+ fetchQueryResults: NOOP,
+ clearQueryResults: NOOP,
+ removeQuery: NOOP,
+ },
+ displayLimit: 1000,
+};
+
+const setup = (overrides = {}) => (
+
+);
+
+describe('QueryHistory', () => {
+ it('Renders an empty state for query history', () => {
+ render(setup());
+
+ const emptyStateText = screen.getByText(
+ /run a query to display query history/i,
+ );
+
+ expect(emptyStateText).toBeVisible();
+ });
+});
diff --git a/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx b/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx
index e2d0453bb2..7cf9d6ba65 100644
--- a/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx
+++ b/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx
@@ -17,8 +17,8 @@
* under the License.
*/
import React from 'react';
-import Alert from 'src/components/Alert';
-import { t } from '@superset-ui/core';
+import { EmptyStateMedium } from 'src/components/EmptyState';
+import { t, styled } from '@superset-ui/core';
import { Query } from 'src/SqlLab/types';
import QueryTable from 'src/SqlLab/components/QueryTable';
@@ -34,6 +34,17 @@ interface QueryHistoryProps {
displayLimit: number;
}
+const StyledEmptyStateWrapper = styled.div`
+ height: 100%;
+ .ant-empty-image img {
+ margin-right: 28px;
+ }
+
+ p {
+ margin-right: 28px;
+ }
+`;
+
const QueryHistory = ({ queries, actions, displayLimit }: QueryHistoryProps) =>
queries.length > 0 ? (
displayLimit={displayLimit}
/>
) : (
-
+
+
+
);
export default QueryHistory;
diff --git a/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx b/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx
index dbf81cfcf2..1786a6cf31 100644
--- a/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx
+++ b/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx
@@ -20,11 +20,15 @@ import React from 'react';
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { styledShallow as shallow } from 'spec/helpers/theming';
+import { render, screen, act } from 'spec/helpers/testing-library';
import SouthPaneContainer from 'src/SqlLab/components/SouthPane/state';
import ResultSet from 'src/SqlLab/components/ResultSet';
import '@testing-library/jest-dom/extend-expect';
import { STATUS_OPTIONS } from 'src/SqlLab/constants';
import { initialState } from 'src/SqlLab/fixtures';
+import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
+
+const NOOP = () => {};
const mockedProps = {
editorQueries: [
@@ -71,13 +75,36 @@ const mockedProps = {
offline: false,
};
+const mockedEmptyProps = {
+ editorQueries: [],
+ latestQueryId: '',
+ dataPreviewQueries: [],
+ actions: {
+ queryEditorSetSql: NOOP,
+ cloneQueryToNewTab: NOOP,
+ fetchQueryResults: NOOP,
+ clearQueryResults: NOOP,
+ removeQuery: NOOP,
+ setActiveSouthPaneTab: NOOP,
+ },
+ activeSouthPaneTab: '',
+ height: 100,
+ databases: '',
+ offline: false,
+ displayLimit: 100,
+ user: UserWithPermissionsAndRoles,
+ defaultQueryLimit: 100,
+};
+
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
const store = mockStore(initialState);
+const setup = (overrides = {}) => (
+
+);
-describe('SouthPane', () => {
- const getWrapper = () =>
- shallow().dive();
+describe('SouthPane - Enzyme', () => {
+ const getWrapper = () => shallow(setup()).dive();
let wrapper;
@@ -95,3 +122,20 @@ describe('SouthPane', () => {
);
});
});
+
+describe('SouthPane - RTL', () => {
+ const renderAndWait = overrides => {
+ const mounted = act(async () => {
+ render(setup(overrides));
+ });
+
+ return mounted;
+ };
+ it('Renders an empty state for results', async () => {
+ await renderAndWait(mockedEmptyProps);
+
+ const emptyStateText = screen.getByText(/run a query to display results/i);
+
+ expect(emptyStateText).toBeVisible();
+ });
+});
diff --git a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
index f7efc04f34..3fb0f9c526 100644
--- a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
@@ -20,6 +20,7 @@ import React, { createRef } from 'react';
import shortid from 'shortid';
import Alert from 'src/components/Alert';
import Tabs from 'src/components/Tabs';
+import { EmptyStateMedium } from 'src/components/EmptyState';
import { t, styled } from '@superset-ui/core';
import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
@@ -93,6 +94,17 @@ const StyledPane = styled.div`
}
`;
+const StyledEmptyStateWrapper = styled.div`
+ height: 100%;
+ .ant-empty-image img {
+ margin-right: 28px;
+ }
+
+ p {
+ margin-right: 28px;
+ }
+`;
+
export default function SouthPane({
editorQueries,
latestQueryId,
@@ -161,7 +173,12 @@ export default function SouthPane({
}
} else {
results = (
-
+
+
+
);
}
return results;