Add latest changes from gitlab-org/gitlab@master

6 files changed, 55 insertions, 4 deletions

diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js
index 794391da103..0ffb31b323b 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -470,7 +470,7 @@ export const pikadayToString = date => {
  */
 export const parseSeconds = (
   seconds,
-  { daysPerWeek = 5, hoursPerDay = 8, limitToHours = false } = {},
+  { daysPerWeek = 5, hoursPerDay = 8, limitToHours = false, limitToDays = false } = {},
 ) => {
   const DAYS_PER_WEEK = daysPerWeek;
   const HOURS_PER_DAY = hoursPerDay;
@@ -486,8 +486,11 @@ export const parseSeconds = (
     minutes: 1,
   };
 
-  if (limitToHours) {
+  if (limitToDays || limitToHours) {
     timePeriodConstraints.weeks = 0;
+  }
+
+  if (limitToHours) {
     timePeriodConstraints.days = 0;
   }
 
@@ -612,3 +615,44 @@ export const secondsToDays = seconds => Math.round(seconds / 86400);
  * @return {Date} the date following the date provided
  */
 export const dayAfter = date => new Date(newDate(date).setDate(date.getDate() + 1));
+
+/**
+ * Mimics the behaviour of the rails distance_of_time_in_words function
+ * https://api.rubyonrails.org/v6.0.1/classes/ActionView/Helpers/DateHelper.html#method-i-distance_of_time_in_words
+ * 0 < -> 29 secs                                         => less than a minute
+ * 30 secs < -> 1 min, 29 secs                            => 1 minute
+ * 1 min, 30 secs < -> 44 mins, 29 secs                   => [2..44] minutes
+ * 44 mins, 30 secs < -> 89 mins, 29 secs                 => about 1 hour
+ * 89 mins, 30 secs < -> 23 hrs, 59 mins, 29 secs         => about[2..24]hours
+ * 23 hrs, 59 mins, 30 secs < -> 41 hrs, 59 mins, 29 secs => 1 day
+ * 41 hrs, 59 mins, 30 secs                               => x days
+ *
+ * @param {Number} seconds
+ * @return {String} approximated time
+ */
+export const approximateDuration = (seconds = 0) => {
+  if (!_.isNumber(seconds) || seconds < 0) {
+    return '';
+  }
+
+  const ONE_MINUTE_LIMIT = 90; // 1 minute 30s
+  const MINUTES_LIMIT = 2670; // 44 minutes 30s
+  const ONE_HOUR_LIMIT = 5370; // 89 minutes 30s
+  const HOURS_LIMIT = 86370; // 23 hours 59 minutes 30s
+  const ONE_DAY_LIMIT = 151170; // 41 hours 59 minutes 30s
+
+  const { days = 0, hours = 0, minutes = 0 } = parseSeconds(seconds, {
+    daysPerWeek: 7,
+    hoursPerDay: 24,
+    limitToDays: true,
+  });
+
+  if (seconds < 30) {
+    return __('less than a minute');
+  } else if (seconds < MINUTES_LIMIT) {
+    return n__('1 minute', '%d minutes', seconds < ONE_MINUTE_LIMIT ? 1 : minutes);
+  } else if (seconds < HOURS_LIMIT) {
+    return n__('about 1 hour', 'about %d hours', seconds < ONE_HOUR_LIMIT ? 1 : hours);
+  }
+  return n__('1 day', '%d days', seconds < ONE_DAY_LIMIT ? 1 : days);
+};
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index af4ac024e4f..fee5d6d5e3a 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -136,7 +136,11 @@ export default {
             >
               <strong>{{ __('New! Suggest changes directly') }}</strong>
               <p class="mb-2">
-                {{ __('Suggest code changes which are immediately applied. Try it out!') }}
+                {{
+                  __(
+                    'Suggest code changes which can be immediately applied in one click. Try it out!',
+                  )
+                }}
               </p>
               <gl-button variant="primary" size="sm" @click="handleSuggestDismissed">
                 {{ __('Got it') }}
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index a53f5d85949..9ae313db4c1 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -20,6 +20,7 @@
 }
 
 .ci-status-icon-pending,
+.ci-status-icon-waiting-for-resource,
 .ci-status-icon-failed-with-warnings,
 .ci-status-icon-success-with-warnings {
   svg {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 09b335f9ba2..11d5f4cd374 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -288,7 +288,7 @@
   }
 
   .issuable-sidebar {
-    width: calc(100% + 100px);
+    width: 100%;
     height: 100%;
     overflow-y: scroll;
     overflow-x: hidden;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 364fe3da71e..72657a64794 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -795,6 +795,7 @@
   }
 
   &.ci-status-icon-pending,
+  &.ci-status-icon-waiting-for-resource,
   &.ci-status-icon-success-with-warnings {
     @include mini-pipeline-graph-color($white, $orange-100, $orange-200, $orange-500, $orange-600, $orange-700);
   }
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 5d6a4b7cd13..4f3d6fb0d44 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -42,6 +42,7 @@
   }
 
   &.ci-pending,
+  &.ci-waiting-for-resource,
   &.ci-failed-with-warnings,
   &.ci-success-with-warnings {
     @include status-color($orange-100, $orange-500, $orange-700);