-
Notifications
You must be signed in to change notification settings - Fork 3.1k
/
browsers.jsx
115 lines (101 loc) · 2.95 KB
/
browsers.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import React, { Component } from 'react'
import { observer } from 'mobx-react'
import Tooltip from '@cypress/react-tooltip'
import { BrowserIcon, Dropdown } from '@packages/ui-components'
import MarkdownRenderer from '../lib/markdown-renderer'
import projectsApi from '../projects/projects-api'
@observer
export default class Browsers extends Component {
render () {
const project = this.props.project
if (!project.browsers.length) return null
return (
<ul className='browsers nav'>
{this._closeBrowserBtn()}
<Dropdown
className='browsers-list'
disabled={project.browserState === 'opened' || project.browserState === 'opening'}
chosen={project.chosenBrowser}
others={project.otherBrowsers}
onSelect={this._onSelect}
renderItem={this._browser}
keyProperty='path'
browserState={project.browserState}
/>
</ul>
)
}
_closeBrowserBtn () {
if (this.props.project.browserState === 'opened') {
return (
<li className='close-browser'>
<button className='btn btn-xs btn-danger' onClick={this._closeBrowser.bind(this)}>
<i className='fas fa-fw fa-times'></i>
Stop
</button>
</li>
)
}
}
_closeBrowser = (e) => {
e.preventDefault()
projectsApi.closeBrowser(this.props.project)
}
_onSelect = (browser) => {
this.props.project.setChosenBrowser(browser)
}
_browser = (browser) => {
const project = this.props.project
let icon
let prefixText
if (project.browserState === 'opening') {
icon = <i className='fas fa-sync-alt fa-spin' />
prefixText = 'Opening'
} else if (project.browserState === 'opened') {
icon = <i className='fas fa-check-circle green far' />
prefixText = 'Running'
} else {
icon = <BrowserIcon browserName={browser.displayName} />
prefixText = ''
}
return (
<>
{icon}{' '}
{prefixText}{' '}
{browser.displayName}{' '}
{browser.majorVersion}
{browser.family === 'firefox' && <span className='browser-beta'>beta</span>}
{this._info(browser)}
{this._warn(browser)}
</>
)
}
_warn (browser) {
if (!browser.warning) return null
return (
<span className='browser-warning'>
<Tooltip
title={<MarkdownRenderer markdown={browser.warning}/>}
placement='bottom'
className='browser-info-tooltip cy-tooltip'
>
<i className='fas fa-exclamation-triangle' />
</Tooltip>
</span>
)
}
_info (browser) {
if (!browser.info) return null
return (
<span className='browser-info'>
<Tooltip
title={<MarkdownRenderer markdown={browser.info}/>}
placement='bottom'
className='browser-info-tooltip cy-tooltip'
>
<i className='fas fa-info-circle' />
</Tooltip>
</span>
)
}
}