extract out ui-components dropdown (#6452)

* extract out ui-components dropdown

Co-authored-by: Chris Breiding <chrisbreiding@gmail.com>

* yarn.lock changes

* fix issues with desktop-gui dropdown

* use ui-components dropdown in runner no-automation

* fix desktop-gui user dropdown

* fix tests

Co-authored-by: Chris Breiding <chrisbreiding@users.noreply.github.com>

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

@@ -96,9 +96,7 @@ describe('Login', function () {
           })
 
           it('displays username in UI', function () {
-            cy.get('nav a').should(function ($a) {
-              expect($a).to.contain(this.user.name)
-            })
+            cy.get('.user-dropdown .dropdown-chosen').should('contain', this.user.name)
           })
 
           it('displays username in success dialog', () => {
@@ -117,22 +115,22 @@ describe('Login', function () {
 
             context('log out', function () {
               it('displays login button on logout', () => {
-                cy.get('nav a').contains('Jane').click()
+                cy.get('.user-dropdown .dropdown-chosen').contains('Jane').click()
 
                 cy.contains('Log Out').click()
                 cy.get('.nav').contains('Log In')
               })
 
               it('calls log:out', function () {
-                cy.get('nav a').contains('Jane').click()
+                cy.get('.user-dropdown .dropdown-chosen').contains('Jane').click()
 
                 cy.contains('Log Out').click().then(function () {
                   expect(this.ipc.logOut).to.be.called
                 })
               })
 
               it('has login button enabled when returning to login after logout', function () {
-                cy.get('nav a').contains('Jane').click()
+                cy.get('.user-dropdown .dropdown-chosen').contains('Jane').click()
                 cy.contains('Log Out').click()
                 cy.contains('Log In').click()
 

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

@@ -61,7 +61,7 @@ describe('Navigation', function () {
     })
 
     it('displays user name', () => {
-      cy.get('nav a').should(function ($a) {
+      cy.get('.user-dropdown .dropdown-chosen').should(function ($a) {
         expect($a).to.contain(this.user.name)
       })
     })
@@ -121,7 +121,7 @@ describe('Navigation', function () {
     })
 
     it('displays email instead of name', () => {
-      cy.get('nav a').should(function ($a) {
+      cy.get('.user-dropdown .dropdown-chosen').should(function ($a) {
         expect($a).to.contain(this.user.email)
       })
     })

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

@@ -1,5 +1,6 @@
 import { observer } from 'mobx-react'
 import React, { Component } from 'react'
+import { Dropdown } from '@packages/ui-components'
 
 import appStore from '../lib/app-store'
 import authApi from '../auth/auth-api'
@@ -9,8 +10,6 @@ import ipc from '../lib/ipc'
 import { gravatarUrl } from '../lib/utils'
 import { Link, routes } from '../lib/routing'
 
-import Dropdown from '../dropdown/dropdown'
-
 @observer
 export default class Nav extends Component {
   render () {
@@ -87,7 +86,7 @@ export default class Nav extends Component {
 
     return (
       <Dropdown
-        className='dropdown-toggle'
+        className='user-dropdown'
         chosen={{ id: 'user' }}
         others={[{ id: 'logout' }]}
         onSelect={this._select}

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

@@ -129,8 +129,8 @@
   }
 
   .nav {
-    > .open {
-      > a, > a:hover, > a:focus {
+    .dropdown-chosen {
+      &:hover, &:focus {
         background-color: #111;
         color: #fff;
       }
@@ -140,6 +140,13 @@
       font-size: 12px;
     }
 
+    .dropdown-menu > li {
+      line-height: 30px;
+      font-size: 14px;
+      padding: 5px 15px;
+    }
+
+    .dropdown-chosen,
     > li > div,
     > li > a,
     > li > span > a  {
@@ -150,6 +157,7 @@
       display: inline-block;
     }
 
+    .dropdown-chosen,
     > li > a,
     > li > span > a  {
       &:hover,
@@ -163,23 +171,27 @@
 
 .browsers-list {
   margin: 5px;
-  border: 1px solid #c7c7c7;
-  border-radius: 4px;
 
   li {
     padding: 9px 15px;
     white-space: nowrap;
   }
 
-  &>a.dropdown-chosen {
+  .dropdown-chosen {
     border-radius: 4px;
+    border: 1px solid #c7c7c7;
     line-height: 28px !important;
     background-color: #f6f6f6;
 
     img {
       position: relative;
       top: -1px;
     }
+
+    &.disabled,
+    &:active {
+      background-color: #dedede;
+    }
   }
 
   .fa-check-circle, .fa-sync-alt {

packages/desktop-gui/src/main.scss

@@ -3,3 +3,4 @@
 @import 'styles/vendor';
 @import 'styles/components/*';
 @import '!(styles)*/**/*';
+@import '../../ui-components/src/dropdown';

packages/desktop-gui/src/project-nav/browsers.jsx

@@ -1,11 +1,9 @@
 import React, { Component } from 'react'
 import { observer } from 'mobx-react'
 import Tooltip from '@cypress/react-tooltip'
-import { BrowserIcon } from '@packages/ui-components'
+import { BrowserIcon, Dropdown } from '@packages/ui-components'
 
-import Dropdown from '../dropdown/dropdown'
 import MarkdownRenderer from '../lib/markdown-renderer'
-
 import projectsApi from '../projects/projects-api'
 
 @observer

packages/runner/src/errors/errors.scss

@@ -47,11 +47,29 @@
       top: -1px;
 
       &.fa-globe {
-        top: 0; 
+        top: 0;
       }
     }
   }
 
+  &.automation-failure {
+    .browser-icon {
+      margin-right: 5px;
+      vertical-align: middle;
+      position: relative;
+      top: -1px;
+    }
+
+    .dropdown-toggle {
+      margin-left: 5px;
+    }
+
+    .dropdown-menu li {
+      padding: 8px 12px;
+      white-space: nowrap;
+    }
+  }
+
   .automation-disconnected button {
     font-size: 18px;
     line-height: 1.3;

packages/runner/src/errors/no-automation.jsx

@@ -1,8 +1,6 @@
 import _ from 'lodash'
 import React from 'react'
-import { BrowserIcon } from '@packages/ui-components'
-
-import Dropdown from '../dropdown/dropdown'
+import { BrowserIcon, Dropdown } from '@packages/ui-components'
 
 const displayName = (name) => _.capitalize(name)
 
@@ -42,6 +40,7 @@ const browserPicker = (browsers, onLaunchBrowser) => {
         others={otherBrowsers}
         onSelect={onLaunchBrowser}
         renderItem={browser}
+        keyProperty='key'
       />
     </div>
   )

packages/runner/src/main.scss

@@ -6,4 +6,5 @@
 @import 'lib/shared';
 @import '!(lib)*/**/!(selector-playground.scss)';
 
+@import '../../ui-components/src/dropdown';
 @import '../../reporter/src/main-runner';