External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-14 03:10:42 -03:30
Code Issues Packages Projects Releases Wiki Activity

Fixes close button on tags in instance group form field

Browse Source
This commit is contained in:
mabashian 2019-01-30 12:59:22 -05:00
parent 5778c9cf05
commit 6ed36daef7
2 changed files with 9 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
__tests__/components/Lookup.test.jsx
View File

@ -32,8 +32,8 @@ describe('<Lookup />', () => {
searchItem.first().simulate('click');
expect(spy).toHaveBeenCalled();
});
test('calls "onChecked" when a user changes a checkbox', () => {
const spy = jest.spyOn(Lookup.prototype, 'onChecked');
test('calls "toggleSelected" when a user changes a checkbox', () => {
const spy = jest.spyOn(Lookup.prototype, 'toggleSelected');
const wrapper = mount(
<I18nProvider>
<Lookup
@ -49,8 +49,8 @@ describe('<Lookup />', () => {
wrapper.find('input[type="checkbox"]').simulate('change');
expect(spy).toHaveBeenCalled();
});
test('calls "onRemove" when remove icon is clicked', () => {
const spy = jest.spyOn(Lookup.prototype, 'onRemove');
test('calls "toggleSelected" when remove icon is clicked', () => {
const spy = jest.spyOn(Lookup.prototype, 'toggleSelected');
mockData = [{ name: 'foo', id: 0, isChecked: false }, { name: 'bar', id: 1, isChecked: true }];
const wrapper = mount(
<I18nProvider>

16
src/components/Lookup/Lookup.jsx
View File

@ -23,25 +23,19 @@ class Lookup extends React.Component {
};
this.handleModalToggle = this.handleModalToggle.bind(this);
this.onLookup = this.onLookup.bind(this);
this.onChecked = this.onChecked.bind(this);
this.wrapTags = this.wrapTags.bind(this);
this.onRemove = this.onRemove.bind(this);
this.toggleSelected = this.toggleSelected.bind(this);
}
onLookup () {
this.handleModalToggle();
}
onChecked (row) {
toggleSelected (row) {
const { lookupChange } = this.props;
lookupChange(row);
}
onRemove (evt) {
const { lookupChange } = this.props;
lookupChange(evt.target.id);
}
handleModalToggle () {
this.setState((prevState) => ({
isModalOpen: !prevState.isModalOpen,
@ -52,7 +46,7 @@ class Lookup extends React.Component {
return tags.filter(tag => tag.isChecked).map((tag) => (
<span className="awx-c-tag--pill" key={tag.id}>
{tag.name}
<Button className="awx-c-icon--remove" id={tag.id} onClick={this.onRemove}>
<Button className="awx-c-icon--remove" id={tag.id} onClick={() => this.toggleSelected(tag)}>
x
</Button>
</span>
@ -81,7 +75,7 @@ class Lookup extends React.Component {
itemId={i.id}
name={i.name}
isSelected={i.isChecked}
onSelect={() => this.onChecked(i)}
onSelect={() => this.toggleSelected(i)}
/>
))}
</ul>
@ -92,7 +86,7 @@ class Lookup extends React.Component {
label={i18n._(t`Selected`)}
selected={selected}
showOverflowAfter={5}
onRemove={this.onChecked}
onRemove={this.toggleSelected}
/>
)}
</I18n>