Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add pluggable global notification area to App component #4353

Merged
merged 4 commits into from Nov 16, 2017

Conversation

@bernd
Copy link
Member

@bernd bernd commented Nov 15, 2017

A plugin can register a "globalNotifications" UI extension that will be rendered into the global notification area on each page.

Note: This needs to be cherry-picked into 2.4

Example notification

image

Component

import React from 'react';
import { Alert } from 'react-bootstrap';

const GlobalTestNotification = React.createClass({
  render() {
    return (
      <Alert bsStyle="danger">
        <h4><strong>Alert</strong></h4>
        <p>This is an example alert.</p>
      </Alert>
    );
  },
});

export default GlobalTestNotification;

Register

import packageJson from '../../package.json';
import { PluginManifest, PluginStore } from 'graylog-web-plugin/plugin';
import GlobalTestNotification from 'GlobalTestNotification';

PluginStore.register(new PluginManifest(packageJson, {
  globalNotifications: [
    {
      key: 'org.graylog.plugins.test.GlobalTestNotification',
      component: GlobalTestNotification,
    },
  ],
}));
A plugin can register a "globalNotifications" UI extension that will be
rendered into the global notification area on each page.
@bernd bernd added this to the 3.0.0 milestone Nov 15, 2017
@bernd bernd requested a review from edmundoa Nov 15, 2017
@ghost ghost assigned bernd Nov 15, 2017
.filter(component => !!component);

return (
<div className={`container-fluid ${styles.globalNotifications}`} id="global-notifications">

This comment has been minimized.

@edmundoa

edmundoa Nov 15, 2017
Member

Could we wrap the component's children in a react-bootstrap's Row and Col, avoiding to add styles in here? In the end the styling is just mimicking what those components do.

This comment has been minimized.

@bernd

bernd Nov 15, 2017
Author Member

I tried that before. The problem is that we get padding and margins even when there is no active notification.

Maybe you have an idea how to fix that when using Row/Col?

With Row/Col

image

With div and custom style

image

This comment has been minimized.

@edmundoa

edmundoa Nov 15, 2017
Member

Oh, I see, that's why you are adding :not(:empty) to the CSS selector.

There is afaik no way for a parent to know if its children are rendering something or not. This is mostly due to how React works: you try to put all the logic you can upper in the tree and pass things down, not the other way around, which is what this situation would need.

Then I would suggest: why don't we leave the styling to the children? In the end we are not adding much styling in here, so we can also let plugin authors decide how the notification should look like. In the end they could also override anything we set in here.

This comment has been minimized.

@bernd

bernd Nov 16, 2017
Author Member

@edmundoa Good point. I will remove the styling and leave it to the children. 👍

Child elements are responsible for their own styling.
@bernd
Copy link
Member Author

@bernd bernd commented Nov 16, 2017

@edmundoa I removed the styling.

Copy link
Member

@edmundoa edmundoa left a comment

LGTM 👍

@edmundoa edmundoa merged commit fdc3d26 into master Nov 16, 2017
5 checks passed
5 checks passed
@garybot2
ci-web-linter Jenkins build graylog-pr-linter-check 2077 has succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
@garybot2
graylog-project/pr Jenkins build graylog-project-pr-snapshot 708 has succeeded
Details
license/cla Contributor License Agreement is signed.
Details
@edmundoa edmundoa deleted the global-ui-notifications branch Nov 16, 2017
@ghost ghost removed the ready-for-review label Nov 16, 2017
edmundoa added a commit that referenced this pull request Nov 16, 2017
* Add pluggable global notification area to App component

A plugin can register a "globalNotifications" UI extension that will be
rendered into the global notification area on each page.

* Fix eslint warnings

* Fix more eslint warnings

* Remove styling of global notification area

Child elements are responsible for their own styling.

(cherry picked from commit fdc3d26)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants