From 9d757403be58cba16386f4a55e4c7194abc6881c Mon Sep 17 00:00:00 2001
From: Lily Kuang <lily@preset.io>
Date: Sat, 11 Jul 2020 20:57:54 -0700
Subject: [PATCH] fix: fetch datasets list after dataset created successfully
 (#10290)

---
 .../src/components/Menu/SubMenu.tsx           | 111 +++++++++---------
 .../src/views/datasetList/DatasetList.tsx     |   6 +-
 .../src/views/datasetList/DatasetModal.tsx    |  24 ++--
 3 files changed, 75 insertions(+), 66 deletions(-)

diff --git a/superset-frontend/src/components/Menu/SubMenu.tsx b/superset-frontend/src/components/Menu/SubMenu.tsx
index f565af0fe..5b45ae11a 100644
--- a/superset-frontend/src/components/Menu/SubMenu.tsx
+++ b/superset-frontend/src/components/Menu/SubMenu.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import styled from '@superset-ui/style';
 import DatasetModal from 'src/views/datasetList/DatasetModal';
 import { Button, Nav, Navbar, MenuItem } from 'react-bootstrap';
@@ -64,71 +64,72 @@ const StyledHeader = styled.header`
 `;
 
 interface SubMenuProps {
-  createButton?: { name: string; url: string | null };
   canCreate?: boolean;
-  name: string;
   childs?: Array<{ label: string; name: string; url: string }>;
+  createButton?: { name: string; url: string | null };
+  fetchData?: () => void;
+  name: string;
 }
 
-interface SubMenuState {
-  selectedMenu: string;
-  isModalOpen: boolean;
-}
+const SubMenu = ({
+  canCreate,
+  childs,
+  createButton,
+  fetchData,
+  name,
+}: SubMenuProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedMenu, setSelectedMenu] = useState<string | undefined>(
+    childs?.[0]?.label,
+  );
 
-class SubMenu extends React.PureComponent<SubMenuProps, SubMenuState> {
-  state: SubMenuState = {
-    selectedMenu:
-      this.props.childs && this.props.childs[0]
-        ? this.props.childs[0].label
-        : '',
-    isModalOpen: false,
+  const onOpen = () => {
+    setIsModalOpen(true);
   };
 
-  onOpen = () => {
-    this.setState({ isModalOpen: true });
+  const onClose = () => {
+    setIsModalOpen(false);
   };
 
-  onClose = () => {
-    this.setState({ isModalOpen: false });
+  const handleClick = (item: string) => () => {
+    setSelectedMenu(item);
   };
 
-  handleClick = (item: string) => () => {
-    this.setState({ selectedMenu: item });
-  };
-
-  render() {
-    return (
-      <StyledHeader>
-        <Navbar inverse fluid role="navigation">
-          <Navbar.Header>
-            <Navbar.Brand>{this.props.name}</Navbar.Brand>
-          </Navbar.Header>
-          <DatasetModal show={this.state.isModalOpen} onHide={this.onClose} />
-          <Nav>
-            {this.props.childs &&
-              this.props.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>
-              ))}
+  return (
+    <StyledHeader>
+      <Navbar inverse fluid role="navigation">
+        <Navbar.Header>
+          <Navbar.Brand>{name}</Navbar.Brand>
+        </Navbar.Header>
+        <DatasetModal
+          fetchData={fetchData}
+          onHide={onClose}
+          show={isModalOpen}
+        />
+        <Nav>
+          {childs &&
+            childs.map(child => (
+              <MenuItem
+                active={child.label === selectedMenu}
+                eventKey={`${child.name}`}
+                href={child.url}
+                key={`${child.label}`}
+                onClick={handleClick(child.label)}
+              >
+                {child.label}
+              </MenuItem>
+            ))}
+        </Nav>
+        {canCreate && createButton && (
+          <Nav className="navbar-right">
+            <Button onClick={onOpen}>
+              <i className="fa fa-plus" /> {createButton.name}
+            </Button>
           </Nav>
-          {this.props.canCreate && this.props.createButton && (
-            <Nav className="navbar-right">
-              <Button onClick={this.onOpen}>
-                <i className="fa fa-plus" /> {this.props.createButton.name}
-              </Button>
-            </Nav>
-          )}
-        </Navbar>
-      </StyledHeader>
-    );
-  }
-}
+        )}
+      </Navbar>
+    </StyledHeader>
+  );
+};
 
 export default SubMenu;
diff --git a/superset-frontend/src/views/datasetList/DatasetList.tsx b/superset-frontend/src/views/datasetList/DatasetList.tsx
index cc6fe4620..e6c624829 100644
--- a/superset-frontend/src/views/datasetList/DatasetList.tsx
+++ b/superset-frontend/src/views/datasetList/DatasetList.tsx
@@ -519,7 +519,11 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
 
   return (
     <>
-      <SubMenu {...menu} canCreate={canCreate()} />
+      <SubMenu
+        {...menu}
+        canCreate={canCreate()}
+        fetchData={() => lastFetchDataConfig && fetchData(lastFetchDataConfig)}
+      />
       <ConfirmStatusChange
         title={t('Please confirm')}
         description={t(
diff --git a/superset-frontend/src/views/datasetList/DatasetModal.tsx b/superset-frontend/src/views/datasetList/DatasetModal.tsx
index 0e43d26ec..5dd50f255 100644
--- a/superset-frontend/src/views/datasetList/DatasetModal.tsx
+++ b/superset-frontend/src/views/datasetList/DatasetModal.tsx
@@ -19,16 +19,17 @@
 import React, { FunctionComponent, useState } from 'react';
 import styled from '@superset-ui/style';
 import { SupersetClient } from '@superset-ui/connection';
-import { t } from '@superset-ui/translation';
 import { isEmpty, isNil } from 'lodash';
+import { t } from '@superset-ui/translation';
 import Icon from 'src/components/Icon';
-import TableSelector from 'src/components/TableSelector';
 import Modal from 'src/components/Modal';
+import TableSelector from 'src/components/TableSelector';
 import withToasts from '../../messageToasts/enhancers/withToasts';
 
 interface DatasetModalProps {
   addDangerToast: (msg: string) => void;
   addSuccessToast: (msg: string) => void;
+  fetchData?: () => void;
   onHide: () => void;
   show: boolean;
 }
@@ -47,13 +48,14 @@ const TableSelectorContainer = styled.div`
 const DatasetModal: FunctionComponent<DatasetModalProps> = ({
   addDangerToast,
   addSuccessToast,
+  fetchData,
   onHide,
   show,
 }) => {
-  const [datasourceId, setDatasourceId] = useState<number | null>(null);
-  const [disableSave, setDisableSave] = useState(true);
   const [currentSchema, setSchema] = useState('');
   const [currentTableName, setTableName] = useState('');
+  const [datasourceId, setDatasourceId] = useState<number | null>(null);
+  const [disableSave, setDisableSave] = useState(true);
 
   const onChange = ({
     dbId,
@@ -71,17 +73,19 @@ const DatasetModal: FunctionComponent<DatasetModalProps> = ({
   };
 
   const onSave = () => {
-    const data = {
-      database: datasourceId,
-      schema: currentSchema,
-      table_name: currentTableName,
-    };
     SupersetClient.post({
       endpoint: '/api/v1/dataset/',
-      body: JSON.stringify(data),
+      body: JSON.stringify({
+        database: datasourceId,
+        schema: currentSchema,
+        table_name: currentTableName,
+      }),
       headers: { 'Content-Type': 'application/json' },
     })
       .then(() => {
+        if (fetchData) {
+          fetchData();
+        }
         addSuccessToast(t('The dataset has been saved'));
         onHide();
       })