feat: dataset add modal

superset-frontend/src/components/Icon.tsx

@@ -18,19 +18,20 @@
  */
 import React, { SVGProps } from 'react';
 import styled from '@superset-ui/style';
-import { ReactComponent as CheckboxOnIcon } from 'images/icons/checkbox-on.svg';
-import { ReactComponent as CheckboxOffIcon } from 'images/icons/checkbox-off.svg';
+import { ReactComponent as CancelXIcon } from 'images/icons/cancel-x.svg';
 import { ReactComponent as CheckboxHalfIcon } from 'images/icons/checkbox-half.svg';
-import { ReactComponent as SortIcon } from 'images/icons/sort.svg';
-import { ReactComponent as SortDescIcon } from 'images/icons/sort-desc.svg';
-import { ReactComponent as SortAscIcon } from 'images/icons/sort-asc.svg';
-import { ReactComponent as TrashIcon } from 'images/icons/trash.svg';
-import { ReactComponent as PencilIcon } from 'images/icons/pencil.svg';
+import { ReactComponent as CheckboxOffIcon } from 'images/icons/checkbox-off.svg';
+import { ReactComponent as CheckboxOnIcon } from 'images/icons/checkbox-on.svg';
 import { ReactComponent as CompassIcon } from 'images/icons/compass.svg';
 import { ReactComponent as DatasetPhysicalIcon } from 'images/icons/dataset_physical.svg';
 import { ReactComponent as DatasetVirtualIcon } from 'images/icons/dataset_virtual.svg';
-import { ReactComponent as CancelXIcon } from 'images/icons/cancel-x.svg';
+import { ReactComponent as PencilIcon } from 'images/icons/pencil.svg';
 import { ReactComponent as SearchIcon } from 'images/icons/search.svg';
+import { ReactComponent as SortAscIcon } from 'images/icons/sort-asc.svg';
+import { ReactComponent as SortDescIcon } from 'images/icons/sort-desc.svg';
+import { ReactComponent as SortIcon } from 'images/icons/sort.svg';
+import { ReactComponent as TrashIcon } from 'images/icons/trash.svg';
+import { ReactComponent as WarningIcon } from 'images/icons/warning.svg';
 
 type Icon =
   | 'cancel-x'
@@ -42,25 +43,27 @@ type Icon =
   | 'dataset-virtual'
   | 'pencil'
   | 'search'
+  | 'sort'
   | 'sort-asc'
   | 'sort-desc'
