Coding conventions

JavaScript

• avoid ternary operator (condition?expression1:expression2)
• avoid delete
• do not use ../ in imports (always go down)
• avoid ref
• use template literals
• prefer typescript (.tsx)
• use CamelCase

React

• avoid class components
• prefer arrow function components
• define propTypes, possible types are bool, string, func, array, object, number (see https://www.npmjs.com/package/prop-types)
• useState
• useEffect. In particular for asynchronous calls to the server that updates the state. See also the impact of its second parameter here
• useHistory

Full component syntax example:

import { useState, useEffect } from 'react';
...
const Component = ({target, disabled}) => {
    const [configuration, setConfiguration] = useState({ color: 'blue', length: 10, length: 0 });

    useEffect(() => {
        asynchronousCallToRetrieveConfiguration().then((configuration) => {
             setConfiguration(configuration);
        });
    }, []);

    const _incrementLength = () => {
        setConfiguration({
            ...configuration,
            length: configuration.length +1
        });
    };

    return ...;
}

Component.propTypes = {
    target: PropTypes.string.isRequired,
    disabled: PropTypes.bool,
}

React documentation

• how to render lists: https://react.dev/learn/rendering-lists
• how to update arrays: https://react.dev/learn/updating-arrays-in-state
• how to manage state (contexts and reducers): https://react.dev/learn/managing-state
• how to chain state updates: https://react.dev/learn/queueing-a-series-of-state-updates

Internationalization (react-intl)

• useIntl

import { useIntl } from 'react-intl';
...
const intl = useIntl();

• FormattedMessage

Graylog components

• components/common/Select: use clearable={false} to ensure there is always a value
• useStore

Jest

• jest.mock(module_name) to mock a module
• jest.fn() to mock a function

css

It seems we are using different ways to apply style to components => should make some stricter rules

• attribute className with some class names from graylog (various origins...), bootstrap...
• attribute className with css-modules, see for instance https://github.com/airbus-cyber/graylog-plugin-alert-wizard/blob/5.1.1/src/web/wizard/components/rules/AlertRuleForm.jsx#L241
• defining our own styled components, see for instance https://github.com/airbus-cyber/graylog-plugin-alert-wizard/blob/5.1.1/src/web/wizard/components/containers/HighlightedDiv.jsx#L18, transverse factoring of constants is done through the theme
• attribute style for ad-hoc styling, see for instance https://github.com/airbus-cyber/graylog-plugin-alert-wizard/blob/5.1.1/src/web/wizard/components/inputs/FieldRule.jsx#L171

List of class names encountered so far:

• btn
• btn-primary
• pull-left
• pull-right
• table-hover
• actions
• content, may be locally overrided for Row for instance (https://github.com/Graylog2/graylog2-server/blob/5.1.3/graylog2-web-interface/src/components/bootstrap/Row.tsx)
• has-bm
• limited

TODO:

• It seems to me, attribute style should be removed. The use of css modules, most probably too. And would it be possible to use class names from graylog but by importing them, instead of using a string constant?
• list all class names, see where they originate from, check they work, decide which ones are authorized

Java

• use CamelCase

• do not omit brackets around if with one statements

  incorrect

            if (messageSummary.getTimestamp().isBefore(date))
                date = messageSummary.getTimestamp();

  correct

            if (messageSummary.getTimestamp().isBefore(date)) {
                date = messageSummary.getTimestamp();
            }

• Avoid abbreviations

  incorrect

    EventNotificationContext ctx;

  correct

    EventNotificationContext context;

• Avoid dead code, such as dead imports

• Avoid ternary operator (condition?expression1:expression2)