Project

General

Profile

« Previous | Next » 

Revision b51f2297

Added by Amir Fefer almost 6 years ago

Fixes #23977 - add onClick callback to breadcrumbs

View differences:

webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBar.fixtures.js
export const mockBreadcrumbItemOnClick = jest.fn();
export const breadcrumbItems = {
items: [
{
......
url: '/some-url',
},
{
caption: 'child',
caption: 'child with onClick',
onClick: mockBreadcrumbItemOnClick,
},
{
caption: 'active child',
},
],
};
webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBar.js
searchQuery,
removeSearchQuery,
searchDebounceTimeout,
onSwitcherItemClick,
} = this.props;
const isTitle = breadcrumbItems.length === 1;
......
page: Number(currentPage) + pageIncrement,
});
const handleSwitcherItemClick = (e, url) => {
closeSwitcher();
onSwitcherItemClick(e, url);
};
return (
<div className="breadcrumb-bar">
<Breadcrumb title items={breadcrumbItems} isTitle={isTitle}>
......
onTogglerClick={() => toggleSwitcher()}
onHide={() => closeSwitcher()}
onOpen={() => this.handleOpen()}
onResourceClick={() => closeSwitcher()}
onSearchChange={event =>
loadSwitcherResourcesByResource(resource, { searchQuery: event.target.value })
}
......
searchValue={searchQuery}
onSearchClear={() => removeSearchQuery(resource)}
searchDebounceTimeout={searchDebounceTimeout}
onResourceClick={(e, url) => handleSwitcherItemClick(e, url)}
/>
)}
</Breadcrumb>
......
closeSwitcher: PropTypes.func,
loadSwitcherResourcesByResource: PropTypes.func,
onSearchChange: PropTypes.func,
onSwitcherItemClick: PropTypes.func,
};
BreadcrumbBar.defaultProps = {
......
loadSwitcherResourcesByResource: noop,
onSearchChange: noop,
searchDebounceTimeout: 300,
onSwitcherItemClick: noop,
};
export default BreadcrumbBar;
webpack/assets/javascripts/react_app/components/BreadcrumbBar/__tests__/BreadcrumbBar.test.js
import { testComponentSnapshotsWithFixtures } from '../../../common/testHelpers';
import BreadcrumbBar from '../BreadcrumbBar';
import { breadcrumbBar, breadcrumbBarSwithcable } from '../BreadcrumbBar.fixtures';
import {
breadcrumbBar,
breadcrumbBarSwithcable,
mockBreadcrumbItemOnClick,
} from '../BreadcrumbBar.fixtures';
const createStubs = () => ({
toggleSwitcher: jest.fn(),
......
expect(props.loadSwitcherResourcesByResource.mock.calls).toMatchSnapshot('loadSwitcherResourcesByResource calls');
});
it('onclick callbacks should work', () => {
const props = {
...breadcrumbBarSwithcable,
...createStubs(),
onSwitcherItemClick: jest.fn(),
resourceSwitcherItems: [{ name: 'a', id: '1' }],
};
const component = mount(<BreadcrumbBar {...props} />);
// test breadcrumb switcher item click
expect(props.onSwitcherItemClick.mock.calls.length).toBe(0);
component.setProps({ isSwitcherOpen: true });
component.update();
component.find('.scrollable-list.list-group button').simulate('click');
expect(props.onSwitcherItemClick.mock.calls.length).toBe(1);
// test breadcrumb item click
component.find('.breadcrumbs-pf-title.breadcrumb a').at(1).simulate('click');
expect(mockBreadcrumbItemOnClick.mock.calls.length).toBe(1);
});
});
});
webpack/assets/javascripts/react_app/components/BreadcrumbBar/__tests__/__snapshots__/BreadcrumbBar.test.js.snap
"url": "/some-url",
},
Object {
"caption": "child",
"caption": "child with onClick",
"onClick": [Function],
},
Object {
"caption": "active child",
},
]
}
......
"url": "/some-url",
},
Object {
"caption": "child",
"caption": "child with onClick",
"onClick": [Function],
},
Object {
"caption": "active child",
},
]
}
webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/Breadcrumb.js
<PfBreadcrumb.Item
key={index}
active={index === items.length - 1}
onClick={item.onClick}
href={item.url}
dangerouslySetInnerHTML={{ __html: item.caption }}
/>
webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcher.js
resources,
onTogglerClick,
onHide,
onResourceClick,
onNextPageClick,
onPrevPageClick,
onSearchChange,
searchValue,
onSearchClear,
searchDebounceTimeout,
onResourceClick,
} = this.props;
return (
......
hasError={hasError}
onSearchChange={onSearchChange}
resources={resources}
onResourceClick={onResourceClick}
onNextPageClick={onNextPageClick}
onPrevPageClick={onPrevPageClick}
currentPage={currentPage}
......
searchValue={searchValue}
onSearchClear={onSearchClear}
searchDebounceTimeout={searchDebounceTimeout}
onResourceClick={onResourceClick}
/>
</Overlay>
</div>
......
onTogglerClick: PropTypes.func,
onHide: PropTypes.func,
onOpen: PropTypes.func,
onResourceClick: PropTypes.func,
onPrevPageClick: PropTypes.func,
onNextPageClick: PropTypes.func,
onResourceClick: PropTypes.func,
};
BreadcrumbSwitcher.defaultProps = {
webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcherPopover.js
import { Popover, ListGroup, ListGroupItem, Pager, Icon } from 'patternfly-react';
import EllipsisWithTooltip from 'react-ellipsis-with-tooltip';
import SearchInput from '../../common/SearchInput';
import { noop } from '../../../common/helpers';
import SubstringWrapper from '../../common/SubstringWrapper';
import { noop } from '../../../common/helpers';
import './BreadcrumbSwitcherPopover.scss';
const BreadcrumbSwitcherPopover = ({
resources,
onResourceClick,
onNextPageClick,
onPrevPageClick,
loading,
......
onSearchClear,
searchValue,
searchDebounceTimeout,
onResourceClick,
...props
}) => {
let popoverBody;
......
</div>
);
} else {
const handleItemClick = (item) => {
onResourceClick(item);
if (item.onClick) item.onClick();
};
const createItemProps = (item) => {
const { id, url, name } = item;
const key = `${id}-${name}`;
......
return { ...itemProps, disabled: true };
}
return { ...itemProps, onClick: () => handleItemClick(item), href: url };
return { ...itemProps, onClick: e => onResourceClick(e, url), href: url };
};
popoverBody = (
......
hasError: PropTypes.bool,
currentPage: PropTypes.number,
totalPages: PropTypes.number,
onResourceClick: PropTypes.func,
resources: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
name: PropTypes.string.isRequired,
......
})),
onSearchChange: PropTypes.func,
searchValue: PropTypes.string,
onResourceClick: PropTypes.func,
};
BreadcrumbSwitcherPopover.defaultProps = {
......
hasError: false,
currentPage: 1,
totalPages: 1,
onResourceClick: noop,
resources: [],
onResourceClick: noop,
};
export default BreadcrumbSwitcherPopover;
webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/__snapshots__/Breadcrumb.test.js.snap
key="0"
/>
<BreadcrumbItem
active={true}
active={false}
dangerouslySetInnerHTML={
Object {
"__html": "child",
"__html": "child with onClick",
}
}
key="1"
onClick={[Function]}
/>
<BreadcrumbItem
active={true}
dangerouslySetInnerHTML={
Object {
"__html": "active child",
}
}
key="2"
/>
</Breadcrumb>
`;

Also available in: Unified diff