Skip to content

Commit

Permalink
Fixes #21130: Use patternfly-react npm package
Browse files Browse the repository at this point in the history
Update to patternfly-react and DropdownKebab implementation

http://projects.theforeman.org/issues/21130
  • Loading branch information
danseethaler authored and ohadlevy committed Nov 8, 2017
1 parent 510dbaa commit 7ab3f34
Show file tree
Hide file tree
Showing 8 changed files with 216 additions and 36 deletions.
1 change: 1 addition & 0 deletions .gitignore
Expand Up @@ -46,3 +46,4 @@ public/webpack
.env*
package-lock.json
npm-debug.log
.vscode
4 changes: 3 additions & 1 deletion package.json
Expand Up @@ -16,7 +16,6 @@
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-assign": "^6.8.0",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-polyfill": "^6.13.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.5.0",
"babel-register": "^6.9.0",
Expand Down Expand Up @@ -50,6 +49,7 @@
"phantomjs-prebuilt": "^2.1.0"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"brace": "^0.10.0",
"c3": "^0.4.11",
"datatables.net": "~1.10.12",
Expand All @@ -65,6 +65,8 @@
"jstz": "~1.0.7",
"lodash": "~4.15.0",
"multiselect": "~0.9.12",
"patternfly": "^3.29.5",
"patternfly-react": "^0.8.1",
"prop-types": "^15.6.0",
"raf": "^3.4.0",
"react": "^16.0.0",
Expand Down
34 changes: 16 additions & 18 deletions webpack/assets/javascripts/bundle.js
@@ -1,3 +1,4 @@
import 'babel-polyfill';
require('expose-loader?$!expose-loader?jQuery!jquery');
require('jquery-ujs');
require('expose-loader?_!lodash');
Expand All @@ -11,21 +12,18 @@ require('./bundle_select2');
require('./bundle_datatables');
import compute from './foreman_compute_resource';

window.tfm = Object.assign(
window.tfm || {},
{
tools: require('./foreman_tools'),
users: require('./foreman_users'),
computeResource: compute,
sshKeys: require('./foreman_ssh_keys'),
trends: require('./foreman_trends'),
hostgroups: require('./foreman_hostgroups'),
hosts: require('./foreman_hosts'),
httpProxies: require('./foreman_http_proxies'),
toastNotifications: require('./foreman_toast_notifications'),
numFields: require('./jquery.ui.custom_spinners'),
reactMounter: require('./react_app/common/MountingService'),
editor: require('./foreman_editor'),
nav: require('./foreman_navigation')
}
);
window.tfm = Object.assign(window.tfm || {}, {
tools: require('./foreman_tools'),
users: require('./foreman_users'),
computeResource: compute,
sshKeys: require('./foreman_ssh_keys'),
trends: require('./foreman_trends'),
hostgroups: require('./foreman_hostgroups'),
hosts: require('./foreman_hosts'),
httpProxies: require('./foreman_http_proxies'),
toastNotifications: require('./foreman_toast_notifications'),
numFields: require('./jquery.ui.custom_spinners'),
reactMounter: require('./react_app/common/MountingService'),
editor: require('./foreman_editor'),
nav: require('./foreman_navigation')
});
@@ -0,0 +1,10 @@
export const propsWithLinks = {
id: 6,
links: [
{
href: 'https://theforeman.org/blog',
title: 'Link to blog'
}
],
onClickedLink: () => {}
};
@@ -1,24 +1,15 @@
import React from 'react';
import { Dropdown, Glyphicon, MenuItem } from 'react-bootstrap';
import { DropdownKebab, MenuItem } from 'patternfly-react';

const NotificationDropdown = ({ links, id, onClickedLink }) => {
return (
<Dropdown pullRight className="dropdown-kebab-pf" id={id}>
<Dropdown.Toggle noCaret bsStyle="link">
<Glyphicon bsClass="fa" glyph="ellipsis-v" />
</Dropdown.Toggle>
<Dropdown.Menu>
{
links.map((link, i) =>
<MenuItem key={i}
id={ `notification-kebab-${i}` }
onClick={ onClickedLink.bind(this, link) }>
{link.title}
</MenuItem>
)
}
</Dropdown.Menu>
</Dropdown>
<DropdownKebab pullRight id={id}>
{links.map((link, i) => (
<MenuItem key={i} id={`notification-kebab-${i}`} onClick={onClickedLink.bind(this, link)}>
{link.title}
</MenuItem>
))}
</DropdownKebab>
);
};

