initial commit
This commit is contained in:
Jesse Hallam
parent
fe9c0e7188
commit
189f92c54b
54 changed files with 9238 additions and 0 deletions
636
webapp/.eslintrc.json
Normal file
636
webapp/.eslintrc.json
Normal file
|
|
@ -0,0 +1,636 @@
|
|||
{
|
||||
"extends": "eslint:recommended",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 8,
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {
|
||||
"jsx": true,
|
||||
"impliedStrict": true,
|
||||
"modules": true,
|
||||
"experimentalObjectRestSpread": true
|
||||
}
|
||||
},
|
||||
"parser": "babel-eslint",
|
||||
"plugins": [
|
||||
"react",
|
||||
"import"
|
||||
],
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true,
|
||||
"jquery": true,
|
||||
"es6": true,
|
||||
"jest": true
|
||||
},
|
||||
"globals": {
|
||||
"jest": true,
|
||||
"describe": true,
|
||||
"it": true,
|
||||
"expect": true,
|
||||
"before": true,
|
||||
"after": true,
|
||||
"beforeEach": true
|
||||
},
|
||||
"settings": {
|
||||
"import/resolver": "webpack"
|
||||
},
|
||||
"rules": {
|
||||
"array-bracket-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"array-callback-return": 2,
|
||||
"arrow-body-style": 0,
|
||||
"arrow-parens": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"arrow-spacing": [
|
||||
2,
|
||||
{
|
||||
"before": true,
|
||||
"after": true
|
||||
}
|
||||
],
|
||||
"block-scoped-var": 2,
|
||||
"brace-style": [
|
||||
2,
|
||||
"1tbs",
|
||||
{
|
||||
"allowSingleLine": false
|
||||
}
|
||||
],
|
||||
"camelcase": [
|
||||
2,
|
||||
{
|
||||
"properties": "never"
|
||||
}
|
||||
],
|
||||
"capitalized-comments": 0,
|
||||
"class-methods-use-this": 0,
|
||||
"comma-dangle": [
|
||||
2,
|
||||
"always-multiline"
|
||||
],
|
||||
"comma-spacing": [
|
||||
2,
|
||||
{
|
||||
"before": false,
|
||||
"after": true
|
||||
}
|
||||
],
|
||||
"comma-style": [
|
||||
2,
|
||||
"last"
|
||||
],
|
||||
"complexity": [
|
||||
0,
|
||||
10
|
||||
],
|
||||
"computed-property-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"consistent-return": 2,
|
||||
"consistent-this": [
|
||||
2,
|
||||
"self"
|
||||
],
|
||||
"constructor-super": 2,
|
||||
"curly": [
|
||||
2,
|
||||
"all"
|
||||
],
|
||||
"dot-location": [
|
||||
2,
|
||||
"object"
|
||||
],
|
||||
"dot-notation": 2,
|
||||
"eqeqeq": [
|
||||
2,
|
||||
"smart"
|
||||
],
|
||||
"func-call-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"func-name-matching": 0,
|
||||
"func-names": 2,
|
||||
"func-style": [
|
||||
2,
|
||||
"declaration",
|
||||
{
|
||||
"allowArrowFunctions": true
|
||||
}
|
||||
],
|
||||
"generator-star-spacing": [
|
||||
2,
|
||||
{
|
||||
"before": false,
|
||||
"after": true
|
||||
}
|
||||
],
|
||||
"global-require": 2,
|
||||
"guard-for-in": 2,
|
||||
"id-blacklist": 0,
|
||||
"import/no-unresolved": 2,
|
||||
"import/order": [
|
||||
"error",
|
||||
{
|
||||
"newlines-between": "always-and-inside-groups",
|
||||
"groups": [
|
||||
"builtin",
|
||||
"external",
|
||||
[
|
||||
"internal",
|
||||
"parent"
|
||||
],
|
||||
"sibling",
|
||||
"index"
|
||||
]
|
||||
}
|
||||
],
|
||||
"indent": [
|
||||
2,
|
||||
4,
|
||||
{
|
||||
"SwitchCase": 0
|
||||
}
|
||||
],
|
||||
"jsx-quotes": [
|
||||
2,
|
||||
"prefer-single"
|
||||
],
|
||||
"key-spacing": [
|
||||
2,
|
||||
{
|
||||
"beforeColon": false,
|
||||
"afterColon": true,
|
||||
"mode": "strict"
|
||||
}
|
||||
],
|
||||
"keyword-spacing": [
|
||||
2,
|
||||
{
|
||||
"before": true,
|
||||
"after": true,
|
||||
"overrides": {}
|
||||
}
|
||||
],
|
||||
"line-comment-position": 0,
|
||||
"linebreak-style": 2,
|
||||
"lines-around-comment": [
|
||||
2,
|
||||
{
|
||||
"beforeBlockComment": true,
|
||||
"beforeLineComment": true,
|
||||
"allowBlockStart": true,
|
||||
"allowBlockEnd": true
|
||||
}
|
||||
],
|
||||
"max-lines": [
|
||||
1,
|
||||
{
|
||||
"max": 450,
|
||||
"skipBlankLines": true,
|
||||
"skipComments": false
|
||||
}
|
||||
],
|
||||
"max-nested-callbacks": [
|
||||
2,
|
||||
{
|
||||
"max": 2
|
||||
}
|
||||
],
|
||||
"max-statements-per-line": [
|
||||
2,
|
||||
{
|
||||
"max": 1
|
||||
}
|
||||
],
|
||||
"multiline-ternary": [
|
||||
1,
|
||||
"never"
|
||||
],
|
||||
"new-cap": 2,
|
||||
"new-parens": 2,
|
||||
"newline-before-return": 0,
|
||||
"newline-per-chained-call": 0,
|
||||
"no-alert": 2,
|
||||
"no-array-constructor": 2,
|
||||
"no-await-in-loop": 2,
|
||||
"no-caller": 2,
|
||||
"no-case-declarations": 2,
|
||||
"no-class-assign": 2,
|
||||
"no-compare-neg-zero": 2,
|
||||
"no-cond-assign": [
|
||||
2,
|
||||
"except-parens"
|
||||
],
|
||||
"no-confusing-arrow": 2,
|
||||
"no-console": 2,
|
||||
"no-const-assign": 2,
|
||||
"no-constant-condition": 2,
|
||||
"no-debugger": 2,
|
||||
"no-div-regex": 2,
|
||||
"no-dupe-args": 2,
|
||||
"no-dupe-class-members": 2,
|
||||
"no-dupe-keys": 2,
|
||||
"no-duplicate-case": 2,
|
||||
"no-duplicate-imports": [
|
||||
2,
|
||||
{
|
||||
"includeExports": true
|
||||
}
|
||||
],
|
||||
"no-else-return": 2,
|
||||
"no-empty": 2,
|
||||
"no-empty-function": 2,
|
||||
"no-empty-pattern": 2,
|
||||
"no-eval": 2,
|
||||
"no-ex-assign": 2,
|
||||
"no-extend-native": 2,
|
||||
"no-extra-bind": 2,
|
||||
"no-extra-label": 2,
|
||||
"no-extra-parens": 0,
|
||||
"no-extra-semi": 2,
|
||||
"no-fallthrough": 2,
|
||||
"no-floating-decimal": 2,
|
||||
"no-func-assign": 2,
|
||||
"no-global-assign": 2,
|
||||
"no-implicit-coercion": 2,
|
||||
"no-implicit-globals": 0,
|
||||
"no-implied-eval": 2,
|
||||
"no-inner-declarations": 0,
|
||||
"no-invalid-regexp": 2,
|
||||
"no-irregular-whitespace": 2,
|
||||
"no-iterator": 2,
|
||||
"no-labels": 2,
|
||||
"no-lone-blocks": 2,
|
||||
"no-lonely-if": 2,
|
||||
"no-loop-func": 2,
|
||||
"no-magic-numbers": [
|
||||
1,
|
||||
{
|
||||
"ignore": [
|
||||
-1,
|
||||
0,
|
||||
1,
|
||||
2
|
||||
],
|
||||
"enforceConst": true,
|
||||
"detectObjects": true
|
||||
}
|
||||
],
|
||||
"no-mixed-operators": [
|
||||
2,
|
||||
{
|
||||
"allowSamePrecedence": false
|
||||
}
|
||||
],
|
||||
"no-mixed-spaces-and-tabs": 2,
|
||||
"no-multi-assign": 2,
|
||||
"no-multi-spaces": [
|
||||
2,
|
||||
{
|
||||
"exceptions": {
|
||||
"Property": false
|
||||
}
|
||||
}
|
||||
],
|
||||
"no-multi-str": 0,
|
||||
"no-multiple-empty-lines": [
|
||||
2,
|
||||
{
|
||||
"max": 1
|
||||
}
|
||||
],
|
||||
"no-native-reassign": 2,
|
||||
"no-negated-condition": 2,
|
||||
"no-nested-ternary": 2,
|
||||
"no-new": 2,
|
||||
"no-new-func": 2,
|
||||
"no-new-object": 2,
|
||||
"no-new-symbol": 2,
|
||||
"no-new-wrappers": 2,
|
||||
"no-octal-escape": 2,
|
||||
"no-param-reassign": 2,
|
||||
"no-process-env": 2,
|
||||
"no-process-exit": 2,
|
||||
"no-proto": 2,
|
||||
"no-redeclare": 2,
|
||||
"no-return-assign": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"no-return-await": 2,
|
||||
"no-script-url": 2,
|
||||
"no-self-assign": [
|
||||
2,
|
||||
{
|
||||
"props": true
|
||||
}
|
||||
],
|
||||
"no-self-compare": 2,
|
||||
"no-sequences": 2,
|
||||
"no-shadow": [
|
||||
2,
|
||||
{
|
||||
"hoist": "functions"
|
||||
}
|
||||
],
|
||||
"no-shadow-restricted-names": 2,
|
||||
"no-spaced-func": 2,
|
||||
"no-tabs": 0,
|
||||
"no-template-curly-in-string": 2,
|
||||
"no-ternary": 0,
|
||||
"no-this-before-super": 2,
|
||||
"no-throw-literal": 2,
|
||||
"no-trailing-spaces": [
|
||||
2,
|
||||
{
|
||||
"skipBlankLines": false
|
||||
}
|
||||
],
|
||||
"no-undef-init": 2,
|
||||
"no-undefined": 2,
|
||||
"no-underscore-dangle": 2,
|
||||
"no-unexpected-multiline": 2,
|
||||
"no-unmodified-loop-condition": 2,
|
||||
"no-unneeded-ternary": [
|
||||
2,
|
||||
{
|
||||
"defaultAssignment": false
|
||||
}
|
||||
],
|
||||
"no-unreachable": 2,
|
||||
"no-unsafe-finally": 2,
|
||||
"no-unsafe-negation": 2,
|
||||
"no-unused-expressions": 2,
|
||||
"no-unused-vars": [
|
||||
2,
|
||||
{
|
||||
"vars": "all",
|
||||
"args": "after-used"
|
||||
}
|
||||
],
|
||||
"no-use-before-define": [
|
||||
2,
|
||||
{
|
||||
"classes": false,
|
||||
"functions": false,
|
||||
"variables": false
|
||||
}
|
||||
],
|
||||
"no-useless-computed-key": 2,
|
||||
"no-useless-concat": 2,
|
||||
"no-useless-constructor": 2,
|
||||
"no-useless-escape": 2,
|
||||
"no-useless-rename": 2,
|
||||
"no-useless-return": 2,
|
||||
"no-var": 0,
|
||||
"no-void": 2,
|
||||
"no-warning-comments": 1,
|
||||
"no-whitespace-before-property": 2,
|
||||
"no-with": 2,
|
||||
"object-curly-newline": 0,
|
||||
"object-curly-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"object-property-newline": [
|
||||
2,
|
||||
{
|
||||
"allowMultiplePropertiesPerLine": true
|
||||
}
|
||||
],
|
||||
"object-shorthand": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"one-var": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"one-var-declaration-per-line": 0,
|
||||
"operator-assignment": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"operator-linebreak": [
|
||||
2,
|
||||
"after"
|
||||
],
|
||||
"padded-blocks": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"prefer-arrow-callback": 2,
|
||||
"prefer-const": 2,
|
||||
"prefer-destructuring": 0,
|
||||
"prefer-numeric-literals": 2,
|
||||
"prefer-promise-reject-errors": 2,
|
||||
"prefer-rest-params": 2,
|
||||
"prefer-spread": 2,
|
||||
"prefer-template": 0,
|
||||
"quote-props": [
|
||||
2,
|
||||
"as-needed"
|
||||
],
|
||||
"quotes": [
|
||||
2,
|
||||
"single",
|
||||
"avoid-escape"
|
||||
],
|
||||
"radix": 2,
|
||||
"react/display-name": [
|
||||
0,
|
||||
{
|
||||
"ignoreTranspilerName": false
|
||||
}
|
||||
],
|
||||
"react/forbid-component-props": 0,
|
||||
"react/forbid-elements": [
|
||||
2,
|
||||
{
|
||||
"forbid": [
|
||||
"embed"
|
||||
]
|
||||
}
|
||||
],
|
||||
"react/jsx-boolean-value": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"react/jsx-closing-bracket-location": [
|
||||
2,
|
||||
{
|
||||
"location": "tag-aligned"
|
||||
}
|
||||
],
|
||||
"react/jsx-curly-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"react/jsx-equals-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"react/jsx-filename-extension": 2,
|
||||
"react/jsx-first-prop-new-line": [
|
||||
2,
|
||||
"multiline"
|
||||
],
|
||||
"react/jsx-handler-names": 0,
|
||||
"react/jsx-indent": [
|
||||
2,
|
||||
4
|
||||
],
|
||||
"react/jsx-indent-props": [
|
||||
2,
|
||||
4
|
||||
],
|
||||
"react/jsx-key": 2,
|
||||
"react/jsx-max-props-per-line": [
|
||||
2,
|
||||
{
|
||||
"maximum": 1
|
||||
}
|
||||
],
|
||||
"react/jsx-no-bind": 0,
|
||||
"react/jsx-no-comment-textnodes": 2,
|
||||
"react/jsx-no-duplicate-props": [
|
||||
2,
|
||||
{
|
||||
"ignoreCase": false
|
||||
}
|
||||
],
|
||||
"react/jsx-no-literals": 2,
|
||||
"react/jsx-no-target-blank": 2,
|
||||
"react/jsx-no-undef": 2,
|
||||
"react/jsx-pascal-case": 2,
|
||||
"react/jsx-tag-spacing": [
|
||||
2,
|
||||
{
|
||||
"closingSlash": "never",
|
||||
"beforeSelfClosing": "never",
|
||||
"afterOpening": "never"
|
||||
}
|
||||
],
|
||||
"react/jsx-uses-react": 2,
|
||||
"react/jsx-uses-vars": 2,
|
||||
"react/jsx-wrap-multilines": 2,
|
||||
"react/no-array-index-key": 1,
|
||||
"react/no-children-prop": 2,
|
||||
"react/no-danger": 0,
|
||||
"react/no-danger-with-children": 2,
|
||||
"react/no-deprecated": 1,
|
||||
"react/no-did-mount-set-state": 2,
|
||||
"react/no-did-update-set-state": 2,
|
||||
"react/no-direct-mutation-state": 2,
|
||||
"react/no-find-dom-node": 1,
|
||||
"react/no-is-mounted": 2,
|
||||
"react/no-multi-comp": [
|
||||
2,
|
||||
{
|
||||
"ignoreStateless": true
|
||||
}
|
||||
],
|
||||
"react/no-render-return-value": 2,
|
||||
"react/no-set-state": 0,
|
||||
"react/no-string-refs": 0,
|
||||
"react/no-unescaped-entities": 2,
|
||||
"react/no-unknown-property": 2,
|
||||
"react/no-unused-prop-types": [
|
||||
1,
|
||||
{
|
||||
"skipShapeProps": true
|
||||
}
|
||||
],
|
||||
"react/prefer-es6-class": 2,
|
||||
"react/prefer-stateless-function": 0,
|
||||
"react/prop-types": [
|
||||
2,
|
||||
{
|
||||
"ignore": [
|
||||
"location",
|
||||
"history",
|
||||
"component"
|
||||
]
|
||||
}
|
||||
],
|
||||
"react/require-default-props": 0,
|
||||
"react/require-optimization": 1,
|
||||
"react/require-render-return": 2,
|
||||
"react/self-closing-comp": 2,
|
||||
"react/sort-comp": 0,
|
||||
"react/style-prop-object": 2,
|
||||
"require-yield": 2,
|
||||
"rest-spread-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"semi": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"semi-spacing": [
|
||||
2,
|
||||
{
|
||||
"before": false,
|
||||
"after": true
|
||||
}
|
||||
],
|
||||
"sort-imports": 0,
|
||||
"sort-keys": 0,
|
||||
"space-before-blocks": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"space-before-function-paren": [
|
||||
2,
|
||||
{
|
||||
"anonymous": "never",
|
||||
"named": "never",
|
||||
"asyncArrow": "always"
|
||||
}
|
||||
],
|
||||
"space-in-parens": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"space-infix-ops": 2,
|
||||
"space-unary-ops": [
|
||||
2,
|
||||
{
|
||||
"words": true,
|
||||
"nonwords": false
|
||||
}
|
||||
],
|
||||
"symbol-description": 2,
|
||||
"template-curly-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"valid-typeof": [
|
||||
2,
|
||||
{
|
||||
"requireStringLiterals": false
|
||||
}
|
||||
],
|
||||
"vars-on-top": 0,
|
||||
"wrap-iife": [
|
||||
2,
|
||||
"outside"
|
||||
],
|
||||
"wrap-regex": 2,
|
||||
"yoda": [
|
||||
2,
|
||||
"never",
|
||||
{
|
||||
"exceptRange": false,
|
||||
"onlyEquality": false
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
1
webapp/.gitignore
vendored
Normal file
1
webapp/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
105
webapp/README.md
Normal file
105
webapp/README.md
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
# Sample Plugin: Web App
|
||||
|
||||
The web app component of this sample plugin is written in Javascript, and leverages [React](https://reactjs.org/) and [Redux](https://redux.js.org/). 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](package.json)
|
||||
|
||||
See the NPM documentation on [package.json](https://docs.npmjs.com/files/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](https://eslint.org/) checker, and a `fix` script that both lints and automatically tries to fix issues.
|
||||
|
||||
## [package-lock.json](package-lock.json)
|
||||
|
||||
See the NPM documentation on [package-lock.json](https://docs.npmjs.com/files/package-lock.json).
|
||||
|
||||
## [webpack.config.js](webpack.config.js)
|
||||
|
||||
See the Webpack documentation on [configuration](https://webpack.js.org/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](.eslintrc.json)
|
||||
|
||||
This defines rules to configure [eslint](https://eslint.org/) as part of invoking the `lint` and `fix` scripts. The styles are based on the rules used by the Mattermost Webapp.
|
||||
|
||||
## [node\_modules](node_modules)
|
||||
|
||||
This is the [location](https://docs.npmjs.com/files/folders#node-modules) in which [npm](https://www.npmjs.com/) installs any necessary Javascript dependencies.
|
||||
|
||||
## [src/index.js](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](src/plugin_id.js)
|
||||
|
||||
This is a file generated by the [build/manifest](../build/manifest) tool that captures the plugin id from [plugin.json](../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](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](src/reducer.js)
|
||||
|
||||
This exports a [reducer](https://redux.js.org/basics/reducers) 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](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](src/action_types.js)
|
||||
|
||||
This exports constants used by the Redux [actions](https://redux.js.org/basics/actions) in [action\_types.js](src/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](src/actions.js)
|
||||
|
||||
This exports Redux [actions](https://redux.js.org/basics/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](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:
|
||||
|
||||
|
||||
|
||||
## Main Menu Action
|
||||
|
||||
This plugin registers a main menu action that, when clicked, triggers the root component:
|
||||
|
||||
|
||||
|
||||
# Post Type
|
||||
|
||||
This plugin renders a custom post type as part of handling the `OnActivate` hook in the server, dumping the current plugin configuration:
|
||||
|
||||
|
||||
BIN
webapp/docs/bottom_team_sidebar.png
Normal file
BIN
webapp/docs/bottom_team_sidebar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
webapp/docs/channel_header_button.png
Normal file
BIN
webapp/docs/channel_header_button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
webapp/docs/left_sidebar_header.png
Normal file
BIN
webapp/docs/left_sidebar_header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
webapp/docs/main_menu.png
Normal file
BIN
webapp/docs/main_menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
webapp/docs/post_type.png
Normal file
BIN
webapp/docs/post_type.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
webapp/docs/root.png
Normal file
BIN
webapp/docs/root.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
webapp/docs/user_actions.png
Normal file
BIN
webapp/docs/user_actions.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
webapp/docs/user_attributes.png
Normal file
BIN
webapp/docs/user_attributes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
6619
webapp/package-lock.json
generated
Normal file
6619
webapp/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
33
webapp/package.json
Normal file
33
webapp/package.json
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"name": "webapp",
|
||||
"version": "0.0.1",
|
||||
"description": "This plugin serves as a reference guide for best practices and build scripts when writing Mattermost plugins.",
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
"build": "webpack --mode=production",
|
||||
"lint": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .js --ext .jsx . --quiet",
|
||||
"fix": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .js --ext .jsx . --quiet --fix"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-eslint": "^8.2.6",
|
||||
"babel-loader": "^7.1.5",
|
||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"eslint": "^5.2.0",
|
||||
"eslint-import-resolver-webpack": "^0.10.1",
|
||||
"eslint-plugin-import": "^2.13.0",
|
||||
"eslint-plugin-react": "^7.10.0",
|
||||
"webpack": "^4.16.1",
|
||||
"webpack-cli": "^3.0.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^16.4.1",
|
||||
"react-redux": "^5.0.7",
|
||||
"redux": "^4.0.0"
|
||||
}
|
||||
}
|
||||
7
webapp/src/action_types.js
Normal file
7
webapp/src/action_types.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import PluginId from './plugin_id';
|
||||
|
||||
// Namespace your actions to avoid collisions.
|
||||
export const STATUS_CHANGE = PluginId + '_status_change';
|
||||
|
||||
export const OPEN_ROOT_MODAL = PluginId + '_open_root_modal';
|
||||
export const CLOSE_ROOT_MODAL = PluginId + '_close_root_modal';
|
||||
31
webapp/src/actions.js
Normal file
31
webapp/src/actions.js
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import PluginId from './plugin_id';
|
||||
import {STATUS_CHANGE, OPEN_ROOT_MODAL, CLOSE_ROOT_MODAL} from './action_types';
|
||||
|
||||
export const openRootModal = () => (dispatch) => {
|
||||
dispatch({
|
||||
type: OPEN_ROOT_MODAL,
|
||||
});
|
||||
};
|
||||
|
||||
export const closeRootModal = () => (dispatch) => {
|
||||
dispatch({
|
||||
type: CLOSE_ROOT_MODAL,
|
||||
});
|
||||
};
|
||||
|
||||
export const mainMenuAction = openRootModal;
|
||||
export const channelHeaderButtonAction = openRootModal;
|
||||
|
||||
export const getStatus = () => (dispatch) => {
|
||||
fetch('/plugins/' + PluginId + '/').then((r) => r.json()).then((r) => {
|
||||
dispatch({
|
||||
type: STATUS_CHANGE,
|
||||
data: r.enabled,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const websocketStatusChange = (message) => (dispatch) => dispatch({
|
||||
type: STATUS_CHANGE,
|
||||
data: message.data.enabled,
|
||||
});
|
||||
10
webapp/src/components/bottom_team_sidebar.jsx
Normal file
10
webapp/src/components/bottom_team_sidebar.jsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
|
||||
const BottomTeamSidebarComponent = () => (
|
||||
<i
|
||||
className='icon fa fa-plug'
|
||||
style={{color: 'white'}}
|
||||
/>
|
||||
);
|
||||
|
||||
export default BottomTeamSidebarComponent;
|
||||
9
webapp/src/components/icons.jsx
Normal file
9
webapp/src/components/icons.jsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
export const MainMenuMobileIcon = () => (
|
||||
<i className='icon fa fa-plug'/>
|
||||
);
|
||||
|
||||
export const ChannelHeaderButtonIcon = () => (
|
||||
<i className='icon fa fa-plug'/>
|
||||
);
|
||||
11
webapp/src/components/left_sidebar_header/index.js
Normal file
11
webapp/src/components/left_sidebar_header/index.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import {connect} from 'react-redux';
|
||||
|
||||
import {isEnabled} from 'selectors';
|
||||
|
||||
import LeftSidebarHeader from './left_sidebar_header';
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
enabled: isEnabled(state),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(LeftSidebarHeader);
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// LeftSidebarHeader is a pure component, later connected to the Redux store so as to
|
||||
// show the plugin's enabled / disabled status.
|
||||
export default class LeftSidebarHeader extends React.PureComponent {
|
||||
static propTypes = {
|
||||
enabled: PropTypes.bool.isRequired,
|
||||
}
|
||||
|
||||
render() {
|
||||
const iconStyle = {
|
||||
display: 'inline-block',
|
||||
margin: '0 7px 0 1px',
|
||||
};
|
||||
const style = {
|
||||
margin: '.5em 0 .5em',
|
||||
padding: '0 12px 0 15px',
|
||||
color: 'rgba(255,255,255,0.6)',
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={style}>
|
||||
<i
|
||||
className='icon fa fa-plug'
|
||||
style={iconStyle}
|
||||
/>
|
||||
{'Sample Plugin: '} {this.props.enabled ? <span>{ 'Enabled' }</span> : <span>{ 'Disabled' }</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
36
webapp/src/components/post_type.jsx
Normal file
36
webapp/src/components/post_type.jsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const {formatText, messageHtmlToComponent} = window['post-utils'];
|
||||
|
||||
export default class PostType extends React.PureComponent {
|
||||
static propTypes = {
|
||||
post: PropTypes.object.isRequired,
|
||||
theme: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
render() {
|
||||
const style = getStyle(this.props.theme);
|
||||
const post = {...this.props.post};
|
||||
const message = post.message || '';
|
||||
|
||||
const formattedText = messageHtmlToComponent(formatText(message));
|
||||
|
||||
return (
|
||||
<div>
|
||||
{formattedText}
|
||||
<pre style={style.configuration}>
|
||||
{JSON.stringify(post.props, null, 4)}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const getStyle = (theme) => ({
|
||||
configuration: {
|
||||
padding: '1em',
|
||||
color: theme.centerChannelBg,
|
||||
backgroundColor: theme.centerChannelColor,
|
||||
},
|
||||
});
|
||||
17
webapp/src/components/root/index.js
Normal file
17
webapp/src/components/root/index.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import {connect} from 'react-redux';
|
||||
import {bindActionCreators} from 'redux';
|
||||
|
||||
import {closeRootModal} from 'actions';
|
||||
import {isRootModalVisible} from 'selectors';
|
||||
|
||||
import Root from './root';
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
visible: isRootModalVisible(state),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => bindActionCreators({
|
||||
close: closeRootModal,
|
||||
}, dispatch);
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Root);
|
||||
54
webapp/src/components/root/root.jsx
Normal file
54
webapp/src/components/root/root.jsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Root = ({visible, close, theme}) => {
|
||||
if (!visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const style = getStyle(theme);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={style.backdrop}
|
||||
onClick={close}
|
||||
>
|
||||
<div style={style.modal}>
|
||||
{ 'You have triggered the root component of the sample plugin.' }
|
||||
<br/>
|
||||
<br/>
|
||||
{ 'Click anywhere to close.' }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Root.propTypes = {
|
||||
visible: PropTypes.bool.isRequired,
|
||||
close: PropTypes.func.isRequired,
|
||||
theme: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
const getStyle = (theme) => ({
|
||||
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: '250px',
|
||||
width: '400px',
|
||||
padding: '1em',
|
||||
color: theme.centerChannelColor,
|
||||
backgroundColor: theme.centerChannelBg,
|
||||
},
|
||||
});
|
||||
|
||||
export default Root;
|
||||
12
webapp/src/components/user_actions/index.js
Normal file
12
webapp/src/components/user_actions/index.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import {connect} from 'react-redux';
|
||||
import {bindActionCreators} from 'redux';
|
||||
|
||||
import {openRootModal} from 'actions';
|
||||
|
||||
import UserActions from './user_actions';
|
||||
|
||||
const mapDispatchToProps = (dispatch) => bindActionCreators({
|
||||
openRootModal,
|
||||
}, dispatch);
|
||||
|
||||
export default connect(null, mapDispatchToProps)(UserActions);
|
||||
36
webapp/src/components/user_actions/user_actions.jsx
Normal file
36
webapp/src/components/user_actions/user_actions.jsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default class UserActionsComponent extends React.PureComponent {
|
||||
static propTypes = {
|
||||
openRootModal: PropTypes.func.isRequired,
|
||||
theme: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
onClick = () => {
|
||||
this.props.openRootModal();
|
||||
}
|
||||
|
||||
render() {
|
||||
const style = getStyle(this.props.theme);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ 'Sample Plugin: '}
|
||||
<button
|
||||
style={style.button}
|
||||
onClick={this.onClick}
|
||||
>
|
||||
{'Action'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const getStyle = (theme) => ({
|
||||
button: {
|
||||
color: theme.buttonColor,
|
||||
backgroundColor: theme.buttonBg,
|
||||
},
|
||||
});
|
||||
10
webapp/src/components/user_attributes.jsx
Normal file
10
webapp/src/components/user_attributes.jsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
|
||||
export default class UserAttributes extends React.PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<div>{'Sample Plugin: User Attributes'}</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
4
webapp/src/index.js
Normal file
4
webapp/src/index.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import Plugin from './plugin';
|
||||
import PluginId from './plugin_id';
|
||||
|
||||
window.registerPlugin(PluginId, new Plugin());
|
||||
69
webapp/src/plugin.jsx
Normal file
69
webapp/src/plugin.jsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import React from 'react';
|
||||
|
||||
import PluginId from './plugin_id';
|
||||
|
||||
import Root from './components/root';
|
||||
import BottomTeamSidebar from './components/bottom_team_sidebar';
|
||||
import LeftSidebarHeader from './components/left_sidebar_header';
|
||||
import UserAttributes from './components/user_attributes';
|
||||
import UserActions from './components/user_actions';
|
||||
import PostType from './components/post_type';
|
||||
import {
|
||||
MainMenuMobileIcon,
|
||||
ChannelHeaderButtonIcon,
|
||||
} from './components/icons';
|
||||
import {
|
||||
mainMenuAction,
|
||||
channelHeaderButtonAction,
|
||||
websocketStatusChange,
|
||||
getStatus,
|
||||
} from './actions';
|
||||
import reducer from './reducer';
|
||||
|
||||
export default class SamplePlugin {
|
||||
initialize(registry, store) {
|
||||
registry.registerRootComponent(Root);
|
||||
registry.registerPopoverUserAttributesComponent(UserAttributes);
|
||||
registry.registerPopoverUserActionsComponent(UserActions);
|
||||
registry.registerLeftSidebarHeaderComponent(LeftSidebarHeader);
|
||||
registry.registerBottomTeamSidebarComponent(
|
||||
BottomTeamSidebar,
|
||||
);
|
||||
|
||||
registry.registerChannelHeaderButtonAction(
|
||||
<ChannelHeaderButtonIcon/>,
|
||||
() => store.dispatch(channelHeaderButtonAction()),
|
||||
'Sample Plugin',
|
||||
);
|
||||
|
||||
registry.registerPostTypeComponent('custom_sample_plugin', PostType);
|
||||
|
||||
registry.registerMainMenuAction(
|
||||
'Sample Plugin',
|
||||
() => store.dispatch(mainMenuAction()),
|
||||
<MainMenuMobileIcon/>,
|
||||
);
|
||||
|
||||
registry.registerWebSocketEventHandler(
|
||||
'custom_' + PluginId + '_status_change',
|
||||
(message) => {
|
||||
store.dispatch(websocketStatusChange(message));
|
||||
},
|
||||
);
|
||||
|
||||
registry.registerReducer(reducer);
|
||||
|
||||
// Immediately fetch the current plugin status.
|
||||
store.dispatch(getStatus());
|
||||
|
||||
// Fetch the current status whenever we recover an internet connection.
|
||||
registry.registerReconnectHandler(() => {
|
||||
store.dispatch(getStatus());
|
||||
});
|
||||
}
|
||||
|
||||
uninitialize() {
|
||||
//eslint-disable-next-line no-console
|
||||
console.log(PluginId + '::uninitialize()');
|
||||
}
|
||||
}
|
||||
1
webapp/src/plugin_id.js
Normal file
1
webapp/src/plugin_id.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export default 'com.mattermost.sample-plugin';
|
||||
30
webapp/src/reducer.js
Normal file
30
webapp/src/reducer.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import {combineReducers} from 'redux';
|
||||
|
||||
import {STATUS_CHANGE, OPEN_ROOT_MODAL, CLOSE_ROOT_MODAL} from './action_types';
|
||||
|
||||
const enabled = (state = false, action) => {
|
||||
switch (action.type) {
|
||||
case STATUS_CHANGE:
|
||||
return action.data;
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
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({
|
||||
enabled,
|
||||
rootModalVisible,
|
||||
});
|
||||
|
||||
7
webapp/src/selectors.js
Normal file
7
webapp/src/selectors.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import PluginId from './plugin_id';
|
||||
|
||||
const getPluginState = (state) => state['plugins-' + PluginId] || {};
|
||||
|
||||
export const isEnabled = (state) => getPluginState(state).enabled;
|
||||
|
||||
export const isRootModalVisible = (state) => getPluginState(state).rootModalVisible;
|
||||
42
webapp/webpack.config.js
Normal file
42
webapp/webpack.config.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
var path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: [
|
||||
'./src/index.js',
|
||||
],
|
||||
resolve: {
|
||||
modules: [
|
||||
'src',
|
||||
'node_modules',
|
||||
],
|
||||
extensions: ['*', '.js', '.jsx'],
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['env', 'react'],
|
||||
plugins: [
|
||||
'transform-class-properties',
|
||||
'transform-object-rest-spread',
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
externals: {
|
||||
react: 'react',
|
||||
redux: 'redux',
|
||||
'react-redux': 'reactRedux',
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, '/dist'),
|
||||
publicPath: '/',
|
||||
filename: 'main.js',
|
||||
},
|
||||
};
|
||||
Reference in a new issue