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 <arash.afghahi@gmail.com>
2024-09-06 22:07:34 -04:00 · 2022-08-22 18:45:03 -05:00 · 2022-08-22 18:45:03 -05:00 · 6094274f0b
commit 6094274f0b
parent 52648ecd7f
21 changed files with 560 additions and 24 deletions
--- a/superset-frontend/src/assets/images/empty-dataset.svg
+++ b/superset-frontend/src/assets/images/empty-dataset.svg
@ -0,0 +1,38 @@
+<!--
+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.
+-->
+<svg width="152" height="152" viewBox="0 0 152 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44.5 1C45.0523 1 45.5 1.44772 45.5 2V45C45.5 45.5523 45.0523 46 44.5 46H1.5C0.947716 46 0.5 45.5523 0.5 45V2C0.5 1.44772 0.947716 1 1.5 1L44.5 1Z" fill="white"/>
+<path d="M97.5 1C98.0523 1 98.5 1.44772 98.5 2V45C98.5 45.5523 98.0523 46 97.5 46H54.5C53.9477 46 53.5 45.5523 53.5 45V2C53.5 1.44772 53.9477 1 54.5 1L97.5 1Z" fill="white"/>
+<path d="M150.5 1C151.052 1 151.5 1.44772 151.5 2V45C151.5 45.5523 151.052 46 150.5 46H107.5C106.948 46 106.5 45.5523 106.5 45V2C106.5 1.44772 106.948 1 107.5 1L150.5 1Z" fill="white"/>
+<path d="M44.5 54C45.0523 54 45.5 54.4477 45.5 55V98C45.5 98.5523 45.0523 99 44.5 99H1.5C0.947716 99 0.5 98.5523 0.5 98V55C0.5 54.4477 0.947716 54 1.5 54H44.5Z" fill="white"/>
+<path d="M97.5 54C98.0523 54 98.5 54.4477 98.5 55V98C98.5 98.5523 98.0523 99 97.5 99H54.5C53.9477 99 53.5 98.5523 53.5 98V55C53.5 54.4477 53.9477 54 54.5 54H97.5Z" fill="white"/>
+<path d="M150.5 54C151.052 54 151.5 54.4477 151.5 55V98C151.5 98.5523 151.052 99 150.5 99H107.5C106.948 99 106.5 98.5523 106.5 98V55C106.5 54.4477 106.948 54 107.5 54H150.5Z" fill="white"/>
+<path d="M44.5 106C45.0523 106 45.5 106.448 45.5 107V150C45.5 150.552 45.0523 151 44.5 151H1.5C0.947716 151 0.5 150.552 0.5 150V107C0.5 106.448 0.947716 106 1.5 106H44.5Z" fill="white"/>
+<path d="M97.5 106C98.0523 106 98.5 106.448 98.5 107V150C98.5 150.552 98.0523 151 97.5 151H54.5C53.9477 151 53.5 150.552 53.5 150V107C53.5 106.448 53.9477 106 54.5 106H97.5Z" fill="white"/>
+<path d="M150.5 106C151.052 106 151.5 106.448 151.5 107V150C151.5 150.552 151.052 151 150.5 151H107.5C106.948 151 106.5 150.552 106.5 150V107C106.5 106.448 106.948 106 107.5 106H150.5Z" fill="white"/>
+<path d="M44.5 1C45.0523 1 45.5 1.44772 45.5 2V45C45.5 45.5523 45.0523 46 44.5 46H1.5C0.947716 46 0.5 45.5523 0.5 45V2C0.5 1.44772 0.947716 1 1.5 1L44.5 1Z" stroke="#E0E0E0"/>
+<path d="M97.5 1C98.0523 1 98.5 1.44772 98.5 2V45C98.5 45.5523 98.0523 46 97.5 46H54.5C53.9477 46 53.5 45.5523 53.5 45V2C53.5 1.44772 53.9477 1 54.5 1L97.5 1Z" stroke="#E0E0E0"/>
+<path d="M150.5 1C151.052 1 151.5 1.44772 151.5 2V45C151.5 45.5523 151.052 46 150.5 46H107.5C106.948 46 106.5 45.5523 106.5 45V2C106.5 1.44772 106.948 1 107.5 1L150.5 1Z" stroke="#E0E0E0"/>
+<path d="M44.5 54C45.0523 54 45.5 54.4477 45.5 55V98C45.5 98.5523 45.0523 99 44.5 99H1.5C0.947716 99 0.5 98.5523 0.5 98V55C0.5 54.4477 0.947716 54 1.5 54H44.5Z" stroke="#E0E0E0"/>
+<path d="M97.5 54C98.0523 54 98.5 54.4477 98.5 55V98C98.5 98.5523 98.0523 99 97.5 99H54.5C53.9477 99 53.5 98.5523 53.5 98V55C53.5 54.4477 53.9477 54 54.5 54H97.5Z" stroke="#E0E0E0"/>
+<path d="M150.5 54C151.052 54 151.5 54.4477 151.5 55V98C151.5 98.5523 151.052 99 150.5 99H107.5C106.948 99 106.5 98.5523 106.5 98V55C106.5 54.4477 106.948 54 107.5 54H150.5Z" stroke="#E0E0E0"/>
+<path d="M44.5 106C45.0523 106 45.5 106.448 45.5 107V150C45.5 150.552 45.0523 151 44.5 151H1.5C0.947716 151 0.5 150.552 0.5 150V107C0.5 106.448 0.947716 106 1.5 106H44.5Z" stroke="#E0E0E0"/>
+<path d="M97.5 106C98.0523 106 98.5 106.448 98.5 107V150C98.5 150.552 98.0523 151 97.5 151H54.5C53.9477 151 53.5 150.552 53.5 150V107C53.5 106.448 53.9477 106 54.5 106H97.5Z" stroke="#E0E0E0"/>
+<path d="M150.5 106C151.052 106 151.5 106.448 151.5 107V150C151.5 150.552 151.052 151 150.5 151H107.5C106.948 151 106.5 150.552 106.5 150V107C106.5 106.448 106.948 106 107.5 106H150.5Z" stroke="#E0E0E0"/>
+</svg>
--- a/superset-frontend/src/assets/images/empty-table.svg
+++ b/superset-frontend/src/assets/images/empty-table.svg
@ -0,0 +1,22 @@
+<!--
+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.
+-->
+<svg width="81" height="82" viewBox="0 0 81 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M76.5 1H4.5C2.29086 1 0.5 2.79086 0.5 5V77C0.5 79.2091 2.29086 81 4.5 81H76.5C78.7091 81 80.5 79.2091 80.5 77V5C80.5 2.79086 78.7091 1 76.5 1ZM36.5 73H8.5V57H36.5V73ZM36.5 49H8.5V33H36.5V49ZM72.5 73H44.5V57H72.5V73ZM72.5 49H44.5V33H72.5V49ZM72.5 25H8.5V9H72.5V25Z" fill="#F7F7F7"/>
+<path d="M36.5 73V73.5H37V73H36.5ZM8.5 73H8V73.5H8.5V73ZM8.5 57V56.5H8V57H8.5ZM36.5 57H37V56.5H36.5V57ZM36.5 49V49.5H37V49H36.5ZM8.5 49H8V49.5H8.5V49ZM8.5 33V32.5H8V33H8.5ZM36.5 33H37V32.5H36.5V33ZM72.5 73V73.5H73V73H72.5ZM44.5 73H44V73.5H44.5V73ZM44.5 57V56.5H44V57H44.5ZM72.5 57H73V56.5H72.5V57ZM72.5 49V49.5H73V49H72.5ZM44.5 49H44V49.5H44.5V49ZM44.5 33V32.5H44V33H44.5ZM72.5 33H73V32.5H72.5V33ZM72.5 25V25.5H73V25H72.5ZM8.5 25H8V25.5H8.5V25ZM8.5 9V8.5H8V9H8.5ZM72.5 9H73V8.5H72.5V9ZM76.5 0.5H4.5V1.5H76.5V0.5ZM4.5 0.5C2.01472 0.5 0 2.51472 0 5H1C1 3.067 2.567 1.5 4.5 1.5V0.5ZM0 5V77H1V5H0ZM0 77C0 79.4853 2.01472 81.5 4.5 81.5V80.5C2.567 80.5 1 78.933 1 77H0ZM4.5 81.5H76.5V80.5H4.5V81.5ZM76.5 81.5C78.9853 81.5 81 79.4853 81 77H80C80 78.933 78.433 80.5 76.5 80.5V81.5ZM81 77V5H80V77H81ZM81 5C81 2.51472 78.9853 0.5 76.5 0.5V1.5C78.433 1.5 80 3.067 80 5H81ZM36.5 72.5H8.5V73.5H36.5V72.5ZM9 73V57H8V73H9ZM8.5 57.5H36.5V56.5H8.5V57.5ZM36 57V73H37V57H36ZM36.5 48.5H8.5V49.5H36.5V48.5ZM9 49V33H8V49H9ZM8.5 33.5H36.5V32.5H8.5V33.5ZM36 33V49H37V33H36ZM72.5 72.5H44.5V73.5H72.5V72.5ZM45 73V57H44V73H45ZM44.5 57.5H72.5V56.5H44.5V57.5ZM72 57V73H73V57H72ZM72.5 48.5H44.5V49.5H72.5V48.5ZM45 49V33H44V49H45ZM44.5 33.5H72.5V32.5H44.5V33.5ZM72 33V49H73V33H72ZM72.5 24.5H8.5V25.5H72.5V24.5ZM9 25V9H8V25H9ZM8.5 9.5H72.5V8.5H8.5V9.5ZM72 9V25H73V9H72Z" fill="#E0E0E0"/>
+</svg>
--- 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<HTMLElement>;
+  className?: string;
 }

 export interface ImageContainerProps {
@ -152,8 +153,9 @@ export const EmptyStateBig = ({
  description,
  buttonAction,
  buttonText,
+  className,
 }: EmptyStateProps) => (
-  <EmptyStateContainer>
+  <EmptyStateContainer className={className}>
    <ImageContainer image={image} size={EmptyStateSize.Big} />
    <TextContainer
      css={(theme: SupersetTheme) =>
--- 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 = () => {
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx
+++ 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(<AddDataset />);
+
+    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);
+  });
+});
--- 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
@ -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(<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();
+  });
+});
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx
+++ 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 ',
+    )}
+    <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 (
+    <StyledEmptyStateBig
+      image="empty-dataset.svg"
+      title={t('Select dataset source')}
+      description={renderDescription()}
+    />
+  );
+}
--- 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,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 <div>Dataset Panel</div>;
-}
+describe('Footer', () => {
+  it('renders a blank state Footer', () => {
+    render(<Footer />);
+
+    expect(screen.getByText(/footer/i)).toBeVisible();
+  });
+});
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Footer/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Footer/index.tsx
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/Header.test.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/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/AddDataset/Header';
+
+describe('Header', () => {
+  it('renders a blank state Header', () => {
+    render(<Header />);
+
+    expect(screen.getByText(/header/i)).toBeVisible();
+  });
+});
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Header/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/Header/index.tsx
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/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/AddDataset/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();
+  });
+});
--- 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')}
+      />
+    </>
+  );
 }
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/RightPanel/RightPanel.test.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/RightPanel/RightPanel.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 RightPanel from 'src/views/CRUD/data/dataset/AddDataset/RightPanel';
+
+describe('RightPanel', () => {
+  it('renders a blank state RightPanel', () => {
+    render(<RightPanel />);
+
+    expect(screen.getByText(/right panel/i)).toBeVisible();
+  });
+});
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/RightPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/RightPanel/index.tsx
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/index.tsx
@ -17,13 +17,12 @@
 * under the License.
 */
 import React from 'react';
