From 6094274f0b017b4a456cd78c3039a57be2d63fc5 Mon Sep 17 00:00:00 2001 From: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com> Date: Mon, 22 Aug 2022 18:45:03 -0500 Subject: [PATCH] feat: Create dataset blank state (#21058) * beginning of routing * elizabeth review * changed folder layout * Dataset layout setup * Fix DatasetLayout test * Fixed height issue * Fix link to sqllab * Fix DatasetPanel test * Remove arbitrary right panel * Add empty state SVGs * Restructure/rename some Dataset files * Fixed styling issue * Fix background color * Fix header border * Fix empty DatasetPanel styles * Adjust description rendering in DatasetPanel to fix tests * Add spaces back to blank dataset description to fix tests * Fix blank dataset description styles Co-authored-by: AAfghahi --- .../src/assets/images/empty-dataset.svg | 38 ++++++++ .../src/assets/images/empty-table.svg | 22 +++++ .../src/components/EmptyState/index.tsx | 4 +- .../components/ExploreChartHeader/index.jsx | 4 +- .../dataset/AddDataset/AddDataset.test.tsx | 42 ++++++++ .../DatasetPanel/DatasetPanel.test.tsx | 41 ++++++++ .../dataset/AddDataset/DatasetPanel/index.tsx | 55 +++++++++++ .../Footer/Footer.test.tsx} | 12 ++- .../Footer/index.tsx | 0 .../dataset/AddDataset/Header/Header.test.tsx | 29 ++++++ .../Header/index.tsx | 0 .../AddDataset/LeftPanel/LeftPanel.test.tsx | 31 ++++++ .../LeftPanel/index.tsx | 12 ++- .../AddDataset/RightPanel/RightPanel.test.tsx | 29 ++++++ .../RightPanel/index.tsx | 0 .../{DatasetPage => AddDataset}/index.tsx | 20 ++-- .../{DatasetPage => AddDataset}/types.tsx | 0 .../DatasetLayout/DatasetLayout.test.tsx | 70 ++++++++++++++ .../CRUD/data/dataset/DatasetLayout/index.tsx | 72 ++++++++++++++ .../src/views/CRUD/data/dataset/styles.ts | 95 +++++++++++++++++++ superset-frontend/src/views/routes.tsx | 8 +- 21 files changed, 560 insertions(+), 24 deletions(-) create mode 100644 superset-frontend/src/assets/images/empty-dataset.svg create mode 100644 superset-frontend/src/assets/images/empty-table.svg create mode 100644 superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx create mode 100644 superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.test.tsx create mode 100644 superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx rename superset-frontend/src/views/CRUD/data/dataset/{DatasetPage/DatasetPanel/index.tsx => AddDataset/Footer/Footer.test.tsx} (74%) rename superset-frontend/src/views/CRUD/data/dataset/{DatasetPage => AddDataset}/Footer/index.tsx (100%) create mode 100644 superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/Header.test.tsx rename superset-frontend/src/views/CRUD/data/dataset/{DatasetPage => AddDataset}/Header/index.tsx (100%) create mode 100644 superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx rename superset-frontend/src/views/CRUD/data/dataset/{DatasetPage => AddDataset}/LeftPanel/index.tsx (74%) create mode 100644 superset-frontend/src/views/CRUD/data/dataset/AddDataset/RightPanel/RightPanel.test.tsx rename superset-frontend/src/views/CRUD/data/dataset/{DatasetPage => AddDataset}/RightPanel/index.tsx (100%) rename superset-frontend/src/views/CRUD/data/dataset/{DatasetPage => AddDataset}/index.tsx (87%) rename superset-frontend/src/views/CRUD/data/dataset/{DatasetPage => AddDataset}/types.tsx (100%) create mode 100644 superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx create mode 100644 superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/index.tsx create mode 100644 superset-frontend/src/views/CRUD/data/dataset/styles.ts diff --git a/superset-frontend/src/assets/images/empty-dataset.svg b/superset-frontend/src/assets/images/empty-dataset.svg new file mode 100644 index 0000000000..5ce1752545 --- /dev/null +++ b/superset-frontend/src/assets/images/empty-dataset.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/superset-frontend/src/assets/images/empty-table.svg b/superset-frontend/src/assets/images/empty-table.svg new file mode 100644 index 0000000000..c1062502f3 --- /dev/null +++ b/superset-frontend/src/assets/images/empty-table.svg @@ -0,0 +1,22 @@ + + + + + diff --git a/superset-frontend/src/components/EmptyState/index.tsx b/superset-frontend/src/components/EmptyState/index.tsx index 7ee69d7eea..3f5d586cf8 100644 --- a/superset-frontend/src/components/EmptyState/index.tsx +++ b/superset-frontend/src/components/EmptyState/index.tsx @@ -37,6 +37,7 @@ export interface EmptyStateSmallProps { export interface EmptyStateProps extends EmptyStateSmallProps { buttonText?: ReactNode; buttonAction?: React.MouseEventHandler; + className?: string; } export interface ImageContainerProps { @@ -152,8 +153,9 @@ export const EmptyStateBig = ({ description, buttonAction, buttonText, + className, }: EmptyStateProps) => ( - + 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/AddDataset/AddDataset.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx new file mode 100644 index 0000000000..23c5c3b471 --- /dev/null +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx @@ -0,0 +1,42 @@ +/** + * 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 AddDataset from 'src/views/CRUD/data/dataset/AddDataset'; + +describe('AddDataset', () => { + it('renders a blank state AddDataset', () => { + render(); + + 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/AddDataset/DatasetPanel/DatasetPanel.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.test.tsx new file mode 100644 index 0000000000..b03b7cad92 --- /dev/null +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/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/AddDataset/DatasetPanel'; + +describe('DatasetPanel', () => { + it('renders a blank state DatasetPanel', () => { + render(); + + 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('button', { + 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/AddDataset/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx new file mode 100644 index 0000000000..294637a6f7 --- /dev/null +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx @@ -0,0 +1,55 @@ +/** + * 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 { t, styled } from '@superset-ui/core'; +import { EmptyStateBig } from 'src/components/EmptyState'; + +const StyledEmptyStateBig = styled(EmptyStateBig)` + p { + width: ${({ theme }) => theme.gridUnit * 115}px; + } +`; + +const renderDescription = () => ( + <> + {t( + 'Datasets can be created from database tables or SQL queries. Select a database table to the left or ', + )} + { + window.location.href = `/superset/sqllab`; + }} + tabIndex={0} + > + {t('create dataset from SQL query')} + + {t(' to open SQL Lab. From there you can save the query as a dataset.')} + +); + +export default function DatasetPanel() { + return ( + + ); +} diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Footer/Footer.test.tsx similarity index 74% rename from superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx rename to superset-frontend/src/views/CRUD/data/dataset/AddDataset/Footer/Footer.test.tsx index 9fe93b8fb5..bbff68c88d 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/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/AddDataset/Footer'; -export default function DatasetPanel() { - return
Dataset Panel
; -} +describe('Footer', () => { + it('renders a blank state Footer', () => { + render(