[frontend] backport of scoped labels

Scoped labels in EE require additional changes in CE code.

11 files changed, 257 insertions, 26 deletions

diff --git a/app/assets/javascripts/boards/models/issue.js b/app/assets/javascripts/boards/models/issue.js
index dd92d3c8552..2edb6723ada 100644
--- a/app/assets/javascripts/boards/models/issue.js
+++ b/app/assets/javascripts/boards/models/issue.js
@@ -119,7 +119,17 @@ class ListIssue {
     }
 
     const projectPath = this.project ? this.project.path : '';
-    return Vue.http.patch(`${this.path}.json`, data);
+    return Vue.http.patch(`${this.path}.json`, data).then(({ body = {} } = {}) => {
+      /**
+       * Since post implementation of Scoped labels, server can reject
+       * same key-ed labels. To keep the UI and server Model consistent,
+       * we're just assigning labels that server echo's back to us when we
+       * PATCH the said object.
+       */
+      if (body) {
+        this.labels = body.labels;
+      }
+    });
   }
 }
 
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index cca4927c115..b021dcc1853 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -11,6 +11,7 @@ import CreateLabelDropdown from './create_label';
 import flash from './flash';
 import ModalStore from './boards/stores/modal_store';
 import boardsStore from './boards/stores/boards_store';