-// import React, { useReducer, Reducer } from 'react';
 import Header from './Header';
 import DatasetPanel from './DatasetPanel';
 import LeftPanel from './LeftPanel';
-import RightPanel from './RightPanel';
 import Footer from './Footer';
 import { DatasetActionType, DatasetObject, DSReducerActionType } from './types';
+import DatasetLayout from '../DatasetLayout';

 export function datasetReducer(
  state: Partial<DatasetObject> | null,
@ -61,7 +60,7 @@ export function datasetReducer(
  }
 }

-export default function DatasetPage() {
+export default function AddDataset() {
  // this is commented out for now, but can be commented in as the component
  // is built up. Uncomment the useReducer in imports too
  // const [dataset, setDataset] = useReducer<
@ -69,14 +68,11 @@ export default function DatasetPage() {
  // >(datasetReducer, null);

  return (
-    <div>
-      <Header />
-      <LeftPanel />
-      <div css={{ display: 'flex' }}>
-        <DatasetPanel />
-        <Footer />
-      </div>
-      <RightPanel />
-    </div>
+    <DatasetLayout
+      header={Header()}
+      leftPanel={LeftPanel()}
+      datasetPanel={DatasetPanel()}
+      footer={Footer()}
+    />
  );
 }
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/types.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetPage/types.tsx
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/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/AddDataset/Header';
+import LeftPanel from 'src/views/CRUD/data/dataset/AddDataset/LeftPanel';
+import DatasetPanel from 'src/views/CRUD/data/dataset/AddDataset/DatasetPanel';
+import RightPanel from 'src/views/CRUD/data/dataset/AddDataset/RightPanel';
+import Footer from 'src/views/CRUD/data/dataset/AddDataset/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();
+  });
+});
--- a/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/index.tsx
@ -0,0 +1,72 @@
+/**
+ * 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 {
+  StyledLayoutWrapper,
+  LeftColumn,
+  RightColumn,
+  OuterRow,
+  PanelRow,
+  FooterRow,
+  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 (
+    <StyledLayoutWrapper data-test="dataset-layout-wrapper">
+      {header && <StyledHeader>{header}</StyledHeader>}
+      <OuterRow>
+        <LeftColumn>
+          {leftPanel && <StyledLeftPanel>{leftPanel}</StyledLeftPanel>}
+        </LeftColumn>
+
+        <RightColumn>
+          <PanelRow>
+            {datasetPanel && (
+              <StyledDatasetPanel>{datasetPanel}</StyledDatasetPanel>
+            )}
+            {rightPanel && <StyledRightPanel>{rightPanel}</StyledRightPanel>}
+          </PanelRow>
+
+          <FooterRow>
+            {footer && <StyledFooter>{footer}</StyledFooter>}
+          </FooterRow>
+        </RightColumn>
+      </OuterRow>
+    </StyledLayoutWrapper>
+  );
+}
--- a/superset-frontend/src/views/CRUD/data/dataset/styles.ts
+++ b/superset-frontend/src/views/CRUD/data/dataset/styles.ts
@ -0,0 +1,95 @@
+/**
+ * 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 StyledLayoutWrapper = styled.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: ${({ theme }) => theme.colors.grayscale.light5};
+`;
+
+const Column = styled.div`
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+`;
+
+export const LeftColumn = styled(Column)`
+  width: ${({ theme }) => theme.gridUnit * 80}px;
+  height: auto;
+`;
+
+export const RightColumn = styled(Column)`
+  height: auto;
+  display: flex;
+  flex: 1 0 auto;
+  width: auto;
+`;
+
+const Row = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+`;
+
+export const OuterRow = styled(Row)`
+  flex: 1 0 auto;
+`;
+
+export const PanelRow = styled(Row)`
+  flex: 1 0 auto;
+  height: auto;
+`;
+
+export const FooterRow = styled(Row)`
+  flex: 0 0 auto;
+  height: ${({ theme }) => theme.gridUnit * 16}px;
+`;
+
+export const StyledHeader = styled.div`
+  flex: 0 0 auto;
+  height: ${({ theme }) => theme.gridUnit * 16}px;
+  border-bottom: 2px solid ${({ theme }) => theme.colors.grayscale.light2};
+  color: ${({ theme }) => theme.colors.error.base};
+`;
+
+export const StyledLeftPanel = styled.div`
+  width: ${({ theme }) => theme.gridUnit * 80}px;
+  height: 100%;
+  border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+`;
+
+export const StyledDatasetPanel = styled.div`
+  width: 100%;
+`;
+
+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`
+  height: ${({ theme }) => theme.gridUnit * 16}px;
+  width: 100%;
+  border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+  color: ${({ theme }) => theme.colors.info.base};
+`;
--- a/superset-frontend/src/views/routes.tsx
+++ b/superset-frontend/src/views/routes.tsx
@ -82,10 +82,10 @@ const DatasetList = lazy(
    ),
 );

-const DatasetPage = lazy(
+const AddDataset = lazy(
  () =>
    import(
-      /* webpackChunkName: "DatasetEditor" */ 'src/views/CRUD/data/dataset/DatasetPage/index'
+      /* webpackChunkName: "DatasetEditor" */ 'src/views/CRUD/data/dataset/AddDataset/index'
    ),
 );

@ -199,11 +199,11 @@ export const routes: Routes = [
  },
  {
    path: '/dataset/add/',
-    Component: DatasetPage,
+    Component: AddDataset,
  },
  {
    path: '/dataset/:datasetId',
-    Component: DatasetPage,
+    Component: AddDataset,
  },
 ];