Merge branch '21773-document-trigger-section-in-gitlab-ci-yml-docs' into 'master'

Better document triggers docs

## What does this MR do?

- Refactor the triggers page view
- Replace old images with new ones
- Mention triggers in `ci/yaml/README.md`

## Screenshots (if relevant)

The new triggers views contains more information and is prettier :)

## Before

![screenshot-localhost_3000_2016-09-06_10-53-10](/uploads/8f45a0e21a31f1819af1739f7af8afd0/screenshot-localhost_3000_2016-09-06_10-53-10.png)

# After

![screenshot-localhost_3000_2016-09-06_10-36-34](/uploads/2bbe2801b0f959851a8cfa5a8a14623d/screenshot-localhost_3000_2016-09-06_10-36-34.png)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [x] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #21773

See merge request !6217

1 files changed, 77 insertions, 53 deletions

diff --git a/app/views/projects/triggers/index.html.haml b/app/views/projects/triggers/index.html.haml
index 7f3de47d7df..f6e0b0a7c8a 100644
--- a/app/views/projects/triggers/index.html.haml
+++ b/app/views/projects/triggers/index.html.haml
@@ -4,65 +4,89 @@
   .col-lg-3
     %h4.prepend-top-0
       = page_title
-    %p
-      Triggers can force a specific branch or tag to rebuild with an API call.
+    %p.prepend-top-20
+      Triggers can force a specific branch or tag to get rebuilt with an API call.
+    %p.append-bottom-0
+      = succeed '.' do
+        Learn more in the
+        = link_to 'triggers documentation', help_page_path('ci/triggers/README'), target: '_blank'
   .col-lg-9
-    %h5.prepend-top-0
-      Your triggers
-    - if @triggers.any?
-      .table-responsive
-        %table.table
-          %thead
-            %th Token
-            %th Last used
-            %th
-          = render partial: 'trigger', collection: @triggers, as: :trigger
-    - else
-      %p.settings-message.text-center.append-bottom-default
-        No triggers have been created yet. Add one using the button below.
+    .panel.panel-default
+      .panel-heading
+        %h4.panel-title
+          Manage your project's triggers
+      .panel-body
+        - if @triggers.any?
+          .table-responsive
+            %table.table
+              %thead
+                %th
+                  %strong Token
+                %th
+                  %strong Last used
+                %th
+              = render partial: 'trigger', collection: @triggers, as: :trigger
+        - else
+          %p.settings-message.text-center.append-bottom-default
+            No triggers have been created yet. Add one using the button below.
 
-    = form_for @trigger, url: url_for(controller: 'projects/triggers', action: 'create') do |f|
-      = f.submit "Add Trigger", class: 'btn btn-success'
+        = form_for @trigger, url: url_for(controller: 'projects/triggers', action: 'create') do |f|
+          = f.submit "Add trigger", class: 'btn btn-success'
 
-    %h5.prepend-top-default
-      Use CURL
+      .panel-footer
 
-    %p.light
-      Copy the token above, set your branch or tag name, and that reference will be rebuilt.
+        %p
+          In the following examples, you can see the exact API call you need to
+          make in order to rebuild a specific
+          %code ref
+          (branch or tag) with a trigger token.
+        %p
+          All you need to do is replace the
+          %code TOKEN
+          and
+          %code REF_NAME
+          with the trigger token and the branch or tag name respectively.
 
-    %pre
-      :plain
-        curl -X POST \
-             -F token=TOKEN \
-             -F ref=REF_NAME \
-             #{builds_trigger_url(@project.id)}
-    %h5.prepend-top-default
-      Use .gitlab-ci.yml
+        %h5.prepend-top-default
+          Use cURL
 
-    %p.light
-      In the
-      %code .gitlab-ci.yml
-      of the dependent project, include the following snippet.
-      The project will rebuild at the end of the build.
+        %p.light
+          Copy one of the tokens above, set your branch or tag name, and that
+          reference will be rebuilt.
 
-    %pre
-      :plain
-        trigger:
-          type: deploy
-          script:
-            - "curl -X POST -F token=TOKEN -F ref=REF_NAME #{builds_trigger_url(@project.id)}"
-    %h5.prepend-top-default
-      Pass build variables
+        %pre
+          :plain
+            curl -X POST \
+                 -F token=TOKEN \
+                 -F ref=REF_NAME \
+                 #{builds_trigger_url(@project.id)}
+        %h5.prepend-top-default
+          Use .gitlab-ci.yml
 
-    %p.light
-      Add
-      %code variables[VARIABLE]=VALUE
-      to an API request. Variable values can be used to distinguish between triggered builds and normal builds.
+        %p.light
+          In the
+          %code .gitlab-ci.yml
+          of another project, include the following snippet.
+          The project will be rebuilt at the end of the build.
 
-    %pre.append-bottom-0
-      :plain
-        curl -X POST \
-             -F token=TOKEN \
-             -F "ref=REF_NAME" \
-             -F "variables[RUN_NIGHTLY_BUILD]=true" \
-             #{builds_trigger_url(@project.id)}
+        %pre
+          :plain
+            trigger_build:
+              stage: deploy
+              script:
+                - "curl -X POST -F token=TOKEN -F ref=REF_NAME #{builds_trigger_url(@project.id)}"
+        %h5.prepend-top-default
+          Pass build variables
+
+        %p.light
+          Add
+          %code variables[VARIABLE]=VALUE
+          to an API request. Variable values can be used to distinguish between triggered builds and normal builds.
+
+        %pre.append-bottom-0
+          :plain
+            curl -X POST \
+                 -F token=TOKEN \
+                 -F "ref=REF_NAME" \
+                 -F "variables[RUN_NIGHTLY_BUILD]=true" \
+                 #{builds_trigger_url(@project.id)}