Adding edit of incoming webhook (#5272)

Adding edit of outgoing webhook
Fixing spelling of error
Fixing style
Changing from PUT to POST for updates
Fixing test failures due to merge

api/webhook.go

@@ -21,10 +21,12 @@ func InitWebhook() {
 	l4g.Debug(utils.T("api.webhook.init.debug"))
 
 	BaseRoutes.Hooks.Handle("/incoming/create", ApiUserRequired(createIncomingHook)).Methods("POST")
+	BaseRoutes.Hooks.Handle("/incoming/update", ApiUserRequired(updateIncomingHook)).Methods("POST")
 	BaseRoutes.Hooks.Handle("/incoming/delete", ApiUserRequired(deleteIncomingHook)).Methods("POST")
 	BaseRoutes.Hooks.Handle("/incoming/list", ApiUserRequired(getIncomingHooks)).Methods("GET")
 
 	BaseRoutes.Hooks.Handle("/outgoing/create", ApiUserRequired(createOutgoingHook)).Methods("POST")
+	BaseRoutes.Hooks.Handle("/outgoing/update", ApiUserRequired(updateOutgoingHook)).Methods("POST")
 	BaseRoutes.Hooks.Handle("/outgoing/regen_token", ApiUserRequired(regenOutgoingHookToken)).Methods("POST")
 	BaseRoutes.Hooks.Handle("/outgoing/delete", ApiUserRequired(deleteOutgoingHook)).Methods("POST")
 	BaseRoutes.Hooks.Handle("/outgoing/list", ApiUserRequired(getOutgoingHooks)).Methods("GET")
@@ -71,16 +73,86 @@ func createIncomingHook(c *Context, w http.ResponseWriter, r *http.Request) {
 	}
 }
 
-func deleteIncomingHook(c *Context, w http.ResponseWriter, r *http.Request) {
+func updateIncomingHook(c *Context, w http.ResponseWriter, r *http.Request) {
-	if !utils.Cfg.ServiceSettings.EnableIncomingWebhooks {
+	if err := checkIncomingWebHooks("updateIncomingHook", "api.webhook.update_incoming.disabled.app_error"); err != nil {
-		c.Err = model.NewLocAppError("deleteIncomingHook", "api.webhook.delete_incoming.disabled.app_errror", nil, "")
+		c.Err = err
-		c.Err.StatusCode = http.StatusNotImplemented
 		return
 	}
 
-	if !app.SessionHasPermissionToTeam(c.Session, c.TeamId, model.PERMISSION_MANAGE_WEBHOOKS) {
+	if err := checkManageWebhooksPermission(c, "updateIncomingHook", "api.command.admin_only.app_error"); err != nil {
-		c.Err = model.NewLocAppError("deleteIncomingHook", "api.command.admin_only.app_error", nil, "")
+		c.Err = err
-		c.Err.StatusCode = http.StatusForbidden
+		return
+	}
+
+	c.LogAudit("attempt")
+
+	hook := model.IncomingWebhookFromJson(r.Body)
+
+	if hook == nil {
+		c.SetInvalidParam("updateIncomingHook", "webhook")
+		return
+	}
+
+	var oldHook *model.IncomingWebhook
+	var result store.StoreResult
+
+	if result = <-app.Srv.Store.Webhook().GetIncoming(hook.Id, true); result.Err != nil {
+		c.LogAudit("no existing incoming hook found")
+		c.Err = result.Err
+		return
+	}
+
+	oldHook = result.Data.(*model.IncomingWebhook)
+	cchan := app.Srv.Store.Channel().Get(hook.ChannelId, true)
+
+	var channel *model.Channel
+	if result = <-cchan; result.Err != nil {
+		c.Err = result.Err
+		return
+	}
+
+	channel = result.Data.(*model.Channel)
+	if channel.Type != model.CHANNEL_OPEN && !app.SessionHasPermissionToChannel(c.Session, channel.Id, model.PERMISSION_READ_CHANNEL) {
+		c.LogAudit("fail - bad channel permissions")
+		c.SetPermissionError(model.PERMISSION_READ_CHANNEL)
+		return
+	}
+
+	if c.Session.UserId != oldHook.UserId && !app.SessionHasPermissionToTeam(c.Session, c.TeamId, model.PERMISSION_MANAGE_OTHERS_WEBHOOKS) {
+		c.LogAudit("fail - inappropriate permissions")
+		c.Err = model.NewLocAppError("updateIncomingHook", "api.webhook.update_incoming.permissions.app_error", nil, "user_id="+c.Session.UserId)
+		return
+	}
+
+	if c.TeamId != oldHook.TeamId {
+		c.Err = model.NewLocAppError("UpdateIncomingHook", "api.webhook.team_mismatch.app_error", nil, "user_id="+c.Session.UserId)
+		return
+	}
+
+	hook.UserId = oldHook.UserId
+	hook.CreateAt = oldHook.CreateAt
+	hook.UpdateAt = model.GetMillis()
+	hook.TeamId = oldHook.TeamId
+	hook.DeleteAt = oldHook.DeleteAt
+
+	if result = <-app.Srv.Store.Webhook().UpdateIncoming(hook); result.Err != nil {
+		c.Err = result.Err
+		return
+	}
+
+	c.LogAudit("success")
+	rhook := result.Data.(*model.IncomingWebhook)
+	w.Write([]byte(rhook.ToJson()))
+}
+
+func deleteIncomingHook(c *Context, w http.ResponseWriter, r *http.Request) {
+	if err := checkIncomingWebHooks("deleteIncomingHook", "api.webhook.delete_incoming.disabled.app_error"); err != nil {
+		c.Err = err
+		return
+	}
+
+	if err := checkManageWebhooksPermission(c, "deleteIncomingHook", "api.command.admin_only.app_error"); err != nil {
+		c.Err = err
 		return
 	}
 
@@ -100,7 +172,7 @@ func deleteIncomingHook(c *Context, w http.ResponseWriter, r *http.Request) {
 	} else {
 		if c.Session.UserId != result.Data.(*model.IncomingWebhook).UserId && !app.SessionHasPermissionToTeam(c.Session, c.TeamId, model.PERMISSION_MANAGE_OTHERS_WEBHOOKS) {
 			c.LogAudit("fail - inappropriate permissions")
-			c.Err = model.NewLocAppError("deleteIncomingHook", "api.webhook.delete_incoming.permissions.app_errror", nil, "user_id="+c.Session.UserId)
+			c.Err = model.NewLocAppError("deleteIncomingHook", "api.webhook.delete_incoming.permissions.app_error", nil, "user_id="+c.Session.UserId)
 			return
 		}
 	}
@@ -130,16 +202,72 @@ func getIncomingHooks(c *Context, w http.ResponseWriter, r *http.Request) {
 	}
 }
 
-func createOutgoingHook(c *Context, w http.ResponseWriter, r *http.Request) {
+func checkOutgoingWebHooks(where string, id string) *model.AppError {
 	if !utils.Cfg.ServiceSettings.EnableOutgoingWebhooks {
-		c.Err = model.NewLocAppError("createOutgoingHook", "api.webhook.create_outgoing.disabled.app_error", nil, "")
+		err := model.NewLocAppError(where, id, nil, "")
-		c.Err.StatusCode = http.StatusNotImplemented
+		err.StatusCode = http.StatusNotImplemented
+		return err
+	}
+
+	return nil
+}
+
+func checkIncomingWebHooks(where string, id string) *model.AppError {
+	if !utils.Cfg.ServiceSettings.EnableIncomingWebhooks {
+		err := model.NewLocAppError(where, id, nil, "")
+		err.StatusCode = http.StatusNotImplemented
+		return err
+	}
+
+	return nil
+}
+
+func checkManageWebhooksPermission(c *Context, where string, id string) *model.AppError {
+	if !app.SessionHasPermissionToTeam(c.Session, c.TeamId, model.PERMISSION_MANAGE_WEBHOOKS) {
+		err := model.NewLocAppError(where, id, nil, "")
+		err.StatusCode = http.StatusForbidden
+		return err
+	}
+
+	return nil
+}
+
+func checkValidOutgoingHook(hook *model.OutgoingWebhook, c *Context, where string, id string) *model.AppError {
+	if len(hook.ChannelId) != 0 {
+		cchan := app.Srv.Store.Channel().Get(hook.ChannelId, true)
+
+		var channel *model.Channel
+		var result store.StoreResult
+		if result = <-cchan; result.Err != nil {
+			return result.Err
+		}
+
+		channel = result.Data.(*model.Channel)
+
+		if channel.Type != model.CHANNEL_OPEN {
+			c.LogAudit("fail - not open channel")
+			return model.NewLocAppError(where, "api.webhook."+id+".not_open.app_error", nil, "")
+		}
+
+		if channel.TeamId != c.TeamId {
+			c.LogAudit("fail - cannot update command to a different team")
+			return model.NewLocAppError(where, "api.webhook."+id+".permissions.app_error", nil, "")
+		}
+	} else if len(hook.TriggerWords) == 0 {
+		return model.NewLocAppError(where, "api.webhook."+id+".triggers.app_error", nil, "")
+	}
+
+	return nil
+}
+
+func createOutgoingHook(c *Context, w http.ResponseWriter, r *http.Request) {
+	if err := checkOutgoingWebHooks("createOutgoingHook", "api.webhook.create_outgoing.disabled.app_error"); err != nil {
+		c.Err = err
 		return
 	}
 
-	if !app.SessionHasPermissionToTeam(c.Session, c.TeamId, model.PERMISSION_MANAGE_WEBHOOKS) {
+	if err := checkManageWebhooksPermission(c, "createOutgoingHook", "api.command.admin_only.app_error"); err != nil {
-		c.Err = model.NewLocAppError("createOutgoingHook", "api.command.admin_only.app_error", nil, "")
+		c.Err = err
-		c.Err.StatusCode = http.StatusForbidden
 		return
 	}
 
@@ -155,30 +283,8 @@ func createOutgoingHook(c *Context, w http.ResponseWriter, r *http.Request) {
 	hook.CreatorId = c.Session.UserId
 	hook.TeamId = c.TeamId
 
-	if len(hook.ChannelId) != 0 {
+	if err := checkValidOutgoingHook(hook, c, "createOutgoingHook", "create_outgoing"); err != nil {
-		cchan := app.Srv.Store.Channel().Get(hook.ChannelId, true)
+		c.Err = err
-
-		var channel *model.Channel
-		if result := <-cchan; result.Err != nil {
-			c.Err = result.Err
-			return
-		} else {
-			channel = result.Data.(*model.Channel)
-		}
-
-		if channel.Type != model.CHANNEL_OPEN {
-			c.LogAudit("fail - not open channel")
-			c.Err = model.NewLocAppError("createOutgoingHook", "api.webhook.create_outgoing.not_open.app_error", nil, "")
-			return
-		}
-
-		if channel.Type != model.CHANNEL_OPEN || channel.TeamId != c.TeamId {
-			c.LogAudit("fail - bad channel permissions")
-			c.Err = model.NewLocAppError("createOutgoingHook", "api.webhook.create_outgoing.permissions.app_error", nil, "")
-			return
-		}
-	} else if len(hook.TriggerWords) == 0 {
-		c.Err = model.NewLocAppError("createOutgoingHook", "api.webhook.create_outgoing.triggers.app_error", nil, "")
 		return
 	}
 
@@ -210,15 +316,13 @@ func createOutgoingHook(c *Context, w http.ResponseWriter, r *http.Request) {
 }
 
 func getOutgoingHooks(c *Context, w http.ResponseWriter, r *http.Request) {
-	if !utils.Cfg.ServiceSettings.EnableOutgoingWebhooks {
+	if err := checkOutgoingWebHooks("getOutgoingHooks", "api.webhook.get_outgoing.disabled.app_error"); err != nil {
-		c.Err = model.NewLocAppError("getOutgoingHooks", "api.webhook.get_outgoing.disabled.app_error", nil, "")
+		c.Err = err
-		c.Err.StatusCode = http.StatusNotImplemented
 		return
 	}
 
-	if !app.SessionHasPermissionToTeam(c.Session, c.TeamId, model.PERMISSION_MANAGE_WEBHOOKS) {
+	if err := checkManageWebhooksPermission(c, "getOutgoingHooks", "api.command.admin_only.app_error"); err != nil {
-		c.Err = model.NewLocAppError("getOutgoingHooks", "api.command.admin_only.app_error", nil, "")
+		c.Err = err
-		c.Err.StatusCode = http.StatusForbidden
 		return
 	}
 
@@ -231,16 +335,85 @@ func getOutgoingHooks(c *Context, w http.ResponseWriter, r *http.Request) {
 	}
 }
 
-func deleteOutgoingHook(c *Context, w http.ResponseWriter, r *http.Request) {
+func updateOutgoingHook(c *Context, w http.ResponseWriter, r *http.Request) {
-	if !utils.Cfg.ServiceSettings.EnableOutgoingWebhooks {
+	if err := checkOutgoingWebHooks("updateOutgoingHook", "api.webhook.update_outgoing.disabled.app_error"); err != nil {
-		c.Err = model.NewLocAppError("deleteOutgoingHook", "api.webhook.delete_outgoing.disabled.app_error", nil, "")
+		c.Err = err
-		c.Err.StatusCode = http.StatusNotImplemented
 		return
 	}
 
-	if !app.SessionHasPermissionToTeam(c.Session, c.TeamId, model.PERMISSION_MANAGE_WEBHOOKS) {
+	if err := checkManageWebhooksPermission(c, "updateOutgoingHook", "api.command.admin_only.app_error"); err != nil {
-		c.Err = model.NewLocAppError("deleteOutgoingHook", "api.command.admin_only.app_error", nil, "")
+		c.Err = err
-		c.Err.StatusCode = http.StatusForbidden
+		return
+	}
+
+	c.LogAudit("attempt")
+
+	hook := model.OutgoingWebhookFromJson(r.Body)
+
+	if hook == nil {
+		c.SetInvalidParam("updateOutgoingHook", "webhook")
+		return
+	}
+
+	if err := checkValidOutgoingHook(hook, c, "updateOutgoingHook", "update_outgoing"); err != nil {
+		c.Err = err
+		return
+	}
+
+	var result store.StoreResult
+	if result = <-app.Srv.Store.Webhook().GetOutgoingByTeam(c.TeamId); result.Err != nil {
+		c.Err = result.Err
+		return
+	}
+
+	allHooks := result.Data.([]*model.OutgoingWebhook)
+
+	for _, existingOutHook := range allHooks {
+		urlIntersect := utils.StringArrayIntersection(existingOutHook.CallbackURLs, hook.CallbackURLs)
+		triggerIntersect := utils.StringArrayIntersection(existingOutHook.TriggerWords, hook.TriggerWords)
+
+		if existingOutHook.ChannelId == hook.ChannelId && len(urlIntersect) != 0 && len(triggerIntersect) != 0 && existingOutHook.Id != hook.Id {
+			c.Err = model.NewLocAppError("updateOutgoingHook", "api.webhook.update_outgoing.intersect.app_error", nil, "")
+			return
+		}
+	}
+
+	if result = <-app.Srv.Store.Webhook().GetOutgoing(hook.Id); result.Err != nil {
+		c.LogAudit("fail - no existing outgoing webhook found")
+		c.Err = result.Err
+		return
+	}
+
+	oldHook := result.Data.(*model.OutgoingWebhook)
+	if c.TeamId != oldHook.TeamId {
+		c.Err = model.NewLocAppError("UpdateOutgoingHook", "api.webhook.team_mismatch.app_error", nil, "user_id="+c.Session.UserId)
+		return
+	}
+
+	hook.CreatorId = oldHook.CreatorId
+	hook.CreateAt = oldHook.CreateAt
+	hook.DeleteAt = oldHook.DeleteAt
+	hook.TeamId = oldHook.TeamId
+	hook.UpdateAt = model.GetMillis()
+
+	if result = <-app.Srv.Store.Webhook().UpdateOutgoing(hook); result.Err != nil {
+		c.Err = result.Err
+		return
+	}
+
+	c.LogAudit("success")
+	rhook := result.Data.(*model.OutgoingWebhook)
+	w.Write([]byte(rhook.ToJson()))
+}
+
+func deleteOutgoingHook(c *Context, w http.ResponseWriter, r *http.Request) {
+	if err := checkOutgoingWebHooks("deleteOutgoingHook", "api.webhook.delete_outgoing.disabled.app_error"); err != nil {
+		c.Err = err
+		return
+	}
+
+	if err := checkManageWebhooksPermission(c, "deleteOutgoingHook", "api.command.admin_only.app_error"); err != nil {
+		c.Err = err
 		return
 	}
 
@@ -275,15 +448,13 @@ func deleteOutgoingHook(c *Context, w http.ResponseWriter, r *http.Request) {
 }
 
 func regenOutgoingHookToken(c *Context, w http.ResponseWriter, r *http.Request) {
-	if !utils.Cfg.ServiceSettings.EnableOutgoingWebhooks {
+	if err := checkOutgoingWebHooks("regenOutgoingHookToken", "api.webhook.regen_outgoing_token.disabled.app_error"); err != nil {
-		c.Err = model.NewLocAppError("regenOutgoingHookToken", "api.webhook.regen_outgoing_token.disabled.app_error", nil, "")
+		c.Err = err
-		c.Err.StatusCode = http.StatusNotImplemented
 		return
 	}
 
-	if !app.SessionHasPermissionToTeam(c.Session, c.TeamId, model.PERMISSION_MANAGE_WEBHOOKS) {
+	if err := checkManageWebhooksPermission(c, "regenOutgoingHookToken", "api.command.admin_only.app_error"); err != nil {
-		c.Err = model.NewLocAppError("regenOutgoingHookToken", "api.command.admin_only.app_error", nil, "")
+		c.Err = err
-		c.Err.StatusCode = http.StatusForbidden
 		return
 	}
 
@@ -322,9 +493,8 @@ func regenOutgoingHookToken(c *Context, w http.ResponseWriter, r *http.Request)
 }
 
 func incomingWebhook(c *Context, w http.ResponseWriter, r *http.Request) {
-	if !utils.Cfg.ServiceSettings.EnableIncomingWebhooks {
+	if err := checkIncomingWebHooks("incomingWebhook", "web.incoming_webhook.disabled.app_error"); err != nil {
-		c.Err = model.NewLocAppError("incomingWebhook", "web.incoming_webhook.disabled.app_error", nil, "")
+		c.Err = err
-		c.Err.StatusCode = http.StatusNotImplemented
 		return
 	}
 

api/webhook_test.go

@@ -5,10 +5,11 @@ package api
 
 import (
 	"fmt"
-	"github.com/mattermost/platform/model"
-	"github.com/mattermost/platform/utils"
 	"net/http"
 	"testing"
+
+	"github.com/mattermost/platform/model"
+	"github.com/mattermost/platform/utils"
 )
 
 func TestCreateIncomingHook(t *testing.T) {
@@ -117,6 +118,212 @@ func TestCreateIncomingHook(t *testing.T) {
 	}
 }
 
+func TestUpdateIncomingHook(t *testing.T) {
+	th := Setup().InitSystemAdmin()
+	Client := th.SystemAdminClient
+	team := th.SystemAdminTeam
+
+	channel1 := th.CreateChannel(Client, team)
+	channel2 := th.CreatePrivateChannel(Client, team)
+	channel3 := th.CreateChannel(Client, team)
+
+	user2 := th.CreateUser(Client)
+	LinkUserToTeam(user2, team)
+
+	team2 := th.CreateTeam(Client)
+	user3 := th.CreateUser(Client)
+	LinkUserToTeam(user3, team2)
+	UpdateUserToTeamAdmin(user3, team2)
+
+	enableIncomingHooks := utils.Cfg.ServiceSettings.EnableIncomingWebhooks
+	enableAdminOnlyHooks := utils.Cfg.ServiceSettings.EnableOnlyAdminIntegrations
+	defer func() {
+		utils.Cfg.ServiceSettings.EnableIncomingWebhooks = enableIncomingHooks
+		utils.Cfg.ServiceSettings.EnableOnlyAdminIntegrations = enableAdminOnlyHooks
+		utils.SetDefaultRolesBasedOnConfig()
+	}()
+
+	utils.Cfg.ServiceSettings.EnableIncomingWebhooks = true
+	*utils.Cfg.ServiceSettings.EnableOnlyAdminIntegrations = true
+	utils.SetDefaultRolesBasedOnConfig()
+
+	hook := createIncomingWebhook(channel1.Id, Client, t)
+
+	t.Run("UpdateIncomingHook", func(t *testing.T) {
+		hook.DisplayName = "hook2"
+		hook.Description = "description"
+		hook.ChannelId = channel3.Id
+
+		if result, err := Client.UpdateIncomingWebhook(hook); err != nil {
+			t.Fatal("Update hook should not fail")
+		} else {
+			updatedHook := result.Data.(*model.IncomingWebhook)
+
+			if updatedHook.DisplayName != "hook2" {
+				t.Fatal("Hook name is not updated")
+			}
+
+			if updatedHook.Description != "description" {
+				t.Fatal("Hook description is not updated")
+			}
+
+			if updatedHook.ChannelId != channel3.Id {
+				t.Fatal("Hook channel is not updated")
+			}
+		}
+	})
+
+	t.Run("RetainCreateAt", func(t *testing.T) {
+		hook2 := &model.IncomingWebhook{ChannelId: channel1.Id, CreateAt: 100}
+
+		if result, err := Client.CreateIncomingWebhook(hook2); err != nil {
+			t.Fatal("hook creation failed")
+		} else {
+			createdHook := result.Data.(*model.IncomingWebhook)
+			createdHook.DisplayName = "Name2"
+
+			if result, err := Client.UpdateIncomingWebhook(createdHook); err != nil {
+				t.Fatal("Update hook should not fail")
+			} else {
+				updatedHook := result.Data.(*model.IncomingWebhook)
+
+				if updatedHook.CreateAt != createdHook.CreateAt {
+					t.Fatal("failed - hook create at should not be changed")
+				}
+			}
+		}
+	})
+
+	t.Run("ModifyUpdateAt", func(t *testing.T) {
+		hook.DisplayName = "Name3"
+
+		if result, err := Client.UpdateIncomingWebhook(hook); err != nil {
+			t.Fatal("Update hook should not fail")
+		} else {
+			updatedHook := result.Data.(*model.IncomingWebhook)
+
+			if updatedHook.UpdateAt == hook.UpdateAt {
+				t.Fatal("failed - hook updateAt is not updated")
+			}
+		}
+	})
+
+	t.Run("UpdateNonExistentHook", func(t *testing.T) {
+		nonExistentHook := &model.IncomingWebhook{ChannelId: channel1.Id}
+
+		if _, err := Client.UpdateIncomingWebhook(nonExistentHook); err == nil {
+			t.Fatal("should have failed - update a non-existent hook")
+		}
+	})
+
+	Client.Logout()
+	Client.Must(Client.LoginById(user2.Id, user2.Password))
+	Client.SetTeamId(team.Id)
+	t.Run("UserIsNotAdminOfTeam", func(t *testing.T) {
+		if _, err := Client.UpdateIncomingWebhook(hook); err == nil {
+			t.Fatal("should have failed - user is not admin of team")
+		}
+	})
+
+	utils.Cfg.ServiceSettings.EnableIncomingWebhooks = true
+
+	t.Run("OnlyAdminIntegrationsDisabled", func(t *testing.T) {
+		*utils.Cfg.ServiceSettings.EnableOnlyAdminIntegrations = false
+		utils.SetDefaultRolesBasedOnConfig()
+
+		t.Run("UpdateHookOfSameUser", func(t *testing.T) {
+			sameUserHook := &model.IncomingWebhook{ChannelId: channel1.Id, UserId: user2.Id}
+			if result, err := Client.CreateIncomingWebhook(sameUserHook); err != nil {
+				t.Fatal("Hook creation failed")
+			} else {
+				sameUserHook = result.Data.(*model.IncomingWebhook)
+			}
+
+			if _, err := Client.UpdateIncomingWebhook(sameUserHook); err != nil {
+				t.Fatal("should not fail - only admin integrations are disabled & hook of same user")
+			}
+		})
+
+		t.Run("UpdateHookOfDifferentUser", func(t *testing.T) {
+			if _, err := Client.UpdateIncomingWebhook(hook); err == nil {
+				t.Fatal("should have failed - user does not have permissions to update other user's hooks")
+			}
+		})
+	})
+
+	*utils.Cfg.ServiceSettings.EnableOnlyAdminIntegrations = true
+	utils.SetDefaultRolesBasedOnConfig()
+
+	Client.Logout()
+	UpdateUserToTeamAdmin(user2, team)
+	Client.Must(Client.LoginById(user2.Id, user2.Password))
+	Client.SetTeamId(team.Id)
+	t.Run("UpdateByDifferentUser", func(t *testing.T) {
+		if result, err := Client.UpdateIncomingWebhook(hook); err != nil {
+			t.Fatal("Update hook should not fail")
+		} else {
+			updatedHook := result.Data.(*model.IncomingWebhook)
+
+			if updatedHook.UserId == user2.Id {
+				t.Fatal("Hook's creator userId is not retained")
+			}
+		}
+	})
+
+	t.Run("IncomingHooksDisabled", func(t *testing.T) {
+		utils.Cfg.ServiceSettings.EnableIncomingWebhooks = false
+		if _, err := Client.UpdateIncomingWebhook(hook); err == nil {
+			t.Fatal("should have failed - incoming hooks are disabled")
+		}
+	})
+
+	t.Run("PrivateChannel", func(t *testing.T) {
+		hook.ChannelId = channel2.Id
+
+		if _, err := Client.UpdateIncomingWebhook(hook); err == nil {
+			t.Fatal("should have failed - updating to a private channel where the user is not a member")
+		}
+	})
+
+	t.Run("UpdateToNonExistentChannel", func(t *testing.T) {
+		hook.ChannelId = "junk"
+		if _, err := Client.UpdateIncomingWebhook(hook); err == nil {
+			t.Fatal("should have failed - bad channel id")
+		}
+	})
+
+	Client.Logout()
+	Client.Must(Client.LoginById(user3.Id, user3.Password))
+	Client.SetTeamId(team2.Id)
+	t.Run("UpdateToADifferentTeam", func(t *testing.T) {
+		if _, err := Client.UpdateIncomingWebhook(hook); err == nil {
+			t.Fatal("should have failed - update to a different team is not allowed")
+		}
+	})
+}
+
+func createIncomingWebhook(channelID string, Client *model.Client, t *testing.T) *model.IncomingWebhook {
+	hook := &model.IncomingWebhook{ChannelId: channelID}
+	if result, err := Client.CreateIncomingWebhook(hook); err != nil {
+		t.Fatal("Hook creation failed")
+	} else {
+		hook = result.Data.(*model.IncomingWebhook)
+	}
+
+	return hook
+}
+
+func createOutgoingWebhook(channelID string, callbackURLs []string, triggerWords []string, Client *model.Client, t *testing.T) *model.OutgoingWebhook {
+	hook := &model.OutgoingWebhook{ChannelId: channelID, CallbackURLs: callbackURLs, TriggerWords: triggerWords}
+	if result, err := Client.CreateOutgoingWebhook(hook); err != nil {
+		t.Fatal("Hook creation failed")
+	} else {
+		hook = result.Data.(*model.OutgoingWebhook)
+	}
+
+	return hook
+}
+
 func TestListIncomingHooks(t *testing.T) {
 	th := Setup().InitSystemAdmin()
 	Client := th.SystemAdminClient
@@ -416,6 +623,190 @@ func TestListOutgoingHooks(t *testing.T) {
 	}
 }
 
+func TestUpdateOutgoingHook(t *testing.T) {
+	th := Setup().InitSystemAdmin()
+	Client := th.SystemAdminClient
+	user := th.SystemAdminUser
+	team := th.SystemAdminTeam
+	team2 := th.CreateTeam(Client)
+	channel1 := th.CreateChannel(Client, team)
+	channel2 := th.CreatePrivateChannel(Client, team)
+	channel3 := th.CreateChannel(Client, team)
+	user2 := th.CreateUser(Client)
+	LinkUserToTeam(user2, team)
+	user3 := th.CreateUser(Client)
+	LinkUserToTeam(user3, team2)
+
+	enableOutgoingHooks := utils.Cfg.ServiceSettings.EnableOutgoingWebhooks
+	enableAdminOnlyHooks := utils.Cfg.ServiceSettings.EnableOnlyAdminIntegrations
+	defer func() {
+		utils.Cfg.ServiceSettings.EnableOutgoingWebhooks = enableOutgoingHooks
+		utils.Cfg.ServiceSettings.EnableOnlyAdminIntegrations = enableAdminOnlyHooks
+		utils.SetDefaultRolesBasedOnConfig()
+	}()
+
+	utils.Cfg.ServiceSettings.EnableOutgoingWebhooks = true
+	*utils.Cfg.ServiceSettings.EnableOnlyAdminIntegrations = true
+	utils.SetDefaultRolesBasedOnConfig()
+
+	hook := createOutgoingWebhook(channel1.Id, []string{"http://nowhere.com"}, []string{"cats"}, Client, t)
+	createOutgoingWebhook(channel1.Id, []string{"http://nowhere.com"}, []string{"dogs"}, Client, t)
+
+	hook.DisplayName = "Cats"
+	hook.Description = "Get me some cats"
+	t.Run("OutgoingHooksDisabled", func(t *testing.T) {
+		utils.Cfg.ServiceSettings.EnableOutgoingWebhooks = false
+		if _, err := Client.UpdateOutgoingWebhook(hook); err == nil {
+			t.Fatal("should have failed - outgoing webhooks disabled")
+		}
+	})
+
+	utils.Cfg.ServiceSettings.EnableOutgoingWebhooks = true
+	t.Run("UpdateOutgoingWebhook", func(t *testing.T) {
+		if result, err := Client.UpdateOutgoingWebhook(hook); err != nil {
+			t.Fatal("failed to update outgoing web hook")
+		} else {
+			updatedHook := result.Data.(*model.OutgoingWebhook)
+
+			if updatedHook.DisplayName != hook.DisplayName {
+				t.Fatal("Hook display name did not get updated")
+			}
+
+			if updatedHook.Description != hook.Description {
+				t.Fatal("Hook description did not get updated")
+			}
+		}
+	})
+
+	t.Run("RetainCreateAt", func(t *testing.T) {
+		hook2 := &model.OutgoingWebhook{ChannelId: channel1.Id, CallbackURLs: []string{"http://nowhere.com"}, TriggerWords: []string{"rats"}}
+
+		if result, err := Client.CreateOutgoingWebhook(hook2); err != nil {
+			t.Fatal("hook creation failed")
+		} else {
+			createdHook := result.Data.(*model.OutgoingWebhook)
+			createdHook.DisplayName = "Name2"
+
+			if result, err := Client.UpdateOutgoingWebhook(createdHook); err != nil {
+				t.Fatal("Update hook should not fail")
+			} else {
+				updatedHook := result.Data.(*model.OutgoingWebhook)
+
+				if updatedHook.CreateAt != createdHook.CreateAt {
+					t.Fatal("failed - hook create at should not be changed")
+				}
+			}
+		}
+	})
+
+	t.Run("ModifyUpdateAt", func(t *testing.T) {
+		hook.DisplayName = "Name3"
+
+		if result, err := Client.UpdateOutgoingWebhook(hook); err != nil {
+			t.Fatal("Update hook should not fail")
+		} else {
+			updatedHook := result.Data.(*model.OutgoingWebhook)
+
+			if updatedHook.UpdateAt == hook.UpdateAt {
+				t.Fatal("failed - hook updateAt is not updated")
+			}
+		}
+	})
+
+	Client.Logout()
+	Client.Must(Client.LoginById(user2.Id, user2.Password))
+	Client.SetTeamId(team.Id)
+	t.Run("UpdateByUserWithoutPermissions", func(t *testing.T) {
+		if _, err := Client.UpdateOutgoingWebhook(hook); err == nil {
+			t.Fatal("should have failed - user does not have permissions to manage webhooks")
+		}
+
+		*utils.Cfg.ServiceSettings.EnableOnlyAdminIntegrations = false
+		utils.SetDefaultRolesBasedOnConfig()
+		t.Run("WithoutOnlyAdminIntegrations", func(t *testing.T) {
+			if _, err := Client.UpdateOutgoingWebhook(hook); err != nil {
+				t.Fatal("update webhook failed when admin only integrations is turned off")
+			}
+		})
+	})
+
+	*utils.Cfg.ServiceSettings.EnableOnlyAdminIntegrations = true
+	utils.SetDefaultRolesBasedOnConfig()
+
+	Client.Logout()
+	LinkUserToTeam(user3, team)
+	UpdateUserToTeamAdmin(user3, team)
+	Client.Must(Client.LoginById(user3.Id, user3.Password))
+	Client.SetTeamId(team.Id)
+	t.Run("RetainHookCreator", func(t *testing.T) {
+		if result, err := Client.UpdateOutgoingWebhook(hook); err != nil {
+			t.Fatal("failed to update outgoing web hook")
+		} else {
+			updatedHook := result.Data.(*model.OutgoingWebhook)
+
+			if updatedHook.CreatorId != user.Id {
+				t.Fatal("hook creator should not be changed")
+			}
+		}
+	})
+
+	Client.Logout()
+	Client.Must(Client.LoginById(user.Id, user.Password))
+	Client.SetTeamId(team.Id)
+	t.Run("UpdateToExistingTriggerWordAndCallback", func(t *testing.T) {
+		t.Run("OnSameChannel", func(t *testing.T) {
+			hook.TriggerWords = []string{"dogs"}
+
+			if _, err := Client.UpdateOutgoingWebhook(hook); err == nil {
+				t.Fatal("should have failed - duplicate trigger words & channel urls")
+			}
+		})
+
+		t.Run("OnDifferentChannel", func(t *testing.T) {
+			hook.TriggerWords = []string{"dogs"}
+			hook.ChannelId = channel3.Id
+
+			if _, err := Client.UpdateOutgoingWebhook(hook); err != nil {
+				t.Fatal("update of hook failed with duplicate trigger word but different channel")
+			}
+		})
+	})
+
+	t.Run("UpdateToNonExistentChannel", func(t *testing.T) {
+		hook.ChannelId = "junk"
+
+		if _, err := Client.UpdateOutgoingWebhook(hook); err == nil {
+			t.Fatal("should have failed - non existent channel")
+		}
+	})
+
+	t.Run("UpdateToPrivateChannel", func(t *testing.T) {
+		hook.ChannelId = channel2.Id
+
+		if _, err := Client.UpdateOutgoingWebhook(hook); err == nil {
+			t.Fatal("should have failed - update to a private channel")
+		}
+	})
+
+	t.Run("UpdateToBlankTriggerWordAndChannel", func(t *testing.T) {
+		hook.ChannelId = ""
+		hook.TriggerWords = nil
+
+		if _, err := Client.UpdateOutgoingWebhook(hook); err == nil {
+			t.Fatal("should have failed - update to blank trigger words & channel")
+		}
+	})
+
+	Client.Logout()
+	Client.Must(Client.LoginById(user3.Id, user3.Password))
+	Client.SetTeamId(team2.Id)
+	t.Run("UpdateToADifferentTeam", func(t *testing.T) {
+		if _, err := Client.UpdateOutgoingWebhook(hook); err == nil {
+			t.Fatal("should have failed - update to a different team is not allowed")
+		}
+	})
+}
+
 func TestDeleteOutgoingHook(t *testing.T) {
 	th := Setup().InitSystemAdmin()
 	Client := th.SystemAdminClient

app/webhook.go

@@ -195,7 +195,7 @@ func CreateWebhookPost(userId, teamId, channelId, text, overrideUsername, overri
 
 func CreateIncomingWebhookForChannel(userId string, channel *model.Channel, hook *model.IncomingWebhook) (*model.IncomingWebhook, *model.AppError) {
 	if !utils.Cfg.ServiceSettings.EnableIncomingWebhooks {
-		return nil, model.NewAppError("CreateIncomingWebhookForChannel", "api.webhook.create_incoming.disabled.app_errror", nil, "", http.StatusNotImplemented)
+		return nil, model.NewAppError("CreateIncomingWebhookForChannel", "api.webhook.create_incoming.disabled.app_error", nil, "", http.StatusNotImplemented)
 	}
 
 	hook.UserId = userId

i18n/de.json

@@ -2684,7 +2684,7 @@
     "translation": "Team-Hub wird gestoppt für teamId=%v"
   },
   {
-    "id": "api.webhook.create_incoming.disabled.app_errror",
+    "id": "api.webhook.create_incoming.disabled.app_error",
     "translation": "Eingehende Webhooks wurden vom Systemadministrator deaktiviert."
   },
   {
@@ -2708,11 +2708,11 @@
     "translation": "Entweder trigger_words oder channel_id müssen gesetzt sein"
   },
   {
-    "id": "api.webhook.delete_incoming.disabled.app_errror",
+    "id": "api.webhook.delete_incoming.disabled.app_error",
     "translation": "Eingehende Webhooks wurden vom Systemadministrator deaktiviert."
   },
   {
-    "id": "api.webhook.delete_incoming.permissions.app_errror",
+    "id": "api.webhook.delete_incoming.permissions.app_error",
     "translation": "Ungültige Berechtigungen um eingehenden Webhook zu löschen"
   },
   {

i18n/en.json

@@ -2692,9 +2692,21 @@
     "translation": "team hub stopping for teamId=%v"
   },
   {
-    "id": "api.webhook.create_incoming.disabled.app_errror",
+    "id": "api.webhook.create_incoming.disabled.app_error",
     "translation": "Incoming webhooks have been disabled by the system admin."
   },
+  {
+    "id": "api.webhook.update_incoming.disabled.app_error",
+    "translation": "Incoming webhooks have been disabled by the system admin."
+  },
+  {
+    "id": "api.webhook.update_incoming.permissions.app_error",
+    "translation": "Invalid permissions to update incoming webhook"
+  },
+  {
+    "id": "api.webhook.team_mismatch.app_error",
+    "translation": "Cannot update webhook across teams"
+  },
   {
     "id": "api.webhook.create_outgoing.disabled.app_error",
     "translation": "Outgoing webhooks have been disabled by the system admin."
@@ -2716,11 +2728,31 @@
     "translation": "Either trigger_words or channel_id must be set"
   },
   {
-    "id": "api.webhook.delete_incoming.disabled.app_errror",
+    "id": "api.webhook.update_outgoing.disabled.app_error",
+    "translation": "Outgoing webhooks have been disabled by the system admin."
+  },
+  {
+    "id": "api.webhook.update_outgoing.intersect.app_error",
+    "translation": "Outgoing webhooks from the same channel cannot have the same trigger words/callback URLs."
+  },
+  {
+    "id": "api.webhook.update_outgoing.not_open.app_error",
+    "translation": "Outgoing webhooks can only be updated to public channels."
+  },
+  {
+    "id": "api.webhook.update_outgoing.permissions.app_error",
+    "translation": "Invalid permissions to update outgoing webhook."
+  },
+  {
+    "id": "api.webhook.update_outgoing.triggers.app_error",
+    "translation": "Either trigger_words or channel_id must be set"
+  },
+  {
+    "id": "api.webhook.delete_incoming.disabled.app_error",
     "translation": "Incoming webhooks have been disabled by the system admin."
   },
   {
-    "id": "api.webhook.delete_incoming.permissions.app_errror",
+    "id": "api.webhook.delete_incoming.permissions.app_error",
     "translation": "Invalid permissions to delete incoming webhook"
   },
   {
@@ -5547,6 +5579,10 @@
     "id": "store.sql_webhooks.save_incoming.existing.app_error",
     "translation": "You cannot overwrite an existing IncomingWebhook"
   },
+  {
+    "id": "store.sql_webhooks.update_incoming.app_error",
+    "translation": "We couldn't update the IncomingWebhook"
+  },
   {
     "id": "store.sql_webhooks.save_outgoing.app_error",
     "translation": "We couldn't save the OutgoingWebhook"

i18n/es.json

@@ -2684,7 +2684,7 @@
     "translation": "deteniendo el hub de equipo para teamId=%v"
   },
   {
-    "id": "api.webhook.create_incoming.disabled.app_errror",
+    "id": "api.webhook.create_incoming.disabled.app_error",
     "translation": "Webhooks entrantes han sido inhabilitados por el administrador del sistema."
   },
   {
@@ -2708,11 +2708,11 @@
     "translation": "Debe establecerse palabras que desencadenen una acción o un channel_id"
   },
   {
-    "id": "api.webhook.delete_incoming.disabled.app_errror",
+    "id": "api.webhook.delete_incoming.disabled.app_error",
     "translation": "Webhooks entrantes han sido inhabilitados por el administrador del sistema."
   },
   {
-    "id": "api.webhook.delete_incoming.permissions.app_errror",
+    "id": "api.webhook.delete_incoming.permissions.app_error",
     "translation": "Permisos inapropiados para eliminar un webhook de entrada"
   },
   {

i18n/fr.json

@@ -2684,7 +2684,7 @@
     "translation": "Hub d'équipe arrêté pour teamId=%v"
   },
   {
-    "id": "api.webhook.create_incoming.disabled.app_errror",
+    "id": "api.webhook.create_incoming.disabled.app_error",
     "translation": "Les webhooks entrants ont été désactivés par l'administrateur système."
   },
   {
@@ -2708,11 +2708,11 @@
     "translation": "Les trigger_words ou channel_id doivent être définis"
   },
   {
-    "id": "api.webhook.delete_incoming.disabled.app_errror",
+    "id": "api.webhook.delete_incoming.disabled.app_error",
     "translation": "Les webhooks entrants ont été désactivées par l'administrateur système."
   },
   {
-    "id": "api.webhook.delete_incoming.permissions.app_errror",
+    "id": "api.webhook.delete_incoming.permissions.app_error",
     "translation": "Droits insuffisants pour supprimer le webhook entrant"
   },
   {

i18n/ja.json

@@ -2684,7 +2684,7 @@
     "translation": "teamId=%v用のチームハブを停止しています"
   },
   {
-    "id": "api.webhook.create_incoming.disabled.app_errror",
+    "id": "api.webhook.create_incoming.disabled.app_error",
     "translation": "内向きのウェブフックはシステム管理者によって無効にされています。"
   },
   {
@@ -2708,11 +2708,11 @@
     "translation": "trigger_wordsまたはchannel_idを設定してください"
   },
   {
-    "id": "api.webhook.delete_incoming.disabled.app_errror",
+    "id": "api.webhook.delete_incoming.disabled.app_error",
     "translation": "内向きのウェブフックはシステム管理者によって無効にされています。"
   },
   {
-    "id": "api.webhook.delete_incoming.permissions.app_errror",
+    "id": "api.webhook.delete_incoming.permissions.app_error",
     "translation": "内向きのウェブフックを削除するのに十分な権限が付与されていません"
   },
   {

i18n/ko.json

@@ -2684,7 +2684,7 @@
     "translation": "team hub stopping for teamId=%v"
   },
   {
-    "id": "api.webhook.create_incoming.disabled.app_errror",
+    "id": "api.webhook.create_incoming.disabled.app_error",
     "translation": "Incoming webhook은 관리자가 사용할 수 없게 설정했습니다."
   },
   {
@@ -2708,11 +2708,11 @@
     "translation": "Either trigger_words or channel_id must be set"
   },
   {
-    "id": "api.webhook.delete_incoming.disabled.app_errror",
+    "id": "api.webhook.delete_incoming.disabled.app_error",
     "translation": "Incoming webhook은 관리자가 사용할 수 없게 설정했습니다."
   },
   {
-    "id": "api.webhook.delete_incoming.permissions.app_errror",
+    "id": "api.webhook.delete_incoming.permissions.app_error",
     "translation": "Incoming webhook을 삭제할 권한이 없습니다"
   },
   {

i18n/nl.json

@@ -2684,7 +2684,7 @@
     "translation": "Team hub word gestopt voor teamId=%v"
   },
   {
-    "id": "api.webhook.create_incoming.disabled.app_errror",
+    "id": "api.webhook.create_incoming.disabled.app_error",
     "translation": "Commando's zijn uitgeschakeld door de beheerder."
   },
   {
@@ -2708,11 +2708,11 @@
     "translation": "Ofwel trigger_words of channel_id moet worden geconfigueerd"
   },
   {
-    "id": "api.webhook.delete_incoming.disabled.app_errror",
+    "id": "api.webhook.delete_incoming.disabled.app_error",
     "translation": "Commando's zijn uitgeschakeld door de beheerder."
   },
   {
-    "id": "api.webhook.delete_incoming.permissions.app_errror",
+    "id": "api.webhook.delete_incoming.permissions.app_error",
     "translation": "Onjuiste rechten voor het verwijderen van de webhook opdracht"
   },
   {

i18n/pt-BR.json

@@ -2684,7 +2684,7 @@
     "translation": "central de equipes parou para teamId=%v"
   },
   {
-    "id": "api.webhook.create_incoming.disabled.app_errror",
+    "id": "api.webhook.create_incoming.disabled.app_error",
     "translation": "Webhooks de entrada foram desabilitados pelo administrador do sistema."
   },
   {
@@ -2708,11 +2708,11 @@
     "translation": "Ou trigger_words ou channel_id precisa ser definido"
   },
   {
-    "id": "api.webhook.delete_incoming.disabled.app_errror",
+    "id": "api.webhook.delete_incoming.disabled.app_error",
     "translation": "Webhooks de entrada foram desabilitados pelo administrador do sistema."
   },
   {
-    "id": "api.webhook.delete_incoming.permissions.app_errror",
+    "id": "api.webhook.delete_incoming.permissions.app_error",
     "translation": "Permissões inadequadas para deletar o webhook de entrada"
   },
   {

i18n/ru.json

@@ -2684,7 +2684,7 @@
     "translation": "остановка командного хаба для teamId=%v"
   },
   {
-    "id": "api.webhook.create_incoming.disabled.app_errror",
+    "id": "api.webhook.create_incoming.disabled.app_error",
     "translation": "Входящие вебхуки были отключены системным администратором."
   },
   {
@@ -2708,11 +2708,11 @@
     "translation": "Должны быть заданы trigger_words или channel_id"
   },
   {
-    "id": "api.webhook.delete_incoming.disabled.app_errror",
+    "id": "api.webhook.delete_incoming.disabled.app_error",
     "translation": "Входящие вебхуки отключены системным администратором."
   },
   {
-    "id": "api.webhook.delete_incoming.permissions.app_errror",
+    "id": "api.webhook.delete_incoming.permissions.app_error",
     "translation": "Отсутствуют права на удаление входящего вебхука"
   },
   {

i18n/zh_CN.json

@@ -2684,7 +2684,7 @@
     "translation": "团队枢纽停止 teamId=%v"
   },
   {
-    "id": "api.webhook.create_incoming.disabled.app_errror",
+    "id": "api.webhook.create_incoming.disabled.app_error",
     "translation": "传入的webhooks已被系统管理员禁用。"
   },
   {
@@ -2708,11 +2708,11 @@
     "translation": "无论是trigger_words或channel_id必须设置"
   },
   {
-    "id": "api.webhook.delete_incoming.disabled.app_errror",
+    "id": "api.webhook.delete_incoming.disabled.app_error",
     "translation": "传入的webhooks已被系统管理员禁用。"
   },
   {
-    "id": "api.webhook.delete_incoming.permissions.app_errror",
+    "id": "api.webhook.delete_incoming.permissions.app_error",
     "translation": "无效的删除传入的 webhook 权限"
   },
   {

i18n/zh_TW.json

@@ -2684,7 +2684,7 @@
     "translation": "正在停止團隊中心 teamId=%v"
   },
   {
-    "id": "api.webhook.create_incoming.disabled.app_errror",
+    "id": "api.webhook.create_incoming.disabled.app_error",
     "translation": "傳入的 Webhook 已被系統管理員停用。"
   },
   {
@@ -2708,11 +2708,11 @@
     "translation": "必須設定觸發詞或者頻道 ID"
   },
   {
-    "id": "api.webhook.delete_incoming.disabled.app_errror",
+    "id": "api.webhook.delete_incoming.disabled.app_error",
     "translation": "傳入的 Webhook 已被系統管理員停用"
   },
   {
-    "id": "api.webhook.delete_incoming.permissions.app_errror",
+    "id": "api.webhook.delete_incoming.permissions.app_error",
     "translation": "沒有適當的權限刪除傳入的 Webhook"
   },
   {

model/client.go

@@ -2008,6 +2008,16 @@ func (c *Client) CreateIncomingWebhook(hook *IncomingWebhook) (*Result, *AppErro
 	}
 }
 
+func (c *Client) UpdateIncomingWebhook(hook *IncomingWebhook) (*Result, *AppError) {
+	if r, err := c.DoApiPost(c.GetTeamRoute()+"/hooks/incoming/update", hook.ToJson()); err != nil {
+		return nil, err
+	} else {
+		defer closeBody(r)
+		return &Result{r.Header.Get(HEADER_REQUEST_ID),
+			r.Header.Get(HEADER_ETAG_SERVER), IncomingWebhookFromJson(r.Body)}, nil
+	}
+}
+
 func (c *Client) PostToWebhook(id, payload string) (*Result, *AppError) {
 	if r, err := c.DoPost("/hooks/"+id, payload, "application/x-www-form-urlencoded"); err != nil {
 		return nil, err
@@ -2099,6 +2109,16 @@ func (c *Client) CreateOutgoingWebhook(hook *OutgoingWebhook) (*Result, *AppErro
 	}
 }
 
+func (c *Client) UpdateOutgoingWebhook(hook *OutgoingWebhook) (*Result, *AppError) {
+	if r, err := c.DoApiPost(c.GetTeamRoute()+"/hooks/outgoing/update", hook.ToJson()); err != nil {
+		return nil, err
+	} else {
+		defer closeBody(r)
+		return &Result{r.Header.Get(HEADER_REQUEST_ID),
+			r.Header.Get(HEADER_ETAG_SERVER), OutgoingWebhookFromJson(r.Body)}, nil
+	}
+}
+
 func (c *Client) DeleteOutgoingWebhook(id string) (*Result, *AppError) {
 	data := make(map[string]string)
 	data["id"] = id

store/sql_webhook_store.go

@@ -107,6 +107,27 @@ func (s SqlWebhookStore) SaveIncoming(webhook *model.IncomingWebhook) StoreChann
 	return storeChannel
 }
 
+func (s SqlWebhookStore) UpdateIncoming(hook *model.IncomingWebhook) StoreChannel {
+	storeChannel := make(StoreChannel, 1)
+
+	go func() {
+		result := StoreResult{}
+
+		hook.UpdateAt = model.GetMillis()
+
+		if _, err := s.GetMaster().Update(hook); err != nil {
+			result.Err = model.NewLocAppError("SqlWebhookStore.UpdateIncoming", "store.sql_webhooks.update_incoming.app_error", nil, "id="+hook.Id+", "+err.Error())
+		} else {
+			result.Data = hook
+		}
+
+		storeChannel <- result
+		close(storeChannel)
+	}()
+
+	return storeChannel
+}
+
 func (s SqlWebhookStore) GetIncoming(id string, allowFromCache bool) StoreChannel {
 	storeChannel := make(StoreChannel, 1)
 

store/sql_webhook_store_test.go

@@ -4,35 +4,49 @@
 package store
 
 import (
-	"github.com/mattermost/platform/model"
 	"testing"
+
+	"github.com/mattermost/platform/model"
 )
 
 func TestWebhookStoreSaveIncoming(t *testing.T) {
 	Setup()
+	o1 := buildIncomingWebhook()
 
-	o1 := model.IncomingWebhook{}
+	if err := (<-store.Webhook().SaveIncoming(o1)).Err; err != nil {
-	o1.ChannelId = model.NewId()
-	o1.UserId = model.NewId()
-	o1.TeamId = model.NewId()
-
-	if err := (<-store.Webhook().SaveIncoming(&o1)).Err; err != nil {
 		t.Fatal("couldn't save item", err)
 	}
 
-	if err := (<-store.Webhook().SaveIncoming(&o1)).Err; err == nil {
+	if err := (<-store.Webhook().SaveIncoming(o1)).Err; err == nil {
 		t.Fatal("shouldn't be able to update from save")
 	}
 }
 
+func TestWebhookStoreUpdateIncoming(t *testing.T) {
+	Setup()
+	o1 := buildIncomingWebhook()
+	o1 = (<-store.Webhook().SaveIncoming(o1)).Data.(*model.IncomingWebhook)
+	previousUpdatedAt := o1.UpdateAt
+
+	o1.DisplayName = "TestHook"
+
+	if result := (<-store.Webhook().UpdateIncoming(o1)); result.Err != nil {
+		t.Fatal("updation of incoming hook failed", result.Err)
+	} else {
+		if result.Data.(*model.IncomingWebhook).UpdateAt == previousUpdatedAt {
+			t.Fatal("should have updated the UpdatedAt of the hook")
+		}
+
+		if result.Data.(*model.IncomingWebhook).DisplayName != "TestHook" {
+			t.Fatal("display name is not updated")
+		}
+	}
+}
+
 func TestWebhookStoreGetIncoming(t *testing.T) {
 	Setup()
 
-	o1 := &model.IncomingWebhook{}
+	o1 := buildIncomingWebhook()
-	o1.ChannelId = model.NewId()
-	o1.UserId = model.NewId()
-	o1.TeamId = model.NewId()
-
 	o1 = (<-store.Webhook().SaveIncoming(o1)).Data.(*model.IncomingWebhook)
 
 	if r1 := <-store.Webhook().GetIncoming(o1.Id, false); r1.Err != nil {
@@ -96,11 +110,7 @@ func TestWebhookStoreGetIncomingList(t *testing.T) {
 
 func TestWebhookStoreGetIncomingByTeam(t *testing.T) {
 	Setup()
-
+	o1 := buildIncomingWebhook()
-	o1 := &model.IncomingWebhook{}
-	o1.ChannelId = model.NewId()
-	o1.UserId = model.NewId()
-	o1.TeamId = model.NewId()
 
 	o1 = (<-store.Webhook().SaveIncoming(o1)).Data.(*model.IncomingWebhook)
 
@@ -123,11 +133,7 @@ func TestWebhookStoreGetIncomingByTeam(t *testing.T) {
 
 func TestWebhookStoreDeleteIncoming(t *testing.T) {
 	Setup()
-
+	o1 := buildIncomingWebhook()
-	o1 := &model.IncomingWebhook{}
-	o1.ChannelId = model.NewId()
-	o1.UserId = model.NewId()
-	o1.TeamId = model.NewId()
 
 	o1 = (<-store.Webhook().SaveIncoming(o1)).Data.(*model.IncomingWebhook)
 
@@ -153,11 +159,7 @@ func TestWebhookStoreDeleteIncoming(t *testing.T) {
 
 func TestWebhookStoreDeleteIncomingByUser(t *testing.T) {
 	Setup()
-
+	o1 := buildIncomingWebhook()
-	o1 := &model.IncomingWebhook{}
-	o1.ChannelId = model.NewId()
-	o1.UserId = model.NewId()
-	o1.TeamId = model.NewId()
 
 	o1 = (<-store.Webhook().SaveIncoming(o1)).Data.(*model.IncomingWebhook)
 
@@ -181,6 +183,15 @@ func TestWebhookStoreDeleteIncomingByUser(t *testing.T) {
 	}
 }
 
+func buildIncomingWebhook() *model.IncomingWebhook {
+	o1 := &model.IncomingWebhook{}
+	o1.ChannelId = model.NewId()
+	o1.UserId = model.NewId()
+	o1.TeamId = model.NewId()
+
+	return o1
+}
+
 func TestWebhookStoreSaveOutgoing(t *testing.T) {
 	Setup()
 

store/store.go

@@ -260,9 +260,11 @@ type WebhookStore interface {
 	GetIncoming(id string, allowFromCache bool) StoreChannel
 	GetIncomingList(offset, limit int) StoreChannel
 	GetIncomingByTeam(teamId string, offset, limit int) StoreChannel
+	UpdateIncoming(webhook *model.IncomingWebhook) StoreChannel
 	GetIncomingByChannel(channelId string) StoreChannel
 	DeleteIncoming(webhookId string, time int64) StoreChannel
 	PermanentDeleteIncomingByUser(userId string) StoreChannel
+
 	SaveOutgoing(webhook *model.OutgoingWebhook) StoreChannel
 	GetOutgoing(id string) StoreChannel
 	GetOutgoingByChannel(channelId string) StoreChannel
@@ -270,6 +272,7 @@ type WebhookStore interface {
 	DeleteOutgoing(webhookId string, time int64) StoreChannel
 	PermanentDeleteOutgoingByUser(userId string) StoreChannel
 	UpdateOutgoing(hook *model.OutgoingWebhook) StoreChannel
+
 	AnalyticsIncomingCount(teamId string) StoreChannel
 	AnalyticsOutgoingCount(teamId string) StoreChannel
 	InvalidateWebhookCache(webhook string)

webapp/client/client.jsx

@@ -1975,6 +1975,18 @@ export default class Client {
         this.trackEvent('api', 'api_integrations_created', {team_id: this.getTeamId()});
     }
 
+    updateIncomingHook(hook, success, error) {
+        request.
+            post(`${this.getHooksRoute()}/incoming/update`).
+            set(this.defaultHeaders).
+            type('application/json').
+            accept('application/json').
+            send(hook).
+            end(this.handleResponse.bind(this, 'updateIncomingHook', success, error));
+
+        this.trackEvent('api', 'api_integrations_updated', {team_id: this.getTeamId()});
+    }
+
     deleteIncomingHook(hookId, success, error) {
         request.
             post(`${this.getHooksRoute()}/incoming/delete`).
@@ -2008,6 +2020,18 @@ export default class Client {
         this.trackEvent('api', 'api_integrations_created', {team_id: this.getTeamId()});
     }
 
+    updateOutgoingHook(hook, success, error) {
+        request.
+            post(`${this.getHooksRoute()}/outgoing/update`).
+            set(this.defaultHeaders).
+            type('application/json').
+            accept('application/json').
+            send(hook).
+            end(this.handleResponse.bind(this, 'updateOutgoingHook', success, error));
+
+        this.trackEvent('api', 'api_integrations_updated', {team_id: this.getTeamId()});
+    }
+
     deleteOutgoingHook(hookId, success, error) {
         request.
             post(`${this.getHooksRoute()}/outgoing/delete`).

webapp/components/integrations/components/abstract_incoming_webhook.jsx

@@ -0,0 +1,242 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import BackstageHeader from 'components/backstage/components/backstage_header.jsx';
+import ChannelSelect from 'components/channel_select.jsx';
+import {FormattedMessage} from 'react-intl';
+import FormError from 'components/form_error.jsx';
+import SpinnerButton from 'components/spinner_button.jsx';
+import {Link} from 'react-router/es6';
+
+export default class AbstractIncomingWebhook extends React.Component {
+    static get propTypes() {
+        return {
+            team: React.PropTypes.object
+        };
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleSubmit = this.handleSubmit.bind(this);
+
+        this.updateDisplayName = this.updateDisplayName.bind(this);
+        this.updateDescription = this.updateDescription.bind(this);
+        this.updateChannelId = this.updateChannelId.bind(this);
+
+        this.state = {
+            displayName: '',
+            description: '',
+            channelId: '',
+            saving: false,
+            serverError: '',
+            clientError: null
+        };
+
+        if (typeof this.performAction === 'undefined') {
+            throw new TypeError('Subclasses must override performAction');
+        }
+
+        if (typeof this.header === 'undefined') {
+            throw new TypeError('Subclasses must override header');
+        }
+
+        if (typeof this.footer === 'undefined') {
+            throw new TypeError('Subclasses must override footer');
+        }
+
+        this.performAction = this.performAction.bind(this);
+        this.header = this.header.bind(this);
+        this.footer = this.footer.bind(this);
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+
+        if (this.state.saving) {
+            return;
+        }
+
+        this.setState({
+            saving: true,
+            serverError: '',
+            clientError: ''
+        });
+
+        if (!this.state.channelId) {
+            this.setState({
+                saving: false,
+                clientError: (
+                    <FormattedMessage
+                        id='add_incoming_webhook.channelRequired'
+                        defaultMessage='A valid channel is required'
+                    />
+                )
+            });
+
+            return;
+        }
+
+        const hook = {
+            channel_id: this.state.channelId,
+            display_name: this.state.displayName,
+            description: this.state.description
+        };
+
+        this.performAction(hook);
+    }
+
+    updateDisplayName(e) {
+        this.setState({
+            displayName: e.target.value
+        });
+    }
+
+    updateDescription(e) {
+        this.setState({
+            description: e.target.value
+        });
+    }
+
+    updateChannelId(e) {
+        this.setState({
+            channelId: e.target.value
+        });
+    }
+
+    render() {
+        var headerToRender = this.header();
+        var footerToRender = this.footer();
+        return (
+            <div className='backstage-content'>
+                <BackstageHeader>
+                    <Link to={`/${this.props.team.name}/integrations/incoming_webhooks`}>
+                        <FormattedMessage
+                            id='installed_incoming_webhooks.header'
+                            defaultMessage='Incoming Webhooks'
+                        />
+                    </Link>
+                    <FormattedMessage
+                        id={headerToRender.id}
+                        defaultMessage={headerToRender.defaultMessage}
+                    />
+                </BackstageHeader>
+                <div className='backstage-form'>
+                    <form
+                        className='form-horizontal'
+                        onSubmit={this.handleSubmit}
+                    >
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='displayName'
+                            >
+                                <FormattedMessage
+                                    id='add_incoming_webhook.displayName'
+                                    defaultMessage='Display Name'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <input
+                                    id='displayName'
+                                    type='text'
+                                    maxLength='64'
+                                    className='form-control'
+                                    value={this.state.displayName}
+                                    onChange={this.updateDisplayName}
+                                />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_incoming_webhook.displayName.help'
+                                        defaultMessage='Display name for your incoming webhook made of up to 64 characters.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='description'
+                            >
+                                <FormattedMessage
+                                    id='add_incoming_webhook.description'
+                                    defaultMessage='Description'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <input
+                                    id='description'
+                                    type='text'
+                                    maxLength='128'
+                                    className='form-control'
+                                    value={this.state.description}
+                                    onChange={this.updateDescription}
+                                />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_incoming_webhook.description.help'
+                                        defaultMessage='Description for your incoming webhook.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='channelId'
+                            >
+                                <FormattedMessage
+                                    id='add_incoming_webhook.channel'
+                                    defaultMessage='Channel'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <ChannelSelect
+                                    id='channelId'
+                                    value={this.state.channelId}
+                                    onChange={this.updateChannelId}
+                                    selectOpen={true}
+                                    selectPrivate={true}
+                                />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_incoming_webhook.channel.help'
+                                        defaultMessage='Public channel or private group that receives the webhook payloads. You must belong to the private group when setting up the webhook.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='backstage-form__footer'>
+                            <FormError
+                                type='backstage'
+                                errors={[this.state.serverError, this.state.clientError]}
+                            />
+                            <Link
+                                className='btn btn-sm'
+                                to={`'/${this.props.team.name}/integrations/incoming_webhooks`}
+                            >
+                                <FormattedMessage
+                                    id='add_incoming_webhook.cancel'
+                                    defaultMessage='Cancel'
+                                />
+                            </Link>
+                            <SpinnerButton
+                                className='btn btn-primary'
+                                type='submit'
+                                spinning={this.state.saving}
+                                onClick={this.handleSubmit}
+                            >
+                                <FormattedMessage
+                                    id={footerToRender.id}
+                                    defaultMessage={footerToRender.defaultMessage}
+                                />
+                            </SpinnerButton>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        );
+    }
+}

webapp/components/integrations/components/abstract_outgoing_webhook.jsx

@@ -0,0 +1,460 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import {localizeMessage} from 'utils/utils.jsx';
+
+import BackstageHeader from 'components/backstage/components/backstage_header.jsx';
+import ChannelSelect from 'components/channel_select.jsx';
+import {FormattedMessage} from 'react-intl';
+import FormError from 'components/form_error.jsx';
+import {Link} from 'react-router/es6';
+import SpinnerButton from 'components/spinner_button.jsx';
+
+export default class AbstractOutgoingWebhook extends React.Component {
+    static get propTypes() {
+        return {
+            team: React.PropTypes.object
+        };
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleSubmit = this.handleSubmit.bind(this);
+
+        this.updateDisplayName = this.updateDisplayName.bind(this);
+        this.updateDescription = this.updateDescription.bind(this);
+        this.updateContentType = this.updateContentType.bind(this);
+        this.updateChannelId = this.updateChannelId.bind(this);
+        this.updateTriggerWords = this.updateTriggerWords.bind(this);
+        this.updateTriggerWhen = this.updateTriggerWhen.bind(this);
+        this.updateCallbackUrls = this.updateCallbackUrls.bind(this);
+
+        this.state = {
+            displayName: '',
+            description: '',
+            contentType: 'application/x-www-form-urlencoded',
+            channelId: '',
+            triggerWords: '',
+            triggerWhen: 0,
+            callbackUrls: '',
+            saving: false,
+            serverError: '',
+            clientError: null
+        };
+
+        if (typeof this.performAction === 'undefined') {
+            throw new TypeError('Subclasses must override performAction');
+        }
+
+        if (typeof this.header === 'undefined') {
+            throw new TypeError('Subclasses must override header');
+        }
+
+        if (typeof this.footer === 'undefined') {
+            throw new TypeError('Subclasses must override footer');
+        }
+
+        if (typeof this.renderExtra === 'undefined') {
+            throw new TypeError('Subclasses must override renderExtra');
+        }
+
+        this.performAction = this.performAction.bind(this);
+        this.header = this.header.bind(this);
+        this.footer = this.footer.bind(this);
+        this.renderExtra = this.renderExtra.bind(this);
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+
+        if (this.state.saving) {
+            return;
+        }
+
+        this.setState({
+            saving: true,
+            serverError: '',
+            clientError: ''
+        });
+
+        const triggerWords = [];
+        if (this.state.triggerWords) {
+            for (let triggerWord of this.state.triggerWords.split('\n')) {
+                triggerWord = triggerWord.trim();
+
+                if (triggerWord.length > 0) {
+                    triggerWords.push(triggerWord);
+                }
+            }
+        }
+
+        if (!this.state.channelId && triggerWords.length === 0) {
+            this.setState({
+                saving: false,
+                clientError: (
+                    <FormattedMessage
+                        id='add_outgoing_webhook.triggerWordsOrChannelRequired'
+                        defaultMessage='A valid channel or a list of trigger words is required'
+                    />
+                )
+            });
+
+            return;
+        }
+
+        const callbackUrls = [];
+        for (let callbackUrl of this.state.callbackUrls.split('\n')) {
+            callbackUrl = callbackUrl.trim();
+
+            if (callbackUrl.length > 0) {
+                callbackUrls.push(callbackUrl);
+            }
+        }
+
+        if (callbackUrls.length === 0) {
+            this.setState({
+                saving: false,
+                clientError: (
+                    <FormattedMessage
+                        id='add_outgoing_webhook.callbackUrlsRequired'
+                        defaultMessage='One or more callback URLs are required'
+                    />
+                )
+            });
+
+            return;
+        }
+
+        const hook = {
+            channel_id: this.state.channelId,
+            trigger_words: triggerWords,
+            trigger_when: parseInt(this.state.triggerWhen, 10),
+            callback_urls: callbackUrls,
+            display_name: this.state.displayName,
+            content_type: this.state.contentType,
+            description: this.state.description
+        };
+
+        this.performAction(hook);
+    }
+
+    updateDisplayName(e) {
+        this.setState({
+            displayName: e.target.value
+        });
+    }
+
+    updateDescription(e) {
+        this.setState({
+            description: e.target.value
+        });
+    }
+
+    updateContentType(e) {
+        this.setState({
+            contentType: e.target.value
+        });
+    }
+
+    updateChannelId(e) {
+        this.setState({
+            channelId: e.target.value
+        });
+    }
+
+    updateTriggerWords(e) {
+        this.setState({
+            triggerWords: e.target.value
+        });
+    }
+
+    updateTriggerWhen(e) {
+        this.setState({
+            triggerWhen: e.target.value
+        });
+    }
+
+    updateCallbackUrls(e) {
+        this.setState({
+            callbackUrls: e.target.value
+        });
+    }
+
+    render() {
+        const contentTypeOption1 = 'application/x-www-form-urlencoded';
+        const contentTypeOption2 = 'application/json';
+
+        var headerToRender = this.header();
+        var footerToRender = this.footer();
+        var renderExtra = this.renderExtra();
+
+        return (
+            <div className='backstage-content'>
+                <BackstageHeader>
+                    <Link to={`/${this.props.team.name}/integrations/outgoing_webhooks`}>
+                        <FormattedMessage
+                            id='installed_outgoing_webhooks.header'
+                            defaultMessage='Outgoing Webhooks'
+                        />
+                    </Link>
+                    <FormattedMessage
+                        id={headerToRender.id}
+                        defaultMessage={headerToRender.defaultMessage}
+                    />
+                </BackstageHeader>
+                <div className='backstage-form'>
+                    <form
+                        className='form-horizontal'
+                        onSubmit={this.handleSubmit}
+                    >
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='displayName'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.displayName'
+                                    defaultMessage='Display Name'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <input
+                                    id='displayName'
+                                    type='text'
+                                    maxLength='64'
+                                    className='form-control'
+                                    value={this.state.displayName}
+                                    onChange={this.updateDisplayName}
+                                />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.displayName.help'
+                                        defaultMessage='Display name for your incoming webhook made of up to 64 characters.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='description'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.description'
+                                    defaultMessage='Description'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <input
+                                    id='description'
+                                    type='text'
+                                    maxLength='128'
+                                    className='form-control'
+                                    value={this.state.description}
+                                    onChange={this.updateDescription}
+                                />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.description.help'
+                                        defaultMessage='Description for your incoming webhook.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='contentType'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.content_Type'
+                                    defaultMessage='Content Type'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <select
+                                    className='form-control'
+                                    value={this.state.contentType}
+                                    onChange={this.updateContentType}
+                                >
+                                    <option
+                                        value={contentTypeOption1}
+                                    >
+                                        {contentTypeOption1}
+                                    </option>
+                                    <option
+                                        value={contentTypeOption2}
+                                    >
+                                        {contentTypeOption2}
+                                    </option>
+                                </select>
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.contentType.help1'
+                                        defaultMessage='Choose the content type by which the response will be sent.'
+                                    />
+                                </div>
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.contentType.help2'
+                                        defaultMessage='If application/x-www-form-urlencoded is chosen, the server assumes you will be encoding the parameters in a URL format.'
+                                    />
+                                </div>
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.contentType.help3'
+                                        defaultMessage='If application/json is chosen, the server assumes you will posting JSON data.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='channelId'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.channel'
+                                    defaultMessage='Channel'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <ChannelSelect
+                                    id='channelId'
+                                    value={this.state.channelId}
+                                    onChange={this.updateChannelId}
+                                    selectOpen={true}
+                                />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.channel.help'
+                                        defaultMessage='Public channel to receive webhook payloads. Optional if at least one Trigger Word is specified.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='triggerWords'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.triggerWords'
+                                    defaultMessage='Trigger Words (One Per Line)'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <textarea
+                                    id='triggerWords'
+                                    rows='3'
+                                    maxLength='1000'
+                                    className='form-control'
+                                    value={this.state.triggerWords}
+                                    onChange={this.updateTriggerWords}
+                                />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.triggerWords.help'
+                                        defaultMessage='Messages that start with one of the specified words will trigger the outgoing webhook. Optional if Channel is selected.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='triggerWords'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.triggerWordsTriggerWhen'
+                                    defaultMessage='Trigger When'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <select
+                                    className='form-control'
+                                    value={this.state.triggerWhen}
+                                    onChange={this.updateTriggerWhen}
+                                >
+                                    <option
+                                        value='0'
+                                    >
+                                        {localizeMessage('add_outgoing_webhook.triggerWordsTriggerWhenFullWord', 'First word matches a trigger word exactly')}
+                                    </option>
+                                    <option
+                                        value='1'
+                                    >
+                                        {localizeMessage('add_outgoing_webhook.triggerWordsTriggerWhenStartsWith', 'First word starts with a trigger word')}
+                                    </option>
+                                </select>
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.triggerWordsTriggerWhen.help'
+                                        defaultMessage='Choose when to trigger the outgoing webhook; if the first word of a message matches a Trigger Word exactly, or if it starts with a Trigger Word.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
+                                htmlFor='callbackUrls'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.callbackUrls'
+                                    defaultMessage='Callback URLs (One Per Line)'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <textarea
+                                    id='callbackUrls'
+                                    rows='3'
+                                    maxLength='1000'
+                                    className='form-control'
+                                    value={this.state.callbackUrls}
+                                    onChange={this.updateCallbackUrls}
+                                />
+                                <div className='form__help'>
+                                    <FormattedMessage
+                                        id='add_outgoing_webhook.callbackUrls.help'
+                                        defaultMessage='The URL that messages will be sent to.'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div className='backstage-form__footer'>
+                            <FormError
+                                type='backstage'
+                                errors={[this.state.serverError, this.state.clientError]}
+                            />
+                            <Link
+                                className='btn btn-sm'
+                                to={`/${this.props.team.name}/integrations/outgoing_webhooks`}
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.cancel'
+                                    defaultMessage='Cancel'
+                                />
+                            </Link>
+                            <SpinnerButton
+                                className='btn btn-primary'
+                                type='submit'
+                                spinning={this.state.saving}
+                                onClick={this.handleSubmit}
+                            >
+                                <FormattedMessage
+                                    id={footerToRender.id}
+                                    defaultMessage={footerToRender.defaultMessage}
+                                />
+                            </SpinnerButton>
+                            {renderExtra}
+                        </div>
+                    </form>
+                </div>
+            </div>
+        );
+    }
+}

webapp/components/integrations/components/add_incoming_webhook.jsx

@@ -1,80 +1,17 @@
 // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import React from 'react';
-
 import * as AsyncClient from 'utils/async_client.jsx';
+import {browserHistory} from 'react-router/es6';
 
-import BackstageHeader from 'components/backstage/components/backstage_header.jsx';
+import AbstractIncomingWebhook from './abstract_incoming_webhook.jsx';
-import ChannelSelect from 'components/channel_select.jsx';
-import {FormattedMessage} from 'react-intl';
-import FormError from 'components/form_error.jsx';
-import {browserHistory, Link} from 'react-router/es6';
-import SpinnerButton from 'components/spinner_button.jsx';
-
-export default class AddIncomingWebhook extends React.Component {
-    static get propTypes() {
-        return {
-            team: React.PropTypes.object
-        };
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.handleSubmit = this.handleSubmit.bind(this);
-
-        this.updateDisplayName = this.updateDisplayName.bind(this);
-        this.updateDescription = this.updateDescription.bind(this);
-        this.updateChannelId = this.updateChannelId.bind(this);
-
-        this.state = {
-            displayName: '',
-            description: '',
-            channelId: '',
-            saving: false,
-            serverError: '',
-            clientError: null
-        };
-    }
-
-    handleSubmit(e) {
-        e.preventDefault();
-
-        if (this.state.saving) {
-            return;
-        }
-
-        this.setState({
-            saving: true,
-            serverError: '',
-            clientError: ''
-        });
-
-        if (!this.state.channelId) {
-            this.setState({
-                saving: false,
-                clientError: (
-                    <FormattedMessage
-                        id='add_incoming_webhook.channelRequired'
-                        defaultMessage='A valid channel is required'
-                    />
-                )
-            });
-
-            return;
-        }
-
-        const hook = {
-            channel_id: this.state.channelId,
-            display_name: this.state.displayName,
-            description: this.state.description
-        };
 
+export default class AddIncomingWebhook extends AbstractIncomingWebhook {
+    performAction(hook) {
         AsyncClient.addIncomingHook(
             hook,
             (data) => {
-                browserHistory.push('/' + this.props.team.name + '/integrations/confirm?type=incoming_webhooks&id=' + data.id);
+                browserHistory.push(`/${this.props.team.name}/integrations/confirm?type=incoming_webhooks&id=${data.id}`);
             },
             (err) => {
                 this.setState({
@@ -85,153 +22,11 @@ export default class AddIncomingWebhook extends React.Component {
         );
     }
 
-    updateDisplayName(e) {
+    header() {
-        this.setState({
+        return {id: 'integrations.add', defaultMessage: 'Add'};
-            displayName: e.target.value
-        });
     }
 
-    updateDescription(e) {
+    footer() {
-        this.setState({
+        return {id: 'add_incoming_webhook.save', defaultMessage: 'Save'};
-            description: e.target.value
-        });
-    }
-
-    updateChannelId(e) {
-        this.setState({
-            channelId: e.target.value
-        });
-    }
-
-    render() {
-        return (
-            <div className='backstage-content'>
-                <BackstageHeader>
-                    <Link to={'/' + this.props.team.name + '/integrations/incoming_webhooks'}>
-                        <FormattedMessage
-                            id='installed_incoming_webhooks.header'
-                            defaultMessage='Incoming Webhooks'
-                        />
-                    </Link>
-                    <FormattedMessage
-                        id='integrations.add'
-                        defaultMessage='Add'
-                    />
-                </BackstageHeader>
-                <div className='backstage-form'>
-                    <form
-                        className='form-horizontal'
-                        onSubmit={this.handleSubmit}
-                    >
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-4'
-                                htmlFor='displayName'
-                            >
-                                <FormattedMessage
-                                    id='add_incoming_webhook.displayName'
-                                    defaultMessage='Display Name'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <input
-                                    id='displayName'
-                                    type='text'
-                                    maxLength='64'
-                                    className='form-control'
-                                    value={this.state.displayName}
-                                    onChange={this.updateDisplayName}
-                                />
-                                <div className='form__help'>
-                                    <FormattedMessage
-                                        id='add_incoming_webhook.displayName.help'
-                                        defaultMessage='Display name for your incoming webhook made of up to 64 characters.'
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-4'
-                                htmlFor='description'
-                            >
-                                <FormattedMessage
-                                    id='add_incoming_webhook.description'
-                                    defaultMessage='Description'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <input
-                                    id='description'
-                                    type='text'
-                                    maxLength='128'
-                                    className='form-control'
-                                    value={this.state.description}
-                                    onChange={this.updateDescription}
-                                />
-                                <div className='form__help'>
-                                    <FormattedMessage
-                                        id='add_incoming_webhook.description.help'
-                                        defaultMessage='Description for your incoming webhook.'
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-4'
-                                htmlFor='channelId'
-                            >
-                                <FormattedMessage
-                                    id='add_incoming_webhook.channel'
-                                    defaultMessage='Channel'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <ChannelSelect
-                                    id='channelId'
-                                    value={this.state.channelId}
-                                    onChange={this.updateChannelId}
-                                    selectOpen={true}
-                                    selectPrivate={true}
-                                />
-                                <div className='form__help'>
-                                    <FormattedMessage
-                                        id='add_incoming_webhook.channel.help'
-                                        defaultMessage='Public channel or private group that receives the webhook payloads. You must belong to the private group when setting up the webhook.'
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div className='backstage-form__footer'>
-                            <FormError
-                                type='backstage'
-                                errors={[this.state.serverError, this.state.clientError]}
-                            />
-                            <Link
-                                className='btn btn-sm'
-                                to={'/' + this.props.team.name + '/integrations/incoming_webhooks'}
-                            >
-                                <FormattedMessage
-                                    id='add_incoming_webhook.cancel'
-                                    defaultMessage='Cancel'
-                                />
-                            </Link>
-                            <SpinnerButton
-                                className='btn btn-primary'
-                                type='submit'
-                                spinning={this.state.saving}
-                                onClick={this.handleSubmit}
-                            >
-                                <FormattedMessage
-                                    id='add_incoming_webhook.save'
-                                    defaultMessage='Save'
-                                />
-                            </SpinnerButton>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        );
     }
 }

webapp/components/integrations/components/add_outgoing_webhook.jsx

@@ -1,127 +1,17 @@
 // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import React from 'react';
-
 import * as AsyncClient from 'utils/async_client.jsx';
-import {localizeMessage} from 'utils/utils.jsx';
+import {browserHistory} from 'react-router/es6';
 
-import BackstageHeader from 'components/backstage/components/backstage_header.jsx';
+import AbstractOutgoingWebhook from './abstract_outgoing_webhook.jsx';
-import ChannelSelect from 'components/channel_select.jsx';
-import {FormattedMessage} from 'react-intl';
-import FormError from 'components/form_error.jsx';
-import {browserHistory, Link} from 'react-router/es6';
-import SpinnerButton from 'components/spinner_button.jsx';
-
-export default class AddOutgoingWebhook extends React.Component {
-    static get propTypes() {
-        return {
-            team: React.PropTypes.object
-        };
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.handleSubmit = this.handleSubmit.bind(this);
-
-        this.updateDisplayName = this.updateDisplayName.bind(this);
-        this.updateDescription = this.updateDescription.bind(this);
-        this.updateContentType = this.updateContentType.bind(this);
-        this.updateChannelId = this.updateChannelId.bind(this);
-        this.updateTriggerWords = this.updateTriggerWords.bind(this);
-        this.updateTriggerWhen = this.updateTriggerWhen.bind(this);
-        this.updateCallbackUrls = this.updateCallbackUrls.bind(this);
-
-        this.state = {
-            displayName: '',
-            description: '',
-            contentType: 'application/x-www-form-urlencoded',
-            channelId: '',
-            triggerWords: '',
-            triggerWhen: 0,
-            callbackUrls: '',
-            saving: false,
-            serverError: '',
-            clientError: null
-        };
-    }
-
-    handleSubmit(e) {
-        e.preventDefault();
-
-        if (this.state.saving) {
-            return;
-        }
-
-        this.setState({
-            saving: true,
-            serverError: '',
-            clientError: ''
-        });
-
-        const triggerWords = [];
-        if (this.state.triggerWords) {
-            for (let triggerWord of this.state.triggerWords.split('\n')) {
-                triggerWord = triggerWord.trim();
-
-                if (triggerWord.length > 0) {
-                    triggerWords.push(triggerWord);
-                }
-            }
-        }
-
-        if (!this.state.channelId && triggerWords.length === 0) {
-            this.setState({
-                saving: false,
-                clientError: (
-                    <FormattedMessage
-                        id='add_outgoing_webhook.triggerWordsOrChannelRequired'
-                        defaultMessage='A valid channel or a list of trigger words is required'
-                    />
-                )
-            });
-
-            return;
-        }
-
-        const callbackUrls = [];
-        for (let callbackUrl of this.state.callbackUrls.split('\n')) {
-            callbackUrl = callbackUrl.trim();
-
-            if (callbackUrl.length > 0) {
-                callbackUrls.push(callbackUrl);
-            }
-        }
-
-        if (callbackUrls.length === 0) {
-            this.setState({
-                saving: false,
-                clientError: (
-                    <FormattedMessage
-                        id='add_outgoing_webhook.callbackUrlsRequired'
-                        defaultMessage='One or more callback URLs are required'
-                    />
-                )
-            });
-
-            return;
-        }
-
-        const hook = {
-            channel_id: this.state.channelId,
-            trigger_words: triggerWords,
-            trigger_when: parseInt(this.state.triggerWhen, 10),
-            callback_urls: callbackUrls,
-            display_name: this.state.displayName,
-            content_type: this.state.contentType,
-            description: this.state.description
-        };
 
+export default class AddOutgoingWebhook extends AbstractOutgoingWebhook {
+    performAction(hook) {
         AsyncClient.addOutgoingHook(
             hook,
             (data) => {
-                browserHistory.push('/' + this.props.team.name + '/integrations/confirm?type=outgoing_webhooks&id=' + data.id);
+                browserHistory.push(`/${this.props.team.name}/integrations/confirm?type=outgoing_webhooks&id=${data.id}`);
             },
             (err) => {
                 this.setState({
@@ -132,315 +22,15 @@ export default class AddOutgoingWebhook extends React.Component {
         );
     }
 
-    updateDisplayName(e) {
+    header() {
-        this.setState({
+        return {id: 'integrations.add', defaultMessage: 'Add'};
-            displayName: e.target.value
-        });
     }
 
-    updateDescription(e) {
+    footer() {
-        this.setState({
+        return {id: 'add_outgoing_webhook.save', defaultMessage: 'Save'};
-            description: e.target.value
-        });
     }
 
-    updateContentType(e) {
+    renderExtra() {
-        this.setState({
+        return '';
-            contentType: e.target.value
-        });
-    }
-
-    updateChannelId(e) {
-        this.setState({
-            channelId: e.target.value
-        });
-    }
-
-    updateTriggerWords(e) {
-        this.setState({
-            triggerWords: e.target.value
-        });
-    }
-
-    updateTriggerWhen(e) {
-        this.setState({
-            triggerWhen: e.target.value
-        });
-    }
-
-    updateCallbackUrls(e) {
-        this.setState({
-            callbackUrls: e.target.value
-        });
-    }
-
-    render() {
-        const contentTypeOption1 = 'application/x-www-form-urlencoded';
-        const contentTypeOption2 = 'application/json';
-
-        return (
-            <div className='backstage-content'>
-                <BackstageHeader>
-                    <Link to={'/' + this.props.team.name + '/integrations/outgoing_webhooks'}>
-                        <FormattedMessage
-                            id='installed_outgoing_webhooks.header'
-                            defaultMessage='Outgoing Webhooks'
-                        />
-                    </Link>
-                    <FormattedMessage
-                        id='integrations.add'
-                        defaultMessage='Add'
-                    />
-                </BackstageHeader>
-                <div className='backstage-form'>
-                    <form
-                        className='form-horizontal'
-                        onSubmit={this.handleSubmit}
-                    >
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-4'
-                                htmlFor='displayName'
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.displayName'
-                                    defaultMessage='Display Name'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <input
-                                    id='displayName'
-                                    type='text'
-                                    maxLength='64'
-                                    className='form-control'
-                                    value={this.state.displayName}
-                                    onChange={this.updateDisplayName}
-                                />
-                                <div className='form__help'>
-                                    <FormattedMessage
-                                        id='add_outgoing_webhook.displayName.help'
-                                        defaultMessage='Display name for your incoming webhook made of up to 64 characters.'
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-4'
-                                htmlFor='description'
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.description'
-                                    defaultMessage='Description'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <input
-                                    id='description'
-                                    type='text'
-                                    maxLength='128'
-                                    className='form-control'
-                                    value={this.state.description}
-                                    onChange={this.updateDescription}
-                                />
-                                <div className='form__help'>
-                                    <FormattedMessage
-                                        id='add_outgoing_webhook.description.help'
-                                        defaultMessage='Description for your incoming webhook.'
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-4'
-                                htmlFor='contentType'
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.content_Type'
-                                    defaultMessage='Content Type'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <select
-                                    className='form-control'
-                                    value={this.state.contentType}
-                                    onChange={this.updateContentType}
-                                >
-                                    <option
-                                        value={contentTypeOption1}
-                                    >
-                                        {contentTypeOption1}
-                                    </option>
-                                    <option
-                                        value={contentTypeOption2}
-                                    >
-                                        {contentTypeOption2}
-                                    </option>
-                                </select>
-                                <div className='form__help'>
-                                    <FormattedMessage
-                                        id='add_outgoing_webhook.contentType.help1'
-                                        defaultMessage='Choose the content type by which the response will be sent.'
-                                    />
-                                </div>
-                                <div className='form__help'>
-                                    <FormattedMessage
-                                        id='add_outgoing_webhook.contentType.help2'
-                                        defaultMessage='If application/x-www-form-urlencoded is chosen, the server assumes you will be encoding the parameters in a URL format.'
-                                    />
-                                </div>
-                                <div className='form__help'>
-                                    <FormattedMessage
-                                        id='add_outgoing_webhook.contentType.help3'
-                                        defaultMessage='If application/json is chosen, the server assumes you will posting JSON data.'
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-4'
-                                htmlFor='channelId'
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.channel'
-                                    defaultMessage='Channel'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <ChannelSelect
-                                    id='channelId'
-                                    value={this.state.channelId}
-                                    onChange={this.updateChannelId}
-                                    selectOpen={true}
-                                />
-                                <div className='form__help'>
-                                    <FormattedMessage
-                                        id='add_outgoing_webhook.channel.help'
-                                        defaultMessage='Public channel to receive webhook payloads. Optional if at least one Trigger Word is specified.'
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-4'
-                                htmlFor='triggerWords'
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.triggerWords'
-                                    defaultMessage='Trigger Words (One Per Line)'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <textarea
-                                    id='triggerWords'
-                                    rows='3'
-                                    maxLength='1000'
-                                    className='form-control'
-                                    value={this.state.triggerWords}
-                                    onChange={this.updateTriggerWords}
-                                />
-                                <div className='form__help'>
-                                    <FormattedMessage
-                                        id='add_outgoing_webhook.triggerWords.help'
-                                        defaultMessage='Messages that start with one of the specified words will trigger the outgoing webhook. Optional if Channel is selected.'
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-4'
-                                htmlFor='triggerWords'
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.triggerWordsTriggerWhen'
-                                    defaultMessage='Trigger When'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <select
-                                    className='form-control'
-                                    value={this.state.triggerWhen}
-                                    onChange={this.updateTriggerWhen}
-                                >
-                                    <option
-                                        value='0'
-                                    >
-                                        {localizeMessage('add_outgoing_webhook.triggerWordsTriggerWhenFullWord', 'First word matches a trigger word exactly')}
-                                    </option>
-                                    <option
-                                        value='1'
-                                    >
-                                        {localizeMessage('add_outgoing_webhook.triggerWordsTriggerWhenStartsWith', 'First word starts with a trigger word')}
-                                    </option>
-                                </select>
-                                <div className='form__help'>
-                                    <FormattedMessage
-                                        id='add_outgoing_webhook.triggerWordsTriggerWhen.help'
-                                        defaultMessage='Choose when to trigger the outgoing webhook; if the first word of a message matches a Trigger Word exactly, or if it starts with a Trigger Word.'
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-4'
-                                htmlFor='callbackUrls'
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.callbackUrls'
-                                    defaultMessage='Callback URLs (One Per Line)'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-8'>
-                                <textarea
-                                    id='callbackUrls'
-                                    rows='3'
-                                    maxLength='1000'
-                                    className='form-control'
-                                    value={this.state.callbackUrls}
-                                    onChange={this.updateCallbackUrls}
-                                />
-                                <div className='form__help'>
-                                    <FormattedMessage
-                                        id='add_outgoing_webhook.callbackUrls.help'
-                                        defaultMessage='The URL that messages will be sent to.'
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <div className='backstage-form__footer'>
-                            <FormError
-                                type='backstage'
-                                errors={[this.state.serverError, this.state.clientError]}
-                            />
-                            <Link
-                                className='btn btn-sm'
-                                to={'/' + this.props.team.name + '/integrations/outgoing_webhooks'}
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.cancel'
-                                    defaultMessage='Cancel'
-                                />
-                            </Link>
-                            <SpinnerButton
-                                className='btn btn-primary'
-                                type='submit'
-                                spinning={this.state.saving}
-                                onClick={this.handleSubmit}
-                            >
-                                <FormattedMessage
-                                    id='add_outgoing_webhook.save'
-                                    defaultMessage='Save'
-                                />
-                            </SpinnerButton>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        );
     }
 }

webapp/components/integrations/components/edit_incoming_webhook.jsx

@@ -0,0 +1,78 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import * as AsyncClient from 'utils/async_client.jsx';
+
+import {browserHistory} from 'react-router/es6';
+import IntegrationStore from 'stores/integration_store.jsx';
+import {loadIncomingHooks} from 'actions/integration_actions.jsx';
+
+import AbstractIncomingWebhook from './abstract_incoming_webhook.jsx';
+import TeamStore from 'stores/team_store.jsx';
+
+export default class EditIncomingWebhook extends AbstractIncomingWebhook {
+    constructor(props) {
+        super(props);
+
+        this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
+        this.originalIncomingHook = null;
+    }
+
+    componentDidMount() {
+        IntegrationStore.addChangeListener(this.handleIntegrationChange);
+
+        if (window.mm_config.EnableIncomingWebhooks === 'true') {
+            loadIncomingHooks();
+        }
+    }
+
+    componentWillUnmount() {
+        IntegrationStore.removeChangeListener(this.handleIntegrationChange);
+    }
+
+    handleIntegrationChange() {
+        const teamId = TeamStore.getCurrentId();
+
+        this.setState({
+            hooks: IntegrationStore.getIncomingWebhooks(teamId),
+            loading: !IntegrationStore.hasReceivedIncomingWebhooks(teamId)
+        });
+
+        if (!this.state.loading) {
+            this.originalIncomingHook = this.state.hooks.filter((hook) => hook.id === this.props.location.query.id)[0];
+
+            this.setState({
+                displayName: this.originalIncomingHook.display_name,
+                description: this.originalIncomingHook.description,
+                channelId: this.originalIncomingHook.channel_id
+            });
+        }
+    }
+
+    performAction(hook) {
+        if (this.originalIncomingHook.id) {
+            hook.id = this.originalIncomingHook.id;
+        }
+
+        AsyncClient.updateIncomingHook(
+            hook,
+            () => {
+                browserHistory.push(`/${this.props.team.name}/integrations/incoming_webhooks`);
+            },
+            (err) => {
+                this.setState({
+                    saving: false,
+                    serverError: err.message
+                });
+            }
+        );
+    }
+
+    header() {
+        return {id: 'integrations.edit', defaultMessage: 'Edit'};
+    }
+
+    footer() {
+        return {id: 'update_incoming_webhook.update', defaultMessage: 'Update'};
+    }
+}

webapp/components/integrations/components/edit_outgoing_webhook.jsx

@@ -0,0 +1,190 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import * as AsyncClient from 'utils/async_client.jsx';
+
+import {browserHistory} from 'react-router/es6';
+import IntegrationStore from 'stores/integration_store.jsx';
+import {loadOutgoingHooks} from 'actions/integration_actions.jsx';
+
+import AbstractOutgoingWebhook from './abstract_outgoing_webhook.jsx';
+import ConfirmModal from 'components/confirm_modal.jsx';
+import {FormattedMessage} from 'react-intl';
+import TeamStore from 'stores/team_store.jsx';
+
+export default class EditOutgoingWebhook extends AbstractOutgoingWebhook {
+    constructor(props) {
+        super(props);
+
+        this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
+        this.handleConfirmModal = this.handleConfirmModal.bind(this);
+        this.handleUpdate = this.handleUpdate.bind(this);
+        this.submitCommand = this.submitCommand.bind(this);
+        this.confirmModalDismissed = this.confirmModalDismissed.bind(this);
+        this.originalOutgoingHook = null;
+
+        this.state = {
+            showConfirmModal: false
+        };
+    }
+
+    componentDidMount() {
+        IntegrationStore.addChangeListener(this.handleIntegrationChange);
+
+        if (window.mm_config.EnableOutgoingWebhooks === 'true') {
+            loadOutgoingHooks();
+        }
+    }
+
+    componentWillUnmount() {
+        IntegrationStore.removeChangeListener(this.handleIntegrationChange);
+    }
+
+    handleIntegrationChange() {
+        const teamId = TeamStore.getCurrentId();
+
+        this.setState({
+            hooks: IntegrationStore.getOutgoingWebhooks(teamId),
+            loading: !IntegrationStore.hasReceivedOutgoingWebhooks(teamId)
+        });
+
+        if (!this.state.loading) {
+            this.originalOutgoingHook = this.state.hooks.filter((hook) => hook.id === this.props.location.query.id)[0];
+
+            this.setState({
+                displayName: this.originalOutgoingHook.display_name,
+                description: this.originalOutgoingHook.description,
+                channelId: this.originalOutgoingHook.channel_id,
+                contentType: this.originalOutgoingHook.content_type,
+                triggerWhen: this.originalOutgoingHook.trigger_when
+            });
+
+            var triggerWords = '';
+            if (this.originalOutgoingHook.trigger_words) {
+                let i = 0;
+                for (i = 0; i < this.originalOutgoingHook.trigger_words.length; i++) {
+                    triggerWords += this.originalOutgoingHook.trigger_words[i] + '\n';
+                }
+            }
+
+            var callbackUrls = '';
+            if (this.originalOutgoingHook.callback_urls) {
+                let i = 0;
+                for (i = 0; i < this.originalOutgoingHook.callback_urls.length; i++) {
+                    callbackUrls += this.originalOutgoingHook.callback_urls[i] + '\n';
+                }
+            }
+
+            this.setState({
+                triggerWords,
+                callbackUrls
+            });
+        }
+    }
+
+    performAction(hook) {
+        this.newHook = hook;
+
+        if (this.originalOutgoingHook.id) {
+            hook.id = this.originalOutgoingHook.id;
+        }
+
+        if (this.originalOutgoingHook.token) {
+            hook.token = this.originalOutgoingHook.token;
+        }
+
+        var triggerWordsSame = (this.originalOutgoingHook.trigger_words.length === hook.trigger_words.length) &&
+            this.originalOutgoingHook.trigger_words.every((v, i) => v === hook.trigger_words[i]);
+
+        var callbackUrlsSame = (this.originalOutgoingHook.callback_urls.length === hook.callback_urls.length) &&
+            this.originalOutgoingHook.callback_urls.every((v, i) => v === hook.callback_urls[i]);
+
+        if (this.originalOutgoingHook.content_type !== hook.content_type ||
+            !triggerWordsSame || !callbackUrlsSame) {
+            this.handleConfirmModal();
+            this.setState({
+                saving: false
+            });
+        } else {
+            this.submitCommand();
+        }
+    }
+
+    handleUpdate() {
+        this.setState({
+            saving: true,
+            serverError: '',
+            clientError: ''
+        });
+
+        this.submitCommand();
+    }
+
+    handleConfirmModal() {
+        this.setState({showConfirmModal: true});
+    }
+
+    confirmModalDismissed() {
+        this.setState({showConfirmModal: false});
+    }
+
+    submitCommand() {
+        AsyncClient.updateOutgoingHook(
+            this.newHook,
+            () => {
+                browserHistory.push(`/${this.props.team.name}/integrations/outgoing_webhooks`);
+            },
+            (err) => {
+                this.setState({
+                    saving: false,
+                    showConfirmModal: false,
+                    serverError: err.message
+                });
+            }
+        );
+    }
+
+    header() {
+        return {id: 'integrations.edit', defaultMessage: 'Edit'};
+    }
+
+    footer() {
+        return {id: 'update_outgoing_webhook.update', defaultMessage: 'Update'};
+    }
+
+    renderExtra() {
+        const confirmButton = (
+            <FormattedMessage
+                id='update_outgoing_webhook.update'
+                defaultMessage='Update'
+            />
+        );
+
+        const confirmTitle = (
+            <FormattedMessage
+                id='update_outgoing_webhook.confirm'
+                defaultMessage='Edit Outgoing Webhook'
+            />
+        );
+
+        const confirmMessage = (
+            <FormattedMessage
+                id='update_outgoing_webhook.question'
+                defaultMessage='Your changes may break the existing outgoing webhook. Are you sure you would like to update it?'
+            />
+        );
+
+        return (
+            <ConfirmModal
+                title={confirmTitle}
+                message={confirmMessage}
+                confirmButton={confirmButton}
+                show={this.state.showConfirmModal}
+                onConfirm={this.handleUpdate}
+                onCancel={this.confirmModalDismissed}
+            />
+        );
+    }
+}

webapp/components/integrations/components/installed_incoming_webhook.jsx

@@ -7,6 +7,7 @@ import ChannelStore from 'stores/channel_store.jsx';
 import {getSiteURL} from 'utils/url.jsx';
 
 import {FormattedMessage} from 'react-intl';
+import {Link} from 'react-router';
 
 export default class InstalledIncomingWebhook extends React.Component {
     static get propTypes() {
@@ -15,7 +16,8 @@ export default class InstalledIncomingWebhook extends React.Component {
             onDelete: React.PropTypes.func.isRequired,
             filter: React.PropTypes.string,
             creator: React.PropTypes.object.isRequired,
-            canChange: React.PropTypes.bool.isRequired
+            canChange: React.PropTypes.bool.isRequired,
+            team: React.PropTypes.object.isRequired
         };
     }
 
@@ -88,6 +90,13 @@ export default class InstalledIncomingWebhook extends React.Component {
         if (this.props.canChange) {
             actions = (
                 <div className='item-actions'>
+                    <Link to={`/${this.props.team.name}/integrations/incoming_webhooks/edit?id=${incomingWebhook.id}`}>
+                        <FormattedMessage
+                            id='installed_integrations.edit'
+                            defaultMessage='Edit'
+                        />
+                    </Link>
+                    {' - '}
                     <a
                         href='#'
                         onClick={this.handleDelete}

webapp/components/integrations/components/installed_incoming_webhooks.jsx

@@ -110,6 +110,7 @@ export default class InstalledIncomingWebhooks extends React.Component {
                     onDelete={this.deleteIncomingWebhook}
                     creator={this.state.users[incomingWebhook.user_id] || {}}
                     canChange={canChange}
+                    team={this.props.team}
                 />
             );
         });

webapp/components/integrations/components/installed_outgoing_webhook.jsx

@@ -6,6 +6,7 @@ import React from 'react';
 import ChannelStore from 'stores/channel_store.jsx';
 
 import {FormattedMessage} from 'react-intl';
+import {Link} from 'react-router';
 
 export default class InstalledOutgoingWebhook extends React.Component {
     static get propTypes() {
@@ -15,7 +16,8 @@ export default class InstalledOutgoingWebhook extends React.Component {
             onDelete: React.PropTypes.func.isRequired,
             filter: React.PropTypes.string,
             creator: React.PropTypes.object.isRequired,
-            canChange: React.PropTypes.bool.isRequired
+            canChange: React.PropTypes.bool.isRequired,
+            team: React.PropTypes.object.isRequired
         };
     }
 
@@ -161,6 +163,13 @@ export default class InstalledOutgoingWebhook extends React.Component {
                         />
                     </a>
                     {' - '}
+                    <Link to={`/${this.props.team.name}/integrations/outgoing_webhooks/edit?id=${outgoingWebhook.id}`}>
+                        <FormattedMessage
+                            id='installed_integrations.edit'
+                            defaultMessage='Edit'
+                        />
+                    </Link>
+                    {' - '}
                     <a
                         href='#'
                         onClick={this.handleDelete}

webapp/components/integrations/components/installed_outgoing_webhooks.jsx

@@ -114,6 +114,7 @@ export default class InstalledOutgoingWebhooks extends React.Component {
                     onDelete={this.deleteOutgoingWebhook}
                     creator={this.state.users[outgoingWebhook.creator_id] || {}}
                     canChange={canChange}
+                    team={this.props.team}
                 />
             );
         });

webapp/i18n/en.json

@@ -96,6 +96,7 @@
   "add_incoming_webhook.name": "Name",
   "add_incoming_webhook.save": "Save",
   "add_incoming_webhook.url": "<b>URL</b>: {url}",
+  "update_incoming_webhook.update": "Update",
   "add_oauth_app.callbackUrls.help": "The redirect URIs to which the service will redirect users after accepting or denying authorization of your application, and which will handle authorization codes or access tokens. Must be a valid URL and start with http:// or https://.",
   "add_oauth_app.callbackUrlsRequired": "One or more callback URLs are required",
   "add_oauth_app.clientId": "<b>Client ID</b>: {id}",
@@ -137,6 +138,9 @@
   "add_outgoing_webhook.triggerWordsTriggerWhen.help": "Choose when to trigger the outgoing webhook; if the first word of a message matches a Trigger Word exactly, or if it starts with a Trigger Word.",
   "add_outgoing_webhook.triggerWordsTriggerWhenFullWord": "First word matches a trigger word exactly",
   "add_outgoing_webhook.triggerWordsTriggerWhenStartsWith": "First word starts with a trigger word",
+  "update_outgoing_webhook.update": "Update",
+  "update_outgoing_webhook.confirm": "Edit Outgoing Webhook",
+  "update_outgoing_webhook.question": "Your changes may break the existing outgoing webhook. Are you sure you would like to update it?",
   "admin.advance.cluster": "High Availability (Beta)",
   "admin.advance.metrics": "Performance Monitoring (Beta)",
   "admin.audits.reload": "Reload User Activity Logs",

webapp/routes/route_integrations.jsx

@@ -27,6 +27,12 @@ export default {
                     getComponents: (location, callback) => {
                         System.import('components/integrations/components/add_incoming_webhook.jsx').then(RouteUtils.importComponentSuccess(callback));
                     }
+                },
+                {
+                    path: 'edit',
+                    getComponents: (location, callback) => {
+                        System.import('components/integrations/components/edit_incoming_webhook.jsx').then(RouteUtils.importComponentSuccess(callback));
+                    }
                 }
             ]
         },
@@ -43,6 +49,12 @@ export default {
                     getComponents: (location, callback) => {
                         System.import('components/integrations/components/add_outgoing_webhook.jsx').then(RouteUtils.importComponentSuccess(callback));
                     }
+                },
+                {
+                    path: 'edit',
+                    getComponents: (location, callback) => {
+                        System.import('components/integrations/components/edit_outgoing_webhook.jsx').then(RouteUtils.importComponentSuccess(callback));
+                    }
                 }
             ]
         },

webapp/stores/integration_store.jsx

@@ -57,6 +57,20 @@ class IntegrationStore extends EventEmitter {
         this.setIncomingWebhooks(teamId, incomingWebhooks);
     }
 
+    updateIncomingWebhook(incomingWebhook) {
+        const teamId = incomingWebhook.team_id;
+        const incomingWebhooks = this.getIncomingWebhooks(teamId);
+
+        for (let i = 0; i < incomingWebhooks.length; i++) {
+            if (incomingWebhooks[i].id === incomingWebhook.id) {
+                incomingWebhooks[i] = incomingWebhook;
+                break;
+            }
+        }
+
+        this.setIncomingWebhooks(teamId, incomingWebhooks);
+    }
+
     removeIncomingWebhook(teamId, id) {
         let incomingWebhooks = this.getIncomingWebhooks(teamId);
 
@@ -200,6 +214,10 @@ class IntegrationStore extends EventEmitter {
             this.addIncomingWebhook(action.incomingWebhook);
             this.emitChange();
             break;
+        case ActionTypes.UPDATED_INCOMING_WEBHOOK:
+            this.updateIncomingWebhook(action.incomingWebhook);
+            this.emitChange();
+            break;
         case ActionTypes.REMOVED_INCOMING_WEBHOOK:
             this.removeIncomingWebhook(action.teamId, action.id);
             this.emitChange();

webapp/tests/client_hooks.test.jsx

@@ -22,7 +22,29 @@ describe('Client.Hooks', function() {
                     done(new Error('hooks not enabled'));
                 },
                 function(err) {
-                    assert.equal(err.id, 'api.webhook.create_incoming.disabled.app_errror');
+                    assert.equal(err.id, 'api.webhook.create_incoming.disabled.app_error');
+                    done();
+                }
+            );
+        });
+    });
+
+    it('updateIncomingHook', function(done) {
+        TestHelper.initBasic(() => {
+            TestHelper.basicClient().enableLogErrorsToConsole(false); // Disabling since this unit test causes an error
+
+            var hook = {};
+            hook.channel_id = TestHelper.basicChannel().id;
+            hook.description = 'desc';
+            hook.display_name = 'Unit Test';
+
+            TestHelper.basicClient().updateIncomingHook(
+                hook,
+                function() {
+                    done(new Error('hooks not enabled'));
+                },
+                function(err) {
+                    assert.equal(err.id, 'api.webhook.update_incoming.disabled.app_error');
                     done();
                 }
             );
@@ -38,7 +60,7 @@ describe('Client.Hooks', function() {
                     done(new Error('hooks not enabled'));
                 },
                 function(err) {
-                    assert.equal(err.id, 'api.webhook.delete_incoming.disabled.app_errror');
+                    assert.equal(err.id, 'api.webhook.delete_incoming.disabled.app_error');
                     done();
                 }
             );
@@ -128,5 +150,27 @@ describe('Client.Hooks', function() {
             );
         });
     });
+
+    it('updateOutgoingHook', function(done) {
+        TestHelper.initBasic(() => {
+            TestHelper.basicClient().enableLogErrorsToConsole(false); // Disabling since this unit test causes an error
+
+            var hook = {};
+            hook.channel_id = TestHelper.basicChannel().id;
+            hook.description = 'desc';
+            hook.display_name = 'Unit Test';
+
+            TestHelper.basicClient().updateOutgoingHook(
+                hook,
+                function() {
+                    done(new Error('hooks not enabled'));
+                },
+                function(err) {
+                    assert.equal(err.id, 'api.webhook.update_outgoing.disabled.app_error');
+                    done();
+                }
+            );
+        });
+    });
 });
 

webapp/utils/async_client.jsx

@@ -1324,6 +1324,29 @@ export function addIncomingHook(hook, success, error) {
     );
 }
 
+export function updateIncomingHook(hook, success, error) {
+    Client.updateIncomingHook(
+        hook,
+        (data) => {
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.UPDATED_INCOMING_WEBHOOK,
+                incomingWebhook: data
+            });
+
+            if (success) {
+                success(data);
+            }
+        },
+        (err) => {
+            if (error) {
+                error(err);
+            } else {
+                dispatchError(err, 'updateIncomingHook');
+            }
+        }
+    );
+}
+
 export function addOutgoingHook(hook, success, error) {
     Client.addOutgoingHook(
         hook,
@@ -1347,6 +1370,29 @@ export function addOutgoingHook(hook, success, error) {
     );
 }
 
+export function updateOutgoingHook(hook, success, error) {
+    Client.updateOutgoingHook(
+        hook,
+        (data) => {
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.UPDATED_OUTGOING_WEBHOOK,
+                outgoingWebhook: data
+            });
+
+            if (success) {
+                success(data);
+            }
+        },
+        (err) => {
+            if (error) {
+                error(err);
+            } else {
+                dispatchError(err, 'updateOutgoingHook');
+            }
+        }
+    );
+}
+
 export function deleteIncomingHook(id) {
     Client.deleteIncomingHook(
         id,

webapp/utils/constants.jsx

@@ -105,6 +105,7 @@ export const ActionTypes = keyMirror({
 
     RECEIVED_INCOMING_WEBHOOKS: null,
     RECEIVED_INCOMING_WEBHOOK: null,
+    UPDATED_INCOMING_WEBHOOK: null,
     REMOVED_INCOMING_WEBHOOK: null,
     RECEIVED_OUTGOING_WEBHOOKS: null,
     RECEIVED_OUTGOING_WEBHOOK: null,