Properly close login modal during project setup (#5647)

* write failing test for login modal not closing during project setup

* add closeLogin, openLogin to authStore

* update test to click Continue before setup can proceed

* add event listeners to fix this strange modal flow

Author: jennifer-shehane

packages/desktop-gui/cypress/integration/setup_project_modal_spec.js

@@ -447,13 +447,20 @@ describe('Set Up Project', function () {
       cy.get('.modal').contains('Log In to Dashboard')
     })
 
+    it('closes login modal', () => {
+      cy.get('.modal').contains('Log In to Dashboard')
+      cy.get('.close').click()
+      cy.get('.btn').contains('Set up project').click()
+    })
+
     describe('when login succeeds', function () {
       beforeEach(function () {
         cy.stub(this.ipc, 'beginAuth').resolves(this.user)
         cy.contains('button', 'Log In to Dashboard').click()
       })
 
       it('shows setup', () => {
+        cy.get('.login-content > .btn').click()
         cy.contains('h4', 'Set up project')
       })
     })

packages/desktop-gui/src/app/nav.jsx

@@ -127,7 +127,7 @@ export default class Nav extends Component {
   }
 
   _showLogin () {
-    authStore.setShowingLogin(true)
+    authStore.openLogin()
   }
 
   _openDocs (e) {

packages/desktop-gui/src/auth/auth-store.js

@@ -19,9 +19,20 @@ class AuthStore {
     this.message = message
   }
 
-  @action setShowingLogin (isShowing) {
+  @action openLogin (onCloseCb) {
+    this.onCloseCb = onCloseCb
+
+    this.setMessage(null)
+    this.isShowingLogin = true
+  }
+
+  @action closeLogin () {
+    if (this.onCloseCb) {
+      this.onCloseCb(this.isAuthenticated)
+    }
+
     this.setMessage(null)
-    this.isShowingLogin = isShowing
+    this.isShowingLogin = false
   }
 
   @action setUser (user) {

packages/desktop-gui/src/auth/login-modal.jsx

@@ -8,7 +8,7 @@ import authStore from './auth-store'
 import ipc from '../lib/ipc'
 
 const close = () => {
-  authStore.setShowingLogin(false)
+  authStore.closeLogin()
 }
 
 // LoginContent is a separate component so that it pings the api

packages/desktop-gui/src/runs/project-not-setup.jsx

@@ -6,6 +6,7 @@ import BootstrapModal from 'react-bootstrap-modal'
 import ipc from '../lib/ipc'
 import { configFileFormatted } from '../lib/config-file-formatted'
 import SetupProject from './setup-project-modal'
+import authStore from '../auth/auth-store'
 
 @observer
 export default class ProjectNotSetup extends Component {
@@ -92,6 +93,22 @@ export default class ProjectNotSetup extends Component {
   _projectSetup () {
     if (!this.state.setupProjectModalOpen) return null
 
+    if (!this.props.isAuthenticated) {
+      authStore.openLogin((isAuthenticated) => {
+        if (!isAuthenticated) {
+          // auth was canceled, cancel project setup too
+          this.setState({ setupProjectModalOpen: false })
+        }
+      })
+
+      return null
+    }
+
+    if (this.props.isShowingLogin) {
+      // login dialog still open, wait for it to close before proceeding
+      return null
+    }
+
     return (
       <SetupProject
         project={this.props.project}

packages/desktop-gui/src/runs/runs-list.jsx

@@ -290,6 +290,8 @@ class RunsList extends Component {
   _projectNotSetup (isValid = true) {
     return (
       <ProjectNotSetup
+        isAuthenticated={authStore.isAuthenticated}
+        isShowingLogin={authStore.isShowingLogin}
         project={this.props.project}
         isValid={isValid}
         onSetup={this._setProjectDetails}

packages/desktop-gui/src/runs/setup-project-modal.jsx

@@ -70,7 +70,7 @@ class SetupProject extends Component {
 
   render () {
     if (!authStore.isAuthenticated) {
-      authStore.setShowingLogin(true)
+      authStore.openLogin()
 
       return null
     }

packages/desktop-gui/src/settings/record-key.jsx

@@ -22,7 +22,7 @@ const openRecordKeyGuide = (e) => {
 }
 
 const showLogin = () => {
-  authStore.setShowingLogin(true)
+  authStore.openLogin()
 }
 
 @observer