Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

12 files changed, 85 insertions, 41 deletions

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 9b28ce0d881..94cf1f84ec3 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
@@ -61,6 +61,7 @@ export default {
 </script>
 
 <template>
+  <!-- eslint-disable @gitlab/vue-no-data-toggle -->
   <button
     ref="dropdownButton"
     :class="{ 'js-extra-options': showExtraOptions }"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue
index e3704198ad0..d80b66fd9be 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 
 import DropdownContentsCreateView from './dropdown_contents_create_view.vue';
 import DropdownContentsLabelsView from './dropdown_contents_labels_view.vue';
@@ -18,6 +18,7 @@ export default {
   },
   computed: {
     ...mapState(['showDropdownContentsCreateView']),
+    ...mapGetters(['isDropdownVariantSidebar']),
     dropdownContentsView() {
       if (this.showDropdownContentsCreateView) {
         return 'dropdown-contents-create-view';
@@ -25,11 +26,8 @@ export default {
       return 'dropdown-contents-labels-view';
     },
     directionStyle() {
-      if (this.renderOnTop) {
-        return { bottom: '100%' };
-      }
-
-      return {};
+      const bottom = this.isDropdownVariantSidebar ? '3rem' : '2rem';
+      return this.renderOnTop ? { bottom } : {};
     },
   },
 };
@@ -37,7 +35,7 @@ export default {
 
 <template>
   <div
-    class="labels-select-dropdown-contents w-100 mt-1 mb-3 py-2 rounded-top rounded-bottom position-absolute"
+    class="labels-select-dropdown-contents gl-w-full gl-my-2 gl-py-3 gl-rounded-base gl-absolute"
     data-qa-selector="labels_dropdown_content"
     :style="directionStyle"
   >
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
index 6065b6c160c..86788a84260 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
@@ -83,12 +83,13 @@ export default {
       const highlightedLabel = this.$refs.labelsListContainer.querySelector('.is-focused');
 
       if (highlightedLabel) {
-        const rect = highlightedLabel.getBoundingClientRect();
-        if (rect.bottom > this.$refs.labelsListContainer.clientHeight) {
-          highlightedLabel.scrollIntoView(false);
-        }
-        if (rect.top < 0) {
-          highlightedLabel.scrollIntoView();
+        const container = this.$refs.labelsListContainer.getBoundingClientRect();
+        const label = highlightedLabel.getBoundingClientRect();
+
+        if (label.bottom > container.bottom) {
+          this.$refs.labelsListContainer.scrollTop += label.bottom - container.bottom;
+        } else if (label.top < container.top) {
+          this.$refs.labelsListContainer.scrollTop -= container.top - label.top;
         }
       }
     },
@@ -177,7 +178,7 @@ export default {
           class="labels-fetch-loading gl-align-items-center w-100 h-100"
           size="md"
         />
-        <ul v-else class="list-unstyled mb-0">
+        <ul v-else class="list-unstyled gl-mb-0 gl-word-break-word">
           <label-item
             v-for="(label, index) in visibleLabels"
             :key="label.id"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue
index e431fd000a6..e8fdf4bb0c2 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue
@@ -22,7 +22,7 @@ export default {
     const { label, highlight, isLabelSet } = props;
 
     const labelColorBox = h('span', {
-      class: 'dropdown-label-box',
+      class: 'dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3',
       style: {
         backgroundColor: label.color,
       },
@@ -33,7 +33,7 @@ export default {
 
     const checkedIcon = h(GlIcon, {
       class: {
-        'mr-2 align-self-center': true,
+        'gl-mr-3 gl-flex-shrink-0': true,
         hidden: !isLabelSet,
       },
       props: {
@@ -43,7 +43,7 @@ export default {
 
     const noIcon = h('span', {
       class: {
-        'mr-3 pr-2': true,
+        'gl-mr-5 gl-pr-3': true,
         hidden: isLabelSet,
       },
       attrs: {
@@ -56,7 +56,7 @@ export default {
     const labelLink = h(
       GlLink,
       {
-        class: 'd-flex align-items-baseline text-break-word label-item',
+        class: 'gl-display-flex gl-align-items-center label-item gl-text-black-normal',
         on: {
           click: () => {
             listeners.clickLabel(label);
@@ -70,8 +70,8 @@ export default {
       'li',
       {
         class: {
-          'd-block': true,
-          'text-left': true,
+          'gl-display-block': true,
+          'gl-text-left': true,
           'is-focused': highlight,
         },
       },
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
index f547433f322..a4462895f6a 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
@@ -268,7 +268,7 @@ export default {
       this.$emit('toggleCollapse');
     },
     setContentIsOnViewport(showDropdownContents) {
-      if (!this.isDropdownVariantEmbedded || !showDropdownContents) {
+      if (!showDropdownContents) {
         this.contentIsOnViewport = true;
 
         return;
@@ -276,8 +276,7 @@ export default {
 
       this.$nextTick(() => {
         if (this.$refs.dropdownContents) {
-          const offset = { top: 100 };
-          this.contentIsOnViewport = isInViewport(this.$refs.dropdownContents.$el, offset);
+          this.contentIsOnViewport = isInViewport(this.$refs.dropdownContents.$el);
         }
       });
     },
@@ -313,6 +312,7 @@ export default {
       <dropdown-contents
         v-show="dropdownButtonVisible && showDropdownContents"
         ref="dropdownContents"
+        :render-on-top="!contentIsOnViewport"
       />
     </template>
     <template v-if="isDropdownVariantStandalone || isDropdownVariantEmbedded">
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_assignees.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_assignees.query.graphql
new file mode 100644
index 00000000000..93b9833bb7d
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_assignees.query.graphql
@@ -0,0 +1,18 @@
+#import "~/graphql_shared/fragments/user.fragment.graphql"
+#import "~/graphql_shared/fragments/user_availability.fragment.graphql"
+
+query issueAssignees($fullPath: ID!, $iid: String!) {
+  workspace: project(fullPath: $fullPath) {
+    __typename
+    issuable: issue(iid: $iid) {
+      __typename
+      id
+      assignees {
+        nodes {
+          ...User
+          ...UserAvailability
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_participants.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_participants.query.graphql
index 3885127fa8e..48787305459 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_participants.query.graphql
+++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_participants.query.graphql
@@ -13,12 +13,6 @@ query issueParticipants($fullPath: ID!, $iid: String!) {
           ...UserAvailability
         }
       }
-      assignees {
-        nodes {
-          ...User
-          ...UserAvailability
-        }
-      }
     }
   }
 }
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_timelogs.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_timelogs.query.graphql
new file mode 100644
index 00000000000..a2990d7171b
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_issue_timelogs.query.graphql
@@ -0,0 +1,14 @@
+#import "~/graphql_shared/fragments/issuable_timelogs.fragment.graphql"
+
+query timeTrackingReport($id: IssueID!) {
+  issuable: issue(id: $id) {
+    __typename
+    id
+    title
+    timelogs {
+      nodes {
+        ...TimelogFragment
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_assignees.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_assignees.query.graphql
new file mode 100644
index 00000000000..53f7381760e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_assignees.query.graphql
@@ -0,0 +1,16 @@
+#import "~/graphql_shared/fragments/user.fragment.graphql"
+#import "~/graphql_shared/fragments/user_availability.fragment.graphql"
+
+query getMrAssignees($fullPath: ID!, $iid: String!) {
+  workspace: project(fullPath: $fullPath) {
+    issuable: mergeRequest(iid: $iid) {
+      id
+      assignees {
+        nodes {
+          ...User
+          ...UserAvailability
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_participants.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_participants.query.graphql
index 63482873b69..6adbd4098f2 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_participants.query.graphql
+++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_participants.query.graphql
@@ -11,12 +11,6 @@ query getMrParticipants($fullPath: ID!, $iid: String!) {
           ...UserAvailability
         }
       }
-      assignees {
-        nodes {
-          ...User
-          ...UserAvailability
-        }
-      }
     }
   }
 }
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_timelogs.query.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_timelogs.query.graphql
new file mode 100644
index 00000000000..753f1b345e3
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/get_mr_timelogs.query.graphql
@@ -0,0 +1,14 @@
+#import "~/graphql_shared/fragments/issuable_timelogs.fragment.graphql"
+
+query timeTrackingReport($id: MergeRequestID!) {
+  issuable: mergeRequest(id: $id) {
+    __typename
+    id
+    title
+    timelogs {
+      nodes {
+        ...TimelogFragment
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/queries/update_issue_assignees.mutation.graphql b/app/assets/javascripts/vue_shared/components/sidebar/queries/update_issue_assignees.mutation.graphql
index 3f40c0368d7..24de5ea4fe3 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/queries/update_issue_assignees.mutation.graphql
+++ b/app/assets/javascripts/vue_shared/components/sidebar/queries/update_issue_assignees.mutation.graphql
@@ -13,12 +13,6 @@ mutation issueSetAssignees($iid: String!, $assigneeUsernames: [String!]!, $fullP
           ...UserAvailability
         }
       }
-      participants {
-        nodes {
-          ...User
-          ...UserAvailability
-        }
-      }
     }
   }
 }