Mattermost Hovercard Example Plugin
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
- Clone this repository:
git clone https://github.com/jwilander/hovercardexample.git
- Change into the repository directory and build:
cd hovercardexample
make build
-
Upload the plugin at
dist/hovercardexample.tar.gz
to your Mattermost server, with plugins enabled -
(Optional) To display additional LDAP attributes on the hovercard, enable the built-in ldapextras plugin
How this plugin was made
- Used the mdk tool to generate the template:
$ mdk init webapp
Performing setup for webapp plugin...
Plugin name: HovercardExample
Description: Example hovercard plugin with Skype and LDAP integration
? What components would you like to override with your plugin?
❯◉ ProfilePopover
Plugin generated at: ./hovercardexample
- 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 towindow.location.origin
, which will be the Mattermost URL. - Created the
getUserLdapAttributes()
async function to make a request to the built-in LDAP plugin.
- Added a Redux-style action in
webapp/actions/actions.js
, namedgetUserLdapAttributes
. The action:
- Awaits on the
getUserLdapAttributes()
client function created in step 2. - Returns an object with data and error as necessary.
- Modified the hovercard container at
webapp/components/profile_popver/index.js
.
- Imported the
getUserLdapAttributes
action and passed it to the action props of the component.
- Modifed the hovercard component at
webapp/components/profile_popver/profile_popover.jsx
.
- Added an action prop definition for
getUserLdapAttributes
. - Added
loading
andattributes
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.
- Skype call link created with
- Added a list CSS style under the
getStyle
function and used it for the<ul>
tag in therender()
function.
- Ran
make build
and uploaded it to a Mattermost server for testing.