Add initial UI for config changes in desktop GUI

cypress-io · Jan 24, 2019 · deccabe · deccabe
1 parent c223551
commit deccabe
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 2 deletions.
diff --git a/packages/desktop-gui/cypress/integration/warning_message_spec.coffee b/packages/desktop-gui/cypress/integration/warning_message_spec.coffee
@@ -80,3 +80,29 @@ describe "WarningMessage", ->
       .click()
       .then ->
         expect(@ipc.externalOpen).not.to.be.called
+
+  describe "for error type CONFIGURATION_CHANGED", ->
+    beforeEach ->
+      configWarningObj = {
+        type: "CONFIGURATION_CHANGED",
+        name: "Configuration changed",
+        message: "This file was changed: `cypress.json`\nPlease restart Cypress for changes to take effect."
+      }
+
+      cy.shouldBeOnProjectSpecs().then =>
+        @ipc.onProjectWarning.yield(null, configWarningObj)
+
+    it "renders configuration change message with the correct file name", ->
+      cy
+        .contains(".alert-warning", "This file was changed: cypress.json")
+        .contains(".alert-warning", "Please restart Cypress for changes to take effect.")
+
+    it "is not dismissable", ->
+      cy.get(".alert-warning .close").should("not.exist")
+
+    it "can reload the project", ->
+      cy.contains(".alert-warning strong", "Restart")
+        .click()
+        .should =>
+          expect(@ipc.closeProject).to.be.called
+          expect(@ipc.openProject).to.be.called
diff --git a/packages/desktop-gui/src/lib/errors.js b/packages/desktop-gui/src/lib/errors.js
@@ -43,6 +43,10 @@ const errors = {
   isUnknown (err) {
     return _.get(err, 'type') === 'UNKNOWN'
   },
+
+  isConfigurationChanged (err) {
+    return _.get(err, 'type') === 'CONFIGURATION_CHANGED'
+  },
 }
 
 export default errors
diff --git a/packages/desktop-gui/src/project/project.jsx b/packages/desktop-gui/src/project/project.jsx
@@ -46,7 +46,7 @@ class Project extends Component {
         <ProjectNav project={this.props.project}/>
         <div className='project-content'>
           {warning &&
-            <WarningMessage warning={warning} onClearWarning={this._removeWarning}/>
+            <WarningMessage warning={warning} onClearWarning={this._removeWarning} onRestart={this._reopenProject}/>
           }
           {this._currentView()}
         </div>

diff --git a/packages/desktop-gui/src/project/warning-message.jsx b/packages/desktop-gui/src/project/warning-message.jsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { observer } from 'mobx-react'
 import Markdown from 'markdown-it'
 
+import errors from '../lib/errors'
 import ipc from '../lib/ipc'
 
 const md = new Markdown({
@@ -28,7 +29,22 @@ class WarningMessage extends Component {
   }
 
   render () {
-    const warningText = this.props.warning.message.split('\n').join('<br />')
+    const warning = this.props.warning
+    const warningText = warning.message.split('\n').join('<br />')
+
+    if (errors.isConfigurationChanged(warning)) {
+      return (
+        <div className='alert alert-warning'>
+          <div ref={(node) => this.warningMessageNode = node} dangerouslySetInnerHTML={{
+            __html: md.render(warningText),
+          }}></div>
+          <strong onClick={this.props.onRestart}>
+            <i className='fa fa-refresh'></i>{' '}
+            Restart
+          </strong>
+        </div>
+      )
+    }
 
     return (
       <div className='alert alert-warning'>