Skip to content

Commit

Permalink
fix(sqllab): Updated blank states for query results and query history (
Browse files Browse the repository at this point in the 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
  • Loading branch information
lyndsiWilliams authored Mar 16, 2022
1 parent 3d66912 commit bb618a4
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 7 deletions.
Original file line number Diff line number Diff line change
@@ -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 = {}) => (
<QueryHistory {...mockedProps} {...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();
});
});
22 changes: 19 additions & 3 deletions superset-frontend/src/SqlLab/components/QueryHistory/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 ? (
<QueryTable
Expand All @@ -52,7 +63,12 @@ const QueryHistory = ({ queries, actions, displayLimit }: QueryHistoryProps) =>
displayLimit={displayLimit}
/>
) : (
<Alert type="info" message={t('No query history yet...')} />
<StyledEmptyStateWrapper>
<EmptyStateMedium
title={t('Run a query to display query history')}
image="document.svg"
/>
</StyledEmptyStateWrapper>
);

export default QueryHistory;
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down Expand Up @@ -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 = {}) => (
<SouthPaneContainer store={store} {...mockedProps} {...overrides} />
);

describe('SouthPane', () => {
const getWrapper = () =>
shallow(<SouthPaneContainer store={store} {...mockedProps} />).dive();
describe('SouthPane - Enzyme', () => {
const getWrapper = () => shallow(setup()).dive();

let wrapper;

Expand All @@ -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();
});
});
19 changes: 18 additions & 1 deletion superset-frontend/src/SqlLab/components/SouthPane/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -161,7 +173,12 @@ export default function SouthPane({
}
} else {
results = (
<Alert type="info" message={t('Run a query to display results here')} />
<StyledEmptyStateWrapper>
<EmptyStateMedium
title={t('Run a query to display results')}
image="document.svg"
/>
</StyledEmptyStateWrapper>
);
}
return results;
Expand Down

0 comments on commit bb618a4

Please sign in to comment.