Webhooks structure

app/coffee/app.coffee

@@ -101,6 +101,8 @@ configure = ($routeProvider, $locationProvider, $httpProvider, $provide, $tgEven
         {templateUrl: "admin/admin-memberships.html"})
     $routeProvider.when("/project/:pslug/admin/roles",
         {templateUrl: "admin/admin-roles.html"})
+    $routeProvider.when("/project/:pslug/admin/third-parties/webhooks",
+        {templateUrl: "admin/admin-third-parties-webhooks.html"})
     $routeProvider.when("/project/:pslug/admin/third-parties/github",
         {templateUrl: "admin/admin-third-parties-github.html"})
     $routeProvider.when("/project/:pslug/admin/third-parties/gitlab",

app/coffee/modules/base.coffee

@@ -93,6 +93,7 @@ urls = {
     "project-admin-project-values-issue-severities": "/project/:project/admin/project-values/issue-severities"
     "project-admin-memberships": "/project/:project/admin/memberships"
     "project-admin-roles": "/project/:project/admin/roles"
+    "project-admin-third-parties-webhooks": "/project/:project/admin/third-parties/webhooks"
     "project-admin-third-parties-github": "/project/:project/admin/third-parties/github"
     "project-admin-third-parties-gitlab": "/project/:project/admin/third-parties/gitlab"
     "project-admin-third-parties-bitbucket": "/project/:project/admin/third-parties/bitbucket"

app/partials/includes/modules/admin-menu.jade

@@ -21,8 +21,8 @@ section.admin-menu
                     span.title Roles & Permissions
                     span.icon.icon-arrow-right
             li#adminmenu-third-parties
-                a(href="" tg-nav="project-admin-third-parties-github:project=project.slug")
+                a(href="" tg-nav="project-admin-third-parties-webhooks:project=project.slug")
-                    span.title Third parties
+                    span.title Integrations
                     span.icon.icon-arrow-right
             li#adminmenu-contrib(ng-show="contribPlugins.length > 0")
                 a(href="" tg-nav="project-admin-contrib:project=project.slug,plugin=contribPlugins[0].slug")

app/partials/includes/modules/admin-submenu-third-parties.jade

@@ -1,9 +1,13 @@
 section.admin-submenu
     header
-        h1 Third parties
+        h1 Services
 
     nav
         ul
+            li#adminmenu-third-parties-webhooks.third-parties-webhooks
+                a(href="", tg-nav="project-admin-third-parties-webhooks:project=project.slug")
+                    span.title Webhooks
+                    span.icon.icon-arrow-right
             li#adminmenu-third-parties-github
                 a(href="", tg-nav="project-admin-third-parties-github:project=project.slug")
                     span.title Github

app/partials/views/modules/admin/admin-third-parties-webhooks.jade

@@ -0,0 +1,71 @@
+block head
+    title Taiga  Your agile, free, and open source project management tool
+
+block content
+    div.wrapper.roles(tg-github-webhooks, ng-controller="GithubController as ctrl",
+                            ng-init="section='admin'")
+        sidebar.menu-secondary.sidebar(tg-admin-navigation="Webhooks")
+            include ../admin-menu
+        sidebar.menu-tertiary.sidebar(tg-admin-navigation="third-parties-webhooks")
+            include ../admin-submenu-third-parties
+
+        section.main.admin-common.admin-webhooks
+            include ../../components/mainTitle
+
+            p.admin-subtitle Webhooks notify external services about events in Taiga, like comments, user stories....
+            div.webhooks-options
+                a.button.button-green.add-webhook(href="",title="Add a New Webhook") Add Webhook
+
+            section.webhooks-table.basic-table
+                div.table-header
+                    div.row
+                        div.webhook-service
+                            span Name
+                        div.webhook-url
+                            span URL
+                        div.webhook-options
+                div.table-body
+                    form.row
+                        div.webhook-service
+                            input(type="text", name="service-name", placeholder="Type the service name")
+                        div.webhook-url
+                            div.webhook-url-inputs
+                                input(type="text", name="service-sexret-key", placeholder="Type the service secret key")
+                                input(type="text", name="service-payload-url", placeholder="Type the service payload url")
+                        div.webhook-options
+                            a.icon.icon-floppy(href="", title="Save Webhook")
+                            a.icon.icon-delete(href="", title="Cancel Webhook")
+                    div.row
+                        div.webhook-service
+                            span Slack
+                        div.webhook-url
+                            span http://slack.kjrw3543m/nwdlkw4m535/ffm
+                            a(href="", title="Test history") Test history
+                        div.webhook-options
+                            a.icon.icon-floppy(href="", title="Save Webhook")
+                            a.icon.icon-edit(href="", title="Edit Webhook")
+                            a.icon.icon-cancel(href="", title="Cancel Webhook")
+
+        //
+            form
+                fieldset
+                    label(for="secret-key") Secret key
+                    input(type="text", name="secret-key", ng-model="github.secret", placeholder="Secret key", id="secret-key")
+
+                fieldset
+                    .select-input-text(tg-select-input-text)
+                        div
+                            label(for="payload-url") Payload URL
+                            .field-with-option
+                                input(type="text", ng-model="github.webhooks_url", name="payload-url", readonly="readonly", placeholder="Payload URL", id="payload-url")
+                                .option-wrapper.select-input-content
+                                    .icon.icon-copy
+                            .help-copy Copy to clipboard: Ctrl+C
+
+                button(type="submit", class="hidden")
+                a.button.button-green.submit-button(href="", title="Save") Save
+
+
+            a.help-button(href="https://taiga.io/support/github-integration/", target="_blank")
+                span.icon.icon-help
+                span Do you need help? Check out our support page!

app/styles/modules/admin/admin-menu.scss

@@ -11,7 +11,6 @@
     a {
         display: block;
         padding: 1rem 0 1rem 1rem;
-        &.active,
         &:hover {
             .icon {
                 opacity: 1;
@@ -19,6 +18,12 @@
             }
         }
     }
+    .active {
+        .icon {
+            opacity: 1;
+            transition: opacity .3s linear;
+        }
+    }
     .icon {
         color: $blackish;
         float: right;

app/styles/modules/admin/admin-third-parties-webhooks.scss

@@ -0,0 +1,34 @@
+.admin-webhooks {
+    .webhooks-options {
+        margin-bottom: 1rem;
+        text-align: right;
+    }
+
+    .webhook-service,
+    .webhook-url {
+        margin-right: .5rem;
+    }
+    .webhook-service {
+        flex-basis: 200px;
+        flex-grow: 0;
+        min-width: 200px;
+    }
+    .webhook-url {
+        flex-basis: 400px;
+        flex-grow: 8;
+    }
+    .webhook-options {
+        flex-basis: 100px;
+        flex-grow: 0;
+        min-width: 100px;
+        text-align: center;
+    }
+    .webhook-url-inputs {
+        display: flex;
+        flex-direction: row;
+        input {
+            flex-basis: 1;
+            margin-right: .3rem;
+        }
+    }
+}

app/styles/modules/admin/third-parties.scss

@@ -19,7 +19,7 @@
     textarea {
         height: 10rem;
     }
-    .button-green {
+    .submit-button {
         color: $white;
         display: block;
         text-align: center;

main-sass.js

@@ -125,6 +125,7 @@ exports.files = function () {
         'modules/admin/default-values',
         'modules/admin/project-values',
         'modules/admin/third-parties',
+        'modules/admin/admin-third-parties-webhooks',
         'modules/admin/contrib',
 
         //Modules user Settings