-  | 'sort'
-  | 'trash';
+  | 'trash'
+  | 'warning';
 
 const iconsRegistry: { [key in Icon]: React.ComponentType } = {
   'cancel-x': CancelXIcon,
   'checkbox-half': CheckboxHalfIcon,
   'checkbox-off': CheckboxOffIcon,
   'checkbox-on': CheckboxOnIcon,
-  compass: CompassIcon,
   'dataset-physical': DatasetPhysicalIcon,
   'dataset-virtual': DatasetVirtualIcon,
-  pencil: PencilIcon,
-  search: SearchIcon,
   'sort-asc': SortAscIcon,
   'sort-desc': SortDescIcon,
+  compass: CompassIcon,
+  pencil: PencilIcon,
+  search: SearchIcon,
   sort: SortIcon,
   trash: TrashIcon,
+  warning: WarningIcon,
 };
 interface IconProps extends SVGProps<SVGSVGElement> {
   name: Icon;

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

@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import styled from '@superset-ui/style';
+import DatasetModal from 'src/views/datasetList/DatasetModal';
 import { Button, Nav, Navbar, MenuItem } from 'react-bootstrap';
 
 const StyledHeader = styled.header`
@@ -62,39 +63,48 @@ const StyledHeader = styled.header`
   }
 `;
 
-interface Props {
+interface SubMenuProps {
   createButton: { name: string; url: string | null };
   canCreate: boolean;
   label: string;
   name: string;
   childs: Array<{ label: string; name: string; url: string }>;
 }
 
-interface State {
+interface SubMenuState {
   selectedMenu: string;
+  isModalOpen: boolean;
 }
 
-class SubMenu extends React.PureComponent<Props, State> {
-  state: State = {
+class SubMenu extends React.PureComponent<SubMenuProps, SubMenuState> {
+  state: SubMenuState = {
     selectedMenu: this.props.childs[0] && this.props.childs[0].label,
+    isModalOpen: false,
+  };
+
+  onOpen = () => {
+    this.setState({ isModalOpen: true });
+  };
+
+  onClose = () => {
+    this.setState({ isModalOpen: false });
   };
 
   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.Brand>{this.props.label}</Navbar.Brand>
           </Navbar.Header>
+          <DatasetModal show={this.state.isModalOpen} onHide={this.onClose} />
           <Nav>
-            {childs &&
-              childs.map(child => (
+            {this.props.childs &&
+              this.props.childs.map(child => (
                 <MenuItem
                   active={child.label === this.state.selectedMenu}
                   key={`${child.label}`}
@@ -106,10 +116,10 @@ class SubMenu extends React.PureComponent<Props, State> {
                 </MenuItem>
               ))}
           </Nav>
-          {canCreate && (
+          {this.props.canCreate && (
             <Nav className="navbar-right">
-              <Button href={`${createButton.url}`}>
-                <i className="fa fa-plus" /> {createButton.name}
+              <Button onClick={this.onOpen}>
+                <i className="fa fa-plus" /> {this.props.createButton.name}
               </Button>
             </Nav>
           )}

superset-frontend/src/components/TableSelector.jsx

@@ -17,6 +17,7 @@
  * under the License.
  */
 import React from 'react';
+import styled from '@superset-ui/style';
 import PropTypes from 'prop-types';
 import { Select, AsyncSelect } from 'src/components/Select';
 import { ControlLabel, Label } from 'react-bootstrap';
@@ -27,6 +28,13 @@ import SupersetAsyncSelect from './AsyncSelect';
 import RefreshLabel from './RefreshLabel';
 import './TableSelector.less';
 
+const FieldTitle = styled.p`
+  color: ${({ theme }) => theme.colors.secondary.light2};
+  font-size: ${({ theme }) => theme.typography.sizes.s};
+  margin: 20px 0 10px 0;
+  text-transform: uppercase;
+`;
+
 const propTypes = {
   dbId: PropTypes.number.isRequired,
   schema: PropTypes.string,
@@ -40,6 +48,7 @@ const propTypes = {
   tableName: PropTypes.string,
   database: PropTypes.object,
   sqlLabMode: PropTypes.bool,
+  formMode: PropTypes.bool,
   onChange: PropTypes.func,
   clearable: PropTypes.bool,
   handleError: PropTypes.func.isRequired,
@@ -55,6 +64,7 @@ const defaultProps = {
   onChange: () => {},
   tableNameSticky: true,
   sqlLabMode: true,
+  formMode: false,
   clearable: true,
 };
 
@@ -79,8 +89,10 @@ export default class TableSelector extends React.PureComponent {
   }
 
   componentDidMount() {
-    this.fetchSchemas(this.state.dbId);
-    this.fetchTables();
+    if (this.state.dbId) {
+      this.fetchSchemas(this.state.dbId);
+      this.fetchTables();
+    }
   }
 
   onChange() {
@@ -198,7 +210,10 @@ export default class TableSelector extends React.PureComponent {
     this.props.onSchemaChange(null);
     this.props.onDbChange(db);
     this.fetchSchemas(dbId, force);
-    this.setState({ dbId, schema: null, tableOptions: [] }, this.onChange);
+    this.setState(
+      { dbId, schema: null, tableName: null, tableOptions: [] },
+      this.onChange,
+    );
   }
 
   changeSchema(schemaOpt, force = false) {
@@ -289,6 +304,12 @@ export default class TableSelector extends React.PureComponent {
   }
 
   renderSchema() {
+    const refresh = !this.props.formMode && (
+      <RefreshLabel
+        onClick={() => this.onDatabaseChange({ id: this.props.dbId }, true)}
+        tooltipContent={t('Force refresh schema list')}
+      />
+    );
     return this.renderSelectRow(
       <Select
         name="select-schema"
@@ -304,10 +325,7 @@ export default class TableSelector extends React.PureComponent {
         autosize={false}
         onChange={this.onSchemaChange}
       />,
-      <RefreshLabel
-        onClick={() => this.onDatabaseChange({ id: this.props.dbId }, true)}
-        tooltipContent={t('Force refresh schema list')}
-      />,
+      refresh,
     );
   }
 
@@ -346,15 +364,16 @@ export default class TableSelector extends React.PureComponent {
         value={this.state.tableName}
         loadOptions={this.getTableNamesBySubStr}
         optionRenderer={this.renderTableOption}
+        isDisabled={this.props.formMode}
       />
     );
-    return this.renderSelectRow(
-      select,
+    const refresh = !this.props.formMode && (
       <RefreshLabel
         onClick={() => this.changeSchema({ value: this.props.schema }, true)}
         tooltipContent={t('Force refresh table list')}
-      />,
+      />
     );
+    return this.renderSelectRow(select, refresh);
   }
 
   renderSeeTableLabel() {
@@ -375,10 +394,13 @@ export default class TableSelector extends React.PureComponent {
   render() {
     return (
       <div className="TableSelector">
+        {this.props.formMode && <FieldTitle>{t('datasource')}</FieldTitle>}
         {this.renderDatabaseSelect()}
+        {this.props.formMode && <FieldTitle>{t('schema')}</FieldTitle>}
         {this.renderSchema()}
-        <div className="divider" />
+        {!this.props.formMode && <div className="divider" />}
         {this.props.sqlLabMode && this.renderSeeTableLabel()}
+        {this.props.formMode && <FieldTitle>{t('Table')}</FieldTitle>}
         {this.renderTable()}
       </div>
     );

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

@@ -0,0 +1,67 @@
+/**
+ * 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 BaseButton from 'src/components/Button';
+
+interface ModalProps {
+  children: React.ReactNode;
+  disabled?: boolean;
+  onClick: () => void;
+  padding?: number;
+  bsStyle?: 'default' | 'primary';
+  width?: number;
+}
+
+const StyledButton = styled(BaseButton)`
+  border-radius: ${({ theme }) => theme.borderRadius}px;
+  border: none;
+  padding: ${(props: ModalProps) => props.padding || 8}px;
+  text-transform: uppercase;
+  width: ${(props: ModalProps) => props.width || 160}px;
+
+  &.btn,
+  &.btn:hover {
+    background-color: ${({ theme }) => theme.colors.primary.light4};
+    color: ${({ theme }) => theme.colors.primary.base};
+  }
+  &.btn[disabled],
+  &.btn[disabled]:hover {
+    background-color: ${({ theme }) => theme.colors.grayscale.light2};
+    color: ${({ theme }) => theme.colors.grayscale.light1};
+  }
+  &.btn-primary,
+  &.btn-primary:hover {
+    background-color: ${({ theme }) => theme.colors.primary.base};
+    color: ${({ theme }) => theme.colors.grayscale.light5};
+  }
+`;
+
+export default function Modal({
+  bsStyle = 'default',
+  disabled,
+  onClick,
+  children,
+}: ModalProps) {
+  return (
+    <StyledButton disabled={disabled} bsStyle={bsStyle} onClick={onClick}>
+      {children}
+    </StyledButton>
+  );
+}