fix: close pop-up after successful fork operation

Fix #723

src/model/RenkuModels.js

@@ -157,7 +157,8 @@ const projectSchema = new Schema({
   },
   transient: {
     schema: {
-      requests: {initial: {}}
+      requests: {initial: {}},
+      forkModalOpen: {initial: false}
     }
   },
   webhook: {
@@ -203,7 +204,7 @@ const notebooksSchema = new Schema({
       fetching: { initial: false },
       warnings: { initial: [] }
     }
-  },  
+  },
   pipelines: {
     schema: {
       main: { initial: {} },

src/project/Project.js

@@ -334,7 +334,7 @@ class View extends Component {
     const forked = (forkedData != null && Object.keys(forkedData).length > 0) ?
       true :
       false;
-    const forkModalOpen = this.projectState.get('forkModalOpen');
+    const forkModalOpen = this.projectState.get('transient.forkModalOpen');
     const projectPathWithNamespace = this.projectState.get('core.path_with_namespace');
     // Access to the project state could be given to the subComponents by connecting them here to
     // the projectStore. This is not yet necessary.
@@ -438,7 +438,8 @@ class View extends Component {
         projectId={projectId}
         title={this.projectState.get('core.title')}
         forkModalOpen={forkModalOpen}
-        toogleForkModal={this.eventHandlers.toogleForkModal}
+        toggleForkModal={this.eventHandlers.toggleForkModal}
+        closeForkModal={this.eventHandlers.closeForkModal}
         history={this.props.history}
         client={this.props.client}
         user={this.props.user} />
@@ -465,9 +466,14 @@ class View extends Component {
         }
       });
     },
-    toogleForkModal: (e) => {
+    toggleForkModal: (e) => {
       e.preventDefault();
-      this.projectState.toogleForkModal();
+      this.projectState.toggleForkModal();
+    },
+    closeForkModal: () => {
+      // Only toggle if it is currently open
+      if (this.projectState.get('transient.forkModalOpen') === true)
+        this.projectState.toggleForkModal();
     },
     onCreateMergeRequest: (branch) => {
       const core = this.projectState.get('core');
@@ -526,7 +532,7 @@ class View extends Component {
     const suggestedMRBranches = this.getMrSuggestions();
     const externalUrl = this.projectState.get('core.external_url');
     const canCreateMR = state.visibility.accessLevel >= ACCESS_LEVELS.DEVELOPER;
-    const forkModalOpen = this.projectState.get('forkModalOpen');
+    const forkModalOpen = this.projectState.get('transient.forkModalOpen');
 
     return {
       ...this.projectState.get(),

src/project/Project.present.js

@@ -248,7 +248,7 @@ class ProjectViewHeaderOverview extends Component {
               <div className={`fixed-width-6em pr-1`}>
                 <form className="input-group input-group-sm">
                   <div className="input-group-prepend">
-                    <button className="btn btn-outline-primary" onClick={this.props.toogleForkModal}>
+                    <button className="btn btn-outline-primary" onClick={this.props.toggleForkModal}>
                       <FontAwesomeIcon icon={forkIcon} /> {forkButtonText}
                     </button>
                   </div>
@@ -526,7 +526,7 @@ class ProjectDatasetsNav extends Component {
 class ProjectViewDatasets extends Component {
   render(){
     return <Switch>
-        <Route exact path={this.props.newDatasetUrl} 
+        <Route exact path={this.props.newDatasetUrl}
           render={p => this.props.newDataset(p)} />
         <Route path={this.props.datasetsUrl} render={ props =>
           <ProjectViewDatasetsList {...this.props} {...props} />} />
@@ -547,12 +547,12 @@ class ProjectViewDatasetsList extends Component {
     if(!loading && !kgLoading && this.props.core.datasets !== undefined && this.props.core.datasets.length === 0){
       return <Col sm={12} md={8} lg={10}>
         <Alert timeout={0} color="primary">
-					No datasets found for this project. <br /><br /> 
+					No datasets found for this project. <br /><br />
 					<FontAwesomeIcon icon={faInfoCircle} />  If you recently activated the knowledge graph or added the datasets try refreshing the page. <br /><br />
 					You can also click on the button to create a <Link className="btn btn-primary btn-sm" to={this.props.newDatasetUrl}>New Dataset</Link>
         </Alert>
       </Col>;
-    }	    
+    }
 
     return [
       kgLoading ? null
@@ -837,7 +837,7 @@ class ProjectNotebookServers extends Component {
     return (notebookLauncher(this.props.user.id,
       this.props.visibility.accessLevel,
       content,
-      this.props.toogleForkModal,
+      this.props.toggleForkModal,
       this.props.location.pathname,
       this.props.externalUrl));
   }
@@ -860,7 +860,7 @@ class ProjectStartNotebookServer extends Component {
     return (notebookLauncher(this.props.user.id,
       this.props.visibility.accessLevel,
       content,
-      this.props.toggleModalFork,
+      this.props.toggleForkModal,
       this.props.location.pathname,
       this.props.externalUrl));
   }

src/project/Project.state.js

@@ -327,9 +327,10 @@ class ProjectModel extends StateModel {
     });
   }
 
-  toogleForkModal() {
-    let forkModalOpen = this.get('forkModalOpen');
-    this.set("forkModalOpen", forkModalOpen === undefined || forkModalOpen === false ? true : false);
+  toggleForkModal() {
+    const forkModalOpen = this.get('transient.forkModalOpen');
+    const forkModalFlipped = forkModalOpen === false ? true : false;
+    this.set("transient.forkModalOpen", forkModalFlipped);
   }
 
   star(client, starred) {

src/project/fork/ProjectFork.container.js

@@ -41,7 +41,7 @@ class Fork extends Component {
       onProjectNamespaceAccept: this.onProjectNamespaceAccept.bind(this),
       fetchMatchingNamespaces: this.fetchMatchingNamespaces.bind(this),
       fetchAllNamespaces: this.fetchAllNamespaces.bind(this),
-      toogleForkModal: this.toogleForkModal.bind(this),
+      toggleForkModal: this.toggleForkModal.bind(this),
       onTitleChange: this.onTitleChange.bind(this),
       setProjectTitle: this.setProjectTitle.bind(this)
     };
@@ -81,6 +81,7 @@ class Fork extends Component {
 
     this.forkProject.set('display.loading', true);
     this.props.client.forkProject(this.forkProject.get(), this.props.history)
+      .then(result => { this.closeForkModal() })
       .catch(error => {
         let display_messages = [];
         if (error.errorData && error.errorData.message) {
@@ -158,11 +159,18 @@ class Fork extends Component {
     }
   }
 
-  toogleForkModal(e) {
+  toggleForkModal(e) {
     if (this.forkProject.get('display.errors')) {
       this.forkProject.set('display.errors', []);
     }
-    this.props.toogleForkModal(e);
+    this.props.toggleForkModal(e);
+  }
+
+  closeForkModal(e) {
+    if (this.forkProject.get('display.errors')) {
+      this.forkProject.set('display.errors', []);
+    }
+    this.props.closeForkModal(e);
   }
 
   render() {

src/project/fork/ProjectFork.present.js

@@ -197,10 +197,10 @@ class ForkProjectModal extends Component {
     const titleHelp = this.props.model.display.slug.length > 0 ? `Id: ${this.props.model.display.slug}` : null;
     return <div>
       <Modal
-        isOpen={this.props.forkModalOpen !== undefined && this.props.forkModalOpen !== false}
-        toggle={this.props.handlers.toogleForkModal}
+        isOpen={this.props.forkModalOpen === true}
+        toggle={this.props.handlers.toggleForkModal}
         className={this.props.className}>
-        <ModalHeader toggle={this.props.handlers.toogleForkModal}>Fork Project</ModalHeader>
+        <ModalHeader toggle={this.props.handlers.toggleForkModal}>Fork Project</ModalHeader>
         <ModalBody>
           <FieldGroup id="title" type="text" label="Title" placeholder="A brief name to identify the project"
             help={titleHelp} value={this.props.model.display.title}
@@ -227,7 +227,7 @@ class ForkProjectModal extends Component {
           <Button
             color="secondary"
             disabled={this.props.model.display.loading}
-            onClick={this.props.handlers.toogleForkModal}>
+            onClick={this.props.handlers.toggleForkModal}>
             Cancel
           </Button>
         </ModalFooter>