This is an automated email from the ASF dual-hosted git repository. lyndsi pushed a commit to branch lyndsi/create-dataset-blank-state in repository https://gitbox.apache.org/repos/asf/superset.git
commit fca627bc31e57a26de9bd9844058bc1267236465 Author: lyndsiWilliams <[email protected]> AuthorDate: Fri Jul 29 16:19:30 2022 -0500 Dataset layout setup --- .../components/ExploreChartHeader/index.jsx | 4 +- .../views/CRUD/data/dataset/DatasetLayout.test.tsx | 70 ++++++++++++++++ .../src/views/CRUD/data/dataset/DatasetLayout.tsx | 63 ++++++++++++++ .../index.tsx => DatasetPage.test.tsx} | 25 +++++- .../DatasetPage/DatasetPanel/DatasetPanel.test.tsx | 41 +++++++++ .../dataset/DatasetPage/DatasetPanel/index.tsx | 22 ++++- .../index.tsx => Footer/Footer.test.tsx} | 12 ++- .../index.tsx => Header/Header.test.tsx} | 12 ++- .../index.tsx => LeftPanel/LeftPanel.test.tsx} | 14 +++- .../data/dataset/DatasetPage/LeftPanel/index.tsx | 12 ++- .../index.tsx => RightPanel/RightPanel.test.tsx} | 12 ++- .../views/CRUD/data/dataset/DatasetPage/index.tsx | 96 +++++++++++++++++++--- .../src/views/CRUD/data/dataset/styles.ts | 62 ++++++++++++++ 13 files changed, 415 insertions(+), 30 deletions(-) diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx index fb85882f02..9e1b27b24d 100644 --- a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx +++ b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx @@ -119,9 +119,7 @@ export const ExploreChartHeader = ({ }; useEffect(() => { - if (dashboardId) { - fetchChartDashboardData(); - } + if (dashboardId) fetchChartDashboardData(); }, []); const openPropertiesModal = () => { diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout.test.tsx new file mode 100644 index 0000000000..6e515e73d5 --- /dev/null +++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout.test.tsx @@ -0,0 +1,70 @@ +/** + * 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 DatasetLayout from 'src/views/CRUD/data/dataset/DatasetLayout'; +import Header from 'src/views/CRUD/data/dataset/DatasetPage/Header'; +import LeftPanel from 'src/views/CRUD/data/dataset/DatasetPage/LeftPanel'; +import DatasetPanel from 'src/views/CRUD/data/dataset/DatasetPage/DatasetPanel'; +import RightPanel from 'src/views/CRUD/data/dataset/DatasetPage/RightPanel'; +import Footer from 'src/views/CRUD/data/dataset/DatasetPage/Footer'; + +describe('DatasetLayout', () => { + it('renders nothing when no components are passed in', () => { + render(<DatasetLayout />); + const layoutWrapper = document.querySelector('.css-xyxtmn')!; + + expect(layoutWrapper).toHaveTextContent(''); + }); + + it('renders a Header when passed in', () => { + render(<DatasetLayout header={Header()} />); + + expect(screen.getByText(/header/i)).toBeVisible(); + }); + + it('renders a LeftPanel when passed in', () => { + render(<DatasetLayout leftPanel={LeftPanel()} />); + + expect(screen.getByRole('img', { name: /empty/i })).toBeVisible(); + expect(screen.getByText(/no database tables found/i)).toBeVisible(); + }); + + it('renders a DatasetPanel when passed in', () => { + render(<DatasetLayout datasetPanel={DatasetPanel()} />); + + const blankDatasetImg = screen.getByRole('img', { name: /empty/i }); + const blankDatasetTitle = screen.getByText(/select dataset source/i); + + expect(blankDatasetImg).toBeVisible(); + expect(blankDatasetTitle).toBeVisible(); + }); + + it('renders a RightPanel when passed in', () => { + render(<DatasetLayout rightPanel={RightPanel()} />); + + expect(screen.getByText(/right panel/i)).toBeVisible(); + }); + + it('renders a Footer when passed in', () => { + render(<DatasetLayout footer={Footer()} />); + + expect(screen.getByText(/footer/i)).toBeVisible(); + }); +}); diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout.tsx new file mode 100644 index 0000000000..24d9f3424b --- /dev/null +++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout.tsx @@ -0,0 +1,63 @@ +/** + * 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, { ReactElement, JSXElementConstructor } from 'react'; +import { styled } from '@superset-ui/core'; +import { + Column, + Row, + StyledHeader, + StyledLeftPanel, + StyledDatasetPanel, + StyledRightPanel, + StyledFooter, +} from 'src/views/CRUD/data/dataset/styles'; + +interface DatasetLayoutProps { + header?: ReactElement<any, string | JSXElementConstructor<any>> | null; + leftPanel?: ReactElement<any, string | JSXElementConstructor<any>> | null; + datasetPanel?: ReactElement<any, string | JSXElementConstructor<any>> | null; + rightPanel?: ReactElement<any, string | JSXElementConstructor<any>> | null; + footer?: ReactElement<any, string | JSXElementConstructor<any>> | null; +} + +export default function DatasetLayout({ + header, + leftPanel, + datasetPanel, + rightPanel, + footer, +}: DatasetLayoutProps) { + return ( + <div css={{ height: '100%' }}> + {header && <StyledHeader>{header}</StyledHeader>} + <Row> + {leftPanel && <StyledLeftPanel>{leftPanel}</StyledLeftPanel>} + <Column> + <Row> + {datasetPanel && ( + <StyledDatasetPanel>{datasetPanel}</StyledDatasetPanel> + )} + {rightPanel && <StyledRightPanel>{rightPanel}</StyledRightPanel>} + </Row> + {footer && <StyledFooter>{footer}</StyledFooter>} + </Column> + </Row> + </div> + ); +} diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPage.test.tsx similarity index 51% copy from superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx copy to superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPage.test.tsx index 9fe93b8fb5..72ce16aea8 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPage.test.tsx @@ -17,7 +17,26 @@ * under the License. */ import React from 'react'; +import { render, screen } from 'spec/helpers/testing-library'; +import DatasetPage from 'src/views/CRUD/data/dataset/DatasetPage'; -export default function DatasetPanel() { - return <div>Dataset Panel</div>; -} +describe('DatasetPage', () => { + it('renders a blank state DatasetPage', () => { + render(<DatasetPage />); + + const blankeStateImgs = screen.getAllByRole('img', { name: /empty/i }); + + // Header + expect(screen.getByText(/header/i)).toBeVisible(); + // Left panel + expect(blankeStateImgs[0]).toBeVisible(); + expect(screen.getByText(/no database tables found/i)).toBeVisible(); + // Database panel + expect(blankeStateImgs[1]).toBeVisible(); + expect(screen.getByText(/select dataset source/i)).toBeVisible(); + // Footer + expect(screen.getByText(/footer/i)).toBeVisible(); + + expect(blankeStateImgs.length).toBe(2); + }); +}); diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/DatasetPanel.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/DatasetPanel.test.tsx new file mode 100644 index 0000000000..52767b6df7 --- /dev/null +++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/DatasetPanel.test.tsx @@ -0,0 +1,41 @@ +/** + * 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 DatasetPanel from 'src/views/CRUD/data/dataset/DatasetPage/DatasetPanel'; + +describe('DatasetPanel', () => { + it('renders a blank state DatasetPanel', () => { + render(<DatasetPanel />); + + const blankDatasetImg = screen.getByRole('img', { name: /empty/i }); + const blankDatasetTitle = screen.getByText(/select dataset source/i); + const blankDatasetDescription = screen.getByText( + /datasets can be created from database tables or sql queries\. select a database table to the left or to open sql lab\. from there you can save the query as a dataset\./i, + ); + const sqlLabLink = screen.getByRole('link', { + name: /create dataset from sql query/i, + }); + + expect(blankDatasetImg).toBeVisible(); + expect(blankDatasetTitle).toBeVisible(); + expect(blankDatasetDescription).toBeVisible(); + expect(sqlLabLink).toBeVisible(); + }); +}); diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx index 9fe93b8fb5..68dc47d1cb 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx @@ -17,7 +17,27 @@ * under the License. */ import React from 'react'; +import { t } from '@superset-ui/core'; +import { EmptyStateBig } from 'src/components/EmptyState'; + +const renderDescription = () => ( + <> + {t( + 'Datasets can be created from database tables or SQL queries. Select a database table to the left or ', + )} + <a href="https://preset.io/";>{t('create dataset from SQL query')}</a> + {t(' to open SQL Lab. From there you can save the query as a dataset.')} + </> +); export default function DatasetPanel() { - return <div>Dataset Panel</div>; + return ( + <> + <EmptyStateBig + image="empty-dataset.svg" + title={t('Select dataset source')} + description={renderDescription()} + /> + </> + ); } diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Footer/Footer.test.tsx similarity index 74% copy from superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx copy to superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Footer/Footer.test.tsx index 9fe93b8fb5..0fd77c202e 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Footer/Footer.test.tsx @@ -17,7 +17,13 @@ * under the License. */ import React from 'react'; +import { render, screen } from 'spec/helpers/testing-library'; +import Footer from 'src/views/CRUD/data/dataset/DatasetPage/Footer'; -export default function DatasetPanel() { - return <div>Dataset Panel</div>; -} +describe('Footer', () => { + it('renders a blank state Footer', () => { + render(<Footer />); + + expect(screen.getByText(/footer/i)).toBeVisible(); + }); +}); diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Header/Header.test.tsx similarity index 74% copy from superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx copy to superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Header/Header.test.tsx index 9fe93b8fb5..1398ac4bbb 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Header/Header.test.tsx @@ -17,7 +17,13 @@ * under the License. */ import React from 'react'; +import { render, screen } from 'spec/helpers/testing-library'; +import Header from 'src/views/CRUD/data/dataset/DatasetPage/Header'; -export default function DatasetPanel() { - return <div>Dataset Panel</div>; -} +describe('Header', () => { + it('renders a blank state Header', () => { + render(<Header />); + + expect(screen.getByText(/header/i)).toBeVisible(); + }); +}); diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/LeftPanel.test.tsx similarity index 63% copy from superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx copy to superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/LeftPanel.test.tsx index 9fe93b8fb5..34f9671b2c 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/LeftPanel.test.tsx @@ -17,7 +17,15 @@ * under the License. */ import React from 'react'; +import { render, screen } from 'spec/helpers/testing-library'; +import LeftPanel from 'src/views/CRUD/data/dataset/DatasetPage/LeftPanel'; -export default function DatasetPanel() { - return <div>Dataset Panel</div>; -} +describe('LeftPanel', () => { + it('renders a blank state LeftPanel', () => { + render(<LeftPanel />); + + expect(screen.getByRole('img', { name: /empty/i })).toBeVisible(); + expect(screen.getByText(/no database tables found/i)).toBeVisible(); + expect(screen.getByText(/try selecting a different schema/i)).toBeVisible(); + }); +}); diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx index 5ffb6a12c9..908cf1a833 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/index.tsx @@ -17,7 +17,17 @@ * under the License. */ import React from 'react'; +import { t } from '@superset-ui/core'; +import { EmptyStateMedium } from 'src/components/EmptyState'; export default function LeftPanel() { - return <div>Left Panel</div>; + return ( + <> + <EmptyStateMedium + image="empty-table.svg" + title={t('No database tables found')} + description={t('Try selecting a different schema')} + /> + </> + ); } diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/RightPanel/RightPanel.test.tsx similarity index 72% copy from superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx copy to superset-frontend/src/views/CRUD/data/dataset/DatasetPage/RightPanel/RightPanel.test.tsx index 9fe93b8fb5..e0a3d47bcb 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/RightPanel/RightPanel.test.tsx @@ -17,7 +17,13 @@ * under the License. */ import React from 'react'; +import { render, screen } from 'spec/helpers/testing-library'; +import RightPanel from 'src/views/CRUD/data/dataset/DatasetPage/RightPanel'; -export default function DatasetPanel() { - return <div>Dataset Panel</div>; -} +describe('RightPanel', () => { + it('renders a blank state RightPanel', () => { + render(<RightPanel />); + + expect(screen.getByText(/right panel/i)).toBeVisible(); + }); +}); diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx index 7aa3c7f95f..601033d22b 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx @@ -17,22 +17,98 @@ * under the License. */ import React from 'react'; +// import { ExploreChartHeader } from 'src/explore/components/ExploreChartHeader'; import Header from './Header'; import DatasetPanel from './DatasetPanel'; import LeftPanel from './LeftPanel'; -import RightPanel from './RightPanel'; +// import RightPanel from './RightPanel'; import Footer from './Footer'; +import DatasetLayout from '../DatasetLayout'; + +// const createProps = () => ({ +// chart: { +// id: 1, +// latestQueryFormData: { +// viz_type: 'histogram', +// datasource: '49__table', +// slice_id: 318, +// url_params: {}, +// granularity_sqla: 'time_start', +// time_range: 'No filter', +// all_columns_x: ['age'], +// adhoc_filters: [], +// row_limit: 10000, +// groupby: null, +// color_scheme: 'supersetColors', +// label_colors: {}, +// link_length: '25', +// x_axis_label: 'age', +// y_axis_label: 'count', +// }, +// chartStatus: 'rendered', +// }, +// slice: { +// cache_timeout: null, +// changed_on: '2021-03-19T16:30:56.750230', +// changed_on_humanized: '7 days ago', +// datasource: 'FCC 2018 Survey', +// description: null, +// description_markeddown: '', +// edit_url: '/chart/edit/318', +// form_data: { +// adhoc_filters: [], +// all_columns_x: ['age'], +// color_scheme: 'supersetColors', +// datasource: '49__table', +// granularity_sqla: 'time_start', +// groupby: null, +// label_colors: {}, +// link_length: '25', +// queryFields: { groupby: 'groupby' }, +// row_limit: 10000, +// slice_id: 318, +// time_range: 'No filter', +// url_params: {}, +// viz_type: 'histogram', +// x_axis_label: 'age', +// y_axis_label: 'count', +// }, +// modified: '<span class="no-wrap">7 days ago</span>', +// owners: [ +// { +// text: 'Superset Admin', +// value: 1, +// }, +// ], +// slice_id: 318, +// slice_name: 'Age distribution of respondents', +// slice_url: '/explore/?form_data=%7B%22slice_id%22%3A%20318%7D', +// }, +// slice_name: 'Age distribution of respondents', +// actions: { +// postChartFormData: () => {}, +// updateChartTitle: () => {}, +// fetchFaveStar: () => {}, +// saveFaveStar: () => {}, +// redirectSQLLab: () => {}, +// }, +// user: { +// userId: 1, +// }, +// onSaveChart: () => {}, +// canOverwrite: false, +// canDownload: false, +// isStarred: false, +// }); export default function DatasetCreator() { return ( - <div> - <Header /> - <LeftPanel /> - <div css={{ display: 'flex' }}> - <DatasetPanel /> - <Footer /> - </div> - <RightPanel /> - </div> + <DatasetLayout + header={Header()} + leftPanel={LeftPanel()} + datasetPanel={DatasetPanel()} + // rightPanel={RightPanel()} + footer={Footer()} + /> ); } diff --git a/superset-frontend/src/views/CRUD/data/dataset/styles.ts b/superset-frontend/src/views/CRUD/data/dataset/styles.ts new file mode 100644 index 0000000000..9c2b4d8551 --- /dev/null +++ b/superset-frontend/src/views/CRUD/data/dataset/styles.ts @@ -0,0 +1,62 @@ +/** + * 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 { styled } from '@superset-ui/core'; + +export const Column = styled.div` + width: 100%; + height: 100%; + flex-direction: column; +`; + +export const Row = styled.div` + width: 100%; + height: 100vh; + display: flex; + flex-direction: row; +`; + +export const StyledHeader = styled.div` + height: 64px; + border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + color: ${({ theme }) => theme.colors.error.base}; +`; + +export const StyledLeftPanel = styled.div` + width: 320px; + height: 100%; + border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + color: ${({ theme }) => theme.colors.warning.base}; +`; + +export const StyledDatasetPanel = styled.div` + width: 100%; + color: ${({ theme }) => theme.colors.alert.base}; +`; + +export const StyledRightPanel = styled.div` + border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + color: ${({ theme }) => theme.colors.success.base}; +`; + +export const StyledFooter = styled.div` + border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + color: ${({ theme }) => theme.colors.info.base}; +`;
