Skip to content

Commit 0c7f7aa

Browse files
mpcenmpcen
authored
Merge pull request #994 from qtomlinson/qt/fix_buttons_v2
Fix and enhance component buttons
2 parents f624c0f + f4300dd commit 0c7f7aa

File tree

12 files changed

+143
-108
lines changed

12 files changed

+143
-108
lines changed

‎src/actions/definitionActions.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export function checkForMissingDefinition(token, isFirstAttempt = false) {
5656
).filter(x => x)
5757
const missingDefinitions = map(
5858
workspaceComponents,
59-
item => !get(item, 'described.tools') && EntitySpec.fromObject(item).toPath()
59+
item => !get(item, 'described.tools') && EntitySpec.fromObject(item.coordinates).toPath()
6060
).filter(x => x)
6161
if (missingDefinitions.length > 0) {
6262
if (isFirstAttempt)

‎src/components/FullDetailView/AbstractFullDetailsView.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ export class AbstractFullDetailsView extends Component {
3232

3333
return modalView ? (
3434
<Modal
35-
closable={false}
35+
closable={!!this.handleClose}
36+
onCancel={this.handleClose}
3637
footer={null}
3738
// if it's mobile do not center the Modal
3839
centered={!isMobile}
@@ -50,7 +51,6 @@ export class AbstractFullDetailsView extends Component {
5051
readOnly={readOnly}
5152
modalView={modalView}
5253
onChange={this.onChange}
53-
handleClose={this.handleClose}
5454
handleSave={this.handleSave}
5555
handleRevert={this.handleRevert}
5656
previewDefinition={previewDefinition}

‎src/components/FullDetailView/FullDetailComponent.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ class FullDetailComponent extends Component {
2929
}
3030
}
3131
static propTypes = {
32-
handleClose: PropTypes.func,
3332
handleSave: PropTypes.func,
3433
handleRevert: PropTypes.func,
3534
curations: PropTypes.object.isRequired,

‎src/components/FullDetailView/FullDetailPage.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -166,9 +166,9 @@ export class FullDetailPage extends AbstractFullDetailsView {
166166
}
167167

168168
handleClose() {
169-
const { onClose } = this.props
169+
const { readOnly, onClose } = this.props
170170
const { changes } = this.state
171-
if (isEmpty(changes)) return onClose()
171+
if (readOnly || isEmpty(changes)) return onClose()
172172
const key = `open${Date.now()}`
173173
notification.open({
174174
message: 'Unsaved Changes',

‎src/components/Navigation/Pages/PageBrowse/PageBrowse.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -354,7 +354,6 @@ class PageBrowse extends SystemManagedList {
354354
loadMoreRows={this.loadMoreRows}
355355
onRevert={(definition, value) => this.revertDefinition(definition, value, 'browse')}
356356
onChange={this.onChangeComponent}
357-
onInspect={this.onInspect}
358357
renderFilterBar={this.renderFilterBar}
359358
curations={curations}
360359
definitions={definitions}

‎src/components/Navigation/Pages/PageDefinitions/PageDefinitions.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import UrlShare from '../../../../utils/urlShare'
2323
export class PageDefinitions extends UserManagedList {
2424
constructor(props) {
2525
super(props)
26-
this.onAddComponent = this.onAddComponent.bind(this)
2726
this.doSave = this.doSave.bind(this)
2827
this.doSaveAsUrl = this.doSaveAsUrl.bind(this)
2928
this.revertAll = this.revertAll.bind(this)
@@ -225,7 +224,7 @@ export class PageDefinitions extends UserManagedList {
225224
path={path}
226225
currentDefinition={currentDefinition}
227226
component={currentComponent}
228-
readOnly={this.readOnly}
227+
readOnly={true}
229228
/>
230229
)}
231230
{showSavePopup && (

‎src/components/Navigation/Ui/ComponentButtons.js‎

Lines changed: 108 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import React, { Component } from 'react'
22
import PropTypes from 'prop-types'
33
import { get } from 'lodash'
4-
import { ButtonToolbar, Dropdown as BSDropdown } from 'react-bootstrap'
4+
import { Button, ButtonGroup, ButtonToolbar, Dropdown as BSDropdown } from 'react-bootstrap'
55
import EntitySpec from '../../../utils/entitySpec'
66
import { ROUTE_DEFINITIONS } from '../../../utils/routingConstants'
77
import { withResize } from '../../../utils/WindowProvider'
8+
import Definition from '../../../utils/definition'
9+
import { ORIGINS } from '../../../api/clearlyDefined'
810
import MoreVertIcon from '@material-ui/icons/MoreVert'
911
import { IconButton } from '@material-ui/core'
12+
import ButtonWithTooltip from './ButtonWithTooltip'
13+
import { Menu, Dropdown, Icon } from 'antd'
14+
1015
class ComponentButtons extends Component {
1116
constructor(props) {
1217
super(props)
@@ -30,25 +35,33 @@ class ComponentButtons extends Component {
3035
return ['github', 'sourcearchive', 'debsrc'].includes(component.provider)
3136
}
3237

38+
_isProviderSupported(component) {
39+
return !!get(ORIGINS, component.provider)
40+
}
41+
3342
removeComponent(component, event) {
3443
event.stopPropagation()
44+
this.handleMenu()
3545
const { onRemove } = this.props
3646
onRemove && onRemove(component)
3747
}
3848

3949
revertComponent(component, param) {
50+
this.handleMenu()
4051
const { onRevert } = this.props
4152
onRevert && onRevert(component, param)
4253
}
4354

4455
inspectComponent(component, definition, event) {
4556
event.stopPropagation()
57+
this.handleMenu()
4658
const action = this.props.onInspect
4759
action && action(component, definition)
4860
}
4961

5062
addSourceForComponent(component, event) {
5163
event.stopPropagation()
64+
this.handleMenu()
5265
const definition = this.props.getDefinition(component)
5366
const sourceLocation = get(definition, 'described.sourceLocation')
5467
const sourceEntity = sourceLocation && EntitySpec.fromObject(sourceLocation)
@@ -58,6 +71,7 @@ class ComponentButtons extends Component {
5871

5972
showVersionSelectorPopup(component, multiple, event) {
6073
event.domEvent.stopPropagation()
74+
this.handleMenu()
6175
this.props.showVersionSelectorPopup(component, multiple)
6276
}
6377

@@ -77,111 +91,109 @@ class ComponentButtons extends Component {
7791
)
7892
}
7993

94+
renderDropdown(currentComponent) {
95+
return (
96+
<Dropdown
97+
trigger={['click']}
98+
overlay={
99+
<Menu>
100+
<Menu.Item
101+
data-test-id="switch-component-version"
102+
onClick={this.showVersionSelectorPopup.bind(this, currentComponent, false)}
103+
>
104+
Switch version
105+
</Menu.Item>
106+
<Menu.Item
107+
data-test-id="add-component-version"
108+
onClick={this.showVersionSelectorPopup.bind(this, currentComponent, true)}
109+
>
110+
Add more versions
111+
</Menu.Item>
112+
</Menu>
113+
}
114+
>
115+
<Button className="list-fa-button" onClick={event => event.stopPropagation()}>
116+
<i className="fas fa-exchange-alt" /> <Icon type="down" />
117+
</Button>
118+
</Dropdown>
119+
)
120+
}
121+
80122
renderButtonGroup() {
81-
const { definition, currentComponent, hasChange } = this.props
123+
const {
124+
definition,
125+
currentComponent,
126+
hasChange,
127+
readOnly,
128+
onAddComponent,
129+
onInspect,
130+
onRemove,
131+
hideVersionSelector
132+
} = this.props
82133
const component = EntitySpec.fromObject(currentComponent)
134+
135+
const isSourceComponent = this.isSourceComponent(component)
136+
const isSourceEmpty = Definition.isSourceEmpty(definition)
137+
const isDefinitionEmpty = Definition.isDefinitionEmpty(definition)
138+
const isProviderSupported = this._isProviderSupported(component)
83139
return (
84140
<>
85141
<IconButton className="menuOpenBtn" onClick={this.handleMenu} aria-label="button">
86142
<MoreVertIcon fontSize="large" />
87143
</IconButton>
88144
<div className={`clearly-menu ${this.state.menuOpen ? 'opened' : 'closed'}`}>
89-
<a
90-
href={`${window.location.origin}${ROUTE_DEFINITIONS}/${component.toPath()}`}
91-
onClick={event => {
92-
this.handleMenu()
93-
}}
94-
className="clearly-menu-btns"
95-
>
96-
View Components
97-
</a>
98-
<button
99-
onClick={() => {
100-
this.handleMenu()
101-
this.revertComponent(component)
102-
}}
103-
className={`clearly-menu-btns ${!hasChange(component) ? 'disabled-btn' : ''}`}
104-
disabled={!hasChange(component)}
105-
>
106-
Revert Changes
107-
</button>
108-
<button
109-
onClick={() => {
110-
this.handleMenu()
111-
this.inspectComponent.bind(this, currentComponent, definition)
112-
}}
113-
className="clearly-menu-btns"
114-
>
115-
Add Source Definition
116-
</button>
117-
</div>
118-
119-
{/*
120-
<ButtonGroup>
121-
{!isSourceComponent && !readOnly && !isSourceEmpty && (
122-
<ButtonWithTooltip tip="Add the definition for source that matches this package">
123-
<Button className="list-fa-button" onClick={this.addSourceForComponent.bind(this, component)}>
124-
<i className="fas fa-code" />
125-
</Button>
126-
</ButtonWithTooltip>
127-
)}
128-
{!isDefinitionEmpty && (
129-
<ButtonWithTooltip tip="Dig into this definition">
145+
<ButtonGroup>
146+
{!isSourceComponent && !readOnly && !isSourceEmpty && onAddComponent && (
147+
<ButtonWithTooltip tip="Add the definition for source that matches this package">
148+
<Button className="list-fa-button" onClick={this.addSourceForComponent.bind(this, component)}>
149+
<i className="fas fa-code" />
150+
</Button>
151+
</ButtonWithTooltip>
152+
)}
153+
{!isDefinitionEmpty && onInspect && (
154+
<ButtonWithTooltip tip="Dig into this definition">
130155
<Button className="list-fa-button" onClick={this.inspectComponent.bind(this, currentComponent, definition)}>
131-
<i className="fas fa-search" />
132-
</Button>
133-
</ButtonWithTooltip>
134-
)}
135-
<a
136-
href={`${window.location.origin}${ROUTE_DEFINITIONS}/${component.toPath()}`}
137-
className="list-fa-button"
138-
target="_blank"
139-
rel="noopener noreferrer"
140-
onClick={event => event.stopPropagation()}
141-
>
142-
<i className="fas fa-external-link-alt" />
143-
</a>
144-
{!hideVersionSelector && (
145-
<ButtonWithTooltip tip="Switch or add other versions of this definition">
146-
<>
147-
<Dropdown
148-
trigger={['click']}
149-
overlay={
150-
<Menu>
151-
<Menu.Item
152-
data-test-id="switch-component-version"
153-
onClick={this.showVersionSelectorPopup.bind(this, currentComponent, false)}
154-
>
155-
Switch version
156-
</Menu.Item>
157-
<Menu.Item
158-
data-test-id="add-component-version"
159-
onClick={this.showVersionSelectorPopup.bind(this, currentComponent, true)}
160-
>
161-
Add more versions
162-
</Menu.Item>
163-
</Menu>
164-
}
156+
<i className="fas fa-search" />
157+
</Button>
158+
</ButtonWithTooltip>
159+
)}
160+
<a
161+
href={`${window.location.origin}${ROUTE_DEFINITIONS}/${component.toPath()}`}
162+
className="list-fa-button btn btn-default"
163+
target="_blank"
164+
rel="noopener noreferrer"
165+
onClick={event => {
166+
this.handleMenu()
167+
event.stopPropagation()
168+
}}
169+
>
170+
<i className="fas fa-external-link-alt" />
171+
</a>
172+
{!hideVersionSelector && isProviderSupported && (
173+
<ButtonWithTooltip tip="Switch or add other versions of this definition">
174+
{this.renderDropdown(currentComponent)}
175+
</ButtonWithTooltip>
176+
)}
177+
{!readOnly && onRemove && (
178+
<ButtonWithTooltip tip="Remove this definition">
179+
<Button className="list-fa-button" onClick={this.removeComponent.bind(this, currentComponent)}>
180+
<i className="fas fa-trash" />
181+
</Button>
182+
</ButtonWithTooltip>
183+
)}
184+
{!readOnly && !isDefinitionEmpty && (
185+
<ButtonWithTooltip tip="Revert Changes of this Definition">
186+
<Button
187+
className="list-fa-button"
188+
onClick={() => this.revertComponent(component)}
189+
disabled={!hasChange(component)}
165190
>
166-
<Button className="list-fa-button" onClick={event => event.stopPropagation()}>
167-
<i className="fas fa-exchange-alt" /> <Icon type="down" />
168-
</Button>
169-
</Dropdown>
170-
</>
171-
</ButtonWithTooltip>
172-
)}
173-
{!readOnly && !isDefinitionEmpty && (
174-
<ButtonWithTooltip tip="Revert Changes of this Definition">
175-
<Button
176-
className="list-fa-button"
177-
onClick={() => this.revertComponent(component)}
178-
disabled={!hasChange(component)}
179-
>
180-
<i className="fas fa-undo" />
181-
</Button>
182-
</ButtonWithTooltip>
183-
)}
184-
</ButtonGroup> */}
191+
<i className="fas fa-undo" />
192+
</Button>
193+
</ButtonWithTooltip>
194+
)}
195+
</ButtonGroup>
196+
</div>
185197
</>
186198
)
187199
}

‎src/components/Navigation/Ui/VersionSelector.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ class VersionSelector extends Component {
2929
const fullname = component.namespace ? `${component.namespace}/${component.name}` : component.name
3030
try {
3131
const label = multiple
32-
? `Pick one or move versions of ${fullname} to add to the definitions list`
32+
? `Add one or more versions of ${fullname}`
3333
: `Pick a different version of ${fullname}`
3434
const options = await getRevisions(token, fullname, component.type, component.provider)
3535
this.setState({ options, label })
@@ -58,7 +58,7 @@ class VersionSelector extends Component {
5858
const { options, label, selected } = this.state
5959

6060
return (
61-
<Modal show={show} onHide={this.onClose} backdrop={selected.length > 0 ? 'static' : true}>
61+
<Modal show={show} onHide={this.onClose} backdrop={selected.length > 0 ? 'static' : true} dialogClassName='version-selector'>
6262
<Modal.Header closeButton>
6363
<Modal.Title>{label}</Modal.Title>
6464
</Modal.Header>
@@ -67,8 +67,10 @@ class VersionSelector extends Component {
6767
<Select
6868
mode={multiple && 'multiple'}
6969
style={{ width: '100%' }}
70+
dropdownClassName='select-in-modal'
7071
placeholder={label}
7172
onChange={this.handleChange}
73+
defaultValue={component?.revision}
7274
>
7375
{options.map(option => (
7476
<Option key={Definition.getRevisionToKey(option, component)}>

‎src/components/SystemManagedList.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export default class SystemManagedList extends Component {
5151
this.updateList = this.updateList.bind(this)
5252
this.onSearch = this.onSearch.bind(this)
5353
this.onInspect = this.onInspect.bind(this)
54+
this.onInspectClose = this.onInspectClose.bind(this)
5455
this.onSort = this.onSort.bind(this)
5556
this.onFilter = this.onFilter.bind(this)
5657
this.onChangeComponent = this.onChangeComponent.bind(this)

‎src/styles/_Popover.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ button.modal__btn--secondary,
219219
}
220220
}
221221

222-
.fade.in.definition__tooltip.tooltip,
222+
.fade.in.tooltip,
223223
.fade.in.modal {
224224
opacity: 1 !important;
225225
}

0 commit comments

Comments
 (0)