[MI-2608]: Explained the jira subscription modal in the doc.

docs/administrator-guide/notification-management.md

@@ -54,6 +54,20 @@ If you’d like to see support for additional events, [let us know](https://matt
 
 ![This is the Channel Subscription modal](../.gitbook/assets/channel-subscriptions-modal.png)
 
+## How to create and use the subscription modal?
+
+1. Type the `/jira subscribe` command to open the "Create subscription" modal in the particular channel.
+2. Click on the **Create Subscription** button to create the subscription and receive the Jira issue notifications.
+3. Write the name of the subscription in the **Subscription Name** field.
+4. Select the project name to which you want to subscribe.
+5. Select the events and issue types for which you want to receive the notifications in the Mattermost channel.
+6. To be more specific, you can add filters as well. You can either include or exclude the particular filter by adding its type or name. For now, we have 3 types of filters :
+   * Epic Link
+   * Labels
+   * Priority
+7. Based on the above given constraints in **Issue Type** and **Filters** fields an **Approximate JQL Output** is generated.
+8. Click on the **Add Subscription** button to add the subscription to that channel with the specific constraints that you have selected above.
+
 ## Setting up the webhook in Jira
 
 In order to have Jira post events to your Mattermost instance, you'll need to set up a webhook inside of Jira. Please see the instructions at [configure webhooks on the Jira server](https://mattermost.gitbook.io/plugin-jira/setting-up/configuration#step-2-configure-webhooks-on-the-jira-server).

webapp/src/components/modals/channel_subscriptions/edit_channel_subscription.tsx

@@ -400,6 +400,9 @@ export default class EditChannelSubscription extends PureComponent<Props, State>
                             <div style={getBaseStyles(this.props.theme).codeBlock}>
                                 <span>{generateJQLStringFromSubscriptionFilters(this.state.jiraIssueMetadata, filterFields, this.state.filters)}</span>
                             </div>
+                            <div style={style.learnMore}>
+                                <a href="https://github.com/mattermost/mattermost-plugin-jira/blob/master/docs/administrator-guide/notification-management.md#how-to-create-and-use-the-subscription-modal" target="_blank">{'Learn More'}</a>
+                            </div>
                         </div>
                     </React.Fragment>
                 );

webapp/src/utils/styles.ts

@@ -18,6 +18,9 @@ export const getBaseStyles = (theme: Theme) => {
 };
 
 export const getModalStyles = (theme) => ({
+    learnMore: {
+        marginTop: '1em',
+    },
     modalBody: {
         padding: '2em 2em 3em',
         color: theme.centerChannelColor,