feat: Create dataset blank state

superset-frontend/src/explore/components/ExploreChartHeader/index.jsx

@@ -119,9 +119,7 @@ export const ExploreChartHeader = ({
   };
 
   useEffect(() => {
-    if (dashboardId) {
-      fetchChartDashboardData();
-    }
+    if (dashboardId) fetchChartDashboardData();
   }, []);
 
   const openPropertiesModal = () => {

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 = screen.getByTestId('dataset-layout-wrapper');
+
+    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();
+  });
+});

superset-frontend/src/views/CRUD/data/dataset/DatasetLayout.tsx

@@ -0,0 +1,64 @@
+/**
+ * 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 {
+  Column,
+  Row,
+  StyledHeader,
+  StyledLeftPanel,
+  StyledDatasetPanel,
+  StyledRightPanel,
+  StyledFooter,
+  heightMinusHeaders,
+  heightMinusFooter,
+} 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 data-test="dataset-layout-wrapper">
+      {header && <StyledHeader>{header}</StyledHeader>}
+      <Row css={heightMinusHeaders}>
+        {leftPanel && <StyledLeftPanel>{leftPanel}</StyledLeftPanel>}
+        <Column css={heightMinusFooter}>
+          <Row>
+            {datasetPanel && (
+              <StyledDatasetPanel>{datasetPanel}</StyledDatasetPanel>
+            )}
+            {rightPanel && <StyledRightPanel>{rightPanel}</StyledRightPanel>}
+          </Row>
+          {footer && <StyledFooter>{footer}</StyledFooter>}
+        </Column>
+      </Row>
+    </div>
+  );
+}

superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPage.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 DatasetPage from 'src/views/CRUD/data/dataset/DatasetPage';
+
+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);
+  });
+});

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('button', {
+      name: /create dataset from sql query/i,
+    });
+
+    expect(blankDatasetImg).toBeVisible();
+    expect(blankDatasetTitle).toBeVisible();
+    expect(blankDatasetDescription).toBeVisible();
+    expect(sqlLabLink).toBeVisible();
+  });
+});

superset-frontend/src/views/CRUD/data/dataset/DatasetPage/DatasetPanel/index.tsx

@@ -17,7 +17,35 @@
  * 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 ',
+    )}
+    <span
+      role="button"
+      onClick={() => {
+        window.location.href = `/superset/sqllab`;
+      }}
+      tabIndex={0}
+    >
+      {t('create dataset from SQL query')}
+    </span>
+    {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()}
+      />
+    </>
+  );
 }

superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Footer/Footer.test.tsx

@@ -0,0 +1,29 @@
+/**
+ * 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 Footer from 'src/views/CRUD/data/dataset/DatasetPage/Footer';
+
+describe('Footer', () => {
+  it('renders a blank state Footer', () => {
+    render(<Footer />);
+
+    expect(screen.getByText(/footer/i)).toBeVisible();
+  });
+});

superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Header/Header.test.tsx

@@ -0,0 +1,29 @@
+/**
+ * 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 Header from 'src/views/CRUD/data/dataset/DatasetPage/Header';
+
+describe('Header', () => {
+  it('renders a blank state Header', () => {
+    render(<Header />);
+
+    expect(screen.getByText(/header/i)).toBeVisible();
+  });
+});

superset-frontend/src/views/CRUD/data/dataset/DatasetPage/LeftPanel/LeftPanel.test.tsx

@@ -0,0 +1,31 @@
+/**
+ * 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 LeftPanel from 'src/views/CRUD/data/dataset/DatasetPage/LeftPanel';
+
+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();
+  });
+});

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')}
+      />
+    </>
+  );
 }