mattermost / mattermost/mattermost-developer-documentation

Help Wanted: Recommend using `openModal` in webapp plugin development guide

Open
#1,008 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

difficulty/2:Medium Help Wanted Needs Documentation Up For Grabs
Dominant language
CSS
Stars
90
Forks
460
Avg merge
9d 23h
Merged PRs (30d)
2

Description

Related ticket https://mattermost.atlassian.net/browse/MM-41610

This change should be placed in a new file in the webapp plugin development guide https://developers.mattermost.com/integrate/plugins/webapp


Proposed addition to Documentation

If a webapp plugin needs to open a modal for its own use, it should use the globally exposed window.openModal function. This is recommended because it allows the core webapp to properly handle the lifecycle of the component.

Here's an example of using this function:

this.props.actions.openModal({
    modalId: 'my-plugin-id_my-modal-id',
    dialogType: MyModal,
    dialogProps: {
        someComponentProp: 'some value'.
    },
});
  • Replace my-plugin-id, my-modal-id, with appropriate values.
  • dialogType should be a React component implemented by the plugin. This is the component that will be instantiated when openModal is called.
  • The component will receive the dialogProps object as React props.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the webapp plugin development guide at developers.mattermost.com/integrate/plugins/webapp and review the linked window.openModal export for context. Add a new file containing the proposed recommendation, TypeScript example, and explanations of modalId, dialogType, and dialogProps; done means the guidance is published in the guide.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
documentation
Issue type
Documentation
Difficulty
1/5
Estimated time
Under an hour
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.