feat: implement secondary navigation for datasets (#9982)

superset-frontend/spec/javascripts/views/datasetList/DatasetList_spec.jsx

@@ -24,6 +24,8 @@ import fetchMock from 'fetch-mock';
 
 import DatasetList from 'src/views/datasetList/DatasetList';
 import ListView from 'src/components/ListView/ListView';
+import { ThemeProvider } from 'emotion-theming';
+import { supersetTheme } from '@superset-ui/style';
 
 // store needed for withToasts(datasetTable)
 const mockStore = configureStore([thunk]);
@@ -67,6 +69,8 @@ describe('DatasetList', () => {
   const mockedProps = {};
   const wrapper = mount(<DatasetList {...mockedProps} />, {
     context: { store },
+    wrappingComponent: ThemeProvider,
+    wrappingComponentProps: { theme: supersetTheme },
   });
 
   it('renders', () => {

superset-frontend/src/components/Menu/Menu.less

@@ -29,6 +29,10 @@
     }
   }
 
+  .navbar-inverse {
+    border-bottom: 2px solid @gray-bg;
+  }
+
   .version-info {
     padding: 5px 20px;
     color: @gray-heading;

superset-frontend/src/components/Menu/SubMenu.tsx

@@ -0,0 +1,122 @@
+/**
+ * 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 styled from '@superset-ui/style';
+import { Button, Nav, Navbar, MenuItem } from 'react-bootstrap';
+
+const StyledHeader = styled.header`
+  margin-top: -20px;
+  .navbar-header .navbar-brand {
+    font-weight: ${({ theme }) => theme.typography.weights.bold};
+  }
+
+  .navbar-right {
+    .btn-default {
+      background-color: ${({ theme }) => theme.colors.primary.base};
+      border-radius: 4px;
+      border: none;
+      color: ${({ theme }) => theme.colors.secondary.light5};
+      font-size: ${({ theme }) => theme.typography.sizes.s};
+      font-weight: ${({ theme }) => theme.typography.weights.bold};
+      margin: 8px 43px;
+      padding: 8px 51px 8px 43px;
+      text-transform: uppercase;
+      i {
+        padding: 4px ${({ theme }) => theme.typography.sizes.xs};
+      }
+    }
+  }
+
+  .navbar-nav {
+    li {
+      a {
+        font-size: ${({ theme }) => theme.typography.sizes.s};
+        padding: 8px;
+        margin: 8px;
+        color: ${({ theme }) => theme.colors.secondary.dark1};
+      }
+    }
+
+    li.active > a,
+    li > a:hover {
+      background-color: ${({ theme }) => theme.colors.secondary.light4};
+      border-bottom: none;
+      border-radius: 4px;
+    }
+  }
+`;
+
+interface Props {
+  createButton: { name: string; url: string | null };
+  canCreate: boolean;
+  label: string;
+  name: string;
+  childs: Array<{ label: string; name: string; url: string }>;
+}
+
+interface State {
+  selectedMenu: string;
+}
+
+class SubMenu extends React.PureComponent<Props, State> {
+  state: State = {
+    selectedMenu: this.props.childs[0] && this.props.childs[0].label,
+  };
+
+  handleClick = (item: string) => () => {
+    this.setState({ selectedMenu: item });
+  };
+
+  render() {
+    const { canCreate, childs, label, createButton } = this.props;
+
+    return (
+      <StyledHeader>
+        <Navbar inverse fluid role="navigation">
+          <Navbar.Header>
+            <Navbar.Brand>{label}</Navbar.Brand>
+          </Navbar.Header>
+          <Nav>
+            {childs &&
+              childs.map(child => (
+                <MenuItem
+                  active={child.label === this.state.selectedMenu}
+                  key={`${child.label}`}
+                  eventKey={`${child.name}`}
+                  href={child.url}
+                  onClick={this.handleClick(child.label)}
+                >
+                  {child.label}
+                </MenuItem>
+              ))}
+          </Nav>
+          {canCreate && (
+            <Nav className="navbar-right">
+              <Button href={`${createButton.url}`}>
+                <i className="fa fa-plus" /> {createButton.name}
+              </Button>
+            </Nav>
+          )}
+        </Navbar>
+      </StyledHeader>
+    );
+  }
+}
+
+export default SubMenu;

superset-frontend/src/views/datasetList/DatasetList.tsx

@@ -24,9 +24,9 @@ import React from 'react';
 import rison from 'rison';
 // @ts-ignore
 import { Panel } from 'react-bootstrap';
-import Link from 'src/components/Link';
 import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
 import ListView from 'src/components/ListView/ListView';
+import SubMenu from 'src/components/Menu/SubMenu';
 import {
   FetchDataConfig,
   FilterOperatorMap,
@@ -241,6 +241,28 @@ class DatasetList extends React.PureComponent<Props, State> {
     },
   ];
 
+  menu = {
+    label: 'Data',
+    name: 'Data',
+    createButton: {
+      name: t('Dataset'),
+      url: '/tablemodelview/add',
+    },
+    childs: [
+      {
+        name: 'Datasets',
+        label: t('Datasets'),
+        url: '/tablemodelview/list/?_flt_1_is_sqllab_view=y',
+      },
+      { name: 'Databases', label: t('Databases'), url: '/databaseview/list/' },
+      {
+        name: 'Saved Queries',
+        label: t('Saved Queries'),
+        url: '/sqllab/my_queries/',
+      },
+    ],
+  };
+
   hasPerm = (perm: string) => {
     if (!this.state.permissions.length) {
       return false;
@@ -388,42 +410,32 @@ class DatasetList extends React.PureComponent<Props, State> {
     const { datasets, datasetCount, loading, filters } = this.state;
 
     return (
-      <div className="container welcome">
-        <Panel>
-          <Panel.Body>
-            <ConfirmStatusChange
-              title={t('Please confirm')}
-              description={t(
-                'Are you sure you want to delete the selected datasets?',
-              )}
-              onConfirm={this.handleBulkDatasetDelete}
-            >
-              {confirmDelete => {
-                const bulkActions = [];
-                if (this.canDelete) {
-                  bulkActions.push({
-                    key: 'delete',
-                    name: (
-                      <>
-                        <i className="fa fa-trash" /> Delete
-                      </>
-                    ),
-                    onSelect: confirmDelete,
-                  });
-                }
-                return (
-                  <>
-                    {this.canCreate && (
-                      <span className="list-add-action">
-                        <Link
-                          className="btn btn-sm btn-primary pull-right"
-                          href="/tablemodelview/add"
-                          tooltip="Add a new record"
-                        >
-                          <i className="fa fa-plus" />
-                        </Link>
-                      </span>
-                    )}
+      <>
+        <SubMenu {...this.menu} canCreate={this.canCreate} />
+        <div className="container welcome">
+          <Panel>
+            <Panel.Body>
+              <ConfirmStatusChange
+                title={t('Please confirm')}
+                description={t(
+                  'Are you sure you want to delete the selected datasets?',
+                )}
+                onConfirm={this.handleBulkDatasetDelete}
+              >
+                {confirmDelete => {
+                  const bulkActions = [];
+                  if (this.canDelete) {
+                    bulkActions.push({
+                      key: 'delete',
+                      name: (
+                        <>
+                          <i className="fa fa-trash" /> Delete
+                        </>
+                      ),
+                      onSelect: confirmDelete,
+                    });
+                  }
+                  return (
                     <ListView
                       className="dataset-list-view"
                       title={'Datasets'}
@@ -437,13 +449,13 @@ class DatasetList extends React.PureComponent<Props, State> {
                       filters={filters}
                       bulkActions={bulkActions}
                     />
-                  </>
-                );
-              }}
-            </ConfirmStatusChange>
-          </Panel.Body>
-        </Panel>
-      </div>
+                  );
+                }}
+              </ConfirmStatusChange>
+            </Panel.Body>
+          </Panel>
+        </div>
+      </>
     );
   }
 }