fix(ui): Runs tab intro (#8141)

Co-authored-by: Gleb Bahmutov <gleb.bahmutov@gmail.com>
cypress-io · Aug 10, 2020 · ef25aa7 · ef25aa7 · cypress-bot · Aug 10, 2020
1 parent 6bb99de
commit ef25aa7
Show file tree

Hide file tree

Showing 13 changed files with 301 additions and 91 deletions.
diff --git a/circle.yml b/circle.yml
@@ -763,12 +763,14 @@ jobs:
           # we can use workflow id and list number of jobs with Percy screenshots
           # if we allow Percy snapshots in more jobs, use the same
           # PERCY_* variables in all of them
+          # NOTE: we only execute specs with "cy.percySnapshot" commands in them
           command: |
             CYPRESS_KONFIG_ENV=production \
             PERCY_PARALLEL_NONCE=$CIRCLE_WORKFLOW_ID \
             PERCY_PARALLEL_TOTAL=1 \
             yarn percy exec -- \
-            yarn cypress:run --spec cypress/integration/settings_spec.js,cypress/integration/specs_list_spec.js
+            yarn cypress:run \
+              --spec cypress/integration/settings_spec.js,cypress/integration/specs_list_spec.js,cypress/integration/runs_list_spec.js
           working_directory: packages/desktop-gui
       - verify-mocha-results
       # we don't really need any artifacts - we are only interested in visual screenshots

diff --git a/packages/desktop-gui/cypress/integration/runs_list_spec.js b/packages/desktop-gui/cypress/integration/runs_list_spec.js
@@ -195,7 +195,7 @@ describe('Runs List', function () {
         })
       })
 
