Fix more Desktop GUI layout issues (cypress-io#4914)

chrisbreiding · web-flow · commit 48816c6eba1b · 2019-08-08T15:11:46.000-04:00
* fix warning message layout issue

* ensure footer is at bottom when project error displayed

* fix warning about autoFocus
diff --git a/packages/desktop-gui/cypress/integration/error_message_spec.js b/packages/desktop-gui/cypress/integration/error_message_spec.js
@@ -1,4 +1,4 @@
-describe('ErrorMessage', function () {
+describe('Error Message', function () {
   beforeEach(function () {
     this.err = {
       message: 'Port 2020 is already in use.',
@@ -182,4 +182,15 @@ describe('ErrorMessage', function () {
       expect(this.ipc.externalOpen).to.not.be.called
     })
   })
+
+  it('footer is at bottom when error is displayed (issue #4912)', function () {
+    this.ipc.openProject.rejects(this.err)
+    this.start()
+
+    cy.get('footer').invoke('position').then(({ top }) => {
+      cy.get('footer').invoke('outerHeight').then((height) => {
+        expect(top).to.equal(Cypress.config('viewportHeight') - height)
+      })
+    })
+  })
 })
diff --git a/packages/desktop-gui/cypress/integration/project_mode_spec.js b/packages/desktop-gui/cypress/integration/project_mode_spec.js
@@ -27,7 +27,11 @@ describe('Project Mode', function () {
     this.ipc.openProject.resolves(openProject.promise)
     this.start()
 
-    cy.get('footer').invoke('position').its('top').should('be.gt', 50)
+    cy.get('footer').invoke('position').then(({ top }) => {
+      cy.get('footer').invoke('outerHeight').then((height) => {
+        expect(top).to.equal(Cypress.config('viewportHeight') - height)
+      })
+    })
   })
 
   describe('when specs load', function () {
diff --git a/packages/desktop-gui/cypress/integration/warning_message_spec.js b/packages/desktop-gui/cypress/integration/warning_message_spec.js
@@ -1,4 +1,4 @@
-describe('WarningMessage', function () {
+describe('Warning Message', function () {
   beforeEach(function () {
     cy.fixture('specs').as('specs')
     this.warningObj = {
@@ -124,6 +124,14 @@ describe('WarningMessage', function () {
     })
   })
 
+  it('displays warning above specs (issue #4912)', function () {
+    cy.shouldBeOnProjectSpecs().then(() => {
+      this.ipc.onProjectWarning.yield(null, this.warningObj)
+    })
+
+    cy.get('.specs').invoke('position').its('top').should('gt', 100)
+  })
+
   context('with multiple warnings', function () {
     beforeEach(function () {
       this.warningObj2 = {
diff --git a/packages/desktop-gui/src/project/error-message.jsx b/packages/desktop-gui/src/project/error-message.jsx
@@ -56,32 +56,34 @@ class ErrorMessage extends Component {
     let err = this.props.error
 
     return (
-      <div className='full-alert alert alert-danger error'>
-        <p className='header'>
-          <i className='fa fa-warning'></i>{' '}
-          <strong>{err.title || 'Can\'t start server'}</strong>
-        </p>
-        <span className='alert-content'>
-          <div ref={(node) => this.errorMessageNode = node} dangerouslySetInnerHTML={{
-            __html: md.render(err.message),
-          }}></div>
-          {err.details && (
-            <ErrorDetails err={err} />
-          )}
-          {err.portInUse && (
-            <div>
-              <hr />
-              <p>To fix, stop the other running process or change the port in <code>cypress.json</code></p>
-            </div>
-          )}
-        </span>
-        <button
-          className='btn btn-default btn-sm'
-          onClick={this.props.onTryAgain}
-        >
-          <i className='fa fa-refresh'></i>{' '}
-          Try Again
-        </button>
+      <div className='full-alert-container'>
+        <div className='full-alert alert alert-danger error'>
+          <p className='header'>
+            <i className='fa fa-warning'></i>{' '}
+            <strong>{err.title || 'Can\'t start server'}</strong>
+          </p>
+          <span className='alert-content'>
+            <div ref={(node) => this.errorMessageNode = node} dangerouslySetInnerHTML={{
+              __html: md.render(err.message),
+            }}></div>
+            {err.details && (
+              <ErrorDetails err={err} />
+            )}
+            {err.portInUse && (
+              <div>
+                <hr />
+                <p>To fix, stop the other running process or change the port in <code>cypress.json</code></p>
+              </div>
+            )}
+          </span>
+          <button
+            className='btn btn-default btn-sm'
+            onClick={this.props.onTryAgain}
+          >
+            <i className='fa fa-refresh'></i>{' '}
+            Try Again
+          </button>
+        </div>
       </div>
     )
   }
diff --git a/packages/desktop-gui/src/project/project.scss b/packages/desktop-gui/src/project/project.scss
@@ -1,5 +1,6 @@
 .project-content {
   display: flex;
+  flex-direction: column;
   flex-grow: 2;
   margin-bottom: 0;
   width: 100%;
diff --git a/packages/desktop-gui/src/runs/setup-project-modal.jsx b/packages/desktop-gui/src/runs/setup-project-modal.jsx
@@ -141,7 +141,7 @@ class SetupProject extends Component {
         </div>
         <div>
           <input
-            autoFocus='true'
+            autoFocus={true}
             ref='projectName'
             type='text'
             className='form-control'
diff --git a/packages/desktop-gui/src/styles/components/_alerts.scss b/packages/desktop-gui/src/styles/components/_alerts.scss
@@ -37,11 +37,17 @@
   }
 }
 
+.full-alert-container {
+  align-items: center;
+  display: flex;
+  flex-grow: 2;
+  justify-content: center;
+}
+
 .full-alert {
   overflow: auto;
   text-align: center;
   padding: 20px;
-  margin: 80px 60px 60px;
 
   .alert-content {
     text-align: left;
@@ -76,12 +82,14 @@
 }
 
 .project-content .alert-warning {
-  position: relative;
   border-bottom: 1px solid #ddd;
+  flex-grow: 0;
+  flex-shrink: 0;
+  position: relative;
 
   code, pre {
-    color: #8a6d3b;
     border: none;
+    color: #8a6d3b;
   }
 }
 
