Add latest changes from gitlab-org/gitlab@master

2 files changed, 76 insertions, 61 deletions

diff --git a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
index 932ca8e002e..9ac687f5e2c 100644
--- a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
@@ -5,6 +5,7 @@ import { __, sprintf } from '~/locale';
 import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range';
 
 import Icon from '~/vue_shared/components/icon.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import DateTimePickerInput from './date_time_picker_input.vue';
 import {
   defaultTimeRanges,
@@ -24,6 +25,7 @@ const events = {
 export default {
   components: {
     Icon,
+    TooltipOnTruncate,
     DateTimePickerInput,
     GlFormGroup,
     GlButton,
@@ -149,61 +151,68 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown
-    :text="timeWindowText"
-    class="date-time-picker"
-    menu-class="date-time-picker-menu"
-    v-bind="$attrs"
-    toggle-class="w-100 text-truncate"
+  <tooltip-on-truncate
+    :title="timeWindowText"
+    :truncate-target="elem => elem.querySelector('.date-time-picker-toggle')"
+    placement="top"
+    class="d-inline-block"
   >
-    <div class="d-flex justify-content-between gl-p-2">
-      <gl-form-group
-        :label="__('Custom range')"
-        label-for="custom-from-time"
-        label-class="gl-pb-1"
-        class="custom-time-range-form-group col-md-7 gl-pl-1 gl-pr-0 m-0"
-      >
-        <div class="gl-pt-2">
-          <date-time-picker-input
-            id="custom-time-from"
-            v-model="startInput"
-            :label="__('From')"
-            :state="startInputValid"
-          />
-          <date-time-picker-input
-            id="custom-time-to"
-            v-model="endInput"
-            :label="__('To')"
-            :state="endInputValid"
-          />
-        </div>
-        <gl-form-group>
-          <gl-button @click="closeDropdown">{{ __('Cancel') }}</gl-button>
-          <gl-button variant="success" :disabled="!isValid" @click="setFixedRange()">
-            {{ __('Apply') }}
-          </gl-button>
+    <gl-dropdown
+      :text="timeWindowText"
+      v-bind="$attrs"
+      class="date-time-picker w-100"
+      menu-class="date-time-picker-menu"
+      toggle-class="date-time-picker-toggle text-truncate"
+    >
+      <div class="d-flex justify-content-between gl-p-2">
+        <gl-form-group
+          :label="__('Custom range')"
+          label-for="custom-from-time"
+          label-class="gl-pb-1"
+          class="custom-time-range-form-group col-md-7 gl-pl-1 gl-pr-0 m-0"
+        >
+          <div class="gl-pt-2">
+            <date-time-picker-input
+              id="custom-time-from"
+              v-model="startInput"
+              :label="__('From')"
+              :state="startInputValid"
+            />
+            <date-time-picker-input
+              id="custom-time-to"
+              v-model="endInput"
+              :label="__('To')"
+              :state="endInputValid"
+            />
+          </div>
+          <gl-form-group>
+            <gl-button @click="closeDropdown">{{ __('Cancel') }}</gl-button>
+            <gl-button variant="success" :disabled="!isValid" @click="setFixedRange()">
+              {{ __('Apply') }}
+            </gl-button>
+          </gl-form-group>
         </gl-form-group>
-      </gl-form-group>
-      <gl-form-group label-for="group-id-dropdown" class="col-md-5 gl-pl-1 gl-pr-1 m-0">
-        <template #label>
-          <span class="gl-pl-5">{{ __('Quick range') }}</span>
-        </template>
+        <gl-form-group label-for="group-id-dropdown" class="col-md-5 gl-pl-1 gl-pr-1 m-0">
+          <template #label>
+            <span class="gl-pl-5">{{ __('Quick range') }}</span>
+          </template>
 
-        <gl-dropdown-item
-          v-for="(option, index) in options"
-          :key="index"
-          :active="isOptionActive(option)"
-          active-class="active"
-          @click="setQuickRange(option)"
-        >
-          <icon
-            name="mobile-issue-close"
-            class="align-bottom"
-            :class="{ invisible: !isOptionActive(option) }"
-          />
-          {{ option.label }}
-        </gl-dropdown-item>
-      </gl-form-group>
-    </div>
-  </gl-dropdown>
+          <gl-dropdown-item
+            v-for="(option, index) in options"
+            :key="index"
+            :active="isOptionActive(option)"
+            active-class="active"
+            @click="setQuickRange(option)"
+          >
+            <icon
+              name="mobile-issue-close"
+              class="align-bottom"
+              :class="{ invisible: !isOptionActive(option) }"
+            />
+            {{ option.label }}
+          </gl-dropdown-item>
+        </gl-form-group>
+      </div>
+    </gl-dropdown>
+  </tooltip-on-truncate>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue b/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue
index 69eb791d195..4ea3d162da2 100644
--- a/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue
+++ b/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue
@@ -1,5 +1,5 @@
 <script>
-import _ from 'underscore';
+import { isFunction } from 'lodash';
 import tooltip from '../directives/tooltip';
 
 export default {
@@ -28,16 +28,18 @@ export default {
       showTooltip: false,
     };
   },
+  watch: {
+    title() {
+      // Wait on $nextTick in case of slot width changes
+      this.$nextTick(this.updateTooltip);
+    },
+  },
   mounted() {
-    const target = this.selectTarget();
-
-    if (target && target.scrollWidth > target.offsetWidth) {
-      this.showTooltip = true;
-    }
+    this.updateTooltip();
   },
   methods: {
     selectTarget() {
-      if (_.isFunction(this.truncateTarget)) {
+      if (isFunction(this.truncateTarget)) {
         return this.truncateTarget(this.$el);
       } else if (this.truncateTarget === 'child') {
         return this.$el.childNodes[0];
@@ -45,6 +47,10 @@ export default {
 
       return this.$el;
     },
+    updateTooltip() {
+      const target = this.selectTarget();
+      this.showTooltip = Boolean(target && target.scrollWidth > target.offsetWidth);
+    },
   },
 };
 </script>