[Mattermost Integrations] Plugin (Webapp 1)

class PluginClass {
    /**
    * initialize is called by the webapp when the plugin is first loaded.
    * Receives the following:
    * - registry - an instance of the registry tied to your plugin id
    * - store - the Redux store of the web app.
    */
    initialize(registry, store)

    /**
    * uninitialize is called by the webapp if your plugin is uninstalled
    */
    uninitialize()
}

window.registerPlugin("myplugin", new PluginClass());

...

import {openRootModal} from './actions'
import reducer from './reducer';

import Root from './components/root';

...

export default class Plugin {
    initialize(registry, store) {
        // (1) Root Componentの登録
        registry.registerRootComponent(Root)

        // (2) Root Componentを呼び出すアクションの登録
        registry.registerChannelHeaderButtonAction(
            channelHeaderButtonIcon,
            () => store.dispatch(openRootModal()),
            "Open Root modal","Open Root modal"
        );

        registry.registerReducer(reducer);
    }
}

import React from "react";

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

  const style = getStyle();

  return (
    <div style={style.backdrop} onClick={close}>
      <div style={style.modal}>
        <p>Root modal</p>
      </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;

...

import UserAttributes from './components/user_attributes'

...

export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // (1) User Popoverに説明を追加するComponentの登録
		registry.registerPopoverUserAttributesComponent(UserAttributes)
		...
    }
}

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

const UserAttributes = ({user, hide, status}) => {
    console.log("user", user.id);
    return (
        <div>
            <p>{'UserId: ' + user.id}</p>
        </div>
    );
}

UserAttributes.propTypes = {
    user: PropTypes.object.isRequired,
    hide: PropTypes.func.isRequired,
    status: PropTypes.object.isRequired,
};

export default UserAttributes;

...
import UserAction from './components/user_action';
...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // User Popoverにアクションを追加するComponentの登録
		registry.registerPopoverUserActionsComponent(UserAction)
		...
	}
}

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

const UserActionComponent = ({openRootModal, user, hide, status}) => {
	const onClick = () => {
		openRootModal();
		hide();
	};
    return (
        <div>
            <p>User Action <button onClick={onClick}>Action</button></p>
        </div>
    )
};

UserActionComponent.PropTypes = {
	openRootModal: PropTypes.func.isRequired,
    user: PropTypes.object.isRequired,
    hide: PropTypes.func.isRequired,
    status: PropTypes.object.isRequired,
};

export default UserActionComponent;

...
import LeftSidebarHeader from './components/left_sidebar_header';
...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // User Popoverにアクションを追加するComponentの登録
		registry.registerLeftSidebarHeaderComponent(LeftSidebarHeader)
		...
	}
}

import React from 'react';

const LeftSidebarHeaderComponent = () => {
	const style = {
		color: 'white',
	};
    return (
        <div style={style}>
            <p>left sidear header</p>
        </div>
    );
}

export default LeftSidebarHeader;

...
import BottomTeamSidebar from './components/bottom_team_sidebar';
...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // User Popoverにアクションを追加するComponentの登録
		registry.registerLeftSidebarHeaderComponent(BottomTeamSidebar)
		...
	}
}

import React from 'react';

const BottomTeamSidebarComponent = () => (
    <>
        <a href="https://github.com/">
            <i
                className='icon fa fa-github'
                style={{color: 'white'}}
            />
        </a>
    </>
);

export default BottomTeamSidebarComponent;

...
import LinkTooltip from './components/link_tooltip';
...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // User Popoverにアクションを追加するComponentの登録
		registry.registerLinkTooltipComponent(LinkTooltip)
		...
	}
}

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

const LinkTooltipComponent = ({href}) => {
    return (
        <>
            <p style={{
                backgroundColor: 'white',
                color: 'black',
                padding: '25px',
                border: '1px solid red',
            }}>
                {href}
            </p>
        </>
    )
}

LinkTooltipComponent.propTypes = {
    href: PropTypes.string.isRequired,
};

export default LinkTooltipComponent;

import {openRootModal, createPluginPost} from './actions';
import reducer from './reducer';
import Root from './components/root';

...