Expand Down
@@ -0,0 +1,21 @@
// Configure Enzyme
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

import React from 'react';
import { mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import NotificationDropdown from './NotificationDropdown';

import { propsWithLinks } from './NotificationDropdown.fixtures';

describe('Notification dropdown', () => {
it('Renders links provided', () => {
const wrapper = mount(<NotificationDropdown {...propsWithLinks} />);

expect(toJson(wrapper)).toMatchSnapshot();

});

});
@@ -0,0 +1,150 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Notification dropdown Renders links provided 1`] = `
<NotificationDropdown
id={6}
links={
Array [
Object {
"href": "https://theforeman.org/blog",
"title": "Link to blog",
},
]
}
onClickedLink={[Function]}
>
<DropdownKebab
id={6}
pullRight={true}
>
<Uncontrolled(Dropdown)
className="dropdown-kebab-pf"
id={6}
pullRight={true}
>
<Dropdown
bsClass="dropdown"
className="dropdown-kebab-pf"
componentClass={[Function]}
id={6}
onToggle={[Function]}
pullRight={true}
>
<ButtonGroup
block={false}
bsClass="btn-group"
className="dropdown-kebab-pf dropdown"
justified={false}
vertical={false}
>
<div
className="dropdown-kebab-pf dropdown btn-group"
>
<DropdownToggle
bsClass="dropdown-toggle"
bsRole="toggle"
bsStyle="link"
id={6}
key=".0"
noCaret={true}
onClick={[Function]}
onKeyDown={[Function]}
open={false}
useAnchor={false}
>
<Button
active={false}
aria-expanded={false}
aria-haspopup={true}
block={false}
bsClass="btn"
bsStyle="link"
className="dropdown-toggle"
disabled={false}
id={6}
onClick={[Function]}
onKeyDown={[Function]}
role="button"
>
<button
aria-expanded={false}
aria-haspopup={true}
className="dropdown-toggle btn btn-link"
disabled={false}
id={6}
onClick={[Function]}
onKeyDown={[Function]}
role="button"
type="button"
>
<span
className="fa fa-ellipsis-v"
/>
</button>
</Button>
</DropdownToggle>
<DropdownMenu
bsClass="dropdown-menu"
bsRole="menu"
key=".1"
labelledBy={6}
onClose={[Function]}
onSelect={[Function]}
pullRight={true}
>
<RootCloseWrapper
disabled={true}
event="click"
onRootClose={[Function]}
>
<ul
aria-labelledby={6}
className="dropdown-menu dropdown-menu-right"
role="menu"
>
<MenuItem
bsClass="dropdown"
disabled={false}
divider={false}
header={false}
id="notification-kebab-0"
key=".$0"
onClick={[Function]}
onKeyDown={[Function]}
onSelect={[Function]}
>
<li
className=""
role="presentation"
>
<SafeAnchor
componentClass="a"
id="notification-kebab-0"
onClick={[Function]}
onKeyDown={[Function]}
role="menuitem"
tabIndex="-1"
>
<a
href="#"
id="notification-kebab-0"
onClick={[Function]}
onKeyDown={[Function]}
role="menuitem"
tabIndex="-1"
>
Link to blog
</a>
</SafeAnchor>
</li>
</MenuItem>
</ul>
</RootCloseWrapper>
</DropdownMenu>
</div>
</ButtonGroup>
</Dropdown>
</Uncontrolled(Dropdown)>
</DropdownKebab>
</NotificationDropdown>
`;
Expand Up @@ -84,6 +84,13 @@ describe('notifications', () => {
expect(box.render().find('.fa-bell').length).toBe(1);
});

it('should render a dropdown kebab when links are provided', () => {
const store = mockStore(stateWithUnreadNotifications);
const wrapper = shallow(<Notifications store={store} />);

expect(wrapper.render().find('.dropdown-toggle').length).toBe(1);
});

it('full flow', () => {
const wrapper = mount(<Notifications data={componentMountData} store={getStore()} />);

Expand Down

0 comments on commit 7ab3f34

Please sign in to comment.