Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40

2 files changed, 226 insertions, 186 deletions

diff --git a/app/assets/javascripts/lib/utils/unit_format/formatter_factory.js b/app/assets/javascripts/lib/utils/unit_format/formatter_factory.js
index 15f9512fe92..418cc69bf5a 100644
--- a/app/assets/javascripts/lib/utils/unit_format/formatter_factory.js
+++ b/app/assets/javascripts/lib/utils/unit_format/formatter_factory.js
@@ -1,39 +1,30 @@
+import { formatNumber } from '~/locale';
+
 /**
- * Formats a number as string using `toLocaleString`.
+ * Formats a number as a string using `toLocaleString`.
  *
  * @param {Number} number to be converted
- * @param {params} Parameters
- * @param {params.fractionDigits} Number of decimal digits
- * to display, defaults to using `toLocaleString` defaults.
- * @param {params.maxLength} Max output char lenght at the
+ *
+ * @param {options.maxCharLength} Max output char length at the
  * expense of precision, if the output is longer than this,
  * the formatter switches to using exponential notation.
- * @param {params.factor} Value is multiplied by this factor,
- * useful for value normalization.
- * @returns Formatted value
+ *
+ * @param {options.valueFactor} Value is multiplied by this factor,
+ * useful for value normalization or to alter orders of magnitude.
+ *
+ * @param {options} Other options to be passed to
+ * `formatNumber` such as `valueFactor`, `unit` and `style`.
+ *
  */