export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
        // Root Componentの登録
        const rootComponentId = registry.registerRootComponent(Root)

        // Root Componentを呼び出すアクションの登録
        registry.registerChannelHeaderButtonAction(
            () => (<i className='icon fa fa-commenting-o' style={{fontSize: '15px', position: 'relative', top: '-1px'}}/>),
            () => store.dispatch(openRootModal()),
            "Open Root modal","Open Root modal"
		);

		...

        // 投稿を作成するチャンネルヘッダボタンを登録
        registry.registerChannelHeaderButtonAction(
            () => (<i className='icon fa fa-commenting-o' style={{fontSize: '15px', position: 'relative', top: '-1px'}}/>),
            (channel, channelMembers) => store.dispatch(createPluginPost(channel.id)),
            "Create Sample Post", "Create Sample Post"
        );

        registry.registerReducer(reducer);
    }
}

import {createPost} from 'mattermost-redux/actions/posts';
import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';

...

export function createPluginPost(channelId) {
    return async (dispatch, getState) => {
        const state = getState();
        const userId = getCurrentUserId(state)
        const post = {
            channel_id: channelId,
            user_id: userId,
            message: "Post from webapp plugin",
        }
        return await dispatch(createPost(post));
    }
}

curl \
  -H "Content-Type: application/json" \
  -d '{"type": "custom_sample_post", "text": "Sample Message", "props": {"card": "## Sample\n* foo\n* bar"}}'  \
  http://localhost:8065/hooks/ucw5qjw86jgeum77o1uw8197jr

...
import CustomPost from './components/custom_post';

export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // type: custom_sample_post を持つ投稿をレンダリングするComponentの登録
		registry.registerPostTypeComponent('custom_sample_post', CustomPost);
	}
}
...

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

const {formatText, messageHtmlToComponent} = window.PostUtils;

const CustomPostComponent = ({post, theme}) => {
    const formattedText = messageHtmlToComponent(formatText(post.message));

    console.log('theme', theme);
    return (
        <div style={{backgroundColor: '#ffcccc'}}>
            {formattedText}
            <pre>
                {JSON.stringify(post.props, null, 4)}
            </pre>
        </div>
    )
}

CustomPostComponent.propTypes = {
    post: PropTypes.object.isRequired,
    theme: PropTypes.object.isRequired,
};

export default CustomPostComponent;

curl \
  -H "Content-Type: application/json" \
  -d '{"type": "custom_sample_card", "text": "Sample Message", "props": {"card": "## Sample\n* foo\n* bar"}}'  \
  http://localhost:8065/hooks/ucw5qjw86jgeum77o1uw8197jr

...
import CustomCard from './components/custom_card';

export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // type: custom_sample_card を持つ投稿をレンダリングするComponentの登録
        registry.registerPostCardTypeComponent('custom_sample_card', CustomCard);
	}
}
...

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

const {formatText, messageHtmlToComponent} = window.PostUtils;

const CustomCardComponent = ({post, theme}) => {
    const formattedText = messageHtmlToComponent(formatText(post.message));

    console.log('theme', theme);
    return (
        <div style={{backgroundColor: '#ccccff'}}>
            {formattedText}
            <pre>
                {JSON.stringify(post.props, null, 4)}
            </pre>
        </div>
    )
}

CustomCardComponent.propTypes = {
    post: PropTypes.object.isRequired,
    theme: PropTypes.object.isRequired,
};

export default CustomCardComponent;

...
import CustomEmbed from './components/custom_embed';

export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // 投稿に含まれるURLのプレビューをレンダリングするComponentの登録
        registry.registerPostWillRenderEmbedComponent(
            (embed) => embed.url && embed.url.startsWith(`https://github.com/mattermost/`),
            CustomEmbed,
            true
        );
    }
}
...

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

const CustomEmbedComponent = ({embed}) => {
    const {type, url, data} = embed;
    return (
        <div style={{backgroundColor: '#ccffcc'}}>
            <p>{type}</p>
            <p>{url}</p>
            <pre>
                {JSON.stringify(data, null, 4)}
            </pre>
        </div>
    )
}

CustomEmbedComponent.propTypes = {
    embed: PropTypes.shape ({
        type: PropTypes.string.isRequired,
        url: PropTypes.string.isRequired,
        data: PropTypes.object.isRequired,
    })
};

export default CustomEmbedComponent;

...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // メインメニューを追加する
        registry.registerMainMenuAction(
            'Sample Main Menu',
            () => store.dispatch(openRootModal()),
            () => (<i className='icon fa fa-plug' style={{fontSize: '15px', position: 'relative', top: '-1px'}}/>)
        );
    }
}
...

