[PLT-6708] /purpose [text] slash command: Edit the channel purpose (#6569)

* /purpose [text] slash command: Edit the channel purpose

* update command on server side to check for direct or group channels

* update stings and block the dialog when is DM or GM

* update per review

* remove duplicate websocker event and apply the same for /header command

* update per review

* update

5 files changed, 36 insertions, 3 deletions

diff --git a/webapp/actions/global_actions.jsx b/webapp/actions/global_actions.jsx
index e37e702a2..b3dc078c4 100644
--- a/webapp/actions/global_actions.jsx
+++ b/webapp/actions/global_actions.jsx
@@ -225,6 +225,14 @@ export function showChannelHeaderUpdateModal(channel) {
     });
 }
 
+export function showChannelPurposeUpdateModal(channel) {
+    AppDispatcher.handleViewAction({
+        type: ActionTypes.TOGGLE_CHANNEL_PURPOSE_UPDATE_MODAL,
+        value: true,
+        channel
+    });
+}
+
 export function showGetPostLinkModal(post) {
     AppDispatcher.handleViewAction({
         type: ActionTypes.TOGGLE_GET_POST_LINK_MODAL,
diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx
index f2f4d7e39..32f812aa3 100644
--- a/webapp/components/create_post.jsx
+++ b/webapp/components/create_post.jsx
@@ -227,12 +227,19 @@ export default class CreatePost extends React.Component {
             return;
         }
 
-        if (this.state.message.endsWith('/header ')) {
+        if (this.state.message.trimRight() === '/header') {
             GlobalActions.showChannelHeaderUpdateModal(updateChannel);
             this.setState({message: ''});
             return;
         }
 
+        const isDirectOrGroup = ((updateChannel.type === Constants.DM_CHANNEL) || (updateChannel.type === Constants.GM_CHANNEL));
+        if (!isDirectOrGroup && this.state.message.trimRight() === '/purpose') {
+            GlobalActions.showChannelPurposeUpdateModal(updateChannel);
+            this.setState({message: ''});
+            return;
+        }
+
         this.doSubmit(e);
     }
 
diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx
index 6305f870e..fc2ade7ab 100644
--- a/webapp/components/navbar.jsx
+++ b/webapp/components/navbar.jsx
@@ -56,6 +56,8 @@ export default class Navbar extends React.Component {
 
         this.showEditChannelHeaderModal = this.showEditChannelHeaderModal.bind(this);
         this.hideEditChannelHeaderModal = this.hideEditChannelHeaderModal.bind(this);
+        this.showChannelPurposeModal = this.showChannelPurposeModal.bind(this);
+        this.hideChannelPurposeModal = this.hideChannelPurposeModal.bind(this);
         this.showRenameChannelModal = this.showRenameChannelModal.bind(this);
         this.hideRenameChannelModal = this.hideRenameChannelModal.bind(this);
         this.isStateValid = this.isStateValid.bind(this);
@@ -112,6 +114,7 @@ export default class Navbar extends React.Component {
         PreferenceStore.addChangeListener(this.onChange);
         ModalStore.addModalListener(ActionTypes.TOGGLE_QUICK_SWITCH_MODAL, this.toggleQuickSwitchModal);
         ModalStore.addModalListener(ActionTypes.TOGGLE_CHANNEL_HEADER_UPDATE_MODAL, this.showEditChannelHeaderModal);
+        ModalStore.addModalListener(ActionTypes.TOGGLE_CHANNEL_PURPOSE_UPDATE_MODAL, this.showChannelPurposeModal);
         $('.inner-wrap').click(this.hideSidebars);
         document.addEventListener('keydown', this.handleQuickSwitchKeyPress);
     }
@@ -124,6 +127,7 @@ export default class Navbar extends React.Component {
         PreferenceStore.removeChangeListener(this.onChange);
         ModalStore.removeModalListener(ActionTypes.TOGGLE_QUICK_SWITCH_MODAL, this.toggleQuickSwitchModal);
         ModalStore.addModalListener(ActionTypes.TOGGLE_CHANNEL_HEADER_UPDATE_MODAL, this.hideEditChannelHeaderModal);
+        ModalStore.addModalListener(ActionTypes.TOGGLE_CHANNEL_PURPOSE_UPDATE_MODAL, this.hideChannelPurposeModal);
         document.removeEventListener('keydown', this.handleQuickSwitchKeyPress);
     }
 
@@ -202,6 +206,18 @@ export default class Navbar extends React.Component {
         });
     }
 
+    showChannelPurposeModal() {
+        this.setState({
+            showEditChannelPurposeModal: true
+        });
+    }
+
+    hideChannelPurposeModal() {
+        this.setState({
+            showEditChannelPurposeModal: false
+        });
+    }
+
     showRenameChannelModal(e) {
         e.preventDefault();
 
@@ -504,7 +520,7 @@ export default class Navbar extends React.Component {
                             <a
                                 role='menuitem'
                                 href='#'
-                                onClick={() => this.setState({showEditChannelPurposeModal: true})}
+                                onClick={this.showChannelPurposeModal}
                             >
                                 <FormattedMessage
                                     id='channel_header.setPurpose'
@@ -891,7 +907,7 @@ export default class Navbar extends React.Component {
             if (this.state.showEditChannelPurposeModal) {
                 editChannelPurposeModal = (
                     <EditChannelPurposeModal
-                        onModalDismissed={() => this.setState({showEditChannelPurposeModal: false})}
+                        onModalDismissed={this.hideChannelPurposeModal}
                         channel={channel}
                     />
                 );
diff --git a/webapp/stores/modal_store.jsx b/webapp/stores/modal_store.jsx
index 434efcf90..666219d41 100644
--- a/webapp/stores/modal_store.jsx
+++ b/webapp/stores/modal_store.jsx
@@ -42,6 +42,7 @@ class ModalStoreClass extends EventEmitter {
         case ActionTypes.TOGGLE_DM_MODAL:
         case ActionTypes.TOGGLE_QUICK_SWITCH_MODAL:
         case ActionTypes.TOGGLE_CHANNEL_HEADER_UPDATE_MODAL:
+        case ActionTypes.TOGGLE_CHANNEL_PURPOSE_UPDATE_MODAL:
             this.emit(type, value, args);
             break;
         }
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index abe891e28..4ff20854f 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -175,6 +175,7 @@ export const ActionTypes = keyMirror({
     TOGGLE_DM_MODAL: null,
     TOGGLE_QUICK_SWITCH_MODAL: null,
     TOGGLE_CHANNEL_HEADER_UPDATE_MODAL: null,
+    TOGGLE_CHANNEL_PURPOSE_UPDATE_MODAL: null,
 
     SUGGESTION_PRETEXT_CHANGED: null,
     SUGGESTION_RECEIVED_SUGGESTIONS: null,