Merge branch 'master' into ide-temp-file-folder-fixes

9 files changed, 398 insertions, 380 deletions

diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index 5324d5dc797..0d64efcbf68 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -1,52 +1,52 @@
 <script>
-  import ciIcon from './ci_icon.vue';
-  import tooltip from '../directives/tooltip';
-  /**
-   * Renders CI Badge link with CI icon and status text based on
-   * API response shared between all places where it is used.
-   *
-   * Receives status object containing:
-   * status: {
-   *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
-   *   group:"running" // used for CSS class
-   *   icon: "icon_status_running" // used to render the icon
-   *   label:"running" // used for potential tooltip
-   *   text:"running" // text rendered
-   * }
-   *
-   * Used in:
-   * - Pipelines table - first column
-   * - Jobs table - first column
-   * - Pipeline show view - header
-   * - Job show view - header
-   * - MR widget
-   */
+import CiIcon from './ci_icon.vue';
+import tooltip from '../directives/tooltip';
+/**
+ * Renders CI Badge link with CI icon and status text based on
+ * API response shared between all places where it is used.
+ *
+ * Receives status object containing:
+ * status: {
+ *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+ *   group:"running" // used for CSS class
+ *   icon: "icon_status_running" // used to render the icon
+ *   label:"running" // used for potential tooltip
+ *   text:"running" // text rendered
+ * }
+ *
+ * Used in:
+ * - Pipelines table - first column
+ * - Jobs table - first column
+ * - Pipeline show view - header
+ * - Job show view - header
+ * - MR widget
+ */
 