...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // チャンネル名をクリックした際に表示されるメニューに独自メニューを追加する
        registry.registerChannelHeaderMenuAction(
            <i className='icon fa fa-plug' style={{fontSize: '15px', position: 'relative', top: '-1px'}}>{'Sample Menu'}</i>,
            (chnnelId) => store.dispatch(openRootModal())
        );
    }
}
...

...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // 投稿に対するドロップダウンメニューに独自メニューを追加する
        registry.registerPostDropdownMenuAction(
            <i className='icon fa fa-plug' style={{fontSize: '15px'}}>{'Sample Post Menu'}</i>,
            (postId) => store.dispatch(openRootModal()),
            (postId) => { return true; }
        );
    }
}
...

...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // 投稿に対するサブメニュー付きのドロップダウンメニューを追加する
        const {id, rootRegisterMenuItem} = registry.registerPostDropdownSubMenuAction(
            <i className='icon fa fa-plug' style={{fontSize: '15px'}}>{'Sample SubMenu'}</i>,
            (postId) => store.dispatch(openRootModal()),  // 実行されない
            (postId) => { return true; }
        );
        rootRegisterMenuItem(
            <i className='icon fa fa-plug' style={{fontSize: '15px'}}>{'SubMenu 1'}</i>,
            (postId) => store.dispatch(openRootModal()),
        );
        rootRegisterMenuItem(
            <i className='icon fa fa-plug' style={{fontSize: '15px'}}>{'SubMenu 2'}</i>,
            (postId) => store.dispatch(openRootModal())
        );
    }
}
...

...
import CustomPostDropdown from './components/custom_post_dropdown';
...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // 投稿に対するドロップダウンメニューにコンポーネントを登録する
        registry.registerPostDropdownMenuComponent(CustomPostDropdown);
		...
	}
}

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

import {openRootModal} from 'actions';

const CustomPostDropdownComponent = ({postId, theme, dispatch}) => {
    return (
        <div
            style={{backgroundColor: '#ffcccc'}}
            onClick={() => dispatch(openRootModal())}
        >
            {postId}
        </div>
    )
}

CustomPostDropdownComponent.propTypes = {
    postId: PropTypes.string.isRequired,
    theme: PropTypes.object.isRequired,
    dispatch: PropTypes.func.isRequired,
};

export default CustomPostDropdownComponent;

...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // ファイルアップロードメニューを追加する
        registry.registerFileUploadMethod(
            <i className='icon fa fa-pencil-square-o' style={{fontSize: '15px'}}/>,
            (upload) => upload([
                new File(["test1"], "sample1.txt"),
                new File(["test2"], 'sample2.txt')
            ]),
            'Sample File Upload'
        );
    }
}
...

...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...

        // ファイルアップロード時の処理を登録する
        registry.registerFilesWillUploadHook((files, upload) => {
            let msg = '';
            if (files.length >= 2 ) {
                files = null;
                msg = 'Must upload one by one.';
            }
            return {
                message: msg,
                files: files,
            };
        });
    }
}
...

...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // 左サイドバーの上部に表示されるComponentの登録
        const leftSidebarHeaderComponentId = registry.registerLeftSidebarHeaderComponent(LeftSidebarHeader);
        ...
        // プラグインによって登録されたコンポーネントを登録から除外する
        registry.registerMainMenuAction(
            'Unregister LeftSideberHeader',
            () => registry.unregisterComponent(leftSidebarHeaderComponentId),
            () => (<i className='icon fa fa-plug' style={{fontSize: '15px', position: 'relative', top: '-1px'}}/>)
        );
    }
}
...

...
import reducer from './reducer';
...
export default class Plugin {
    // eslint-disable-next-line no-unused-vars
    initialize(registry, store) {
		...
        // Reducerを登録する
        registry.registerReducer(reducer);
    }
}

import {combineReducers} from 'redux';

import {OPEN_ROOT_MODAL, CLOSE_ROOT_MODAL} from './action_types';

const rootModalVisible = (state = false, action) => {
    switch (action.type) {
    case OPEN_ROOT_MODAL:
        return true;
    case CLOSE_ROOT_MODAL:
        return false;
    default:
        return state;
    }
};

export default combineReducers({
    rootModalVisible,
});

import {id as pluginId} from './manifest';

export const OPEN_ROOT_MODAL = pluginId + '_open_root_modal';
export const CLOSE_ROOT_MODAL = pluginId + '_close_root_modal';