From baaaf4e95979c128779c735a59cc4e0ecade0bf9 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Tue, 18 Apr 2017 17:49:21 +0100
Subject: Destroy tooltip in async buttons and tooltips

---
 app/assets/javascripts/environments/components/environment_actions.js   | 2 ++
 app/assets/javascripts/environments/components/environment_rollback.js  | 2 ++
 app/assets/javascripts/environments/components/environment_stop.js      | 2 ++
 app/assets/javascripts/vue_pipelines_index/components/async_button.vue  | 2 ++
 .../javascripts/vue_pipelines_index/components/pipelines_actions.js     | 2 ++
 5 files changed, 10 insertions(+)

diff --git a/app/assets/javascripts/environments/components/environment_actions.js b/app/assets/javascripts/environments/components/environment_actions.js
index 1418e8d86ee..c199c7abcac 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js
+++ b/app/assets/javascripts/environments/components/environment_actions.js
@@ -35,6 +35,8 @@ export default {
     onClickAction(endpoint) {
       this.isLoading = true;
 
+      $('.has-tooltip').tooltip('destroy');
+
       this.service.postAction(endpoint)
       .then(() => {
         this.isLoading = false;
diff --git a/app/assets/javascripts/environments/components/environment_rollback.js b/app/assets/javascripts/environments/components/environment_rollback.js
index baa15d9e5b5..7f3c4b78a51 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.js
+++ b/app/assets/javascripts/environments/components/environment_rollback.js
@@ -36,6 +36,8 @@ export default {
     onClick() {
       this.isLoading = true;
 
+      $('.has-tooltip').tooltip('destroy');
+
       this.service.postAction(this.retryUrl)
       .then(() => {
         this.isLoading = false;
diff --git a/app/assets/javascripts/environments/components/environment_stop.js b/app/assets/javascripts/environments/components/environment_stop.js
index 47102692024..949de9a9604 100644
--- a/app/assets/javascripts/environments/components/environment_stop.js
+++ b/app/assets/javascripts/environments/components/environment_stop.js
@@ -36,6 +36,8 @@ export default {
       if (confirm('Are you sure you want to stop this environment?')) {
         this.isLoading = true;
 
+        $('.has-tooltip').tooltip('destroy');
+
         this.service.postAction(this.retryUrl)
         .then(() => {
           this.isLoading = false;
diff --git a/app/assets/javascripts/vue_pipelines_index/components/async_button.vue b/app/assets/javascripts/vue_pipelines_index/components/async_button.vue
index 11da6e908b7..fb1f8a9e2a3 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/async_button.vue
+++ b/app/assets/javascripts/vue_pipelines_index/components/async_button.vue
@@ -65,6 +65,8 @@ export default {
     makeRequest() {
       this.isLoading = true;
 
+      $('.has-tooltip').tooltip('destroy');
+
       this.service.postAction(this.endpoint)
         .then(() => {
           this.isLoading = false;
diff --git a/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js b/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
index 12d80768646..74396d8249b 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
@@ -28,6 +28,8 @@ export default {
     onClickAction(endpoint) {
       this.isLoading = true;
 
+      $('.has-tooltip').tooltip('destroy');
+
       this.service.postAction(endpoint)
       .then(() => {
         this.isLoading = false;
-- 
cgit v1.2.1


From 97fd50262e2cacced7c8274285d7d0f0c4c407ed Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 19 Apr 2017 09:05:48 +0100
Subject: Fixed project & group icons not being clickable

Closes #31073
---
 app/assets/stylesheets/pages/projects.scss   | 4 ++++
 app/views/shared/groups/_group.html.haml     | 3 ++-
 app/views/shared/projects/_project.html.haml | 9 +++++----
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index a9e2a034790..28a8f9cb335 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -596,6 +596,10 @@ pre.light-well {
 
   .avatar-container {
     align-self: flex-start;
+
+    > a {
+      width: 100%;
+    }
   }
 
   .project-details {
diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml
index 09f946f1d88..b361ec86ced 100644
--- a/app/views/shared/groups/_group.html.haml
+++ b/app/views/shared/groups/_group.html.haml
@@ -27,7 +27,8 @@
       = visibility_level_icon(group.visibility_level, fw: false)
 
   .avatar-container.s40
-    = image_tag group_icon(group), class: "avatar s40 hidden-xs"
+    = link_to group do
+      = image_tag group_icon(group), class: "avatar s40 hidden-xs"
   .title
     = link_to group_name, group, class: 'group-name'
 
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index 761f0b606b5..c3b40433c9a 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -12,10 +12,11 @@
   = cache(cache_key) do
     - if avatar
       .avatar-container.s40
-        - if use_creator_avatar
-          = image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
-        - else
-          = project_icon(project, alt: '', class: 'avatar project-avatar s40')
+        = link_to project_path(project), class: dom_class(project) do
+          - if use_creator_avatar
+            = image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
+          - else
+            = project_icon(project, alt: '', class: 'avatar project-avatar s40')
     .project-details
       %h3.prepend-top-0.append-bottom-0
         = link_to project_path(project), class: dom_class(project) do
-- 
cgit v1.2.1


From 8752b99f88f631d0e63c4795b89d3eec50b21274 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 19 Apr 2017 10:50:06 +0100
Subject: Only destroy the component's tooltip

---
 .../environments/components/environment_actions.js       |  2 +-
 .../environments/components/environment_rollback.js      |  2 +-
 .../environments/components/environment_stop.js          |  2 +-
 .../vue_pipelines_index/components/async_button.vue      | 16 ++++++++++------
 .../vue_pipelines_index/components/pipelines_actions.js  |  2 +-
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/environments/components/environment_actions.js b/app/assets/javascripts/environments/components/environment_actions.js
index c199c7abcac..1f325d66e87 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js
+++ b/app/assets/javascripts/environments/components/environment_actions.js
@@ -35,7 +35,7 @@ export default {
     onClickAction(endpoint) {
       this.isLoading = true;
 
-      $('.has-tooltip').tooltip('destroy');
+      $(this.$el.querySelector('.has-tooltip')).tooltip('destroy');
 
       this.service.postAction(endpoint)
       .then(() => {
diff --git a/app/assets/javascripts/environments/components/environment_rollback.js b/app/assets/javascripts/environments/components/environment_rollback.js
index 7f3c4b78a51..7cbfb651525 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.js
+++ b/app/assets/javascripts/environments/components/environment_rollback.js
@@ -36,7 +36,7 @@ export default {
     onClick() {
       this.isLoading = true;
 
-      $('.has-tooltip').tooltip('destroy');
+      $(this.$el).tooltip('destroy');
 
       this.service.postAction(this.retryUrl)
       .then(() => {
diff --git a/app/assets/javascripts/environments/components/environment_stop.js b/app/assets/javascripts/environments/components/environment_stop.js
index 949de9a9604..9e5465c1785 100644
--- a/app/assets/javascripts/environments/components/environment_stop.js
+++ b/app/assets/javascripts/environments/components/environment_stop.js
@@ -36,7 +36,7 @@ export default {
       if (confirm('Are you sure you want to stop this environment?')) {
         this.isLoading = true;
 
-        $('.has-tooltip').tooltip('destroy');
+        $(this.$el).tooltip('destroy');
 
         this.service.postAction(this.retryUrl)
         .then(() => {
diff --git a/app/assets/javascripts/vue_pipelines_index/components/async_button.vue b/app/assets/javascripts/vue_pipelines_index/components/async_button.vue
index fb1f8a9e2a3..bc42586a770 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/async_button.vue
+++ b/app/assets/javascripts/vue_pipelines_index/components/async_button.vue
@@ -54,7 +54,7 @@ export default {
   },
 
   methods: {
-    onClick() {
+    onClick(e) {
       if (this.confirmActionMessage && confirm(this.confirmActionMessage)) {
         this.makeRequest();
       } else if (!this.confirmActionMessage) {
@@ -65,7 +65,7 @@ export default {
     makeRequest() {
       this.isLoading = true;
 
-      $('.has-tooltip').tooltip('destroy');
+      $(this.$el).tooltip('destroy');
 
       this.service.postAction(this.endpoint)
         .then(() => {
@@ -90,9 +90,13 @@ export default {
     :aria-label="title"
     data-container="body"
     data-placement="top"
-    :disabled="isLoading"
-  >
-    <i :class="iconClass" aria-hidden="true"></i>
-    <i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading"></i>
+    :disabled="isLoading">
+    <i
+      :class="iconClass"
+      aria-hidden="true" />
+    <i
+      class="fa fa-spinner fa-spin"
+      aria-hidden="true"
+      v-if="isLoading" />
   </button>
 </template>
diff --git a/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js b/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
index 74396d8249b..535064f610e 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
@@ -28,7 +28,7 @@ export default {
     onClickAction(endpoint) {
       this.isLoading = true;
 
-      $('.has-tooltip').tooltip('destroy');
+      $(this.$el.querySelector('.has-tooltip')).tooltip('destroy');
 
       this.service.postAction(endpoint)
       .then(() => {
-- 
cgit v1.2.1


From dbbcb32cfef8d9304afe648bbe13e8b98fc1ee30 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 19 Apr 2017 10:55:24 +0100
Subject: Remove unused argument

---
 app/assets/javascripts/vue_pipelines_index/components/async_button.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/vue_pipelines_index/components/async_button.vue b/app/assets/javascripts/vue_pipelines_index/components/async_button.vue
index bc42586a770..d1c60b570de 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/async_button.vue
+++ b/app/assets/javascripts/vue_pipelines_index/components/async_button.vue
@@ -54,7 +54,7 @@ export default {
   },
 
   methods: {
-    onClick(e) {
+    onClick() {
       if (this.confirmActionMessage && confirm(this.confirmActionMessage)) {
         this.makeRequest();
       } else if (!this.confirmActionMessage) {
-- 
cgit v1.2.1


From 2afff60982e9ccc4afa80951acda8e754ffde6fe Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 19 Apr 2017 15:30:47 +0100
Subject: Use refs instead of query the DOM

---
 app/assets/javascripts/environments/components/environment_actions.js | 3 ++-
 app/assets/javascripts/pipelines/components/pipelines_actions.js      | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/environments/components/environment_actions.js b/app/assets/javascripts/environments/components/environment_actions.js
index 1f325d66e87..313e78e573a 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js
+++ b/app/assets/javascripts/environments/components/environment_actions.js
@@ -35,7 +35,7 @@ export default {
     onClickAction(endpoint) {
       this.isLoading = true;
 
-      $(this.$el.querySelector('.has-tooltip')).tooltip('destroy');
+      $(this.$refs.tooltip).tooltip('destroy');
 
       this.service.postAction(endpoint)
       .then(() => {
@@ -64,6 +64,7 @@ export default {
         class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip"
         data-container="body"
         data-toggle="dropdown"
+        ref="tooltip"
         :title="title"
         :aria-label="title"
         :disabled="isLoading">
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.js b/app/assets/javascripts/pipelines/components/pipelines_actions.js
index 535064f610e..ffda18d2e0f 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.js
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.js
@@ -28,7 +28,7 @@ export default {
     onClickAction(endpoint) {
       this.isLoading = true;
 
-      $(this.$el.querySelector('.has-tooltip')).tooltip('destroy');
+      $(this.$refs.tooltip).tooltip('destroy');
 
       this.service.postAction(endpoint)
       .then(() => {
@@ -59,6 +59,7 @@ export default {
         data-toggle="dropdown"
         data-placement="top"
         aria-label="Manual job"
+        ref="tooltip"
         :disabled="isLoading">
         ${playIconSvg}
         <i
-- 
cgit v1.2.1


From de71a4659482aeb38da5e883eeff12b24056871a Mon Sep 17 00:00:00 2001
From: Adam Niedzielski <adamsunday@gmail.com>
Date: Wed, 19 Apr 2017 16:38:46 +0200
Subject: Display issuable state only in notes and issuable description

Closes #30964
---
 app/models/concerns/issuable.rb                    |  2 +-
 app/models/note.rb                                 |  2 +-
 lib/banzai/filter/issuable_state_filter.rb         |  2 ++
 .../banzai/filter/issuable_state_filter_spec.rb    | 32 ++++++++++++++--------
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/app/models/concerns/issuable.rb b/app/models/concerns/issuable.rb
index 3d2258d5e3e..26dbf4d9570 100644
--- a/app/models/concerns/issuable.rb
+++ b/app/models/concerns/issuable.rb
@@ -23,7 +23,7 @@ module Issuable
 
   included do
     cache_markdown_field :title, pipeline: :single_line
-    cache_markdown_field :description
+    cache_markdown_field :description, issuable_state_filter_enabled: true
 
     belongs_to :author, class_name: "User"
     belongs_to :assignee, class_name: "User"
diff --git a/app/models/note.rb b/app/models/note.rb
index 630d0adbece..e720bfba030 100644
--- a/app/models/note.rb
+++ b/app/models/note.rb
@@ -16,7 +16,7 @@ class Note < ActiveRecord::Base
 
   ignore_column :original_discussion_id
 
-  cache_markdown_field :note, pipeline: :note
+  cache_markdown_field :note, pipeline: :note, issuable_state_filter_enabled: true
 
   # Attribute containing rendered and redacted Markdown as generated by
   # Banzai::ObjectRenderer.
diff --git a/lib/banzai/filter/issuable_state_filter.rb b/lib/banzai/filter/issuable_state_filter.rb
index 0b2b8bd7f4d..1a9d03beb51 100644
--- a/lib/banzai/filter/issuable_state_filter.rb
+++ b/lib/banzai/filter/issuable_state_filter.rb
@@ -9,6 +9,8 @@ module Banzai
       VISIBLE_STATES = %w(closed merged).freeze
 
       def call
+        return doc unless context[:issuable_state_filter_enabled]
+
         extractor = Banzai::IssuableExtractor.new(project, current_user)
         issuables = extractor.extract([doc])
 
diff --git a/spec/lib/banzai/filter/issuable_state_filter_spec.rb b/spec/lib/banzai/filter/issuable_state_filter_spec.rb
index 5cb98163746..0df259333e4 100644
--- a/spec/lib/banzai/filter/issuable_state_filter_spec.rb
+++ b/spec/lib/banzai/filter/issuable_state_filter_spec.rb
@@ -5,6 +5,7 @@ describe Banzai::Filter::IssuableStateFilter, lib: true do
   include FilterSpecHelper
 
   let(:user) { create(:user) }
+  let(:context) { { current_user: user, issuable_state_filter_enabled: true } }
 
   def create_link(text, data)
     link_to(text, '', class: 'gfm has-tooltip', data: data)
@@ -20,7 +21,7 @@ describe Banzai::Filter::IssuableStateFilter, lib: true do
   it 'ignores non-issuable links' do
     project = create(:empty_project, :public)
     link = create_link('text', project: project, reference_type: 'issue')
-    doc = filter(link, current_user: user)
+    doc = filter(link, context)
 
     expect(doc.css('a').last.text).to eq('text')
   end
@@ -28,7 +29,7 @@ describe Banzai::Filter::IssuableStateFilter, lib: true do
   it 'ignores issuable links with empty content' do
     issue = create(:issue, :closed)
     link = create_link('', issue: issue.id, reference_type: 'issue')
-    doc = filter(link, current_user: user)
+    doc = filter(link, context)
 
     expect(doc.css('a').last.text).to eq('')
   end
@@ -40,17 +41,26 @@ describe Banzai::Filter::IssuableStateFilter, lib: true do
       issue: issue.id,
       reference_type: 'issue'
     )
-    doc = filter(link, current_user: user)
+    doc = filter(link, context)
 
     expect(doc.css('a').last.inner_html).
       to eq('something <strong>else</strong> [closed]')
   end
 
+  it 'does not append state when filter is not enabled' do
+    issue = create(:issue, :closed)
+    link = create_link('text', issue: issue.id, reference_type: 'issue')
+    context = { current_user: user }
+    doc = filter(link, context)
+
+    expect(doc.css('a').last.text).to eq('text')
+  end
+
   context 'for issue references' do
     it 'ignores open issue references' do
       issue = create(:issue)
       link = create_link('text', issue: issue.id, reference_type: 'issue')
-      doc = filter(link, current_user: user)
+      doc = filter(link, context)
 
       expect(doc.css('a').last.text).to eq('text')
     end
@@ -58,7 +68,7 @@ describe Banzai::Filter::IssuableStateFilter, lib: true do
     it 'ignores reopened issue references' do
       reopened_issue = create(:issue, :reopened)
       link = create_link('text', issue: reopened_issue.id, reference_type: 'issue')
-      doc = filter(link, current_user: user)
+      doc = filter(link, context)
 
       expect(doc.css('a').last.text).to eq('text')
     end
@@ -66,7 +76,7 @@ describe Banzai::Filter::IssuableStateFilter, lib: true do
     it 'appends [closed] to closed issue references' do
       closed_issue = create(:issue, :closed)
       link = create_link('text', issue: closed_issue.id, reference_type: 'issue')
-      doc = filter(link, current_user: user)
+      doc = filter(link, context)
 
       expect(doc.css('a').last.text).to eq('text [closed]')
     end
@@ -76,7 +86,7 @@ describe Banzai::Filter::IssuableStateFilter, lib: true do
     it 'ignores open merge request references' do
       mr = create(:merge_request)
       link = create_link('text', merge_request: mr.id, reference_type: 'merge_request')
-      doc = filter(link, current_user: user)
+      doc = filter(link, context)
 
       expect(doc.css('a').last.text).to eq('text')
     end
@@ -84,7 +94,7 @@ describe Banzai::Filter::IssuableStateFilter, lib: true do
     it 'ignores reopened merge request references' do
       mr = create(:merge_request, :reopened)
       link = create_link('text', merge_request: mr.id, reference_type: 'merge_request')
-      doc = filter(link, current_user: user)
+      doc = filter(link, context)
 
       expect(doc.css('a').last.text).to eq('text')
     end
@@ -92,7 +102,7 @@ describe Banzai::Filter::IssuableStateFilter, lib: true do
     it 'ignores locked merge request references' do
       mr = create(:merge_request, :locked)
       link = create_link('text', merge_request: mr.id, reference_type: 'merge_request')
-      doc = filter(link, current_user: user)
+      doc = filter(link, context)
 
       expect(doc.css('a').last.text).to eq('text')
     end
@@ -100,7 +110,7 @@ describe Banzai::Filter::IssuableStateFilter, lib: true do
     it 'appends [closed] to closed merge request references' do
       mr = create(:merge_request, :closed)
       link = create_link('text', merge_request: mr.id, reference_type: 'merge_request')
-      doc = filter(link, current_user: user)
+      doc = filter(link, context)
 
       expect(doc.css('a').last.text).to eq('text [closed]')
     end
@@ -108,7 +118,7 @@ describe Banzai::Filter::IssuableStateFilter, lib: true do
     it 'appends [merged] to merged merge request references' do
       mr = create(:merge_request, :merged)
       link = create_link('text', merge_request: mr.id, reference_type: 'merge_request')
-      doc = filter(link, current_user: user)
+      doc = filter(link, context)
 
       expect(doc.css('a').last.text).to eq('text [merged]')
     end
-- 
cgit v1.2.1


From daf0592d256dfb84264c679b6ffa800d5bf9f366 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Wed, 19 Apr 2017 15:16:58 +0000
Subject: Added and updated droplab docs

---
 doc/development/fe_guide/droplab/droplab.md        | 256 +++++++++++++++++++++
 doc/development/fe_guide/droplab/plugins/ajax.md   |  37 +++
 doc/development/fe_guide/droplab/plugins/filter.md |  45 ++++
 .../fe_guide/droplab/plugins/input_setter.md       |  60 +++++
 doc/development/fe_guide/index.md                  |  10 +
 5 files changed, 408 insertions(+)
 create mode 100644 doc/development/fe_guide/droplab/droplab.md
 create mode 100644 doc/development/fe_guide/droplab/plugins/ajax.md
 create mode 100644 doc/development/fe_guide/droplab/plugins/filter.md
 create mode 100644 doc/development/fe_guide/droplab/plugins/input_setter.md

diff --git a/doc/development/fe_guide/droplab/droplab.md b/doc/development/fe_guide/droplab/droplab.md
new file mode 100644
index 00000000000..8f0b6b21953
--- /dev/null
+++ b/doc/development/fe_guide/droplab/droplab.md
@@ -0,0 +1,256 @@
+# DropLab
+
+A generic dropdown for all of your custom dropdown needs.
+
+## Usage
+
+DropLab can be used by simply adding a `data-dropdown-trigger` HTML attribute.
+This attribute allows us to find the "trigger" _(toggle)_ for the dropdown,
+whether that is a button, link or input.
+
+The value of the `data-dropdown-trigger` should be a CSS selector that
+DropLab can use to find the trigger's dropdown list.
+
+You should also add the `data-dropdown` attribute to declare the dropdown list.
+The value is irrelevant.
+
+The DropLab class has no side effects, so you must always call `.init` when
+the DOM is ready. `DropLab.prototype.init` takes the same arguments as `DropLab.prototype.addHook`.
+If you do not provide any arguments, it will globally query and instantiate all droplab compatible dropdowns.
+
+```html
+<a href="#" data-dropdown-trigger="#list">Toggle</a>
+
+<ul id="list" data-dropdown>
+  <!-- ... -->
+<ul>
+```
+```js
+const droplab = new DropLab();
+droplab.init();
+```
+
+As you can see, we have a "Toggle" link, that is declared as a trigger.
+It provides a selector to find the dropdown list it should control.
+
+### Static data
+
+You can add static list items.
+
+```html
+<a href="#" data-dropdown-trigger="#list">Toggle</a>
+
+<ul id="list" data-dropdown>
+  <li>Static value 1</li>
+  <li>Static value 2</li>
+<ul>
+```
+```js
+const droplab = new DropLab();
+droplab.init();
+```
+
+### Explicit instantiation
+
+You can pass the trigger and list elements as constructor arguments to return
+a non-global instance of DropLab using the `DropLab.prototype.init` method.
+
+```html
+<a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a>
+
+<ul id="list" data-dropdown>
+  <!-- ... -->
+<ul>
+```
+```js
+const trigger = document.getElementById('trigger');
+const list = document.getElementById('list');
+
+const droplab = new DropLab();
+droplab.init(trigger, list);
+```
+
+You can also add hooks to an existing DropLab instance using `DropLab.prototype.addHook`.
+
+```html
+<a href="#" data-dropdown-trigger="#auto-dropdown">Toggle</a>
+<ul id="auto-dropdown" data-dropdown><!-- ... --><ul>
+
+<a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a>
+<ul id="list" data-dropdown><!-- ... --><ul>
+```
+```js
+const droplab = new DropLab();
+
+droplab.init();
+
+const trigger = document.getElementById('trigger');
+const list = document.getElementById('list');
+
+droplab.addHook(trigger, list);
+```
+
+
+### Dynamic data
+
+Adding `data-dynamic` to your dropdown element will enable dynamic list rendering.
+
+You can template a list item using the keys of the data object provided.
+Use the handlebars syntax `{{ value }}` to HTML escape the value.
+Use the `<%= value %>` syntax to simply interpolate the value.
+Use the `<%= value %>` syntax to evaluate the value.
+
+Passing an array of objects to `DropLab.prototype.addData` will render that data
+for all `data-dynamic` dropdown lists tracked by that DropLab instance.
+
+```html
+<a href="#" data-dropdown-trigger="#list">Toggle</a>
+
+<ul id="list" data-dropdown data-dynamic>
+  <li><a href="#" data-id="{{id}}">{{text}}</a></li>
+</ul>
+```
+```js
+const droplab = new DropLab();
+
+droplab.init().addData([{
+  id: 0,
+  text: 'Jacob',
+}, {
+  id: 1,
+  text: 'Jeff',
+}]);
+```
+
+Alternatively, you can specify a specific dropdown to add this data to but passing
+the data as the second argument and and the `id` of the trigger element as the first argument.
+
+```html
+<a href="#" data-dropdown-trigger="#list" id="trigger">Toggle</a>
+
+<ul id="list" data-dropdown data-dynamic>
+  <li><a href="#" data-id="{{id}}">{{text}}</a></li>
+</ul>
+```
+```js
+const droplab = new DropLab();
+
+droplab.init().addData('trigger', [{
+  id: 0,
+  text: 'Jacob',
+}, {
+  id: 1,
+  text: 'Jeff',
+}]);
+```
+
+This allows you to mix static and dynamic content with ease, even with one trigger.
+
+Note the use of scoping regarding the `data-dropdown` attribute to capture both
+dropdown lists, one of which is dynamic.
+
+```html
+<input id="trigger" data-dropdown-trigger="#list">
+<div id="list" data-dropdown>
+  <ul>
+    <li><a href="#">Static item 1</a></li>
+    <li><a href="#">Static item 2</a></li>
+  </ul>
+  <ul data-dynamic>
+    <li><a href="#" data-id="{{id}}">{{text}}</a></li>
+  </ul>
+</div>
+```
+```js
+const droplab = new DropLab();
+
+droplab.init().addData('trigger', [{
+  id: 0,
+  text: 'Jacob',
+}, {
+  id: 1,
+  text: 'Jeff',
+}]);
+```
+
+## Internal selectors
+
+DropLab adds some CSS classes to help lower the barrier to integration.
+
+For example,
+
+* The `droplab-item-selected` css class is added to items that have been selected
+either by a mouse click or by enter key selection.
+* The `droplab-item-active` css class is added to items that have been selected
+using arrow key navigation.
+
+## Internal events
+
+DropLab uses some custom events to help lower the barrier to integration.
+
+For example,
+
+* The `click.dl` event is fired when an `li` list item has been clicked. It is also
+fired when a list item has been selected with the keyboard. It is also fired when a
+`HookButton` button is clicked (a registered `button` tag or `a` tag trigger).
+* The `input.dl` event is fired when a `HookInput` (a registered `input` tag trigger) triggers an `input` event.
+* The `mousedown.dl` event is fired when a `HookInput` triggers a `mousedown` event.
+* The `keyup.dl` event is fired when a `HookInput` triggers a `keyup` event.
+* The `keydown.dl` event is fired when a `HookInput` triggers a `keydown` event.
+
+These custom events add a `detail` object to the vanilla `Event` object that provides some potentially useful data.
+
+## Plugins
+
+Plugins are objects that are registered to be executed when a hook is added (when a droplab trigger and dropdown are instantiated).
+
+If no modules API is detected, the library will fall back as it does with `window.DropLab` and will add `window.DropLab.plugins.PluginName`.
+
+### Usage
+
+To use plugins, you can pass them in an array as the third argument of `DropLab.prototype.init` or `DropLab.prototype.addHook`.
+Some plugins require configuration values, the config object can be passed as the fourth argument.
+
+```html
+<a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a>
+<ul id="list" data-dropdown><!-- ... --><ul>
+```
+```js
+const droplab = new DropLab();
+
+const trigger = document.getElementById('trigger');
+const list = document.getElementById('list');
+
+droplab.init(trigger, list, [droplabAjax], {
+  droplabAjax: {
+    endpoint: '/some-endpoint',
+    method: 'setData',
+  },
+});
+```
+
+### Documentation
+
+* [Ajax plugin](plugins/ajax.md)
+* [Filter plugin](plugins/filter.md)
+* [InputSetter plugin](plugins/input_setter.md)
+
+### Development
+
+When plugins are initialised for a droplab trigger+dropdown, DropLab will
+call the plugins `init` function, so this must be implemented in the plugin.
+
+```js
+class MyPlugin {
+  static init() {
+    this.someProp = 'someProp';
+    this.someMethod();
+  }
+
+  static someMethod() {
+    this.otherProp = 'otherProp';
+  }
+}
+
+export default MyPlugin;
+```
diff --git a/doc/development/fe_guide/droplab/plugins/ajax.md b/doc/development/fe_guide/droplab/plugins/ajax.md
new file mode 100644
index 00000000000..9c7e56fa448
--- /dev/null
+++ b/doc/development/fe_guide/droplab/plugins/ajax.md
@@ -0,0 +1,37 @@
+# Ajax
+
+`Ajax` is a droplab plugin that allows for retrieving and rendering list data from a server.
+
+## Usage
+
+Add the `Ajax` object to the plugins array of a `DropLab.prototype.init` or `DropLab.prototype.addHook` call.
+
+`Ajax` requires 2 config values, the `endpoint` and `method`.
+
+* `endpoint` should be a URL to the request endpoint.
+* `method` should be `setData` or `addData`.
+* `setData` completely replaces the dropdown with the response data.
+* `addData` appends the response data to the current dropdown list.
+
+```html
+<a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a>
+<ul id="list" data-dropdown><!-- ... --><ul>
+```
+```js
+  const droplab = new DropLab();
+
+  const trigger = document.getElementById('trigger');
+  const list = document.getElementById('list');
+
+  droplab.addHook(trigger, list, [Ajax], {
+    Ajax: {
+      endpoint: '/some-endpoint',
+      method: 'setData',
+    },
+  });
+```
+
+Optionally you can set `loadingTemplate` to a HTML string. This HTML string will
+replace the dropdown list whilst the request is pending.
+
+Additionally, you can set `onError` to a function to catch any XHR errors.
diff --git a/doc/development/fe_guide/droplab/plugins/filter.md b/doc/development/fe_guide/droplab/plugins/filter.md
new file mode 100644
index 00000000000..0853ea4d320
--- /dev/null
+++ b/doc/development/fe_guide/droplab/plugins/filter.md
@@ -0,0 +1,45 @@
+# Filter
+
+`Filter` is a plugin that allows for filtering data that has been added
+to the dropdown using a simple fuzzy string search of an input value.
+
+## Usage
+
+Add the `Filter` object to the plugins array of a `DropLab.prototype.init` or `DropLab.prototype.addHook` call.
+
+* `Filter` requires a config value for `template`.
+* `template` should be the key of the objects within your data array that you want to compare
+to the user input string, for filtering.
+
+```html
+<input href="#" id="trigger" data-dropdown-trigger="#list">
+<ul id="list" data-dropdown data-dynamic>
+  <li><a href="#" data-id="{{id}}">{{text}}</a></li>
+<ul>
+```
+```js
+  const droplab = new DropLab();
+
+  const trigger = document.getElementById('trigger');
+  const list = document.getElementById('list');
+
+  droplab.init(trigger, list, [Filter], {
+    Filter: {
+      template: 'text',
+    },
+  });
+
+  droplab.addData('trigger', [{
+    id: 0,
+    text: 'Jacob',
+  }, {
+    id: 1,
+    text: 'Jeff',
+  }]);
+```
+
+Above, the input string will be compared against the `test` key of the passed data objects.
+
+Optionally you can set `filterFunction` to a function. This function will be used instead
+of `Filter`'s built in string search. `filterFunction` is passed 2 arguments, the first
+is one of the data objects, the second is the current input value.
diff --git a/doc/development/fe_guide/droplab/plugins/input_setter.md b/doc/development/fe_guide/droplab/plugins/input_setter.md
new file mode 100644
index 00000000000..a549603c20d
--- /dev/null
+++ b/doc/development/fe_guide/droplab/plugins/input_setter.md
@@ -0,0 +1,60 @@
+# InputSetter
+
+`InputSetter` is a plugin that allows for udating DOM out of the scope of droplab when a list item is clicked.
+
+## Usage
+
+Add the `InputSetter` object to the plugins array of a `DropLab.prototype.init` or `DropLab.prototype.addHook` call.
+
+* `InputSetter` requires a config value for `input` and `valueAttribute`.
+* `input` should be the DOM element that you want to manipulate.
+* `valueAttribute` should be a string that is the name of an attribute on your list items that is used to get the value
+to update the `input` element with.
+
+You can also set the `InputSetter` config to an array of objects, which will allow you to update multiple elements.
+
+
+```html
+<input id="input" value="">
+<div id="div" data-selected-id=""></div>
+
+<input href="#" id="trigger" data-dropdown-trigger="#list">
+<ul id="list" data-dropdown data-dynamic>
+  <li><a href="#" data-id="{{id}}">{{text}}</a></li>
+<ul>
+```
+```js
+  const droplab = new DropLab();
+
+  const trigger = document.getElementById('trigger');
+  const list = document.getElementById('list');
+
+  const input = document.getElementById('input');
+  const div = document.getElementById('div');
+
+  droplab.init(trigger, list, [InputSetter], {
+    InputSetter: [{
+      input: input,
+      valueAttribute: 'data-id',
+    } {
+      input: div,
+      valueAttribute: 'data-id',
+      inputAttribute: 'data-selected-id',
+    }],
+  });
+
+  droplab.addData('trigger', [{
+    id: 0,
+    text: 'Jacob',
+  }, {
+    id: 1,
+    text: 'Jeff',
+  }]);
+```
+
+Above, if the second list item was clicked, it would update the `#input` element
+to have a `value` of `1`, it would also update the `#div` element's `data-selected-id` to `1`.
+
+Optionally you can set `inputAttribute` to a string that is the name of an attribute on your `input` element that you want to update.
+If you do not provide an `inputAttribute`, `InputSetter` will update the `value` of the `input` element if it is an `INPUT` element,
+or the `textContent` of the `input` element if it is not an `INPUT` element.
diff --git a/doc/development/fe_guide/index.md b/doc/development/fe_guide/index.md
index f963bffde37..c7d4f2e9c23 100644
--- a/doc/development/fe_guide/index.md
+++ b/doc/development/fe_guide/index.md
@@ -90,3 +90,13 @@ Our accessibility standards and resources.
 [scss-lint]: https://github.com/brigade/scss-lint
 [install]: ../../install/installation.md#4-node
 [requirements]: ../../install/requirements.md#supported-web-browsers
+
+---
+
+## [DropLab](droplab/droplab.md)
+Our internal `DropLab` dropdown library.
+
+* [DropLab](droplab/droplab.md)
+* [Ajax plugin](droplab/plugins/ajax.md)
+* [Filter plugin](droplab/plugins/filter.md)
+* [InputSetter plugin](droplab/plugins/input_setter.md)
-- 
cgit v1.2.1


From 6440280285c456e7634413b1543ad3d22719a58b Mon Sep 17 00:00:00 2001
From: "Lin Jen-Shin (godfat)" <godfat@godfat.org>
Date: Wed, 19 Apr 2017 15:55:55 +0000
Subject: Remove node modules cache because we already use artifacts

---
 .gitlab-ci.yml | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index d84725b202a..e57362bd3a5 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -278,7 +278,6 @@ rake karma:
   cache:
     paths:
       - vendor/ruby
-      - node_modules
   stage: test
   <<: *use-db
   <<: *dedicated-runner
@@ -377,9 +376,6 @@ coverage:
 
 lint:javascript:
   <<: *dedicated-runner
-  cache:
-    paths:
-      - node_modules/
   stage: test
   before_script: []
   script:
@@ -387,9 +383,6 @@ lint:javascript:
 
 lint:javascript:report:
   <<: *dedicated-runner
-  cache:
-    paths:
-      - node_modules/
   stage: post-test
   before_script: []
   script:
-- 
cgit v1.2.1