Example hovercard webapp plugin for Mattermost
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
webapp
.gitignore
LICENSE
Makefile
README.md
plugin.json

README.md

Mattermost Hovercard Example Plugin

Only works with Mattermost versions before 5.2

An example plugin that overrides the profile popover (aka hovercard) of the Mattermost webapp.

Template generated using the Mattermost Developer Kit tool.

Requirements

Must have npm installed.

Usage

  1. Clone this repository:
git clone https://github.com/jwilander/hovercardexample.git
  1. Change into the repository directory and build:
cd hovercardexample
make build
  1. Upload the plugin at dist/hovercardexample.tar.gz to your Mattermost server, with plugins enabled

  2. (Optional) To display additional LDAP attributes on the hovercard, enable the built-in ldapextras plugin

How this plugin was made

  1. Used the mdk tool to generate the template:
$ mdk init plugin
Plugin Generation

Plugin name: HovercardExample
Description: Example hovercard plugin with Skype and LDAP integration

Webapp

? Override Components:  ProfilePopover
Post Types (comma separated, leave blank to skip): 

Plugin generated at: /path/to/plugins/hovercardexample
  1. Modified webapp/client/client.js to send a request to the LDAP Mattermost plugin. Note that authentication is handled by existing cookies.
  • Set url in the constructor to window.location.origin, which will be the Mattermost URL.
  • Created the getUserLdapAttributes() async function to make a request to the built-in LDAP plugin.
  1. Added a Redux-style action in webapp/actions/actions.js, named getUserLdapAttributes. The action:
  • Awaits on the getUserLdapAttributes() client function created in step 2.
  • Returns an object with data and error as necessary.
  1. Modified the hovercard container at webapp/components/profile_popver/index.js.
  1. Modifed the hovercard component at webapp/components/profile_popver/profile_popover.jsx.
  • Added an action prop definition for getUserLdapAttributes.
  • Added loading and attributes fields to state.
  • Added React lifecycle function componentDidMount() and used the action to populate state.
  • Updated the render() function to display user information.
    • Skype call link created with <a href="skype:<username>"</a>. For Skype for Business, this can be updated to <a href="sip:<username>@<domain>"</a>.
    • Added loading indicator and displayed LDAP attributes when loading complete.
  • Added a list CSS style under the getStyle function and used it for the <ul> tag in the render() function.
  1. Ran make build and uploaded it to a Mattermost server for testing.