-function formatNumber(
-  value,
-  { fractionDigits = undefined, valueFactor = 1, style = undefined, maxLength = undefined },
-) {
-  if (value === null) {
-    return '';
-  }
-
-  const locale = document.documentElement.lang || undefined;
-  const num = value * valueFactor;
-  const formatted = num.toLocaleString(locale, {
-    minimumFractionDigits: fractionDigits,
-    maximumFractionDigits: fractionDigits,
-    style,
-  });
+const formatNumberNormalized = (value, { maxCharLength, valueFactor = 1, ...options }) => {
+  const formatted = formatNumber(value * valueFactor, options);
 
-  if (maxLength !== undefined && formatted.length > maxLength) {
+  if (maxCharLength !== undefined && formatted.length > maxCharLength) {
     // 123456 becomes 1.23e+8
-    return num.toExponential(2);
+    return value.toExponential(2);
   }
   return formatted;
-}
+};
 
 /**
  * Formats a number as a string scaling it up according to units.
@@ -76,7 +67,10 @@ const scaledFormatter = (units, unitFactor = 1000) => {
 
     const unit = units[scale];
 
-    return `${formatNumber(num, { fractionDigits })}${unit}`;
+    return `${formatNumberNormalized(num, {
+      maximumFractionDigits: fractionDigits,
+      minimumFractionDigits: fractionDigits,
+    })}${unit}`;
   };
 };
 
@@ -84,8 +78,14 @@ const scaledFormatter = (units, unitFactor = 1000) => {
  * Returns a function that formats a number as a string.
  */
 export const numberFormatter = (style = 'decimal', valueFactor = 1) => {
-  return (value, fractionDigits, maxLength) => {
-    return `${formatNumber(value, { fractionDigits, maxLength, valueFactor, style })}`;
+  return (value, fractionDigits, maxCharLength) => {
+    return `${formatNumberNormalized(value, {
+      maxCharLength,
+      valueFactor,
+      style,
+      maximumFractionDigits: fractionDigits,
+      minimumFractionDigits: fractionDigits,
+    })}`;
   };
 };
 
@@ -93,9 +93,15 @@ export const numberFormatter = (style = 'decimal', valueFactor = 1) => {
  * Returns a function that formats a number as a string with a suffix.
  */
 export const suffixFormatter = (unit = '', valueFactor = 1) => {
-  return (value, fractionDigits, maxLength) => {
-    const length = maxLength !== undefined ? maxLength - unit.length : undefined;
-    return `${formatNumber(value, { fractionDigits, maxLength: length, valueFactor })}${unit}`;
+  return (value, fractionDigits, maxCharLength) => {
+    const length = maxCharLength !== undefined ? maxCharLength - unit.length : undefined;
+
+    return `${formatNumberNormalized(value, {
+      maxCharLength: length,
+      valueFactor,
+      maximumFractionDigits: fractionDigits,
+      minimumFractionDigits: fractionDigits,
+    })}${unit}`;
   };
 };
 
diff --git a/app/assets/javascripts/lib/utils/unit_format/index.js b/app/assets/javascripts/lib/utils/unit_format/index.js
index 9f979f7ea4b..bc82c6aa74d 100644
--- a/app/assets/javascripts/lib/utils/unit_format/index.js
+++ b/app/assets/javascripts/lib/utils/unit_format/index.js
@@ -46,227 +46,261 @@ export const SUPPORTED_FORMATS = {
 };
 
 /**
- * Returns a function that formats number to different units
- * @param {String} format - Format to use, must be one of the SUPPORTED_FORMATS. Defaults to engineering notation.
+ * Returns a function that formats number to different units.
  *
+ * Used for dynamic formatting, for more convenience, use the functions below.
  *
+ * @param {String} format - Format to use, must be one of the SUPPORTED_FORMATS. Defaults to engineering notation.
  */
 export const getFormatter = (format = SUPPORTED_FORMATS.engineering) => {
   // Number
-
   if (format === SUPPORTED_FORMATS.number) {
-    /**
-     * Formats a number
-     *
-     * @function
-     * @param {Number} value - Number to format
-     * @param {Number} fractionDigits - precision decimals
-     * @param {Number} maxLength - Max length of formatted number
-     * if length is exceeded, exponential format is used.
-     */
     return numberFormatter();
   }
   if (format === SUPPORTED_FORMATS.percent) {
-    /**
-     * Formats a percentge (0 - 1)
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is rendered as `100%`
-     * @param {Number} fractionDigits - number of precision decimals
-     * @param {Number} maxLength - Max length of formatted number
-     * if length is exceeded, exponential format is used.
-     */
     return numberFormatter('percent');
   }
   if (format === SUPPORTED_FORMATS.percentHundred) {
-    /**
-     * Formats a percentge (0 to 100)
-     *
-     * @function
-     * @param {Number} value - Number to format, `100` is rendered as `100%`
-     * @param {Number} fractionDigits - number of precision decimals
-     * @param {Number} maxLength - Max length of formatted number
-     * if length is exceeded, exponential format is used.
-     */
     return numberFormatter('percent', 1 / 100);
   }
 
   // Durations
-
   if (format === SUPPORTED_FORMATS.seconds) {
-    /**
-     * Formats a number of seconds
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is rendered as `1s`
-     * @param {Number} fractionDigits - number of precision decimals
-     * @param {Number} maxLength - Max length of formatted number
-     * if length is exceeded, exponential format is used.
-     */
     return suffixFormatter(s__('Units|s'));
   }
   if (format === SUPPORTED_FORMATS.milliseconds) {
-    /**
-     * Formats a number of milliseconds with ms as units
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is formatted as `1ms`
-     * @param {Number} fractionDigits - number of precision decimals
-     * @param {Number} maxLength - Max length of formatted number
-     * if length is exceeded, exponential format is used.
-     */
     return suffixFormatter(s__('Units|ms'));
   }
 
   // Digital (Metric)
-
   if (format === SUPPORTED_FORMATS.decimalBytes) {
-    /**
-     * Formats a number of bytes scaled up to larger digital
-     * units for larger numbers.
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is formatted as `1B`
-     * @param {Number} fractionDigits - number of precision decimals
-     */
     return scaledSIFormatter('B');
   }
   if (format === SUPPORTED_FORMATS.kilobytes) {
-    /**
-     * Formats a number of kilobytes scaled up to larger digital
-     * units for larger numbers.
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is formatted as `1kB`
-     * @param {Number} fractionDigits - number of precision decimals
-     */
     return scaledSIFormatter('B', 1);
   }
   if (format === SUPPORTED_FORMATS.megabytes) {
-    /**
-     * Formats a number of megabytes scaled up to larger digital
-     * units for larger numbers.
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is formatted as `1MB`
-     * @param {Number} fractionDigits - number of precision decimals
-     */
     return scaledSIFormatter('B', 2);
   }
   if (format === SUPPORTED_FORMATS.gigabytes) {
-    /**
-     * Formats a number of gigabytes scaled up to larger digital
-     * units for larger numbers.
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is formatted as `1GB`
-     * @param {Number} fractionDigits - number of precision decimals
-     */
     return scaledSIFormatter('B', 3);
   }
   if (format === SUPPORTED_FORMATS.terabytes) {
-    /**
-     * Formats a number of terabytes scaled up to larger digital
-     * units for larger numbers.
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is formatted as `1GB`
-     * @param {Number} fractionDigits - number of precision decimals
-     */
     return scaledSIFormatter('B', 4);
   }
   if (format === SUPPORTED_FORMATS.petabytes) {
-    /**
-     * Formats a number of petabytes scaled up to larger digital
-     * units for larger numbers.
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is formatted as `1PB`
-     * @param {Number} fractionDigits - number of precision decimals
-     */
     return scaledSIFormatter('B', 5);
   }
 
   // Digital (IEC)
-
   if (format === SUPPORTED_FORMATS.bytes) {
-    /**
-     * Formats a number of bytes scaled up to larger digital
-     * units for larger numbers.
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is formatted as `1B`
-     * @param {Number} fractionDigits - number of precision decimals
-     */
     return scaledBinaryFormatter('B');
   }
   if (format === SUPPORTED_FORMATS.kibibytes) {
-    /**
-     * Formats a number of kilobytes scaled up to larger digital
-     * units for larger numbers.
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is formatted as `1kB`
-     * @param {Number} fractionDigits - number of precision decimals
-     */
     return scaledBinaryFormatter('B', 1);
   }
   if (format === SUPPORTED_FORMATS.mebibytes) {
-    /**
-     * Formats a number of megabytes scaled up to larger digital
-     * units for larger numbers.
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is formatted as `1MB`
-     * @param {Number} fractionDigits - number of precision decimals
-     */
     return scaledBinaryFormatter('B', 2);
   }
   if (format === SUPPORTED_FORMATS.gibibytes) {
-    /**
-     * Formats a number of gigabytes scaled up to larger digital
-     * units for larger numbers.
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is formatted as `1GB`
-     * @param {Number} fractionDigits - number of precision decimals
-     */
     return scaledBinaryFormatter('B', 3);
   }
   if (format === SUPPORTED_FORMATS.tebibytes) {
-    /**
-     * Formats a number of terabytes scaled up to larger digital
-     * units for larger numbers.
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is formatted as `1GB`
-     * @param {Number} fractionDigits - number of precision decimals
-     */
     return scaledBinaryFormatter('B', 4);
   }
   if (format === SUPPORTED_FORMATS.pebibytes) {
-    /**
-     * Formats a number of petabytes scaled up to larger digital
-     * units for larger numbers.
-     *
-     * @function
-     * @param {Number} value - Number to format, `1` is formatted as `1PB`
-     * @param {Number} fractionDigits - number of precision decimals
-     */
     return scaledBinaryFormatter('B', 5);
   }
 
+  // Default
   if (format === SUPPORTED_FORMATS.engineering) {
-    /**
-     * Formats via engineering notation
-     *
-     * @function
-     * @param {Number} value - Value to format
-     * @param {Number} fractionDigits - precision decimals - Defaults to 2
-     */
     return engineeringNotation;
   }
 
   // Fail so client library addresses issue
   throw TypeError(`${format} is not a valid number format`);
 };
+
+/**
+ * Formats a number
+ *
+ * @function
+ * @param {Number} value - Number to format
+ * @param {Number} fractionDigits - precision decimals
+ * @param {Number} maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ */
+export const number = getFormatter(SUPPORTED_FORMATS.number);
+
+/**
+ * Formats a percentage (0 - 1)
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is rendered as `100%`
+ * @param {Number} fractionDigits - number of precision decimals
+ * @param {Number} maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ */
+export const percent = getFormatter(SUPPORTED_FORMATS.percent);
+
+/**
+ * Formats a percentage (0 to 100)
+ *
+ * @function
+ * @param {Number} value - Number to format, `100` is rendered as `100%`
+ * @param {Number} fractionDigits - number of precision decimals
+ * @param {Number} maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ */
+export const percentHundred = getFormatter(SUPPORTED_FORMATS.percentHundred);
+
+/**
+ * Formats a number of seconds
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is rendered as `1s`
+ * @param {Number} fractionDigits - number of precision decimals
+ * @param {Number} maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ */
+export const seconds = getFormatter(SUPPORTED_FORMATS.seconds);
+
+/**
+ * Formats a number of milliseconds with ms as units
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is formatted as `1ms`
+ * @param {Number} fractionDigits - number of precision decimals
+ * @param {Number} maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ */
+export const milliseconds = getFormatter(SUPPORTED_FORMATS.milliseconds);
+
+/**
+ * Formats a number of bytes scaled up to larger digital
+ * units for larger numbers.
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is formatted as `1B`
+ * @param {Number} fractionDigits - number of precision decimals
+ */
+export const decimalBytes = getFormatter(SUPPORTED_FORMATS.decimalBytes);
+
+/**
+ * Formats a number of kilobytes scaled up to larger digital
+ * units for larger numbers.
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is formatted as `1kB`
+ * @param {Number} fractionDigits - number of precision decimals
+ */
+export const kilobytes = getFormatter(SUPPORTED_FORMATS.kilobytes);
+
+/**
+ * Formats a number of megabytes scaled up to larger digital
+ * units for larger numbers.
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is formatted as `1MB`
+ * @param {Number} fractionDigits - number of precision decimals
+ */
+export const megabytes = getFormatter(SUPPORTED_FORMATS.megabytes);
+
+/**
+ * Formats a number of gigabytes scaled up to larger digital
+ * units for larger numbers.
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is formatted as `1GB`
+ * @param {Number} fractionDigits - number of precision decimals
+ */
+export const gigabytes = getFormatter(SUPPORTED_FORMATS.gigabytes);
+
+/**
+ * Formats a number of terabytes scaled up to larger digital
+ * units for larger numbers.
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is formatted as `1GB`
+ * @param {Number} fractionDigits - number of precision decimals
+ */
+export const terabytes = getFormatter(SUPPORTED_FORMATS.terabytes);
+
+/**
+ * Formats a number of petabytes scaled up to larger digital
+ * units for larger numbers.
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is formatted as `1PB`
+ * @param {Number} fractionDigits - number of precision decimals
+ */
+export const petabytes = getFormatter(SUPPORTED_FORMATS.petabytes);
+
+/**
+ * Formats a number of bytes scaled up to larger digital
+ * units for larger numbers.
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is formatted as `1B`
+ * @param {Number} fractionDigits - number of precision decimals
+ */
+export const bytes = getFormatter(SUPPORTED_FORMATS.bytes);
+
+/**
+ * Formats a number of kilobytes scaled up to larger digital
+ * units for larger numbers.
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is formatted as `1kB`
+ * @param {Number} fractionDigits - number of precision decimals
+ */
+export const kibibytes = getFormatter(SUPPORTED_FORMATS.kibibytes);
+
+/**
+ * Formats a number of megabytes scaled up to larger digital
+ * units for larger numbers.
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is formatted as `1MB`
+ * @param {Number} fractionDigits - number of precision decimals
+ */
+export const mebibytes = getFormatter(SUPPORTED_FORMATS.mebibytes);
+
+/**
+ * Formats a number of gigabytes scaled up to larger digital
+ * units for larger numbers.
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is formatted as `1GB`
+ * @param {Number} fractionDigits - number of precision decimals
+ */
+export const gibibytes = getFormatter(SUPPORTED_FORMATS.gibibytes);
+
+/**
+ * Formats a number of terabytes scaled up to larger digital
+ * units for larger numbers.
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is formatted as `1GB`
+ * @param {Number} fractionDigits - number of precision decimals
+ */
+export const tebibytes = getFormatter(SUPPORTED_FORMATS.tebibytes);
+
+/**
+ * Formats a number of petabytes scaled up to larger digital
+ * units for larger numbers.
+ *
+ * @function
+ * @param {Number} value - Number to format, `1` is formatted as `1PB`
+ * @param {Number} fractionDigits - number of precision decimals
+ */
+export const pebibytes = getFormatter(SUPPORTED_FORMATS.pebibytes);
+
+/**
+ * Formats via engineering notation
+ *
+ * @function
+ * @param {Number} value - Value to format
+ * @param {Number} fractionDigits - precision decimals - Defaults to 2
+ */
+export const engineering = getFormatter();