[PLT-6707] /header [text] slash command: Edit the channel header (#6566)

* add /header slash command

* update websocket

* updater per review

actions/global_actions.jsx

@@ -212,6 +212,14 @@ export function showDeletePostModal(post, commentCount = 0) {
  });
 }
 
+export function showChannelHeaderUpdateModal(channel) {
+ AppDispatcher.handleViewAction({
+ type: ActionTypes.TOGGLE_CHANNEL_HEADER_UPDATE_MODAL,
+ value: true,
+ channel
+ });
+}
+
 export function showGetPostLinkModal(post) {
  AppDispatcher.handleViewAction({
  type: ActionTypes.TOGGLE_GET_POST_LINK_MODAL,

actions/websocket_actions.jsx

@@ -229,6 +229,11 @@ function handleEvent(msg) {
  }
 }
 
+function handleChannelUpdatedEvent(msg) {
+ const channel = JSON.parse(msg.data.channel);
+ dispatch({type: ChannelTypes.RECEIVED_CHANNEL, data: channel});
+}
+
 function handleNewPostEvent(msg) {
  const post = JSON.parse(msg.data.post);
  handleNewPost(post, msg);
@@ -341,11 +346,6 @@ function handleUserRemovedEvent(msg) {
  }
 }
 
-function handleChannelUpdatedEvent(msg) {
- const channel = JSON.parse(msg.data.channel);
- dispatch({type: ChannelTypes.RECEIVED_CHANNEL, data: channel});
-}
-
 function handleUserUpdatedEvent(msg) {
  const user = msg.data.user;
  if (UserStore.getCurrentId() !== user.id) {

components/create_post.jsx

@@ -76,14 +76,15 @@ export default class CreatePost extends React.Component {
 
  PostStore.clearDraftUploads();
 
- const channelId = ChannelStore.getCurrentId();
- const draft = PostStore.getDraft(channelId);
-
+ const channel = ChannelStore.getCurrent();
+ const channelId = channel.id;
+ const draft = PostStore.getPostDraft(channelId);
  const stats = ChannelStore.getCurrentStats();
  const members = stats.member_count - 1;
 
  this.state = {
  channelId,
+ channel,
  message: draft.message,
  uploadsInProgress: draft.uploadsInProgress,
  fileInfos: draft.fileInfos,
@@ -213,12 +214,20 @@ export default class CreatePost extends React.Component {
  handleSubmit(e) {
  const stats = ChannelStore.getCurrentStats();
  const members = stats.member_count - 1;
+ const updateChannel = ChannelStore.getCurrent();
 
  if ((this.state.message.includes('@all') || this.state.message.includes('@channel')) && members >= Constants.NOTIFY_ALL_MEMBERS) {
  this.setState({totalMembers: members});
  this.showNotifyAllModal();
  return;
  }
+
+ if (this.state.message.endsWith('/header ')) {
+ GlobalActions.showChannelHeaderUpdateModal(updateChannel);
+ this.setState({message: ''});
+ return;
+ }
+
  this.doSubmit(e);
  }
 

components/navbar.jsx

@@ -55,6 +55,7 @@ export default class Navbar extends React.Component {
  this.showSearch = this.showSearch.bind(this);
 
  this.showEditChannelHeaderModal = this.showEditChannelHeaderModal.bind(this);
+ this.hideEditChannelHeaderModal = this.hideEditChannelHeaderModal.bind(this);
  this.showRenameChannelModal = this.showRenameChannelModal.bind(this);
  this.hideRenameChannelModal = this.hideRenameChannelModal.bind(this);
  this.isStateValid = this.isStateValid.bind(this);
@@ -110,6 +111,7 @@ export default class Navbar extends React.Component {
  UserStore.addChangeListener(this.onChange);
  PreferenceStore.addChangeListener(this.onChange);
  ModalStore.addModalListener(ActionTypes.TOGGLE_QUICK_SWITCH_MODAL, this.toggleQuickSwitchModal);
+ ModalStore.addModalListener(ActionTypes.TOGGLE_CHANNEL_HEADER_UPDATE_MODAL, this.showEditChannelHeaderModal);
  $('.inner-wrap').click(this.hideSidebars);
  document.addEventListener('keydown', this.handleQuickSwitchKeyPress);
  }
@@ -121,6 +123,7 @@ export default class Navbar extends React.Component {
  UserStore.removeChangeListener(this.onChange);
  PreferenceStore.removeChangeListener(this.onChange);
  ModalStore.removeModalListener(ActionTypes.TOGGLE_QUICK_SWITCH_MODAL, this.toggleQuickSwitchModal);
+ ModalStore.addModalListener(ActionTypes.TOGGLE_CHANNEL_HEADER_UPDATE_MODAL, this.hideEditChannelHeaderModal);
  document.removeEventListener('keydown', this.handleQuickSwitchKeyPress);
  }
 
@@ -193,6 +196,12 @@ export default class Navbar extends React.Component {
  });
  }
 
+ hideEditChannelHeaderModal() {
+ this.setState({
+ showEditChannelHeaderModal: false
+ });
+ }
+
  showRenameChannelModal(e) {
  e.preventDefault();
 

stores/modal_store.jsx

@@ -41,6 +41,7 @@ class ModalStoreClass extends EventEmitter {
  case ActionTypes.TOGGLE_GET_PUBLIC_LINK_MODAL:
  case ActionTypes.TOGGLE_DM_MODAL:
  case ActionTypes.TOGGLE_QUICK_SWITCH_MODAL:
+ case ActionTypes.TOGGLE_CHANNEL_HEADER_UPDATE_MODAL:
  this.emit(type, value, args);
  break;
  }

utils/constants.jsx

@@ -176,6 +176,7 @@ export const ActionTypes = keyMirror({
  TOGGLE_GET_PUBLIC_LINK_MODAL: null,
  TOGGLE_DM_MODAL: null,
  TOGGLE_QUICK_SWITCH_MODAL: null,
+ TOGGLE_CHANNEL_HEADER_UPDATE_MODAL: null,
 
  SUGGESTION_PRETEXT_CHANGED: null,
  SUGGESTION_RECEIVED_SUGGESTIONS: null,