Merge branch 'ce-to-ee-2018-08-08' into 'master'

CE upstream - 2018-08-08 07:57 UTC

See merge request gitlab-org/gitlab-ee!6833

app/assets/javascripts/boards/components/board_sidebar.js

@@ -53,6 +53,16 @@ gl.issueBoards.BoardSidebar = Vue.extend({
     canRemove() {
       return !this.list.preset;
     },
+    hasLabels() {
+      return this.issue.labels && this.issue.labels.length;
+    },
+    labelDropdownTitle() {
+      return this.hasLabels ?
+        `${this.issue.labels[0].title} ${this.issue.labels.length - 1}+ more` : 'Label';
+    },
+    selectedLabels() {
+      return this.hasLabels ? this.issue.labels.map(l => l.title).join(',') : '';
+    }
   },
   watch: {
     detail: {

app/assets/javascripts/clusters/clusters_bundle.js

@@ -6,7 +6,7 @@ import Poll from '../lib/utils/poll';
 import initSettingsPanels from '../settings_panels';
 import eventHub from './event_hub';
 import {
-  APPLICATION_INSTALLED,
+  APPLICATION_STATUS,
   REQUEST_LOADING,
   REQUEST_SUCCESS,
   REQUEST_FAILURE,
@@ -177,8 +177,8 @@ export default class Clusters {
 
   checkForNewInstalls(prevApplicationMap, newApplicationMap) {
     const appTitles = Object.keys(newApplicationMap)
-      .filter(appId => newApplicationMap[appId].status === APPLICATION_INSTALLED &&
-        prevApplicationMap[appId].status !== APPLICATION_INSTALLED &&
+      .filter(appId => newApplicationMap[appId].status === APPLICATION_STATUS.INSTALLED &&
+        prevApplicationMap[appId].status !== APPLICATION_STATUS.INSTALLED &&
         prevApplicationMap[appId].status !== null)
       .map(appId => newApplicationMap[appId].title);
 

app/assets/javascripts/clusters/components/application_row.vue

@@ -4,12 +4,7 @@
   import eventHub from '../event_hub';
   import loadingButton from '../../vue_shared/components/loading_button.vue';
   import {
-    APPLICATION_NOT_INSTALLABLE,
-    APPLICATION_SCHEDULED,
-    APPLICATION_INSTALLABLE,
-    APPLICATION_INSTALLING,
-    APPLICATION_INSTALLED,
-    APPLICATION_ERROR,
+    APPLICATION_STATUS,
     REQUEST_LOADING,
     REQUEST_SUCCESS,
     REQUEST_FAILURE,
@@ -59,49 +54,57 @@
       },
     },
     computed: {
+      isUnknownStatus() {
+        return !this.isKnownStatus && this.status !== null;
+      },
+      isKnownStatus() {
+        return Object.values(APPLICATION_STATUS).includes(this.status);
+      },
       rowJsClass() {
         return `js-cluster-application-row-${this.id}`;
       },
       installButtonLoading() {
         return !this.status ||
-          this.status === APPLICATION_SCHEDULED ||
-          this.status === APPLICATION_INSTALLING ||
+          this.status === APPLICATION_STATUS.SCHEDULED ||
+          this.status === APPLICATION_STATUS.INSTALLING ||
           this.requestStatus === REQUEST_LOADING;
       },
       installButtonDisabled() {
-        // Avoid the potential for the real-time data to say APPLICATION_INSTALLABLE but
+        // Avoid the potential for the real-time data to say APPLICATION_STATUS.INSTALLABLE but
         // we already made a request to install and are just waiting for the real-time
         // to sync up.
-        return (this.status !== APPLICATION_INSTALLABLE
-          && this.status !== APPLICATION_ERROR) ||
+        return ((this.status !== APPLICATION_STATUS.INSTALLABLE
+          && this.status !== APPLICATION_STATUS.ERROR) ||
           this.requestStatus === REQUEST_LOADING ||
-          this.requestStatus === REQUEST_SUCCESS;
+          this.requestStatus === REQUEST_SUCCESS) && this.isKnownStatus;
       },
       installButtonLabel() {
         let label;
         if (
-          this.status === APPLICATION_NOT_INSTALLABLE ||
-          this.status === APPLICATION_INSTALLABLE ||
-          this.status === APPLICATION_ERROR
+          this.status === APPLICATION_STATUS.NOT_INSTALLABLE ||
+          this.status === APPLICATION_STATUS.INSTALLABLE ||
+          this.status === APPLICATION_STATUS.ERROR ||
+          this.isUnknownStatus
         ) {
           label = s__('ClusterIntegration|Install');
-        } else if (this.status === APPLICATION_SCHEDULED ||
-          this.status === APPLICATION_INSTALLING) {
+        } else if (this.status === APPLICATION_STATUS.SCHEDULED ||
+          this.status === APPLICATION_STATUS.INSTALLING) {
           label = s__('ClusterIntegration|Installing');
-        } else if (this.status === APPLICATION_INSTALLED) {
+        } else if (this.status === APPLICATION_STATUS.INSTALLED ||
+          this.status === APPLICATION_STATUS.UPDATED) {
           label = s__('ClusterIntegration|Installed');
         }
 
         return label;
       },
       showManageButton() {
-        return this.manageLink && this.status === APPLICATION_INSTALLED;
+        return this.manageLink && this.status === APPLICATION_STATUS.INSTALLED;
       },
       manageButtonLabel() {
         return s__('ClusterIntegration|Manage');
       },
       hasError() {
-        return this.status === APPLICATION_ERROR ||
+        return this.status === APPLICATION_STATUS.ERROR ||
         this.requestStatus === REQUEST_FAILURE;
       },
       generalErrorDescription() {
@@ -182,7 +185,7 @@
       </div>
     </div>
     <div
-      v-if="hasError"
+      v-if="hasError || isUnknownStatus"
       class="gl-responsive-table-row-layout"
       role="row"
     >

app/assets/javascripts/clusters/components/applications.vue

@@ -3,7 +3,7 @@ import _ from 'underscore';
 import { s__, sprintf } from '../../locale';
 import applicationRow from './application_row.vue';
 import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
-import { APPLICATION_INSTALLED, INGRESS } from '../constants';
+import { APPLICATION_STATUS, INGRESS } from '../constants';
 
 export default {
   components: {
@@ -58,7 +58,7 @@ export default {
       return INGRESS;
     },
     ingressInstalled() {
-      return this.applications.ingress.status === APPLICATION_INSTALLED;
+      return this.applications.ingress.status === APPLICATION_STATUS.INSTALLED;
     },
     ingressExternalIp() {
       return this.applications.ingress.externalIp;
@@ -122,7 +122,7 @@ export default {
       );
     },
     jupyterInstalled() {
-      return this.applications.jupyter.status === APPLICATION_INSTALLED;
+      return this.applications.jupyter.status === APPLICATION_STATUS.INSTALLED;
     },
     jupyterHostname() {
       return this.applications.jupyter.hostname;

app/assets/javascripts/clusters/constants.js

 // These need to match what is returned from the server
-export const APPLICATION_NOT_INSTALLABLE = 'not_installable';
-export const APPLICATION_INSTALLABLE = 'installable';
-export const APPLICATION_SCHEDULED = 'scheduled';
-export const APPLICATION_INSTALLING = 'installing';
-export const APPLICATION_INSTALLED = 'installed';
-export const APPLICATION_ERROR = 'errored';
+export const APPLICATION_STATUS = {
+  NOT_INSTALLABLE: 'not_installable',
+  INSTALLABLE: 'installable',
+  SCHEDULED: 'scheduled',
+  INSTALLING: 'installing',
+  INSTALLED: 'installed',
+  UPDATED: 'updated',
+  ERROR: 'errored',
+};
 
 // These are only used client-side
 export const REQUEST_LOADING = 'request-loading';

app/assets/javascripts/commons/polyfills.js

@@ -19,3 +19,4 @@ import './polyfills/custom_event';
 import './polyfills/element';
 import './polyfills/event';
 import './polyfills/nodelist';
+import './polyfills/request_idle_callback';

app/assets/javascripts/commons/polyfills/request_idle_callback.js

+window.requestIdleCallback =
+  window.requestIdleCallback ||
+  function requestShim(cb) {
+    const start = Date.now();
+    return setTimeout(() => {
+      cb({
+        didTimeout: false,
+        timeRemaining: () => Math.max(0, 50 - (Date.now() - start)),
+      });
+    }, 1);
+  };
+
+window.cancelIdleCallback =
+  window.cancelIdleCallback ||
+  function cancelShim(id) {
+    clearTimeout(id);
+  };

app/assets/javascripts/diffs/components/diff_line_gutter_content.vue

@@ -71,13 +71,23 @@ export default {
       required: false,
       default: false,
     },
+    isHover: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    discussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
     ...mapState({
       diffViewType: state => state.diffs.diffViewType,
       diffFiles: state => state.diffs.diffFiles,
     }),
-    ...mapGetters(['isLoggedIn', 'discussionsByLineCode']),
+    ...mapGetters(['isLoggedIn']),
     lineHref() {
       return this.lineCode ? `#${this.lineCode}` : '#';
     },
@@ -85,26 +95,22 @@ export default {
       return (
         this.isLoggedIn &&
         this.showCommentButton &&
+        this.isHover &&
         !this.isMatchLine &&
         !this.isContextLine &&
-        !this.hasDiscussions &&
-        !this.isMetaLine
+        !this.isMetaLine &&
+        !this.hasDiscussions
       );
     },
-    discussions() {
-      return this.discussionsByLineCode[this.lineCode] || [];
-    },
     hasDiscussions() {
       return this.discussions.length > 0;
     },
     shouldShowAvatarsOnGutter() {
-      let render = this.hasDiscussions && this.showCommentButton;
-
       if (!this.lineType && this.linePosition === LINE_POSITION_RIGHT) {
-        render = false;
+        return false;
       }
 
-      return render;
+      return this.showCommentButton && this.hasDiscussions;
     },
   },
   methods: {
@@ -176,7 +182,7 @@ export default {
       v-else
     >
       <button
-        v-show="shouldShowCommentButton"
+        v-if="shouldShowCommentButton"
         type="button"
         class="add-diff-note js-add-diff-note-button"
         title="Add a comment to this line"

app/assets/javascripts/diffs/components/diff_table_cell.vue

@@ -67,6 +67,11 @@ export default {
       required: false,
       default: false,
     },
+    discussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
     ...mapGetters(['isLoggedIn']),
@@ -132,10 +137,12 @@ export default {
       :line-number="lineNumber"
       :meta-data="normalizedLine.metaData"
       :show-comment-button="showCommentButton"
+      :is-hover="isHover"
       :is-bottom="isBottom"
       :is-match-line="isMatchLine"
       :is-context-line="isContentLine"
       :is-meta-line="isMetaLine"
+      :discussions="discussions"
     />
   </td>
 </template>

app/assets/javascripts/diffs/components/inline_diff_comment_row.vue

 <script>
-import { mapState, mapGetters } from 'vuex';
+import { mapState } from 'vuex';
 import diffDiscussions from './diff_discussions.vue';
 import diffLineNoteForm from './diff_line_note_form.vue';
 
@@ -21,15 +21,16 @@ export default {
       type: Number,
       required: true,
     },
+    discussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
     ...mapState({
       diffLineCommentForms: state => state.diffs.diffLineCommentForms,
     }),
-    ...mapGetters(['discussionsByLineCode']),
-    discussions() {
-      return this.discussionsByLineCode[this.line.lineCode] || [];
-    },
     className() {
       return this.discussions.length ? '' : 'js-temp-notes-holder';
     },

app/assets/javascripts/diffs/components/inline_diff_table_row.vue

@@ -33,6 +33,11 @@ export default {
       required: false,
       default: false,
     },
+    discussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -89,6 +94,7 @@ export default {
       :is-bottom="isBottom"
       :is-hover="isHover"
       :show-comment-button="true"
+      :discussions="discussions"
       class="diff-line-num old_line"
     />
     <diff-table-cell
@@ -98,6 +104,7 @@ export default {
       :line-type="newLineType"
       :is-bottom="isBottom"
       :is-hover="isHover"
+      :discussions="discussions"
       class="diff-line-num new_line"
     />
     <td

app/assets/javascripts/diffs/components/inline_diff_view.vue

@@ -20,8 +20,11 @@ export default {
     },
   },
   computed: {
-    ...mapGetters('diffs', ['commitId']),
-    ...mapGetters(['discussionsByLineCode']),
+    ...mapGetters('diffs', [
+      'commitId',
+      'shouldRenderInlineCommentRow',
+      'singleDiscussionByLineCode',
+    ]),
     ...mapState({
       diffLineCommentForms: state => state.diffs.diffLineCommentForms,
     }),
@@ -36,15 +39,8 @@ export default {
     },
   },
   methods: {
-    shouldRenderCommentRow(line) {
-      if (this.diffLineCommentForms[line.lineCode]) return true;
-
-      const lineDiscussions = this.discussionsByLineCode[line.lineCode];
-      if (lineDiscussions === undefined) {
-        return false;
-      }
-
-      return lineDiscussions.every(discussion => discussion.expanded);
+    discussionsList(line) {
+      return line.lineCode !== undefined ? this.singleDiscussionByLineCode(line.lineCode) : [];
     },
   },
 };
@@ -65,13 +61,15 @@ export default {
           :line="line"
           :is-bottom="index + 1 === diffLinesLength"
           :key="line.lineCode"
+          :discussions="discussionsList(line)"
         />
         <inline-diff-comment-row
-          v-if="shouldRenderCommentRow(line)"
+          v-if="shouldRenderInlineCommentRow(line)"
           :diff-file-hash="diffFile.fileHash"
           :line="line"
           :line-index="index"
           :key="index"
+          :discussions="discussionsList(line)"
         />
       </template>
     </tbody>

app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue

 <script>
-import { mapState, mapGetters } from 'vuex';
+import { mapState } from 'vuex';
 import diffDiscussions from './diff_discussions.vue';
 import diffLineNoteForm from './diff_line_note_form.vue';
 
@@ -21,30 +21,34 @@ export default {
       type: Number,
       required: true,
     },
+    leftDiscussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    rightDiscussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
     ...mapState({
       diffLineCommentForms: state => state.diffs.diffLineCommentForms,
     }),
-    ...mapGetters(['discussionsByLineCode']),
     leftLineCode() {
       return this.line.left.lineCode;
     },
     rightLineCode() {
       return this.line.right.lineCode;
     },
-    hasDiscussion() {
-      const discussions = this.discussionsByLineCode;
-
-      return discussions[this.leftLineCode] || discussions[this.rightLineCode];
-    },
     hasExpandedDiscussionOnLeft() {
-      const discussions = this.discussionsByLineCode[this.leftLineCode];
+      const discussions = this.leftDiscussions;
 
       return discussions ? discussions.every(discussion => discussion.expanded) : false;
     },
     hasExpandedDiscussionOnRight() {
-      const discussions = this.discussionsByLineCode[this.rightLineCode];
+      const discussions = this.rightDiscussions;
 
       return discussions ? discussions.every(discussion => discussion.expanded) : false;
     },
@@ -52,17 +56,18 @@ export default {
       return this.hasExpandedDiscussionOnLeft || this.hasExpandedDiscussionOnRight;
     },
     shouldRenderDiscussionsOnLeft() {
-      return this.discussionsByLineCode[this.leftLineCode] && this.hasExpandedDiscussionOnLeft;
+      return this.leftDiscussions && this.hasExpandedDiscussionOnLeft;
     },
     shouldRenderDiscussionsOnRight() {
-      return (
-        this.discussionsByLineCode[this.rightLineCode] &&
-        this.hasExpandedDiscussionOnRight &&
-        this.line.right.type
-      );
+      return this.rightDiscussions && this.hasExpandedDiscussionOnRight && this.line.right.type;
+    },
+    showRightSideCommentForm() {
+      return this.line.right.type && this.diffLineCommentForms[this.rightLineCode];
     },
     className() {
-      return this.hasDiscussion ? '' : 'js-temp-notes-holder';
+      return this.leftDiscussions.length > 0 || this.rightDiscussions.length > 0
+        ? ''
+        : 'js-temp-notes-holder';
     },
   },
 };
@@ -80,13 +85,12 @@ export default {
         class="content"
       >
         <diff-discussions
-          v-if="discussionsByLineCode[leftLineCode].length"
-          :discussions="discussionsByLineCode[leftLineCode]"
+          v-if="leftDiscussions.length"
+          :discussions="leftDiscussions"
         />
       </div>
       <diff-line-note-form
-        v-if="diffLineCommentForms[leftLineCode] &&
-        diffLineCommentForms[leftLineCode]"
+        v-if="diffLineCommentForms[leftLineCode]"
         :diff-file-hash="diffFileHash"
         :line="line.left"
         :note-target-line="line.left"
@@ -100,13 +104,12 @@ export default {
         class="content"
       >
         <diff-discussions
-          v-if="discussionsByLineCode[rightLineCode].length"
-          :discussions="discussionsByLineCode[rightLineCode]"
+          v-if="rightDiscussions.length"
+          :discussions="rightDiscussions"
         />
       </div>
       <diff-line-note-form
-        v-if="diffLineCommentForms[rightLineCode] &&
-        diffLineCommentForms[rightLineCode] && line.right.type"
+        v-if="showRightSideCommentForm"
         :diff-file-hash="diffFileHash"
         :line="line.right"
         :note-target-line="line.right"

app/assets/javascripts/diffs/components/parallel_diff_table_row.vue

@@ -36,6 +36,16 @@ export default {
       required: false,
       default: false,
     },
+    leftDiscussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    rightDiscussions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -116,6 +126,7 @@ export default {
       :is-hover="isLeftHover"
       :show-comment-button="true"
       :diff-view-type="parallelDiffViewType"
+      :discussions="leftDiscussions"
       class="diff-line-num old_line"
     />
     <td
@@ -136,6 +147,7 @@ export default {
       :is-hover="isRightHover"
       :show-comment-button="true"
       :diff-view-type="parallelDiffViewType"
+      :discussions="rightDiscussions"
       class="diff-line-num new_line"
     />
     <td

app/assets/javascripts/diffs/components/parallel_diff_view.vue

@@ -21,8 +21,11 @@ export default {
     },
   },
   computed: {
-    ...mapGetters('diffs', ['commitId']),
-    ...mapGetters(['discussionsByLineCode']),
+    ...mapGetters('diffs', [
+      'commitId',
+      'singleDiscussionByLineCode',
+      'shouldRenderParallelCommentRow',
+    ]),
     ...mapState({
       diffLineCommentForms: state => state.diffs.diffLineCommentForms,
     }),
@@ -53,29 +56,9 @@ export default {
     },
   },
   methods: {
-    shouldRenderCommentRow(line) {
-      const leftLineCode = line.left.lineCode;
-      const rightLineCode = line.right.lineCode;
-      const discussions = this.discussionsByLineCode;
-      const leftDiscussions = discussions[leftLineCode];
-      const rightDiscussions = discussions[rightLineCode];
-      const hasDiscussion = leftDiscussions || rightDiscussions;
-
-      const hasExpandedDiscussionOnLeft = leftDiscussions
-        ? leftDiscussions.every(discussion => discussion.expanded)
-        : false;
-      const hasExpandedDiscussionOnRight = rightDiscussions
-        ? rightDiscussions.every(discussion => discussion.expanded)
-        : false;
-
-      if (hasDiscussion && (hasExpandedDiscussionOnLeft || hasExpandedDiscussionOnRight)) {
-        return true;
-      }
-
-      const hasCommentFormOnLeft = this.diffLineCommentForms[leftLineCode];
-      const hasCommentFormOnRight = this.diffLineCommentForms[rightLineCode];
-
-      return hasCommentFormOnLeft || hasCommentFormOnRight;
+    discussionsByLine(line, leftOrRight) {
+      return line[leftOrRight] && line[leftOrRight].lineCode !== undefined ?
+            this.singleDiscussionByLineCode(line[leftOrRight].lineCode) : [];
     },
   },
 };
@@ -98,13 +81,17 @@ export default {
             :line="line"
             :is-bottom="index + 1 === diffLinesLength"
             :key="index"
+            :left-discussions="discussionsByLine(line, 'left')"
+            :right-discussions="discussionsByLine(line, 'right')"
           />
           <parallel-diff-comment-row
-            v-if="shouldRenderCommentRow(line)"
+            v-if="shouldRenderParallelCommentRow(line)"
             :key="`dcr-${index}`"
             :line="line"
             :diff-file-hash="diffFile.fileHash"
             :line-index="index"
+            :left-discussions="discussionsByLine(line, 'left')"
+            :right-discussions="discussionsByLine(line, 'right')"
           />
         </template>
       </tbody>

app/assets/javascripts/diffs/store/getters.js

@@ -64,6 +64,47 @@ export const getDiffFileDiscussions = (state, getters, rootState, rootGetters) =
       discussion.diff_discussion && _.isEqual(discussion.diff_file.file_hash, diff.fileHash),
   ) || [];
 
+export const singleDiscussionByLineCode = (state, getters, rootState, rootGetters) => lineCode => {
+  if (!lineCode || lineCode === undefined) return [];
+  const discussions = rootGetters.discussionsByLineCode;
+  return discussions[lineCode] || [];
+};
+
+export const shouldRenderParallelCommentRow = (state, getters) => line => {
+  const leftLineCode = line.left.lineCode;
+  const rightLineCode = line.right.lineCode;
+  const leftDiscussions = getters.singleDiscussionByLineCode(leftLineCode);
+  const rightDiscussions = getters.singleDiscussionByLineCode(rightLineCode);
+  const hasDiscussion = leftDiscussions.length || rightDiscussions.length;
+
+  const hasExpandedDiscussionOnLeft = leftDiscussions.length
+    ? leftDiscussions.every(discussion => discussion.expanded)
+    : false;
+  const hasExpandedDiscussionOnRight = rightDiscussions.length
+    ? rightDiscussions.every(discussion => discussion.expanded)
+    : false;
+
+  if (hasDiscussion && (hasExpandedDiscussionOnLeft || hasExpandedDiscussionOnRight)) {
+    return true;
+  }
+
+  const hasCommentFormOnLeft = state.diffLineCommentForms[leftLineCode];
+  const hasCommentFormOnRight = state.diffLineCommentForms[rightLineCode];
+
+  return hasCommentFormOnLeft || hasCommentFormOnRight;
+};
+
+export const shouldRenderInlineCommentRow = (state, getters) => line => {
+  if (state.diffLineCommentForms[line.lineCode]) return true;
+
+  const lineDiscussions = getters.singleDiscussionByLineCode(line.lineCode);
+  if (lineDiscussions.length === 0) {
+    return false;
+  }
+
+  return lineDiscussions.every(discussion => discussion.expanded);
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma∂ tests
 export const getDiffFileByHash = state => fileHash =>
   state.diffFiles.find(file => file.fileHash === fileHash);

app/assets/javascripts/diffs/store/utils.js

@@ -173,3 +173,24 @@ export function trimFirstCharOfLineContent(line = {}) {
 
   return parsedLine;
 }
+
+export function getDiffRefsByLineCode(diffFiles) {
+  return diffFiles.reduce((acc, diffFile) => {
+    const { baseSha, headSha, startSha } = diffFile.diffRefs;
+    const { newPath, oldPath } = diffFile;
+
+    // We can only use highlightedDiffLines to create the map of diff lines because
+    // highlightedDiffLines will also include every parallel diff line in it.
+    if (diffFile.highlightedDiffLines) {
+      diffFile.highlightedDiffLines.forEach(line => {
+        const { lineCode, oldLine, newLine } = line;
+
+        if (lineCode) {
+          acc[lineCode] = { baseSha, headSha, startSha, newPath, oldPath, oldLine, newLine };
+        }
+      });
+    }
+
+    return acc;
+  }, {});
+}

app/assets/javascripts/gl_dropdown.js

@@ -616,7 +616,11 @@ GitLabDropdown = (function() {
     }
 
     if (this.options.opened) {
-      this.options.opened.call(this, e);
+      if (this.options.preserveContext) {
+        this.options.opened(e);
+      } else {
+        this.options.opened.call(this, e);
+      }
     }
 
     return this.dropdown.trigger('shown.gl.dropdown');

app/assets/javascripts/groups/components/group_item.vue

@@ -78,17 +78,10 @@ export default {
   >
     <div
       :class="{ 'project-row-contents': !isGroup }"
-      class="group-row-contents">
-      <item-actions
-        v-if="isGroup"
-        :group="group"
-        :parent-group="parentGroup"
-      />
-      <item-stats
-        :item="group"
-      />
+      class="group-row-contents d-flex justify-content-end align-items-center"
+    >
       <div
-        class="folder-toggle-wrap"
+        class="folder-toggle-wrap append-right-4 d-flex align-items-center"
       >
         <item-caret
           :is-group-open="group.isOpen"
@@ -100,7 +93,7 @@ export default {
       </div>
       <div
         :class="{ 'content-loading': group.isChildrenLoading }"
-        class="avatar-container prepend-top-8 prepend-left-5 s24 d-none d-sm-block"
+        class="avatar-container s24 d-none d-sm-block"
       >
         <a
           :href="group.relativePath"
@@ -120,32 +113,46 @@ export default {
         </a>
       </div>
       <div
-        class="title namespace-title"
+        class="group-text flex-grow"
       >
-        <a
-          v-tooltip
-          :href="group.relativePath"
-          :title="group.fullName"
-          class="no-expand"
-          data-placement="bottom"
-        >{{
-          // ending bracket must be by closing tag to prevent
-          // link hover text-decoration from over-extending
-          group.name
-        }}</a>
-        <span
-          v-if="group.permission"
-          class="user-access-role"
+        <div
+          class="title namespace-title append-right-8"
         >
-          {{ group.permission }}
-        </span>
-      </div>
-      <div
-        v-if="group.description"
-        class="description">
-        <span v-html="group.description">
-        </span>
+          <a
+            v-tooltip
+            :href="group.relativePath"
+            :title="group.fullName"
+            class="no-expand"
+            data-placement="bottom"
+          >{{
+            // ending bracket must be by closing tag to prevent
+            // link hover text-decoration from over-extending
+            group.name
+          }}</a>
+          <span
+            v-if="group.permission"
+            class="user-access-role"
+          >
+            {{ group.permission }}
+          </span>
+        </div>
+        <div
+          v-if="group.description"
+          class="description"
+        >
+          <span v-html="group.description">
+          </span>
+        </div>
       </div>
+      <item-stats
+        :item="group"
+        class="group-stats prepend-top-2"
+      />
+      <item-actions
+        v-if="isGroup"
+        :group="group"
+        :parent-group="parentGroup"
+      />
     </div>
     <group-folder
       v-if="group.isOpen && hasChildren"

app/assets/javascripts/labels_select.js

@@ -39,7 +39,7 @@ export default class LabelsSelect {
       showNo = $dropdown.data('showNo');
       showAny = $dropdown.data('showAny');
       showMenuAbove = $dropdown.data('showMenuAbove');
-      defaultLabel = $dropdown.data('defaultLabel');
+      defaultLabel = $dropdown.data('defaultLabel') || 'Label';
       abilityName = $dropdown.data('abilityName');
       $selectbox = $dropdown.closest('.selectbox');
       $block = $selectbox.closest('.block');
@@ -244,21 +244,21 @@ export default class LabelsSelect {
           var $dropdownInputField = $dropdownParent.find('.dropdown-input-field');
           var isSelected = el !== null ? el.hasClass('is-active') : false;
 
-          var { title } = selected;
+          var title = selected ? selected.title : null;
           var selectedLabels = this.selected;
 
           if ($dropdownInputField.length && $dropdownInputField.val().length) {
             $dropdownParent.find('.dropdown-input-clear').trigger('click');
           }
 
-          if (selected.id === 0) {
+          if (selected && selected.id === 0) {
             this.selected = [];
             return 'No Label';
           }
           else if (isSelected) {
             this.selected.push(title);
           }
-          else {
+          else if (!isSelected && title) {
             var index = this.selected.indexOf(title);
             this.selected.splice(index, 1);
           }
@@ -409,6 +409,14 @@ export default class LabelsSelect {
             }
           }
         },
+        opened: function(e) {
+          if ($dropdown.hasClass('js-issue-board-sidebar')) {
+            const previousSelection = $dropdown.attr('data-selected');
+            this.selected = previousSelection ? previousSelection.split(',') : [];
+            $dropdown.data('glDropdown').updateLabel();
+          }
+        },
+        preserveContext: true,
       });
 
       // Set dropdown data