-      it('shows \'cannot connect to api server\' message', function () {
+      it('shows "cannot connect to api server" message', function () {
         cy.contains('Cannot connect to API server')
         cy.contains('http://api.server')
         cy.contains('ECONNREFUSED')
@@ -327,8 +327,8 @@ describe('Runs List', function () {
       this.goToRuns()
     })
 
-    it('displays \'need to set up\' message', () => {
-      cy.contains('You have no recorded runs')
+    it('displays "need to set up" message', () => {
+      cy.contains('You could see test recordings here')
     })
   })
 
@@ -342,13 +342,13 @@ describe('Runs List', function () {
       this.goToRuns()
     })
 
-    it('displays \'need to set up\' message', () => {
-      cy.contains('You have no recorded runs')
+    it('displays "need to set up" message', () => {
+      cy.contains('You could see test recordings here')
     })
 
     describe('click setup project', function () {
       beforeEach(() => {
-        cy.contains('Set up project').click()
+        cy.contains('Connect to Dashboard').click()
       })
 
       it('shows login message', () => {
@@ -439,10 +439,10 @@ describe('Runs List', function () {
         cy.contains('Request access')
       })
 
-      it('displays \'need to set up\' message', function () {
+      it('displays "need to set up" message', function () {
         this.ipcError({ type: 'NO_PROJECT_ID' })
 
-        cy.contains('You have no recorded runs')
+        cy.contains('You could see test recordings here')
       })
 
       it('displays old runs if another error', function () {
@@ -541,7 +541,7 @@ describe('Runs List', function () {
             cy.get('@requestAccessBtn').should('be.disabled')
           })
 
-          it('hides \'Request access\' text', () => {
+          it('hides "Request access" text', () => {
             cy.get('@requestAccessBtn').find('span').should('not.be.visible')
           })
 
@@ -558,7 +558,7 @@ describe('Runs List', function () {
               cy.contains('Request sent')
             })
 
-            it('\'persists\' request state (until app is reloaded at least)', function () {
+            it('persists request state (until app is reloaded at least)', function () {
               this.ipc.getRuns.onCall(1).rejects({ name: 'foo', message: 'There\'s an error', statusCode: 403 })
 
               cy.get('.navbar-default a').contains('Tests').click()
@@ -613,7 +613,7 @@ describe('Runs List', function () {
                 cy.get('@requestAccessBtn').should('not.be.disabled')
               })
 
-              it('shows \'Request access\' text', () => {
+              it('shows "Request access" text', () => {
                 cy.get('@requestAccessBtn').find('span').should('be.visible')
               })
 
@@ -627,7 +627,7 @@ describe('Runs List', function () {
                 this.requestAccess.reject({ type: 'DENIED', name: 'foo', message: 'There\'s an error' })
               })
 
-              it('shows \'success\' message', () => {
+              it('shows "success" message', () => {
                 cy.contains('Request sent')
               })
             })
@@ -637,7 +637,7 @@ describe('Runs List', function () {
                 this.requestAccess.reject({ type: 'ALREADY_REQUESTED', name: 'foo', message: 'There\'s an error' })
               })
 
-              it('shows \'success\' message', () => {
+              it('shows "success" message', () => {
                 cy.contains('Request sent')
               })
             })
@@ -653,6 +653,7 @@ describe('Runs List', function () {
 
               it('shows login message', () => {
                 cy.get('.empty h4').should('contain', 'Log in')
+                cy.percySnapshot()
               })
 
               it('clicking Log In to Dashboard opens login', () => {
@@ -723,12 +724,13 @@ describe('Runs List', function () {
         })
       })
 
-      it('displays \'need to set up\' message', () => {
-        cy.contains('You have no recorded runs')
+      it('displays "need to set up" message', () => {
+        cy.contains('You could see test recordings here')
+        cy.percySnapshot()
       })
 
-      it('clears message after setting up to record', function () {
-        cy.contains('.btn', 'Set up project').click()
+      it('clears message after setting up to record', () => {
+        cy.contains('.btn', 'Connect to Dashboard').click()
         cy.get('.organizations-select__dropdown-indicator').click()
         cy.get('.organizations-select__menu').should('be.visible')
         cy.get('.organizations-select__option')
@@ -747,11 +749,7 @@ describe('Runs List', function () {
         this.openProject.resolve(this.config)
 
         this.goToRuns().then(() => {
-          this.getRuns.reject({ name: 'foo', message: `\
-{
-  "no runs": "for you"
-}\
-`, type: 'UNKNOWN' })
+          this.getRuns.reject({ name: 'foo', message: `{"no runs": "for you"}`, type: 'UNKNOWN' })
         })
       })
 
@@ -824,8 +822,8 @@ describe('Runs List', function () {
           })
         })
 
-        it('displays \'need to set up\' message', () => {
-          cy.contains('You have no recorded runs')
+        it('displays "need to set up" message', () => {
+          cy.contains('You could see test recordings here')
         })
       })
     })
@@ -843,14 +841,14 @@ describe('Runs List', function () {
         cy.contains('To record your first')
       })
 
-      it('opens project id guide on clicking \'Why?\'', () => {
+      it('opens project id guide on clicking "Why?"', () => {
         cy.contains('Why?').click()
         .then(function () {
           expect(this.ipc.externalOpen).to.be.calledWith('https://on.cypress.io/what-is-a-project-id')
         })
       })
 
-      it('opens dashboard on clicking \'Cypress Dashboard\'', () => {
+      it('opens dashboard on clicking "Cypress Dashboard"', () => {
         cy.contains('Cypress Dashboard').click()
         .then(function () {
           expect(this.ipc.externalOpen).to.be.calledWith(`https://on.cypress.io/dashboard/projects/${this.config.projectId}/runs`)

diff --git a/packages/desktop-gui/cypress/integration/setup_project_modal_spec.js b/packages/desktop-gui/cypress/integration/setup_project_modal_spec.js
@@ -1,4 +1,4 @@
-describe('Set Up Project', function () {
+describe('Connect to Dashboard', function () {
   beforeEach(function () {
     cy.fixture('user').as('user')
     cy.fixture('projects').as('projects')
@@ -46,8 +46,8 @@ describe('Set Up Project', function () {
     })
   })
 
-  it('displays \'need to set up\' message', () => {
-    cy.contains('You have no recorded runs')
+  it('displays "need to set up" message', () => {
+    cy.contains('You could see test recordings here')
   })
 
   describe('when there is a current user', function () {
@@ -59,7 +59,7 @@ describe('Set Up Project', function () {
       beforeEach(function () {
         this.getOrgs.resolve(this.orgs)
 
-        cy.get('.btn').contains('Set up project').click()
+        cy.get('.btn').contains('Connect to Dashboard').click()
       })
 
       it('clicking link opens setup project window', () => {
@@ -90,7 +90,7 @@ describe('Set Up Project', function () {
 
     describe('loading behavior', function () {
       beforeEach(function () {
-        cy.get('.btn').contains('Set up project').click()
+        cy.get('.btn').contains('Connect to Dashboard').click()
       })
 
       it('calls getOrgs', function () {
@@ -111,7 +111,7 @@ describe('Set Up Project', function () {
         beforeEach(function () {
           this.getOrgs.resolve(this.orgs)
 
-          cy.get('.btn').contains('Set up project').click()
+          cy.get('.btn').contains('Connect to Dashboard').click()
           cy.get('.modal-content')
           cy.get('.organizations-select__dropdown-indicator').click()
           cy.get('.organizations-select__menu').should('be.visible')
@@ -135,7 +135,7 @@ describe('Set Up Project', function () {
       context('with orgs', function () {
         beforeEach(function () {
           this.getOrgs.resolve(this.orgs)
-          cy.get('.btn').contains('Set up project').click()
+          cy.get('.btn').contains('Connect to Dashboard').click()
 
           cy.get('.modal-content')
         })
@@ -176,7 +176,7 @@ describe('Set Up Project', function () {
       context('orgs with no default org', function () {
         beforeEach(function () {
           this.getOrgs.resolve(Cypress._.filter(this.orgs, { 'default': false }))
-          cy.get('.btn').contains('Set up project').click()
+          cy.get('.btn').contains('Connect to Dashboard').click()
         })
 
         it('lists organizations to assign to project', function () {
@@ -212,7 +212,7 @@ describe('Set Up Project', function () {
       context('without orgs', function () {
         beforeEach(function () {
           this.getOrgs.resolve([])
-          cy.get('.btn').contains('Set up project').click()
+          cy.get('.btn').contains('Connect to Dashboard').click()
         })
 
         it('displays empty message', () => {
@@ -236,7 +236,7 @@ describe('Set Up Project', function () {
             'default': true,
           }])
 
-          cy.get('.btn').contains('Set up project').click()
+          cy.get('.btn').contains('Connect to Dashboard').click()
           cy.get('.modal-content')
         })
 
@@ -264,7 +264,7 @@ describe('Set Up Project', function () {
         beforeEach(function () {
           cy.clock()
           this.getOrgs.resolve(this.orgs)
-          cy.get('.btn').contains('Set up project').click()
+          cy.get('.btn').contains('Connect to Dashboard').click()
         })
 
         it('polls for orgs twice in 10+sec on click of org', function () {
@@ -308,7 +308,7 @@ describe('Set Up Project', function () {
     describe('on submit', function () {
       beforeEach(function () {
         this.getOrgs.resolve(this.orgs)
-        cy.contains('.btn', 'Set up project').click()
+        cy.contains('.btn', 'Connect to Dashboard').click()
         cy.get('.organizations-select__dropdown-indicator').click()
         cy.get('.organizations-select__menu').should('be.visible')
         cy.get('.organizations-select__option')
@@ -343,7 +343,7 @@ describe('Set Up Project', function () {
           orgId: '000',
         })
 
-        cy.contains('.btn', 'Set up project').click()
+        cy.contains('.btn', 'Connect to Dashboard').click()
       })
 
       it('sends project name, org id, and public flag to ipc event', function () {
@@ -450,7 +450,7 @@ describe('Set Up Project', function () {
     describe('errors', function () {
       beforeEach(function () {
         this.getOrgs.resolve(this.orgs)
-        cy.contains('.btn', 'Set up project').click()
+        cy.contains('.btn', 'Connect to Dashboard').click()
         cy.get('.organizations-select__dropdown-indicator').click()
         cy.get('.organizations-select__menu').should('be.visible')
         cy.get('.organizations-select__option')
@@ -471,12 +471,7 @@ describe('Set Up Project', function () {
       it('displays error name and message when unexpected', function () {
         this.setupDashboardProject.reject({
           name: 'Fatal Error!',
-          message: `\
-{
-  "system": "down",
-  "toxicity": "of the city"
-}\
-`,
+          message: `{ "system": "down", "toxicity": "of the city" }`,
         })
 
         cy.contains('"system": "down"')
@@ -485,7 +480,7 @@ describe('Set Up Project', function () {
 
     describe('when get orgs 401s', function () {
       beforeEach(function () {
-        cy.contains('.btn', 'Set up project').click()
+        cy.contains('.btn', 'Connect to Dashboard').click()
         .then(() => {
           this.getOrgs.reject({ name: '', message: '', statusCode: 401 })
         })
@@ -501,7 +496,7 @@ describe('Set Up Project', function () {
     beforeEach(function () {
       this.getCurrentUser.resolve(null)
 
-      cy.get('.btn').contains('Set up project').click()
+      cy.get('.btn').contains('Connect to Dashboard').click()
     })
 
     it('shows login', () => {
@@ -511,7 +506,7 @@ describe('Set Up Project', function () {
     it('closes login modal', () => {
       cy.get('.modal').contains('Log In to Dashboard')
       cy.get('.close').click()
-      cy.get('.btn').contains('Set up project').click()
+      cy.get('.btn').contains('Connect to Dashboard').click()
     })
 
     describe('when login succeeds', function () {

diff --git a/packages/desktop-gui/src/auth/login-form.jsx b/packages/desktop-gui/src/auth/login-form.jsx
@@ -25,7 +25,7 @@ class LoginForm extends Component {
       <div className='login-content'>
         {this._error()}
         <button
-          className={cs('btn btn-login btn-black btn-block', {
+          className={cs('btn btn-login btn-primary btn-wide', {
             disabled: this.state.isLoggingIn,
           })}
           onClick={this._login}

diff --git a/packages/desktop-gui/src/auth/login.scss b/packages/desktop-gui/src/auth/login.scss
@@ -51,10 +51,6 @@
     width: 250px;
   }
 
-  a {
-    color: $brand-primary;
-  }
-
   .message {
     color: #666;
     line-height: 1.5em;
@@ -69,16 +65,17 @@
   }
 
   .terms {
-    color: #aaa;
-    font-size: 0.9em;
-    line-height: 1.5em;
+    font-size: 11px;
+    margin-top: 10px;
+    color: #272B2F;
+    font-weight: 200;
 
     a {
-      color: #aaa;
+      color: #272B2F;
       border-bottom: 1px solid #ddd;
 
       &:hover, &:focus, &:active {
-        color: #888;
+        color: #272B2F;
         border-bottom: 1px solid #888;
         text-decoration: none;
       }