-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(bannerMessages): issues/502 app messages (#503)
* styling, banner messages spacing * appMessagesSelectors, base selector * bannerMessages, display app banner messages * rhelView, openshiftView, apply bannerMessages display
- Loading branch information
Showing
13 changed files
with
401 additions
and
2 deletions.
There are no files selected for viewing
62 changes: 62 additions & 0 deletions
62
src/components/bannerMessages/__tests__/__snapshots__/bannerMessages.test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`BannerMessages Component should handle closing messages from state: state messages, OFF 1`] = `""`; | ||
|
|
||
| exports[`BannerMessages Component should handle closing messages from state: state messages, ON 1`] = ` | ||
| <div | ||
| className="curiosity-banner-messages" | ||
| > | ||
| <Alert | ||
| actionClose={ | ||
| <AlertActionCloseButton | ||
| onClose={[Function]} | ||
| /> | ||
| } | ||
| key="loremIpsum" | ||
| title="Lorem ipsum title" | ||
| variant="info" | ||
| > | ||
| Lorem ipsum message | ||
| </Alert> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`BannerMessages Component should render a non-connected component: non-connected 1`] = ` | ||
| <div | ||
| className="curiosity-banner-messages" | ||
| > | ||
| <Alert | ||
| actionClose={ | ||
| <AlertActionCloseButton | ||
| onClose={[Function]} | ||
| /> | ||
| } | ||
| key="loremIpsum" | ||
| title="Lorem ipsum title" | ||
| variant="info" | ||
| > | ||
| Lorem ipsum message | ||
| </Alert> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`BannerMessages Component should render specific messages when the appMessages prop is used: specific messages, OFF 1`] = `""`; | ||
|
|
||
| exports[`BannerMessages Component should render specific messages when the appMessages prop is used: specific messages, ON 1`] = ` | ||
| <div | ||
| className="curiosity-banner-messages" | ||
| > | ||
| <Alert | ||
| actionClose={ | ||
| <AlertActionCloseButton | ||
| onClose={[Function]} | ||
| /> | ||
| } | ||
| key="loremIpsum" | ||
| title="Lorem ipsum title" | ||
| variant="info" | ||
| > | ||
| Lorem ipsum message | ||
| </Alert> | ||
| </div> | ||
| `; |
76 changes: 76 additions & 0 deletions
76
src/components/bannerMessages/__tests__/bannerMessages.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import React from 'react'; | ||
| import { shallow } from 'enzyme'; | ||
| import { BannerMessages } from '../bannerMessages'; | ||
|
|
||
| describe('BannerMessages Component', () => { | ||
| it('should render a non-connected component', () => { | ||
| const props = { | ||
| appMessages: { | ||
| loremIpsum: true | ||
| }, | ||
| messages: [ | ||
| { | ||
| id: 'loremIpsum', | ||
| title: 'Lorem ipsum title', | ||
| message: 'Lorem ipsum message' | ||
| } | ||
| ] | ||
| }; | ||
| const component = shallow(<BannerMessages {...props} />); | ||
|
|
||
| expect(component).toMatchSnapshot('non-connected'); | ||
| }); | ||
|
|
||
| it('should render specific messages when the appMessages prop is used', () => { | ||
| const props = { | ||
| appMessages: { | ||
| loremIpsum: false, | ||
| dolorSit: false | ||
| }, | ||
| messages: [ | ||
| { | ||
| id: 'loremIpsum', | ||
| title: 'Lorem ipsum title', | ||
| message: 'Lorem ipsum message' | ||
| }, | ||
| { | ||
| id: 'dolorSit', | ||
| title: 'Dolor sit title', | ||
| message: 'Dolor sit message' | ||
| } | ||
| ] | ||
| }; | ||
| const component = shallow(<BannerMessages {...props} />); | ||
|
|
||
| expect(component).toMatchSnapshot('specific messages, OFF'); | ||
|
|
||
| component.setProps({ | ||
| ...props, | ||
| appMessages: { | ||
| loremIpsum: true, | ||
| dolorSit: false | ||
| } | ||
| }); | ||
| expect(component).toMatchSnapshot('specific messages, ON'); | ||
| }); | ||
|
|
||
| it('should handle closing messages from state', () => { | ||
| const props = { | ||
| appMessages: { | ||
| loremIpsum: true | ||
| }, | ||
| messages: [ | ||
| { | ||
| id: 'loremIpsum', | ||
| title: 'Lorem ipsum title', | ||
| message: 'Lorem ipsum message' | ||
| } | ||
| ] | ||
| }; | ||
| const component = shallow(<BannerMessages {...props} />); | ||
| expect(component).toMatchSnapshot('state messages, ON'); | ||
|
|
||
| component.setState({ loremIpsum: true }); | ||
| expect(component).toMatchSnapshot('state messages, OFF'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { Alert, AlertActionCloseButton, AlertVariant } from '@patternfly/react-core'; | ||
| import { connect, reduxSelectors } from '../../redux'; | ||
|
|
||
| /** | ||
| * Render banner messages. | ||
| * | ||
| * @augments React.Component | ||
| */ | ||
| class BannerMessages extends React.Component { | ||
| state = {}; | ||
|
|
||
| /** | ||
| * Apply messages' configuration to alerts. | ||
| * | ||
| * @returns {Node} | ||
| */ | ||
| renderAlerts() { | ||
| const { state } = this; | ||
| const { appMessages, messages } = this.props; | ||
| const updatedMessages = []; | ||
|
|
||
| if (messages.length) { | ||
| Object.entries(appMessages).forEach(([key, value]) => { | ||
| if (state[key] !== true && value === true) { | ||
| const message = messages.find(({ id }) => id === key); | ||
|
|
||
| if (message) { | ||
| updatedMessages.push({ | ||
| key, | ||
| ...message | ||
| }); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| return updatedMessages.map(({ key, message, title, variant = AlertVariant.info }) => { | ||
| const actionClose = <AlertActionCloseButton onClose={() => this.setState({ [key]: true })} />; | ||
|
|
||
| return ( | ||
| <Alert actionClose={actionClose} key={key} title={title} variant={variant}> | ||
| {message} | ||
| </Alert> | ||
| ); | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Render a banner messages container. | ||
| * | ||
| * @returns {Node} | ||
| */ | ||
| render() { | ||
| const alerts = this.renderAlerts(); | ||
|
|
||
| if (alerts.length) { | ||
| return <div className="curiosity-banner-messages">{alerts}</div>; | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Prop types. | ||
| * | ||
| * @type {{appMessages: object, messages: Array}} | ||
| */ | ||
| BannerMessages.propTypes = { | ||
| appMessages: PropTypes.object.isRequired, | ||
| messages: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| id: PropTypes.string.isRequired, | ||
| title: PropTypes.node.isRequired, | ||
| message: PropTypes.node.isRequired, | ||
| variant: PropTypes.oneOf([...Object.values(AlertVariant)]) | ||
| }) | ||
| ) | ||
| }; | ||
|
|
||
| /** | ||
| * Default props. | ||
| * | ||
| * @type {{messages: Array}} | ||
| */ | ||
| BannerMessages.defaultProps = { | ||
| messages: [] | ||
| }; | ||
|
|
||
| /** | ||
| * Create a selector from applied state, props. | ||
| * | ||
| * @type {Function} | ||
| */ | ||
| const makeMapStateToProps = reduxSelectors.appMessages.makeAppMessages(); | ||
|
|
||
| const ConnectedBannerMessages = connect(makeMapStateToProps)(BannerMessages); | ||
|
|
||
| export { ConnectedBannerMessages as default, ConnectedBannerMessages, BannerMessages }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.