+import { isEE } from '~/lib/utils/common_utils';
 
 export default class LabelsSelect {
   constructor(els, options = {}) {
@@ -86,8 +87,9 @@ export default class LabelsSelect {
           return this.value;
         })
         .get();
+      const scopedLabels = $dropdown.data('scopedLabels');
+      const scopedLabelsDocumentationLink = $dropdown.data('scopedLabelsDocumentationLink');
       const { handleClick } = options;
-
       $sidebarLabelTooltip.tooltip();
 
       if ($dropdown.closest('.dropdown').find('.dropdown-new-label').length) {
@@ -132,8 +134,48 @@ export default class LabelsSelect {
               template = LabelsSelect.getLabelTemplate({
                 labels: data.labels,
                 issueUpdateURL,
+                enableScopedLabels: scopedLabels,
+                scopedLabelsDocumentationLink,
               });
               labelCount = data.labels.length;
+
+              // EE Specific
+              if (isEE) {
+                /**
+                 * For Scoped labels, the last label selected with the
+                 * same key will be applied to the current issueable.
+                 *
+                 * If these are the labels - priority::1, priority::2; and if
+                 * we apply them in the same order, only priority::2 will stick
+                 * with the issuable.
+                 *
+                 * In the current dropdown implementation, we keep track of all
+                 * the labels selected via a hidden DOM element. Since a User
+                 * can select priority::1 and priority::2 at the same time, the
+                 * DOM will have 2 hidden input and the dropdown will show both
+                 * the items selected but in reality server only applied
+                 * priority::2.
+                 *
+                 * We find all the labels then find all the labels server accepted
+                 * and then remove the excess ones.
+                 */
+                const toRemoveIds = Array.from(
+                  $form.find("input[type='hidden'][name='" + fieldName + "']"),
+                )
+                  .map(el => el.value)
+                  .map(Number);
+
+                data.labels.forEach(label => {
+                  const index = toRemoveIds.indexOf(label.id);
+                  toRemoveIds.splice(index, 1);
+                });
+
+                toRemoveIds.forEach(id => {
+                  $form
+                    .find("input[type='hidden'][name='" + fieldName + "'][value='" + id + "']")
+                    .remove();
+                });
+              }
             } else {
               template = '<span class="no-value">None</span>';
             }
@@ -358,6 +400,7 @@ export default class LabelsSelect {
             } else {
               if (!$dropdown.hasClass('js-filter-bulk-update')) {
                 saveLabelData();
+                $dropdown.data('glDropdown').clearMenu();
               }
             }
           }
@@ -471,19 +514,61 @@ export default class LabelsSelect {
     // so best approach is to use traditional way of
     // concatenation
     // see: http://2ality.com/2016/05/template-literal-whitespace.html#joining-arrays
-    const tpl = _.template(
+
+    const labelTemplate = _.template(
       [
-        '<% _.each(labels, function(label){ %>',
         '<a href="<%- issueUpdateURL.slice(0, issueUpdateURL.lastIndexOf("/")) %>?label_name[]=<%- encodeURIComponent(label.title) %>">',
-        '<span class="badge label has-tooltip color-label" title="<%- label.description %>" style="background-color: <%- label.color %>; color: <%- label.text_color %>;">',
+        '<span class="badge label has-tooltip color-label" <%= linkAttrs %> title="<%= tooltipTitleTemplate({ label, isScopedLabel, enableScopedLabels }) %>" style="background-color: <%- label.color %>; color: <%- label.text_color %>;">',
         '<%- label.title %>',
         '</span>',
         '</a>',
+      ].join(''),
+    );
+
+    const infoIconTemplate = _.template(
+      [
+        '<a href="<%= scopedLabelsDocumentationLink %>" class="label scoped-label" target="_blank" rel="noopener">',
+        '<i class="fa fa-question-circle" style="background-color: <%- label.color %>; color: <%- label.text_color %>;"></i>',
+        '</a>',
+      ].join(''),
+    );
+
+    const tooltipTitleTemplate = _.template(
+      [
+        '<% if (isScopedLabel(label) && enableScopedLabels) { %>',
+        "<span class='font-weight-bold scoped-label-tooltip-title'>Scoped label</span>",
+        '<br />',
+        '<%- label.description %>',
+        '<% } else { %>',
+        '<%- label.description %>',
+        '<% } %>',
+      ].join(''),
+    );
+
+    const isScopedLabel = label => label.title.indexOf('::') !== -1;
+
+    const tpl = _.template(
+      [
+        '<% _.each(labels, function(label){ %>',
+        '<% if (isScopedLabel(label) && enableScopedLabels) { %>',
+        '<span class="d-inline-block position-relative scoped-label-wrapper">',
+        '<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, tooltipTitleTemplate, linkAttrs: \'data-html="true"\' }) %>',
+        '<%= infoIconTemplate({ label,scopedLabelsDocumentationLink }) %>',
+        '</span>',
+        '<% } else { %>',
+        '<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, tooltipTitleTemplate, linkAttrs: "" }) %>',
+        '<% } %>',
         '<% }); %>',
       ].join(''),
     );
 
-    return tpl(tplData);
+    return tpl({
+      ...tplData,
+      labelTemplate,
+      infoIconTemplate,
+      tooltipTitleTemplate,
+      isScopedLabel,
+    });
   }
 
   bindEvents() {
diff --git a/app/assets/javascripts/pages/groups/labels/edit/index.js b/app/assets/javascripts/pages/groups/labels/edit/index.js
index fa81ad914ba..83d6ac9fd14 100644
--- a/app/assets/javascripts/pages/groups/labels/edit/index.js
+++ b/app/assets/javascripts/pages/groups/labels/edit/index.js
@@ -1,3 +1,3 @@
-import Labels from '~/labels';
+import Labels from 'ee_else_ce/labels';
 
 document.addEventListener('DOMContentLoaded', () => new Labels());
diff --git a/app/assets/javascripts/pages/groups/labels/new/index.js b/app/assets/javascripts/pages/groups/labels/new/index.js
index fa81ad914ba..83d6ac9fd14 100644
--- a/app/assets/javascripts/pages/groups/labels/new/index.js
+++ b/app/assets/javascripts/pages/groups/labels/new/index.js
@@ -1,3 +1,3 @@
-import Labels from '~/labels';
+import Labels from 'ee_else_ce/labels';
 
 document.addEventListener('DOMContentLoaded', () => new Labels());
diff --git a/app/assets/javascripts/pages/projects/labels/edit/index.js b/app/assets/javascripts/pages/projects/labels/edit/index.js
index fa81ad914ba..83d6ac9fd14 100644
--- a/app/assets/javascripts/pages/projects/labels/edit/index.js
+++ b/app/assets/javascripts/pages/projects/labels/edit/index.js
@@ -1,3 +1,3 @@
-import Labels from '~/labels';
+import Labels from 'ee_else_ce/labels';
 
 document.addEventListener('DOMContentLoaded', () => new Labels());
diff --git a/app/assets/javascripts/pages/projects/labels/new/index.js b/app/assets/javascripts/pages/projects/labels/new/index.js
index fa81ad914ba..83d6ac9fd14 100644
--- a/app/assets/javascripts/pages/projects/labels/new/index.js
+++ b/app/assets/javascripts/pages/projects/labels/new/index.js
@@ -1,3 +1,3 @@
-import Labels from '~/labels';
+import Labels from 'ee_else_ce/labels';
 
 document.addEventListener('DOMContentLoaded', () => new Labels());
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
index f66e81b1e08..9c258c4651f 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
@@ -75,6 +75,16 @@ export default {
       required: false,
       default: false,
     },
+    enableScopedLabels: {
+      type: Boolean,
+      require: false,
+      default: false,
+    },
+    scopedLabelsDocumentationLink: {
+      type: String,
+      require: false,
+      default: '#',
+    },
   },
   computed: {
     hiddenInputName() {
@@ -123,7 +133,12 @@ export default {
       @onValueClick="handleCollapsedValueClick"
     />
     <dropdown-title :can-edit="canEdit" />
-    <dropdown-value :labels="context.labels" :label-filter-base-path="labelFilterBasePath">
+    <dropdown-value
+      :labels="context.labels"
+      :label-filter-base-path="labelFilterBasePath"
+      :scoped-labels-documentation-link="scopedLabelsDocumentationLink"
+      :enable-scoped-labels="enableScopedLabels"
+    >
       <slot></slot>
     </dropdown-value>
     <div v-if="canEdit" class="selectbox js-selectbox" style="display: none;">
@@ -142,6 +157,8 @@ export default {
           :namespace="namespace"
           :labels="context.labels"
           :show-extra-options="!showCreate"
+          :scoped-labels-documentation-link="scopedLabelsDocumentationLink"
+          :enable-scoped-labels="enableScopedLabels"
         />
         <div
           class="dropdown-menu dropdown-select dropdown-menu-paging
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
index 498b507d11d..1eed8907bb7 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
@@ -31,6 +31,16 @@ export default {
       type: Boolean,
       required: true,
     },
+    enableScopedLabels: {
+      type: Boolean,
+      require: false,
+      default: false,
+    },
+    scopedLabelsDocumentationLink: {
+      type: String,
+      require: false,
+      default: '#',
+    },
   },
   computed: {
     dropdownToggleText() {
@@ -61,6 +71,8 @@ export default {
     :data-labels="labelsPath"
     :data-namespace-path="namespace"
     :data-show-any="showExtraOptions"
+    :data-scoped-labels="enableScopedLabels"
+    :data-scoped-labels-documentation-link="scopedLabelsDocumentationLink"
     type="button"
     class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal"
     data-toggle="dropdown"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
index 6faf3fafad1..ddc488adbcb 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
@@ -1,9 +1,11 @@
 <script>
-import tooltip from '~/vue_shared/directives/tooltip';
+import DropdownValueScopedLabel from './dropdown_value_scoped_label.vue';
+import DropdownValueRegularLabel from './dropdown_value_regular_label.vue';
 
 export default {
-  directives: {
-    tooltip,
+  components: {
+    DropdownValueScopedLabel,
+    DropdownValueRegularLabel,
   },
   props: {
     labels: {
@@ -14,6 +16,16 @@ export default {
       type: String,
       required: true,
     },
+    enableScopedLabels: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    scopedLabelsDocumentationLink: {
+      type: String,
+      required: false,
+      default: '#',
+    },
   },
   computed: {
     isEmpty() {
@@ -30,6 +42,12 @@ export default {
         backgroundColor: label.color,
       };
     },
+    scopedLabelsDescription({ description = '' }) {
+      return `<span class="font-weight-bold scoped-label-tooltip-title">Scoped label</span><br />${description}`;
+    },
+    showScopedLabels({ title = '' }) {
+      return this.enableScopedLabels && title.indexOf('::') !== -1;
+    },
   },
 };
 </script>
@@ -44,17 +62,24 @@ export default {
     <span v-if="isEmpty" class="text-secondary">
       <slot>{{ __('None') }}</slot>
     </span>
-    <a v-for="label in labels" v-else :key="label.id" :href="labelFilterUrl(label)">
-      <span
-        v-tooltip
-        :style="labelStyle(label)"
-        :title="label.description"
-        class="badge color-label"
-        data-placement="bottom"
-        data-container="body"
-      >
-        {{ label.title }}
-      </span>
-    </a>
+
+    <template v-for="label in labels" v-else>
+      <dropdown-value-scoped-label
+        v-if="showScopedLabels(label)"
+        :key="label.id"
+        :label="label"
+        :label-filter-url="labelFilterUrl(label)"
+        :label-style="labelStyle(label)"
+        :scoped-labels-documentation-link="scopedLabelsDocumentationLink"
+      />
+
+      <dropdown-value-regular-label
+        v-else
+        :key="label.id"
+        :label="label"
+        :label-filter-url="labelFilterUrl(label)"
+        :label-style="labelStyle(label)"
+      />
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_regular_label.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_regular_label.vue
new file mode 100644
index 00000000000..282b181f11e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_regular_label.vue
@@ -0,0 +1,35 @@
+<script>
+import { GlLink, GlTooltip } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlTooltip,
+    GlLink,
+  },
+  props: {
+    label: {
+      type: Object,
+      required: true,
+    },
+    labelStyle: {
+      type: Object,
+      required: true,
+    },
+    labelFilterUrl: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <a ref="regularLabelRef" :href="labelFilterUrl">
+    <span :style="labelStyle" class="badge color-label">
+      {{ label.title }}
+    </span>
+    <gl-tooltip :target="() => $refs.regularLabelRef" placement="top" boundary="viewport">
+      {{ label.description }}
+    </gl-tooltip>
+  </a>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_scoped_label.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_scoped_label.vue
new file mode 100644
index 00000000000..ad5a86de166
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_scoped_label.vue
@@ -0,0 +1,47 @@
+<script>
+import { GlLink, GlTooltip } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlTooltip,
+    GlLink,
+  },
+  props: {
+    label: {
+      type: Object,
+      required: true,
+    },
+    labelStyle: {
+      type: Object,
+      required: true,
+    },
+    scopedLabelsDocumentationLink: {
+      type: String,
+      required: true,
+    },
+    labelFilterUrl: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <span class="d-inline-block position-relative scoped-label-wrapper">
+    <a :href="labelFilterUrl">
+      <span :ref="`labelTitleRef`" :style="labelStyle" class="badge color-label label">
+        {{ label.title }}
+      </span>
+      <gl-tooltip :target="() => $refs.labelTitleRef" placement="top" boundary="viewport">
+        <span class="font-weight-bold scoped-label-tooltip-title">{{ __('Scoped label') }}</span
+        ><br />
+        {{ label.description }}
+      </gl-tooltip>
+    </a>
+
+    <gl-link :href="scopedLabelsDocumentationLink" target="_blank" class="label scoped-label"
+      ><i class="fa fa-question-circle" :style="labelStyle"></i
+    ></gl-link>
+  </span>
+</template>