README.md

Demo Plugin: Web App

The web app component of this demo plugin is written in Javascript, and leverages React and Redux. It registers a component type for all of the supported registration calls, parses a custom webhook to detect when the server plugin's hooks status changes, and pings the server on network reconnect to synchronize state.

Each of the included files or folders is outlined below.

package.json

See the NPM documentation on package.json. It defines a build script to invoke webpack and generate a bundle, a lint script to run the src/ directory through the eslint checker, and a fix script that both lints and automatically tries to fix issues.

package-lock.json

See the NPM documentation on package-lock.json.

webpack.config.js

See the Webpack documentation on configuration. Notably, this configuration specifies external dependencies on React, Redux and React Redux to avoid bundling these libraries and duplicating the versions already part of the Mattermost Web App.

.eslintrc.json

This defines rules to configure eslint as part of invoking the lint and fix scripts. The styles are based on the rules used by the Mattermost Webapp.

node_modules

This is the location in which npm installs any necessary Javascript dependencies.

src/index.js

This is the entry point of the web app. When the plugin is loaded, this file is executed, registering the plugin with the Mattermost Webapp.

src/plugin_id.js

This is a file generated by the build/manifest tool that captures the plugin id from plugin.json. It simplifies the need to hard-code the plugin id in multiple places by exporting a constant for use instead.

src/plugin.jsx

This defines the Plugin class requires by the Mattermost Webapp, registering all the components and callbacks used by the plugin on initialize and logging a console message on uninitialize.

src/reducer.js

This exports a reducer tracking the plugin hook's status. It is part of the global state of the Mattermost Webapp, and accessible at store['plugins' + PluginId].

src/selectors.js

This defines selectors into the Redux state managed by the plugin to determine if the plugin is enabled or disabled.

src/action_types.js

This exports constants used by the Redux actions in action_types.js. It's important to namespace any action types to avoid unintentional collisions with action types from the Mattermost Webapp or other plugins.

src/actions.js

This exports Redux actions for triggering the root component, as well as querying the server for the current plugin hooks status and responding to websocket events emitted by the server for the plugin.

components

This folder exports a number of components illustrating plugin functionality.

Root

This plugin registers a modal-like root component that displays above all other components, and is triggered by interacting with other plugin components on the page:

User Attributes

This plugin registers a user attributes components displaying a static string:

User Actions

This plugin registers a user actions components displaying a static string followed by a simple <button> that triggers the root component:

Left Sidebar Header

This plugin registers a left sidebar header component displaying the current status of the plugin hooks:

Bottom Team Sidebar

This plugin registers a bottom team sidebar component displaying a plugin icon:

Channel Header Button Action

This plugin registers a channel header button action displaying a plugin icon that, when clicked, triggers the root component:

Post Type

This plugin renders a custom post type as part of handling the OnConfigurationChange hook in the server, dumping the updated plugin configuration:

Main Menu Action

This plugin registers a main menu action that, when clicked, triggers the root component:

Post Dropdown

This plugin registers a post dropdown action that, when clicked, triggers the root component:

File Upload

This plugin registers a file upload action that, when clicked, triggers the root component:

Link Tooltip

This plugin registers a link tooltip component, whose content is fully customizable. It is displayed when the mouse cursor hovers over a link in a post.