External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-05 10:41:05 -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
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'); searchItem.first().simulate('click');
expect(spy).toHaveBeenCalled(); expect(spy).toHaveBeenCalled();
}); });
test('calls "onChecked" when a user changes a checkbox', () => { test('calls "toggleSelected" when a user changes a checkbox', () => {
const spy = jest.spyOn(Lookup.prototype, 'onChecked'); const spy = jest.spyOn(Lookup.prototype, 'toggleSelected');
const wrapper = mount( const wrapper = mount(
<I18nProvider> <I18nProvider>
<Lookup <Lookup
@@ -49,8 +49,8 @@ describe('<Lookup />', () => {
wrapper.find('input[type="checkbox"]').simulate('change'); wrapper.find('input[type="checkbox"]').simulate('change');
expect(spy).toHaveBeenCalled(); expect(spy).toHaveBeenCalled();
}); });
test('calls "onRemove" when remove icon is clicked', () => { test('calls "toggleSelected" when remove icon is clicked', () => {
const spy = jest.spyOn(Lookup.prototype, 'onRemove'); const spy = jest.spyOn(Lookup.prototype, 'toggleSelected');
mockData = [{ name: 'foo', id: 0, isChecked: false }, { name: 'bar', id: 1, isChecked: true }]; mockData = [{ name: 'foo', id: 0, isChecked: false }, { name: 'bar', id: 1, isChecked: true }];
const wrapper = mount( const wrapper = mount(
<I18nProvider> <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.handleModalToggle = this.handleModalToggle.bind(this);
this.onLookup = this.onLookup.bind(this); this.onLookup = this.onLookup.bind(this);
this.onChecked = this.onChecked.bind(this);
this.wrapTags = this.wrapTags.bind(this); this.wrapTags = this.wrapTags.bind(this);
this.onRemove = this.onRemove.bind(this); this.toggleSelected = this.toggleSelected.bind(this);
} }
onLookup () { onLookup () {
this.handleModalToggle(); this.handleModalToggle();
} }
onChecked (row) { toggleSelected (row) {
const { lookupChange } = this.props; const { lookupChange } = this.props;
lookupChange(row); lookupChange(row);
} }
onRemove (evt) {
const { lookupChange } = this.props;
lookupChange(evt.target.id);
}
handleModalToggle () { handleModalToggle () {
this.setState((prevState) => ({ this.setState((prevState) => ({
isModalOpen: !prevState.isModalOpen, isModalOpen: !prevState.isModalOpen,
@@ -52,7 +46,7 @@ class Lookup extends React.Component {
return tags.filter(tag => tag.isChecked).map((tag) => ( return tags.filter(tag => tag.isChecked).map((tag) => (
<span className="awx-c-tag--pill" key={tag.id}> <span className="awx-c-tag--pill" key={tag.id}>
{tag.name} {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 x
</Button> </Button>
</span> </span>
@@ -81,7 +75,7 @@ class Lookup extends React.Component {
itemId={i.id} itemId={i.id}
name={i.name} name={i.name}
isSelected={i.isChecked} isSelected={i.isChecked}
onSelect={() => this.onChecked(i)} onSelect={() => this.toggleSelected(i)}
/> />
))} ))}
</ul> </ul>
@@ -92,7 +86,7 @@ class Lookup extends React.Component {
label={i18n._(t`Selected`)} label={i18n._(t`Selected`)}
selected={selected} selected={selected}
showOverflowAfter={5} showOverflowAfter={5}
onRemove={this.onChecked} onRemove={this.toggleSelected}
/> />
)} )}
</I18n> </I18n>