-  export default {
-    components: {
-      ciIcon,
+export default {
+  components: {
+    CiIcon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    status: {
+      type: Object,
+      required: true,
     },
-    directives: {
-      tooltip,
+    showText: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    props: {
-      status: {
-        type: Object,
-        required: true,
-      },
-      showText: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+  },
+  computed: {
+    cssClass() {
+      const className = this.status.group;
+      return className ? `ci-status ci-${className}` : 'ci-status';
     },
-    computed: {
-      cssClass() {
-        const className = this.status.group;
-        return className ? `ci-status ci-${className}` : 'ci-status';
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <a
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
index 8fea746f4de..fcab8f571dd 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -1,45 +1,44 @@
 <script>
-  import icon from '../../vue_shared/components/icon.vue';
+import Icon from '../../vue_shared/components/icon.vue';
 
-  /**
-   * Renders CI icon based on API response shared between all places where it is used.
-   *
-   * Receives status object containing:
-   * status: {
-   *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
-   *   group:"running" // used for CSS class
-   *   icon: "icon_status_running" // used to render the icon
-   *   label:"running" // used for potential tooltip
-   *   text:"running" // text rendered
-   * }
-   *
-   * Used in:
-   * - Pipelines table Badge
-   * - Pipelines table mini graph
-   * - Pipeline graph
-   * - Pipeline show view badge
-   * - Jobs table
-   * - Jobs show view header
-   * - Jobs show view sidebar
-   */
-  export default {
-    components: {
-      icon,
+/**
+ * Renders CI icon based on API response shared between all places where it is used.
+ *
+ * Receives status object containing:
+ * status: {
+ *   details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
+ *   group:"running" // used for CSS class
+ *   icon: "icon_status_running" // used to render the icon
+ *   label:"running" // used for potential tooltip
+ *   text:"running" // text rendered
+ * }
+ *
+ * Used in:
+ * - Pipelines table Badge
+ * - Pipelines table mini graph
+ * - Pipeline graph
+ * - Pipeline show view badge
+ * - Jobs table
+ * - Jobs show view header
+ * - Jobs show view sidebar
+ */
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    status: {
+      type: Object,
+      required: true,
     },
-    props: {
-      status: {
-        type: Object,
-        required: true,
-      },
+  },
+  computed: {
+    cssClass() {
+      const status = this.status.group;
+      return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
     },
-
-    computed: {
-      cssClass() {
-        const status = this.status.group;
-        return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status}`;
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <span :class="cssClass">
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index cab126a7eca..cb2cc3901ad 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -1,40 +1,50 @@
 <script>
-  /**
-   * Falls back to the code used in `copy_to_clipboard.js`
-   */
-  import tooltip from '../directives/tooltip';
+/**
+ * Falls back to the code used in `copy_to_clipboard.js`
+ *
+ * Renders a button with a clipboard icon that copies the content of `data-clipboard-text`
+ * when clicked.
+ *
+ * @example
+ * <clipboard-button
+ *   title="Copy to clipbard"
+ *   text="Content to be copied"
+ *    css-class="btn-transparent"
+ * />
+ */
+import tooltip from '../directives/tooltip';
 
-  export default {
-    name: 'ClipboardButton',
-    directives: {
-      tooltip,
+export default {
+  name: 'ClipboardButton',
+  directives: {
+    tooltip,
+  },
+  props: {
+    text: {
+      type: String,
+      required: true,
     },
-    props: {
-      text: {
-        type: String,
-        required: true,
-      },
-      title: {
-        type: String,
-        required: true,
-      },
-      tooltipPlacement: {
-        type: String,
-        required: false,
-        default: 'top',
-      },
-      tooltipContainer: {
-        type: [String, Boolean],
-        required: false,
-        default: false,
-      },
-      cssClass: {
-        type: String,
-        required: false,
-        default: 'btn-default',
-      },
+    title: {
+      type: String,
+      required: true,
     },
-  };
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+    tooltipContainer: {
+      type: [String, Boolean],
+      required: false,
+      default: false,
+    },
+    cssClass: {
+      type: String,
+      required: false,
+      default: 'btn-default',
+    },
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index b8875d04488..8f250a6c989 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -1,119 +1,111 @@
 <script>
-  import commitIconSvg from 'icons/_icon_commit.svg';
-  import userAvatarLink from './user_avatar/user_avatar_link.vue';
-  import tooltip from '../directives/tooltip';
-  import icon from '../../vue_shared/components/icon.vue';
+import UserAvatarLink from './user_avatar/user_avatar_link.vue';
+import tooltip from '../directives/tooltip';
+import Icon from '../../vue_shared/components/icon.vue';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    UserAvatarLink,
+    Icon,
+  },
+  props: {
+    /**
+     * Indicates the existance of a tag.
+     * Used to render the correct icon, if true will render `fa-tag` icon,
+     * if false will render a svg sprite fork icon
+     */
+    tag: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    components: {
-      userAvatarLink,
-      icon,
+    /**
+     * If provided is used to render the branch name and url.
+     * Should contain the following properties:
+     * name
+     * ref_url
+     */
+    commitRef: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    /**
+     * Used to link to the commit sha.
+     */
+    commitUrl: {
+      type: String,
+      required: false,
+      default: '',
     },
-    props: {
-      /**
-       * Indicates the existance of a tag.
-       * Used to render the correct icon, if true will render `fa-tag` icon,
-       * if false will render a svg sprite fork icon
-       */
-      tag: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      /**
-       * If provided is used to render the branch name and url.
-       * Should contain the following properties:
-       * name
-       * ref_url
-       */
-      commitRef: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
-      /**
-       * Used to link to the commit sha.
-       */
-      commitUrl: {
-        type: String,
-        required: false,
-        default: '',
-      },
 
-      /**
-       * Used to show the commit short sha that links to the commit url.
-       */
-      shortSha: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      /**
-       * If provided shows the commit tile.
-       */
-      title: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      /**
-       * If provided renders information about the author of the commit.
-       * When provided should include:
-       * `avatar_url` to render the avatar icon
-       * `web_url` to link to user profile
-       * `username` to render alt and title tags
-       */
-      author: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
-      showBranch: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+    /**
+     * Used to show the commit short sha that links to the commit url.
+     */
+    shortSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * If provided shows the commit tile.
+     */
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * If provided renders information about the author of the commit.
+     * When provided should include:
+     * `avatar_url` to render the avatar icon
+     * `web_url` to link to user profile
+     * `username` to render alt and title tags
+     */
+    author: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    showBranch: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    computed: {
-      /**
-       * Used to verify if all the properties needed to render the commit
-       * ref section were provided.
-       *
-       * @returns {Boolean}
-       */
-      hasCommitRef() {
-        return this.commitRef && this.commitRef.name && this.commitRef.ref_url;
-      },
-      /**
-       * Used to verify if all the properties needed to render the commit
-       * author section were provided.
-       *
-       * @returns {Boolean}
-       */
-      hasAuthor() {
-        return this.author &&
-          this.author.avatar_url &&
-          this.author.path &&
-          this.author.username;
-      },
-      /**
-       * If information about the author is provided will return a string
-       * to be rendered as the alt attribute of the img tag.
-       *
-       * @returns {String}
-       */
-      userImageAltDescription() {
-        return this.author &&
-          this.author.username ? `${this.author.username}'s avatar` : null;
-      },
+  },
+  computed: {
+    /**
+     * Used to verify if all the properties needed to render the commit
+     * ref section were provided.
+     *
+     * @returns {Boolean}
+     */
+    hasCommitRef() {
+      return this.commitRef && this.commitRef.name && this.commitRef.ref_url;
     },
-    created() {
-      this.commitIconSvg = commitIconSvg;
+    /**
+     * Used to verify if all the properties needed to render the commit
+     * author section were provided.
+     *
+     * @returns {Boolean}
+     */
+    hasAuthor() {
+      return this.author && this.author.avatar_url && this.author.path && this.author.username;
     },
-  };
+    /**
+     * If information about the author is provided will return a string
+     * to be rendered as the alt attribute of the img tag.
+     *
+     * @returns {String}
+     */
+    userImageAltDescription() {
+      return this.author && this.author.username ? `${this.author.username}'s avatar` : null;
+    },
+  },
+};
 </script>
 <template>
   <div class="branch-commit">
@@ -141,11 +133,10 @@
         {{ commitRef.name }}
       </a>
     </template>
-    <div
-      v-html="commitIconSvg"
+    <icon
+      name="commit"
       class="commit-icon js-commit-icon"
-    >
-    </div>
+    />
 
     <a
       class="commit-sha"
diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue
index c943c8d98a4..9295be3e2b2 100644
--- a/app/assets/javascripts/vue_shared/components/expand_button.vue
+++ b/app/assets/javascripts/vue_shared/components/expand_button.vue
@@ -1,33 +1,33 @@
 <script>
-  import { __ } from '~/locale';
-  /**
-   * Port of detail_behavior expand button.
-   *
-   * @example
-   * <expand-button>
-   *   <template slot="expanded">
-   *      Text goes here.
-   *    </template>
-   * </expand-button>
-   */
-  export default {
-    name: 'ExpandButton',
-    data() {
-      return {
-        isCollapsed: true,
-      };
+import { __ } from '~/locale';
+/**
+ * Port of detail_behavior expand button.
+ *
+ * @example
+ * <expand-button>
+ *   <template slot="expanded">
+ *      Text goes here.
+ *    </template>
+ * </expand-button>
+ */
+export default {
+  name: 'ExpandButton',
+  data() {
+    return {
+      isCollapsed: true,
+    };
+  },
+  computed: {
+    ariaLabel() {
+      return __('Click to expand text');
     },
-    computed: {
-      ariaLabel() {
-        return __('Click to expand text');
-      },
+  },
+  methods: {
+    onClick() {
+      this.isCollapsed = !this.isCollapsed;
     },
-    methods: {
-      onClick() {
-        this.isCollapsed = !this.isCollapsed;
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <span>
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index a0cd0cbd200..088187ed348 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -1,78 +1,78 @@
 <script>
-  import ciIconBadge from './ci_badge_link.vue';
-  import loadingIcon from './loading_icon.vue';
-  import timeagoTooltip from './time_ago_tooltip.vue';
-  import tooltip from '../directives/tooltip';
-  import userAvatarImage from './user_avatar/user_avatar_image.vue';
+import CiIconBadge from './ci_badge_link.vue';
+import LoadingIcon from './loading_icon.vue';
+import TimeagoTooltip from './time_ago_tooltip.vue';
+import tooltip from '../directives/tooltip';
+import UserAvatarImage from './user_avatar/user_avatar_image.vue';
 
-  /**
-   * Renders header component for job and pipeline page based on UI mockups
-   *
-   * Used in:
-   * - job show page
-   * - pipeline show page
-   */
-  export default {
-    components: {
-      ciIconBadge,
-      loadingIcon,
-      timeagoTooltip,
-      userAvatarImage,
+/**
+ * Renders header component for job and pipeline page based on UI mockups
+ *
+ * Used in:
+ * - job show page
+ * - pipeline show page
+ */
+export default {
+  components: {
+    CiIconBadge,
+    LoadingIcon,
+    TimeagoTooltip,
+    UserAvatarImage,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    status: {
+      type: Object,
+      required: true,
     },
-    directives: {
-      tooltip,
+    itemName: {
+      type: String,
+      required: true,
     },
-    props: {
-      status: {
-        type: Object,
-        required: true,
-      },
-      itemName: {
-        type: String,
-        required: true,
-      },
-      itemId: {
-        type: Number,
-        required: true,
-      },
-      time: {
-        type: String,
-        required: true,
-      },
-      user: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
-      actions: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-      hasSidebarButton: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      shouldRenderTriggeredLabel: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+    itemId: {
+      type: Number,
+      required: true,
     },
+    time: {
+      type: String,
+      required: true,
+    },
+    user: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    hasSidebarButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    shouldRenderTriggeredLabel: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
 
-    computed: {
-      userAvatarAltText() {
-        return `${this.user.name}'s avatar`;
-      },
+  computed: {
+    userAvatarAltText() {
+      return `${this.user.name}'s avatar`;
     },
+  },
 
-    methods: {
-      onClickAction(action) {
-        this.$emit('actionClicked', action);
-      },
+  methods: {
+    onClickAction(action) {
+      this.$emit('actionClicked', action);
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index 6a2e05000e1..1a0df49bc29 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -1,76 +1,75 @@
 <script>
+/* This is a re-usable vue component for rendering a svg sprite
+  icon
 
-  /* This is a re-usable vue component for rendering a svg sprite
-    icon
+  Sample configuration:
 
-    Sample configuration:
+  <icon
+    name="retry"
+    :size="32"
+    css-classes="top"
+  />
 
-    <icon
-      name="retry"
-      :size="32"
-      css-classes="top"
-    />
+*/
+// only allow classes in images.scss e.g. s12
+const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
 
-  */
-  // only allow classes in images.scss e.g. s12
-  const validSizes = [8, 12, 16, 18, 24, 32, 48, 72];
-
-  export default {
-    props: {
-      name: {
-        type: String,
-        required: true,
-      },
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
 
-      size: {
-        type: Number,
-        required: false,
-        default: 16,
-        validator(value) {
-          return validSizes.includes(value);
-        },
+    size: {
+      type: Number,
+      required: false,
+      default: 16,
+      validator(value) {
+        return validSizes.includes(value);
       },
+    },
 
-      cssClasses: {
-        type: String,
-        required: false,
-        default: '',
-      },
+    cssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
 
-      width: {
-        type: Number,
-        required: false,
-        default: null,
-      },
+    width: {
+      type: Number,
+      required: false,
+      default: null,
+    },
 
-      height: {
-        type: Number,
-        required: false,
-        default: null,
-      },
+    height: {
+      type: Number,
+      required: false,
+      default: null,
+    },
 
-      y: {
-        type: Number,
-        required: false,
-        default: null,
-      },
+    y: {
+      type: Number,
+      required: false,
+      default: null,
+    },
 
-      x: {
-        type: Number,
-        required: false,
-        default: null,
-      },
+    x: {
+      type: Number,
+      required: false,
+      default: null,
     },
+  },
 
-    computed: {
-      spriteHref() {
-        return `${gon.sprite_icons}#${this.name}`;
-      },
-      iconSizeClass() {
-        return this.size ? `s${this.size}` : '';
-      },
+  computed: {
+    spriteHref() {
+      return `${gon.sprite_icons}#${this.name}`;
+    },
+    iconSizeClass() {
+      return this.size ? `s${this.size}` : '';
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -79,7 +78,8 @@
     :width="width"
     :height="height"
     :x="x"
-    :y="y">
+    :y="y"
+  >
     <use v-bind="{ 'xlink:href':spriteHref }" />
   </svg>
 </template>
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 5ede53d8d01..70b46a9c2bb 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
@@ -1,4 +1,5 @@
 <script>
+import $ from 'jquery';
 import { __ } from '~/locale';
 import LabelsSelect from '~/labels_select';
 import LoadingIcon from '../../loading_icon.vue';
@@ -98,11 +99,18 @@ export default {
     this.labelsDropdown = new LabelsSelect(this.$refs.dropdownButton, {
       handleClick: this.handleClick,
     });
+    $(this.$refs.dropdown).on('hidden.gl.dropdown', this.handleDropdownHidden);
   },
   methods: {
     handleClick(label) {
       this.$emit('onLabelClick', label);
     },
+    handleCollapsedValueClick() {
+      this.$emit('toggleCollapse');
+    },
+    handleDropdownHidden() {
+      this.$emit('onDropdownClose');
+    },
   },
 };
 </script>
@@ -112,6 +120,7 @@ export default {
     <dropdown-value-collapsed
       v-if="showCreate"
       :labels="context.labels"
+      @onValueClick="handleCollapsedValueClick"
     />
     <dropdown-title
       :can-edit="canEdit"
@@ -133,7 +142,10 @@ export default {
         :name="hiddenInputName"
         :label="label"
       />
-      <div class="dropdown">
+      <div
+        class="dropdown"
+        ref="dropdown"
+      >
         <dropdown-button
           :ability-name="abilityName"
           :field-name="hiddenInputName"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
index 5cf728fe050..68fa2ab8d01 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
@@ -26,6 +26,11 @@ export default {
       return labelsString;
     },
   },
+  methods: {
+    handleClick() {
+      this.$emit('onValueClick');
+    },
+  },
 };
 </script>
 
@@ -36,6 +41,7 @@ export default {
     data-placement="left"
     data-container="body"
     :title="labelsList"
+    @click="handleClick"
   >
     <i
       aria-hidden="true"