Merge branch 'master' into triggermesh-phase1-knative

16 files changed, 227 insertions, 114 deletions

diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index 13bca99dcb3..151eee75d44 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -13,7 +13,7 @@ export default {
   },
   props: {
     /**
-     * Indicates the existance of a tag.
+     * Indicates the existence 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
      */
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
index a07d63a495d..c78b96695cf 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
@@ -1,11 +1,11 @@
 <script>
-import { Link } from '@gitlab-org/gitlab-ui';
+import { GlLink } from '@gitlab-org/gitlab-ui';
 import Icon from '../../icon.vue';
 import { numberToHumanSize } from '../../../../lib/utils/number_utils';
 
 export default {
   components: {
-    'gl-link': Link,
+    GlLink,
     Icon,
   },
   props: {
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
index 807e049caf6..419987d2c50 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
@@ -2,14 +2,14 @@
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import $ from 'jquery';
-import { SkeletonLoading } from '@gitlab-org/gitlab-ui';
+import { GlSkeletonLoading } from '@gitlab-org/gitlab-ui';
 
 const { CancelToken } = axios;
 let axiosSource;
 
 export default {
   components: {
-    SkeletonLoading,
+    GlSkeletonLoading,
   },
   props: {
     content: {
@@ -81,7 +81,7 @@ export default {
   <div
     ref="markdown-preview"
     class="md md-previewer">
-    <skeleton-loading v-if="isLoading" />
+    <gl-skeleton-loading v-if="isLoading" />
     <div
       v-else
       v-html="previewContent">
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index 36a345130c0..2d89a156117 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -34,10 +34,21 @@ export default {
       required: false,
       default: false,
     },
+    displayTextKey: {
+      type: String,
+      required: false,
+      default: 'name',
+    },
+    shouldTruncateStart: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
       mouseOver: false,
+      truncateStart: 0,
     };
   },
   computed: {
@@ -60,6 +71,15 @@ export default {
         'is-open': this.file.opened,
       };
     },
+    outputText() {
+      const text = this.file[this.displayTextKey];
+
+      if (this.truncateStart === 0) {
+        return text;
+      }
+
+      return `...${text.substring(this.truncateStart, text.length)}`;
+    },
   },
   watch: {
     'file.active': function fileActiveWatch(active) {
@@ -72,6 +92,15 @@ export default {
     if (this.hasPathAtCurrentRoute()) {
       this.scrollIntoView(true);
     }
+
+    if (this.shouldTruncateStart) {
+      const { scrollWidth, offsetWidth } = this.$refs.textOutput;
+      const textOverflow = scrollWidth - offsetWidth;
+
+      if (textOverflow > 0) {
+        this.truncateStart = Math.ceil(textOverflow / 5) + 3;
+      }
+    }
   },
   methods: {
     toggleTreeOpen(path) {
@@ -139,6 +168,7 @@ export default {
         class="file-row-name-container"
       >
         <span
+          ref="textOutput"
           :style="levelIndentation"
           class="file-row-name str-truncated"
         >
@@ -156,7 +186,7 @@ export default {
             :size="16"
             class="append-right-5"
           />
-          {{ file.name }}
+          {{ outputText }}
         </span>
         <component
           :is="extraComponent"
@@ -175,6 +205,8 @@ export default {
         :hide-extra-on-tree="hideExtraOnTree"
         :extra-component="extraComponent"
         :show-changed-icon="showChangedIcon"
+        :display-text-key="displayTextKey"
+        :should-truncate-start="shouldTruncateStart"
         @toggleTreeOpen="toggleTreeOpen"
         @clickFile="clickedFile"
       />
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
index 460fa6ad72e..388a2f4ca36 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
@@ -56,12 +56,14 @@ export default {
     filteredResults() {
       if (this.filter !== '') {
         return this.items.filter(
-          item => item[this.filterKey] && item[this.filterKey].toLowerCase().includes(this.filter.toLowerCase()),
+          item =>
+            item[this.filterKey] &&
+            item[this.filterKey].toLowerCase().includes(this.filter.toLowerCase()),
         );
       }
 
       return this.items.slice(0, this.visibleItems);
-    }
+    },
   },
   mounted() {
     /**
diff --git a/app/assets/javascripts/vue_shared/components/gl_countdown.vue b/app/assets/javascripts/vue_shared/components/gl_countdown.vue
new file mode 100644
index 00000000000..9327a2a4a6c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/gl_countdown.vue
@@ -0,0 +1,49 @@
+<script>
+import { calculateRemainingMilliseconds, formatTime } from '~/lib/utils/datetime_utility';
+
+/**
+ * Counts down to a given end date.
+ */
+export default {
+  props: {
+    endDateString: {
+      type: String,
+      required: true,
+      validator(value) {
+        return !Number.isNaN(new Date(value).getTime());
+      },
+    },
+  },
+
+  data() {
+    return {
+      remainingTime: formatTime(0),
+      countdownUpdateIntervalId: null,
+    };
+  },
+
+  mounted() {
+    const updateRemainingTime = () => {
+      const remainingMilliseconds = calculateRemainingMilliseconds(this.endDateString);
+      this.remainingTime = formatTime(remainingMilliseconds);
+    };
+
+    updateRemainingTime();
+    this.countdownUpdateIntervalId = window.setInterval(updateRemainingTime, 1000);
+  },
+
+  beforeDestroy() {
+    window.clearInterval(this.countdownUpdateIntervalId);
+  },
+};
+</script>
+
+<template>
+  <time
+    v-gl-tooltip
+    :datetime="endDateString"
+    :title="endDateString"
+  >
+    {{ remainingTime }}
+  </time>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index 26f9d5ddc91..cddebfae115 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -8,7 +8,7 @@ let iconValidator = () => true;
 */
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line global-require
-  const data = require('@gitlab-org/gitlab-svgs/dist/icons.json');
+  const data = require('@gitlab/svgs/dist/icons.json');
   const { icons } = data;
   iconValidator = value => {
     if (icons.includes(value)) {
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index feb7b8f227e..b0a93794013 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -1,9 +1,9 @@
 <script>
-import { Link } from '@gitlab-org/gitlab-ui';
+import { GlLink } from '@gitlab-org/gitlab-ui';
 
 export default {
   components: {
-    'gl-link': Link,
+    GlLink,
   },
   props: {
     markdownDocsPath: {
diff --git a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
index 1d9c9220469..f56414c3c63 100644
--- a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
@@ -1,10 +1,10 @@
 <script>
-import { SkeletonLoading } from '@gitlab-org/gitlab-ui';
+import { GlSkeletonLoading } from '@gitlab-org/gitlab-ui';
 
 export default {
   name: 'SkeletonNote',
   components: {
-    SkeletonLoading,
+    GlSkeletonLoading,
   },
 };
 </script>
@@ -17,7 +17,7 @@ export default {
       <div class="timeline-content">
         <div class="note-header"></div>
         <div class="note-body">
-          <skeleton-loading />
+          <gl-skeleton-loading />
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/pagination_links.vue b/app/assets/javascripts/vue_shared/components/pagination_links.vue
index 1f2a679c145..89dcf049f6e 100644
--- a/app/assets/javascripts/vue_shared/components/pagination_links.vue
+++ b/app/assets/javascripts/vue_shared/components/pagination_links.vue
@@ -1,7 +1,11 @@
 <script>
+import { GlPagination } from '@gitlab-org/gitlab-ui';
 import { s__ } from '../../locale';
 
 export default {
+  components: {
+    GlPagination,
+  },
   props: {
     change: {
       type: Function,
diff --git a/app/assets/javascripts/vue_shared/components/pikaday.vue b/app/assets/javascripts/vue_shared/components/pikaday.vue
index 782d8e3abf6..26c99aecae4 100644
--- a/app/assets/javascripts/vue_shared/components/pikaday.vue
+++ b/app/assets/javascripts/vue_shared/components/pikaday.vue
@@ -1,6 +1,6 @@
 <script>
 import Pikaday from 'pikaday';
-import { parsePikadayDate, pikadayToString } from '../../lib/utils/datefix';
+import { parsePikadayDate, pikadayToString } from '~/lib/utils/datetime_utility';
 
 export default {
   name: 'DatePicker',
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue
index 7f1eb6bcec4..5841db52704 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon.vue
@@ -1,34 +1,50 @@
 <script>
-  export default {
-    name: 'CollapsedCalendarIcon',
-    props: {
-      containerClass: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      text: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      showIcon: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+import tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  name: 'CollapsedCalendarIcon',
+  directives: {
+    tooltip,
+  },
+  props: {
+    containerClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    text: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showIcon: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    tooltipText: {
+      type: String,
+      required: false,
+      default: '',
     },
-    methods: {
-      click() {
-        this.$emit('click');
-      },
+  },
+  methods: {
+    click() {
+      this.$emit('click');
     },
-  };
+  },
+};
 </script>
 
 <template>
   <div
+    v-tooltip
     :class="containerClass"
+    :title="tooltipText"
+    data-container="body"
+    data-placement="left"
+    data-html="true"
+    data-boundary="viewport"
     @click="click"
   >
     <i
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
index dac438a702d..174c29809ac 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue
@@ -1,88 +1,87 @@
 <script>
-  import { dateInWords } from '../../../lib/utils/datetime_utility';
-  import toggleSidebar from './toggle_sidebar.vue';
-  import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
+import { __ } from '~/locale';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { dateInWords, timeFor } from '~/lib/utils/datetime_utility';
+import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
 
-  export default {
-    name: 'SidebarCollapsedGroupedDatePicker',
-    components: {
-      toggleSidebar,
-      collapsedCalendarIcon,
+export default {
+  name: 'SidebarCollapsedGroupedDatePicker',
+  components: {
+    collapsedCalendarIcon,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    props: {
-      collapsed: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      showToggleSidebar: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      minDate: {
-        type: Date,
-        required: false,
-        default: null,
-      },
-      maxDate: {
-        type: Date,
-        required: false,
-        default: null,
-      },
-      disableClickableIcons: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    minDate: {
+      type: Date,
+      required: false,
+      default: null,
     },
-    computed: {
-      hasMinAndMaxDates() {
-        return this.minDate && this.maxDate;
-      },
-      hasNoMinAndMaxDates() {
-        return !this.minDate && !this.maxDate;
-      },
-      showMinDateBlock() {
-        return this.minDate || this.hasNoMinAndMaxDates;
-      },
-      showFromText() {
-        return !this.maxDate && this.minDate;
-      },
-      iconClass() {
-        const disabledClass = this.disableClickableIcons ? 'disabled' : '';
-        return `block sidebar-collapsed-icon calendar-icon ${disabledClass}`;
-      },
+    maxDate: {
+      type: Date,
+      required: false,
+      default: null,
     },
-    methods: {
-      toggleSidebar() {
-        this.$emit('toggleCollapse');
-      },
-      dateText(dateType = 'min') {
-        const date = this[`${dateType}Date`];
-        const dateWords = dateInWords(date, true);
-        const parsedDateWords = dateWords ? dateWords.replace(',', '') : dateWords;
+    disableClickableIcons: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    hasMinAndMaxDates() {
+      return this.minDate && this.maxDate;
+    },
+    hasNoMinAndMaxDates() {
+      return !this.minDate && !this.maxDate;
+    },
+    showMinDateBlock() {
+      return this.minDate || this.hasNoMinAndMaxDates;
+    },
+    showFromText() {
+      return !this.maxDate && this.minDate;
+    },
+    iconClass() {
+      const disabledClass = this.disableClickableIcons ? 'disabled' : '';
+      return `sidebar-collapsed-icon calendar-icon ${disabledClass}`;
+    },
+  },
+  methods: {
+    toggleSidebar() {
+      this.$emit('toggleCollapse');
+    },
+    dateText(dateType = 'min') {
+      const date = this[`${dateType}Date`];
+      const dateWords = dateInWords(date, true);
+      const parsedDateWords = dateWords ? dateWords.replace(',', '') : dateWords;
+
+      return date ? parsedDateWords : __('None');
+    },
+    tooltipText(dateType = 'min') {
+      const defaultText = dateType === 'min' ? __('Start date') : __('Due date');
+      const date = this[`${dateType}Date`];
+      const timeAgo = dateType === 'min' ? this.timeFormated(date) : timeFor(date);
+      const dateText = date ? [this.dateText(dateType), `(${timeAgo})`].join(' ') : '';
 
-        return date ? parsedDateWords : 'None';
-      },
+      if (date) {
+        return [defaultText, dateText].join('<br />');
+      }
+      return __('Start and due date');
     },
-  };
+  },
+};
 </script>
 
 <template>
   <div class="block sidebar-grouped-item">
-    <div
-      v-if="showToggleSidebar"
-      class="issuable-sidebar-header"
-    >
-      <toggle-sidebar
-        :collapsed="collapsed"
-        @toggle="toggleSidebar"
-      />
-    </div>
     <collapsed-calendar-icon
       v-if="showMinDateBlock"
       :container-class="iconClass"
+      :tooltip-text="tooltipText('min')"
       @click="toggleSidebar"
     >
       <span class="sidebar-collapsed-value">
@@ -99,7 +98,7 @@
     <collapsed-calendar-icon
       v-if="maxDate"
       :container-class="iconClass"
-      :show-icon="!minDate"
+      :tooltip-text="tooltipText('max')"
       @click="toggleSidebar"
     >
       <span class="sidebar-collapsed-value">
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 af297f3c408..0d5fc07e6e3 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
@@ -14,7 +14,10 @@ export default {
   },
   computed: {
     labelsList() {
-      const labelsString = this.labels.slice(0, 5).map(label => label.title).join(', ');
+      const labelsString = this.labels
+        .slice(0, 5)
+        .map(label => label.title)
+        .join(', ');
 
       if (this.labels.length > 5) {
         return sprintf(s__('LabelSelect|%{labelsString}, and %{remainingLabelCount} more'), {
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
index 14cb44b8619..86c7498a092 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
@@ -17,14 +17,14 @@
 
 */
 
-import { Link } from '@gitlab-org/gitlab-ui';
+import { GlLink } from '@gitlab-org/gitlab-ui';
 import userAvatarImage from './user_avatar_image.vue';
 import tooltip from '../../directives/tooltip';
 
 export default {
   name: 'UserAvatarLink',
   components: {
-    'gl-link': Link,
+    GlLink,
     userAvatarImage,
   },
   directives: {
diff --git a/app/assets/javascripts/vue_shared/directives/tooltip.js b/app/assets/javascripts/vue_shared/directives/tooltip.js
index 4f2412ce520..549d27e96d9 100644
--- a/app/assets/javascripts/vue_shared/directives/tooltip.js
+++ b/app/assets/javascripts/vue_shared/directives/tooltip.js
@@ -9,6 +9,14 @@ export default {
 
   componentUpdated(el) {
     $(el).tooltip('_fixTitle');
+
+    // update visible tooltips
+    const tooltipInstance = $(el).data('bs.tooltip');
+    const tip = tooltipInstance.getTipElement();
+    tooltipInstance.setElementContent(
+      $(tip.querySelectorAll('.tooltip-inner')),
+      tooltipInstance.getTitle(),
+    );
   },
 
   unbind(el) {