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

Projects
None yet
2 participants
@bernd
Member

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

@bernd bernd added this to the 3.0.0 milestone Nov 15, 2017

@bernd bernd requested a review from edmundoa Nov 15, 2017

bernd added some commits 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

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

Member

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

Remove styling of global notification area
Child elements are responsible for their own styling.
@bernd

This comment has been minimized.

Member

bernd commented Nov 16, 2017

@edmundoa I removed the styling.

@edmundoa

LGTM 👍

@edmundoa edmundoa merged commit fdc3d26 into master Nov 16, 2017

5 checks passed

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
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

@wafflebot wafflebot bot 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 (#4353)
* 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