Add pluggable global notification area to App component

[bernd]

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

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,
    },
  ],
}));

[edmundoa]

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.

[bernd]

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

With div and custom style

[edmundoa]

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.

[bernd]

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

[bernd]

@edmundoa I removed the styling.

[edmundoa]

LGTM 👍