Adjust Workflow Selection Logic (#84)

* Adjust Workflow Selection Logic

* Clean Up Code for Final Review

* Reintroduce Popup and Set Focus with Dialog Opening

src/components/App.jsx

@@ -38,6 +38,8 @@ class App extends React.Component {
           </Switch>
         </section>
 
+        {this.props.popup}
+
         <div className="grommet">
           <ZooFooter />
         </div>
@@ -51,16 +53,19 @@ App.propTypes = {
   initializerReady: PropTypes.bool,
   location: PropTypes.shape({
     pathname: PropTypes.string
-  })
+  }),
+  popup: PropTypes.node
 };
 
 App.defaultProps = {
   initializerReady: false,
-  location: {}
+  location: {},
+  popup: null
 };
 
 const mapStateToProps = state => ({
-  initializerReady: state.initialize.ready
+  initializerReady: state.initialize.ready,
+  popup: state.dialog.popup
 });
 
 export default connect(mapStateToProps)(App);

src/components/Dialog.jsx

@@ -13,6 +13,10 @@ class Dialog extends React.Component {
     this.moveToFront = this.moveToFront.bind(this);
   }
 
+  componentDidMount() {
+    this.moveToFront();
+  }
+
   onClose() {
     if (this.props.isAnnotation) {
       this.props.dispatch(toggleAnnotation(null));

src/components/ProjectHeader.jsx

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import { getTranslate, getActiveLanguage } from 'react-localize-redux';
 
 import { config } from '../config.js';
-import WorkflowDropdown from './WorkflowDropdown';
+import WorkflowSelection from './WorkflowSelection';
 
 import { setLanguage, LANGUAGES } from '../ducks/languages';
 import { toggleSelection } from '../ducks/workflow';
@@ -68,7 +68,7 @@ class ProjectHeader extends React.Component {
                 {this.props.translate('topNav.transcribe')}
               </button>
               {this.props.showWorkflows && (
-                <WorkflowDropdown />
+                <WorkflowSelection showAllWorkflows={false} />
               )}
               <a
                 className="project-header__link"

src/components/SelectedAnnotation.jsx

@@ -62,6 +62,9 @@ class SelectedAnnotation extends React.Component {
     let text = '';
     if (this.props.selectedAnnotation.details) {
       text = this.props.selectedAnnotation.details[0].value;
+      if (text.length) {
+        this.setState({ disableSubmit: false });
+      }
     }
     this.inputText.value = text;
     this.inputText.focus();

src/components/StartNewWorkConfirmation.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import QuestionPrompt from './QuestionPrompt';
+import WorkflowPrompt from './WorkflowPrompt';
+import { toggleSelection } from '../ducks/workflow';
+import { togglePopup } from '../ducks/dialog';
+import { WorkInProgress } from '../ducks/work-in-progress';
+
+class StartNewWorkConfirmation extends React.Component {
+  constructor() {
+    super();
+
+    this.startNewWork = this.startNewWork.bind(this);
+    this.continueWork = this.continueWork.bind(this);
+  }
+
+  proceedToClassifier() {
+    this.props.dispatch(toggleSelection(false));
+    this.props.dispatch(togglePopup(null));
+    this.props.history.push('/classify');
+    window.scrollTo(0, 0);
+  }
+
+  startNewWork() {
+    if (this.props.user && WorkInProgress.check(this.props.user)) {
+      this.props.dispatch(WorkInProgress.clear());
+    }
+    this.proceedToClassifier();
+    this.props.dispatch(togglePopup(<WorkflowPrompt />));
+  }
+
+  continueWork() {
+    if (this.props.user && WorkInProgress.check(this.props.user)) {
+      this.props.dispatch(WorkInProgress.load());
+    }
+    this.proceedToClassifier();
+  }
+
+  render() {
+    return (
+      <QuestionPrompt
+        confirm="Yes, start a new page"
+        deny="No, continue saved work"
+        onConfirm={this.startNewWork}
+        onDeny={this.continueWork}
+        question="Are you sure you want to start a new workflow? This will delete any saved work you may have."
+        title="Start new Work?"
+      />
+    );
+  }
+}
+
+StartNewWorkConfirmation.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+  history: PropTypes.shape({
+    push: PropTypes.func
+  }).isRequired,
+  user: PropTypes.shape({
+    id: PropTypes.string
+  })
+};
+
+StartNewWorkConfirmation.defaultProps = {
+  user: null
+};
+
+const mapStateToProps = state => {
+  const user = state.login.user;
+  const userHasWorkInProgress = user && WorkInProgress.check(user);
+
+  return {
+    activeAnnotationExists: (!!state.workflow.data && !!state.subject.currentSubject) || userHasWorkInProgress,
+    user: state.login.user
+  };
+};
+
+export default connect(mapStateToProps)(withRouter(StartNewWorkConfirmation));

src/components/WorkInProgressPopup.jsx

@@ -6,33 +6,25 @@ import { getTranslate } from 'react-localize-redux';
 import { togglePopup } from '../ducks/dialog';
 import { WorkInProgress } from '../ducks/work-in-progress';
 
+import StartNewWorkConfirmation from './StartNewWorkConfirmation';
+
 class WorkInProgressPopup extends React.Component {
   constructor() {
     super();
 
-    this.closePopup = this.closePopup.bind(this);
     this.resumeWorkInProgress = this.resumeWorkInProgress.bind(this);
-    this.startNewWork = this.startNewWork.bind(this);
+    this.newWorkPrompt = this.newWorkPrompt.bind(this);
   }
 
-  closePopup() {
-    this.props.dispatch(togglePopup(null));
-  }
-
   resumeWorkInProgress() {
     this.props.dispatch(WorkInProgress.load());
-    this.closePopup();
+    this.props.dispatch(togglePopup(null));
   }
-
-  startNewWork() {
-    this.props.dispatch(WorkInProgress.clear());
-    this.closePopup();
-
-    //HACK  //TODO
-    //Due to the new workflow selection feature, we need to trigger a series of
-    //refreshes to allow the Classifier page to show the WorkflowDropdown
-    //module. This requires a more elegant solution.
-    window.location.reload();
+
+  newWorkPrompt() {
+    this.props.dispatch(togglePopup(
+      <StartNewWorkConfirmation />
+    ));
   }
 
   render() {
@@ -48,8 +40,18 @@ class WorkInProgressPopup extends React.Component {
               </p>
             </div>
             <div className="work-in-progress-popup__controls">
-              <button className="button" onClick={this.startNewWork}>{this.props.translate('workInProgress.startNewWork')}</button>
-              <button className="button button__dark" onClick={this.resumeWorkInProgress}>{this.props.translate('workInProgress.resumeWorkInProgress')}</button>
+              <button
+                className="button"
+                onClick={this.newWorkPrompt}
+              >
+                {this.props.translate('workInProgress.startNewWork')}
+              </button>
+              <button
+                className="button button__dark"
+                onClick={this.resumeWorkInProgress}
+              >
+                {this.props.translate('workInProgress.resumeWorkInProgress')}
+              </button>
             </div>
           </div>
         </div>
@@ -59,13 +61,12 @@ class WorkInProgressPopup extends React.Component {
 }
 
 WorkInProgressPopup.propTypes = {
-  dispatch: PropTypes.func,
-  translate: PropTypes.func,
+  dispatch: PropTypes.func.isRequired,
+  translate: PropTypes.func
 };
 
 WorkInProgressPopup.defaultProps = {
-  dispatch: () => {},
-  translate: () => {},
+  translate: () => {}
 };
 
 const mapStateToProps = (state) => {

src/components/WorkflowPrompt.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import WorkflowDropdown from './WorkflowDropdown';
+import WorkflowSelection from './WorkflowSelection';
 
 const WorkflowPrompt = () => {
   return (
@@ -9,7 +9,7 @@ const WorkflowPrompt = () => {
           <span>Choose a Workflow</span>
           <hr className="plum-line" />
         </div>
-        <WorkflowDropdown className="workflow-prompt-popup" />
+        <WorkflowSelection className="workflow-prompt-popup" />
       </div>
     </div>
   );