Skip to content

Latest commit

 

History

History
122 lines (62 loc) · 5.33 KB

README.md

File metadata and controls

122 lines (62 loc) · 5.33 KB

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.

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.

See the NPM documentation on package-lock.json.

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.

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.

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

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.

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.

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.

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

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

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.

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.

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:

root

User Attributes

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

user attributes

User Actions

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

user actions

Left Sidebar Header

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

left sidebar header

Bottom Team Sidebar

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

bottom team sidebar

Channel Header Button Action

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

channel header button

Post Type

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

post type

Main Menu Action

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

main menu

Post Dropdown

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

post dropdown

File Upload

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

file upload

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. link tooltip