[Mattermost Integrations] Plugin (Webapp 2)

...
import {openRootModal, createPluginPost} from './actions';
...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // 'open modal'を含む投稿を受信するとモーダルを開く
        registry.registerWebSocketEventHandler(
            'posted',
            (event) => {
                const post = JSON.parse(event.data.post);
                if (post && post.message && post.message.includes('open modal')) {
                    store.dispatch(openRootModal());
                }
            }
        );
    }
}

...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // 投稿がサーバーに送信される前にrejectしたり内容を変換したりする
        registry.registerMessageWillBePostedHook(
            (post) => {
                if (post.message && post.message.includes('忙しい')) {
                    return {error: {message: '忙しくはないはずです'}};
                }
                post.message = post.message.replace(/帰りたい/gi, '仕事したい');
                return {post: post};
            }
        );
    }
}

...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // Slash Commandがサーバーに送信される前に実行される処理を追加する
        registry.registerSlashCommandWillBePostedHook(
            (message, args) => {
                console.log(message);
                if (message.startsWith('/away')) {
                    return {error: {message: 'rejected'}};
                }
                if (message.startsWith('/help')) {
                    console.log('help');
                    return {message: '/shrug converted from help command', args};
                }
                if (message.startsWith('/leave')) {
                    console.log('leave');
                    return {};
                }
            }
        );
    }
}

...
import CustomFilePreview from './components/custom_file_preview';
...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // `debug`で始まるメッセージを持つ投稿の添付ファイルを独自コンポーネントでプレビューする
        registry.registerFilePreviewComponent(
            (fileInfo, post) => { return post.message && post.message.startsWith('debug'); },
            CustomFilePreview
        );
    }
}

import React from 'react';
import PropTypes from 'prop-types';

const {formatText, messageHtmlToComponent} = window.PostUtils;

const CustomFilePreviewComponent = ({fileInfo, post}) => {
    const formattedText = messageHtmlToComponent(formatText(post.message));

    return (
        <div style={{backgroundColor: '#ffcccc'}}>
            {formattedText}
            <pre>
                {JSON.stringify(fileInfo, null, 4)}
            </pre>
        </div>
    )
}

CustomFilePreviewComponent.propTypes = {
    fileInfo: PropTypes.object.isRequired,
    post: PropTypes.object.isRequired,
};

export default CustomFilePreviewComponent;

...
import ja from 'i18n/';
...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // 翻訳メッセージを登録する
        registry.registerTranslations((locale) => {
            switch (locale) {
            case 'en':
                return en;
            case 'ja':
                return ja;
            }
            return {};
        });
    }
}

{
    "rootModal.message": "ルートモーダル"
}

import React from 'react';

import {FormattedMessage} from 'react-intl';

const Root = ({visible, close}) => {
    if (!visible) {
        return null;
    }

    const style = getStyle();

    return (
        <div
            style={style.backdrop}
            onClick={close}
        >
            <div style={style.modal}>
                <FormattedMessage
                    id='rootModal.message'
                    defaultMessage='Root Modal2'
                />
            </div>
        </div>
    );
};

Root.propTypes = {
    visible: PropTypes.bool.isRequired,
    close: PropTypes.func.isRequired,
};

const getStyle = () => ({
    backdrop: {
        position: 'absolute',
        display: 'flex',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.50)',
        zIndex: 2000,
        alignItems: 'center',
        justifyContent: 'center',
    },
    modal: {
        height: '300px',
        width: '500px',
        padding: '1em',
        color: 'black',
        backgroundColor: 'white',
    },
});

export default Root;

{
    ...
    "settings_schema": {
        "settings": [
            {
                "key": "SampleSetting",
                "display_name": "Sample Setings Value",
                "type": "text",
                "help_text": "Sample",
                "default": "sample"
            }
        ]
    }
}

...
import CustomSettings from './components/custom_settings';
...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // 独自の設定画面項目を追加する
        registry.registerAdminConsoleCustomSetting(
            'SampleSetting',
            CustomSettings,
            {showTitle: true}
        );
    }
}

import React from 'react';
import PropTypes from 'prop-types';

const CustomSettingsComponent = ({helpText, id, onChange, value}) => {
    const handleChange = (e) => {
        onChange(id, e.target.value);
    }
    return (
        <div style={{backgroundColor: '#ffcccc'}}>
            <input
              type={'password'}
              value={value}
              onChange={handleChange}
            />
            <pre>
                {JSON.stringify(helpText.props, null, 4)}
            </pre>
        </div>
    )
}

CustomSettingsComponent.propTypes = {
    helpText: PropTypes.shape ({
        props: PropTypes.object,
    }),
    id: PropTypes.string,
    onChange: PropTypes.func,
    value: PropTypes.any,
};

export default CustomSettingsComponent;

...
import CustomRightHandSideber from './components/custom_rhs';
...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // 右サイドバーに表示される独自Componentを登録する
        const {toggleRHSPlugin} = registry.registerRightHandSidebarComponent(CustomRightHandSideber, "Sample RHS")
        // 右サイドバーを表示するためのメインメニューを追加する
        registry.registerMainMenuAction(
            'Open RHS',
            () => store.dispatch(toggleRHSPlugin),
            () => (<i/>)
        );
    }
}

import React from 'react';
import PropTypes from 'prop-types';

const ComponentRightHandSidebar = ({theme}) => {
    return (
        <div style={{backgroundColor: '#ffcccc'}}>
            <pre>
                {JSON.stringify(theme, null, 4)}
            </pre>
        </div>
    )
}

ComponentRightHandSidebar.propTypes = {
    PluggableId: PropTypes.string.isRequired,
    theme: PropTypes.object.isRequired,
};

export default ComponentRightHandSidebar;

...
import CustomTeamRoute from './components/custom_team_route';
...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // 独自のRouteを追加する
        registry.registerNeedsTeamRoute('/', CustomTeamRoute)
    }
}

import React from 'react';
import PropTypes from 'prop-types';

import {Switch, Route} from 'react-router-dom';
import {getCurrentTeam} from 'mattermost-redux/selectors/entities/teams';
import {useSelector} from 'react-redux';

import {id} from 'src/manifest';

const CustomTeamRouteComponent = () => {
    const currentTeam = useSelector(getCurrentTeam);
    return (
        <Switch>
            <Route path={`/${currentTeam.name}/${id}/error`}>
                <h3>{'This is error page!'}</h3>
                <p>
                    <a href={`/${currentTeam.name}`}>Back to Top</a>
                </p>
            </Route>
            <Route>
                <h3>{'404 Not Found'}</h3>
                <p>
                    <a href={`/${currentTeam.name}`}>Back to Top</a>
                </p>
            </Route>
        </Switch>
    )
}

CustomTeamRouteComponent.propTypes = {
    pluggableId: PropTypes.object.isRequired,
    theme: PropTypes.object.isRequired,
};

export default CustomTeamRouteComponent;

const { formatText, messageHtmlToComponent } = window.PostUtils;

const text = "...";
const formattedText = messageHtmlToComponent(formatText(text));