Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue #364 - dangling tooltips #383

Merged
merged 10 commits into from
Dec 3, 2018
Merged

Issue #364 - dangling tooltips #383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
888ece8
Hiding tooltip if the button is disabled
storrisi Nov 30, 2018
07dbbfb
Added disabled property to ButtonWithTooltip
storrisi Nov 30, 2018
e5bc80a
Handle disabled property on FullDetailComponent
storrisi Nov 30, 2018
c277f1b
Merge branch 'master' into webyourmind/issue-364
storrisi Dec 3, 2018
3a23458
Updated ButtonWithTooltip using Bootstrap and children property
storrisi Dec 3, 2018
5ffb5fb
Fixed tests
storrisi Dec 3, 2018
9a2911c
Removed warnings
storrisi Dec 3, 2018
0f4f8c1
Merge branch 'master' into webyourmind/issue-364
jeffmcaffer Dec 3, 2018
899b2a4
remove legacy `disabled` prop
jeffmcaffer Dec 3, 2018
0cff7ca
Fix render prop after Browse page merge
storrisi Dec 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 6 additions & 9 deletions src/components/FullDetailView/FullDetailComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,15 +96,12 @@ class FullDetailComponent extends Component {
<span>Files</span>
&nbsp;
{!readOnly && (
<ButtonWithTooltip
button={
<Button bsStyle="danger" onClick={() => handleRevert('files')} disabled={entry === undefined}>
<i className="fas fa-undo" />
<span>&nbsp;Revert Changes</span>
</Button>
}
tooltip="Revert all changes of all the definitions"
/>
<ButtonWithTooltip tooltip="Revert all changes of all the definitions">
<Button bsStyle="danger" onClick={() => handleRevert('files')} disabled={entry === undefined}>
<i className="fas fa-undo" />
<span>&nbsp;Revert Changes</span>
</Button>
</ButtonWithTooltip>
)}
</section>
}
Expand Down
15 changes: 6 additions & 9 deletions src/components/Navigation/Pages/PageBrowse/ButtonsBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,12 @@ export default class ButtonsBar extends Component {
const { hasChanges, revertAll, collapseAll, doPromptContribute } = this.props
return (
<div className="pull-right">
<ButtonWithTooltip
button={
<Button bsStyle="danger" disabled={hasChanges} onClick={revertAll}>
<i className="fas fa-undo" />
<span>&nbsp;Revert Changes</span>
</Button>
}
tooltip="Revert all changes of all the definitions"
/>
<ButtonWithTooltip tooltip="Revert all changes of all the definitions">
<Button bsStyle="danger" disabled={hasChanges} onClick={revertAll}>
<i className="fas fa-undo" />
<span>&nbsp;Revert Changes</span>
</Button>
</ButtonWithTooltip>
&nbsp;
<Button bsStyle="default" disabled={hasChanges} onClick={collapseAll}>
Collapse All
Expand Down
15 changes: 6 additions & 9 deletions src/components/Navigation/Pages/PageDefinitions/ButtonsBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,12 @@ export default class ButtonsBar extends Component {
const { components, hasChanges, revertAll, doRefreshAll, collapseAll, onRemoveAll, doPromptContribute } = this.props
return (
<div className="pull-right">
<ButtonWithTooltip
button={
<Button bsStyle="danger" disabled={hasChanges} onClick={revertAll}>
<i className="fas fa-undo" />
<span>&nbsp;Revert Changes</span>
</Button>
}
tooltip="Revert all changes of all the definitions"
/>
<ButtonWithTooltip tooltip="Revert all changes of all the definitions">
<Button bsStyle="danger" disabled={hasChanges} onClick={revertAll}>
<i className="fas fa-undo" />
<span>&nbsp;Revert Changes</span>
</Button>
</ButtonWithTooltip>
&nbsp;
<Button bsStyle="default" disabled={hasChanges} onClick={doRefreshAll}>
Refresh
Expand Down
15 changes: 6 additions & 9 deletions src/components/Navigation/Sections/ButtonsBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,12 @@ export default class ButtonsBar extends Component {
const { components, hasChanges, revertAll, doRefreshAll, collapseAll, onRemoveAll, doPromptContribute } = this.props
return (
<div className="pull-right">
<ButtonWithTooltip
button={
<Button bsStyle="danger" disabled={hasChanges} onClick={revertAll}>
<i className="fas fa-undo" />
<span>&nbsp;Revert Changes</span>
</Button>
}
tooltip="Revert all changes of all the definitions"
/>
<ButtonWithTooltip tooltip="Revert all changes of all the definitions">
<Button bsStyle="danger" disabled={hasChanges} onClick={revertAll}>
<i className="fas fa-undo" />
<span>&nbsp;Revert Changes</span>
</Button>
</ButtonWithTooltip>
&nbsp;
<Button bsStyle="default" disabled={hasChanges} onClick={doRefreshAll}>
Refresh
Expand Down
15 changes: 6 additions & 9 deletions src/components/Navigation/Sections/HeaderSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,12 @@ export default class HeaderSection extends Component {
</Col>
<Col md={4} className="text-right">
{!isEmpty(changes) && (
<ButtonWithTooltip
button={
<Button bsStyle="danger" onClick={() => handleRevert()}>
<i className="fas fa-undo" />
<span>&nbsp;Revert Changes</span>
</Button>
}
tip="Revert all changes of the current definition"
/>
<ButtonWithTooltip tip="Revert all changes of the current definition">
<Button bsStyle="danger" onClick={() => handleRevert()}>
<i className="fas fa-undo" />
<span>&nbsp;Revert Changes</span>
</Button>
</ButtonWithTooltip>
)}{' '}
{modalView && (
<Button bsStyle="primary" disabled={isEmpty(changes)} onClick={handleSave}>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Navigation/Ui/ButtonWithTooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
// Copyright (c) Microsoft Corporation and others. Licensed under the MIT license.
// SPDX-License-Identifier: MIT
import React from 'react'
import { Tooltip } from 'antd'
import { OverlayTrigger, Tooltip } from 'react-bootstrap'

const ButtonWithTooltip = ({ button, tip }) => {
const ButtonWithTooltip = ({ children, tip }) => {
return (
<Tooltip placement="topLeft" title={tip} arrowPointAtCenter>
{button}
</Tooltip>
<OverlayTrigger placement="top" overlay={<Tooltip id="tooltip">{tip}</Tooltip>}>
{children}
</OverlayTrigger>
)
}

Expand Down
60 changes: 26 additions & 34 deletions src/components/Navigation/Ui/ComponentButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,25 +79,21 @@ export default class ComponentButtons extends Component {
<ButtonWithTooltip
name="addSourceComponent"
tip={'Add the definition for source that matches this package'}
button={
<Button className="list-fa-button" onClick={this.addSourceForComponent.bind(this, component)}>
<i className="fas fa-code" />
</Button>
}
/>
>
<Button className="list-fa-button" onClick={this.addSourceForComponent.bind(this, component)}>
<i className="fas fa-code" />
</Button>
</ButtonWithTooltip>
)}
{!isDefinitionEmpty && (
<ButtonWithTooltip
tip={'Dig into this definition'}
button={
<Button
className="list-fa-button"
onClick={this.inspectComponent.bind(this, currentComponent, definition)}
>
<i className="fas fa-search" />
</Button>
}
/>
<ButtonWithTooltip tip={'Dig into this definition'}>
<Button
className="list-fa-button"
onClick={this.inspectComponent.bind(this, currentComponent, definition)}
>
<i className="fas fa-search" />
</Button>
</ButtonWithTooltip>
)}
<CopyUrlButton
route={ROUTE_DEFINITIONS}
Expand All @@ -106,9 +102,8 @@ export default class ComponentButtons extends Component {
className="list-fa-button"
/>
{!hideVersionSelector && (
<ButtonWithTooltip
tip={'Switch or add other versions of this definition'}
button={
<ButtonWithTooltip tip={'Switch or add other versions of this definition'}>
<div>
<Dropdown
overlay={
<Menu>
Expand All @@ -125,23 +120,20 @@ export default class ComponentButtons extends Component {
<i className="fas fa-exchange-alt" /> <Icon type="down" />
</Button>
</Dropdown>
}
/>
</div>
</ButtonWithTooltip>
)}
{!readOnly &&
!isDefinitionEmpty && (
<ButtonWithTooltip
tip={'Revert Changes of this Definition'}
button={
<Button
className="list-fa-button"
onClick={() => this.revertComponent(component)}
disabled={!hasChange(component)}
>
<i className="fas fa-undo" />
</Button>
}
/>
<ButtonWithTooltip tip={'Revert Changes of this Definition'}>
<Button
className="list-fa-button"
onClick={() => this.revertComponent(component)}
disabled={!hasChange(component)}
>
<i className="fas fa-undo" />
</Button>
</ButtonWithTooltip>
)}
</ButtonGroup>
{!readOnly && (
Expand Down
6 changes: 5 additions & 1 deletion src/components/Navigation/Ui/__tests__/ButtonWithTooltip.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@ describe('ButtonWithTooltip', () => {
shallow(<ButtonWithTooltip />)
})
it('render a button as a child', async () => {
const wrapper = shallow(<ButtonWithTooltip button={<button>Test</button>} />)
const wrapper = shallow(
<ButtonWithTooltip>
<button>Test</button>
</ButtonWithTooltip>
)
expect(wrapper.props().children).toEqual(<button>Test</button>)
})
})