Updating date-fns library from 1.x to 2.x

changelog/10848.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Upgrade date-fns from 1.3.0 to 2.16.1.
+```

ui/app/components/pricing-metrics-dates.js

@@ -1,17 +1,17 @@
 /**
  * @module PricingMetricsDates
  * PricingMetricsDates components are used on the Pricing Metrics page to handle queries related to pricing metrics.
- * This component assumes that query parameters (as in, from route params) are being passed in with the format MM-YYYY,
- * while the inputs expect a format of MM/YYYY.
+ * This component assumes that query parameters (as in, from route params) are being passed in with the format MM-yyyy,
+ * while the inputs expect a format of MM/yyyy.
  *
  * @example
  * ```js
  * <PricingMetricsDates @resultStart="2020-03-01T00:00:00Z" @resultEnd="2020-08-31T23:59:59Z" @queryStart="03-2020" @queryEnd="08-2020" />
  * ```
  * @param {object} resultStart - resultStart is the start date of the metrics returned. Should be a valid date string that the built-in Date() fn can parse
  * @param {object} resultEnd - resultEnd is the end date of the metrics returned. Should be a valid date string that the built-in Date() fn can parse
- * @param {string} [queryStart] - queryStart is the route param (formatted MM-YYYY) that the result will be measured against for showing discrepancy warning
- * @param {string} [queryEnd] - queryEnd is the route param (formatted MM-YYYY) that the result will be measured against for showing discrepancy warning
+ * @param {string} [queryStart] - queryStart is the route param (formatted MM-yyyy) that the result will be measured against for showing discrepancy warning
+ * @param {string} [queryEnd] - queryEnd is the route param (formatted MM-yyyy) that the result will be measured against for showing discrepancy warning
  * @param {number} [defaultSpan=12] - setting for default time between start and end input dates
  * @param {number} [retentionMonths=24] - setting for the retention months, which informs valid dates to query by
  */
@@ -100,10 +100,10 @@ export default Component.extend({
 
   error: computed('end', 'endDate', 'retentionMonths', 'start', 'startDate', function() {
     if (!this.startDate) {
-      return 'Start date is invalid. Please use format MM/YYYY';
+      return 'Start date is invalid. Please use format MM/yyyy';
     }
     if (!this.endDate) {
-      return 'End date is invalid. Please use format MM/YYYY';
+      return 'End date is invalid. Please use format MM/yyyy';
     }
     if (isBefore(this.endDate, this.startDate)) {
       return 'Start date is after end date';
@@ -114,7 +114,7 @@ export default Component.extend({
     }
     const earliestRetained = startOfMonth(subMonths(lastMonthAvailable, this.retentionMonths));
     if (isBefore(this.startDate, earliestRetained)) {
-      return `No data retained before ${format(earliestRetained, 'MM/YYYY')} due to your settings`;
+      return `No data retained before ${format(earliestRetained, 'MM/yyyy')} due to your settings`;
     }
 
     return null;
@@ -130,24 +130,24 @@ export default Component.extend({
       initialEnd = parseDateString(this.queryEnd, '-');
     } else {
       // if query isn't passed in, set it so that showResultsWarning works
-      this.queryEnd = format(initialEnd, 'MM-YYYY');
+      this.queryEnd = format(initialEnd, 'MM-yyyy');
     }
     initialStart = subMonths(initialEnd, this.defaultSpan);
     if (this.queryStart) {
       initialStart = parseDateString(this.queryStart, '-');
     } else {
       // if query isn't passed in, set it so that showResultsWarning works
-      this.queryStart = format(initialStart, 'MM-YYYY');
+      this.queryStart = format(initialStart, 'MM-yyyy');
     }
 
-    this.start = format(initialStart, 'MM/YYYY');
-    this.end = format(initialEnd, 'MM/YYYY');
+    this.start = format(initialStart, 'MM/yyyy');
+    this.end = format(initialEnd, 'MM/yyyy');
   },
 
   actions: {
     handleQuery() {
-      const start = format(this.startDate, 'MM-YYYY');
-      const end = format(this.endDate, 'MM-YYYY');
+      const start = format(this.startDate, 'MM-yyyy');
+      const end = format(this.endDate, 'MM-yyyy');
       this.router.transitionTo('vault.cluster.metrics', {
         queryParams: {
           start,

ui/app/components/tool-actions-form.js

@@ -3,7 +3,7 @@ import { assign } from '@ember/polyfills';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import { setProperties, computed, set } from '@ember/object';
-import { addSeconds } from 'date-fns';
+import { addSeconds, parseISO } from 'date-fns';
 
 const DEFAULTS = {
   token: null,
@@ -67,8 +67,8 @@ export default Component.extend(DEFAULTS, {
     if (!(creation_time && creation_ttl)) {
       return null;
     }
-
-    return addSeconds(creation_time, creation_ttl);
+    // returns new Date with seconds added.
+    return addSeconds(parseISO(creation_time), creation_ttl);
   }),
 
   handleError(e) {

ui/app/helpers/date-from-now.js

@@ -1,8 +1,11 @@
 import { helper } from '@ember/component/helper';
-import { distanceInWordsToNow } from 'date-fns';
+import { formatDistanceToNow } from 'date-fns';
 
 export function dateFromNow([date], options = {}) {
-  return distanceInWordsToNow(date, options);
+  // check first if string. If it is, it could be ISO format or UTC, either way create a new date object
+  // otherwise it's a number or object and just return
+  let newDate = typeof date === 'string' ? new Date(date) : date;
+  return formatDistanceToNow(newDate, { ...options });
 }
 
 export default helper(dateFromNow);

ui/app/helpers/parse-date-string.js

@@ -2,7 +2,7 @@ import { helper } from '@ember/component/helper';
 import { isValid } from 'date-fns';
 
 export function parseDateString(date, separator = '-') {
-  // Expects format MM-YYYY by default: no dates
+  // Expects format MM-yyyy by default: no dates
   let datePieces = date.split(separator);
   if (datePieces.length === 2) {
     if (datePieces[0] < 1 || datePieces[0] > 12) {
@@ -14,7 +14,7 @@ export function parseDateString(date, separator = '-') {
     }
   }
   // what to return if not valid?
-  throw new Error(`Please use format MM${separator}YYYY`);
+  throw new Error(`Please use format MM${separator}yyyy`);
 }
 
 export default helper(parseDateString);

ui/app/routes/vault/cluster/metrics/index.js

@@ -1,25 +1,26 @@
 import Route from '@ember/routing/route';
 import ClusterRoute from 'vault/mixins/cluster-route';
 import { hash } from 'rsvp';
-import { format, addDays } from 'date-fns';
+import { getTime } from 'date-fns';
 import { parseDateString } from 'vault/helpers/parse-date-string';
 
 const getActivityParams = ({ start, end }) => {
-  // Expects MM-YYYY format
+  // Expects MM-yyyy format
   // TODO: minStart, maxEnd
   let params = {};
   if (start) {
     let startDate = parseDateString(start);
     if (startDate) {
       // TODO: Replace with formatRFC3339 when date-fns is updated
-      params.start_time = format(addDays(startDate, 1), 'X');
+      // converts to milliseconds, divide by 1000 to get epoch
+      params.start_time = getTime(startDate) / 1000;
     }
   }
   if (end) {
     let endDate = parseDateString(end);
     if (endDate) {
       // TODO: Replace with formatRFC3339 when date-fns is updated
-      params.end_time = format(addDays(endDate, 10), 'X');
+      params.end_time = getTime(endDate) / 1000;
     }
   }
   return params;

ui/app/templates/components/auth-info.hbs

@@ -10,7 +10,7 @@
           <li class="action">
             <AlertBanner @type="warning" @message="We've stopped auto-renewing your token due to inactivity.
                 It will expire in {{date-from-now auth.tokenExpirationDate interval=1000 hideSuffix=true}}.
-                on {{date-format auth.tokenExpirationDate 'MMMM Do YYYY, h:mm:ss a'}}" />
+                On {{date-format auth.tokenExpirationDate 'MMMM Do yyyy, h:mm:ss a'}}" />
           </li>
         {{/if}}
         <li class="action">

ui/app/templates/components/file-to-array-buffer.hbs

@@ -25,7 +25,7 @@
   </div>
   {{#if this.fileName}}
   <p class="help has-text-grey">
-    This file is {{this.fileSize}} and was created on {{date-format this.fileLastModified 'MMM DD, YYYY hh:mm:ss A'}}.
+    This file is {{this.fileSize}} and was created on {{date-format this.fileLastModified 'MMM dd, yyyy hh:mm:ss a'}}.
   </p>
   {{/if}}
   {{#if @fileHelpText}}

ui/app/templates/components/identity/item-alias/alias-details.hbs

@@ -17,11 +17,11 @@
 </InfoTableRow>
 <InfoTableRow @label="Created" @value={{@model.creationTime}}>
   <time datetime={{@model.creationTime}} title={{@model.creationTime}}>
-    {{date-format @model.creationTime 'MMM DD, YYYY [at] h:mm a'}}
+    {{date-format @model.creationTime 'MMM dd, yyyy [at] h:mm a'}}
   </time>
 </InfoTableRow>
 <InfoTableRow @label="Last Updated" @value={{@model.lastUpdateTime}}>
   <time datetime={{@model.lastUpdateTime}} title={{@model.lastUpdateTime}}>
-    {{date-format @model.lastUpdateTime 'MMM DD, YYYY [at] h:mm a'}}
+    {{date-format @model.lastUpdateTime 'MMM dd, yyyy [at] h:mm a'}}
   </time>
 </InfoTableRow>

ui/app/templates/components/identity/item-details.hbs

@@ -26,12 +26,12 @@
   </InfoTableRow>
   <InfoTableRow @label="Created" @value={{model.creationTime}}>
     <time datetime={{model.creationTime}} title={{model.creationTime}}>
-      {{date-format model.creationTime 'MMM DD, YYYY [at] h:mm a'}}
+      {{date-format model.creationTime 'MMM dd, yyyy [at] h:mm a'}}
     </time>
   </InfoTableRow>
   <InfoTableRow @label="Last Updated" @value={{model.lastUpdateTime}}>
     <time datetime={{model.lastUpdateTime}} title={{model.lastUpdateTime}}>
-      {{date-format model.lastUpdateTime 'MMM DD, YYYY [at] h:mm a'}}
+      {{date-format model.lastUpdateTime 'MMM dd, yyyy [at] h:mm a'}}
     </time>
   </InfoTableRow>
 </div>

ui/app/templates/components/license-info.hbs

@@ -54,7 +54,7 @@
       <div class="field box is-fullwidth is-shadowless is-paddingless is-marginless">
         <InfoTableRow @label="License ID" @value={{licenseId}} />
         <InfoTableRow @label="Valid from" @value={{startTime}}>
-          {{date-format model.startTime 'MMM DD, YYYY hh:mm:ss A'}} to {{date-format expirationTime 'MMM DD, YYYY hh:mm:ss A'}}
+          {{date-format startTime 'MMM dd, yyyy hh:mm:ss a'}} to {{date-format expirationTime 'MMM dd, yyyy hh:mm:ss a'}}
         </InfoTableRow>
       </div>
       <div class="field box is-fullwidth is-shadowless is-paddingless is-marginless">

ui/app/templates/components/pricing-metrics-config.hbs

@@ -38,7 +38,7 @@
   >
     <section class="modal-card-body">
       {{#if (eq model.enabled "On")}}
-        <p class="has-bottom-margin-s">Vault will start tracking data starting from today’s date, {{date-format (now) "D MMMM YYYY"}}. You will not be able to see or query usage until the end of the month.</p>
+        <p class="has-bottom-margin-s">Vault will start tracking data starting from today’s date, {{date-format (now) "d MMMM yyyy"}}. You will not be able to see or query usage until the end of the month.</p>
         <p>If you’ve previously enabled usage tracking, that historical data will still be available to you.</p>
       {{else}}
         <p class="has-bottom-margin-s">Turning usage tracking off means that all data for the current month will be deleted. You will still be able to query previous months.</p>

ui/app/templates/components/pricing-metrics-dates.hbs

@@ -38,7 +38,7 @@
 <div class="box is-fullwidth is-shadowless">
   {{#if (and resultStart resultEnd)}}
     <h2 class="title is-4" data-test-pricing-result-dates>
-      {{date-format resultStart "MMM DD, YYYY"}} through {{date-format resultEnd "MMM DD, YYYY"}}
+      {{date-format resultStart "MMM dd, yyyy"}} through {{date-format resultEnd "MMM dd, yyyy"}}
     </h2>
   {{/if}}
   {{#if showResultsWarning}}

ui/app/templates/components/token-expire-warning.hbs

@@ -3,7 +3,7 @@
     <AlertBanner
       @type="danger"
       @message="Your auth token expired on
-        {{date-format expirationDate "MMMM Do YYYY, h:mm:ss a"}}
+        {{date-format expirationDate "MMMM Do yyyy, h:mm:ss a"}}
          . You will need to re-authenticate."
     >
       <LinkTo @route="vault.cluster.logout" class="button link">

ui/app/templates/vault.hbs

@@ -7,7 +7,7 @@
         @size="l"
         aria-hidden="true"
         class="has-text-grey-light" />
-      © {{date-format (now) "YYYY"}} HashiCorp
+      © {{date-format (now) "yyyy"}} HashiCorp
     </span>
     <span>
       <a href={{changelog-url-for activeCluster.leaderNode.version}}

ui/app/templates/vault/cluster/access/leases/show.hbs

@@ -30,23 +30,23 @@
 
 <div class="field box is-fullwidth is-sideless is-paddingless is-marginless">
   <InfoTableRow @label="Issue time" @value={{model.issueTime}}>
-    {{date-format model.issueTime 'MMM DD, YYYY hh:mm:ss A'}}
+    {{date-format model.issueTime 'MMM dd, yyyy hh:mm:ss a'}}
     <br/>
     <code>
       {{model.issueTime}}
     </code>
   </InfoTableRow>
   <InfoTableRow @label="Renewable" @value={{model.renewable}} />
   <InfoTableRow @label="Last renewal" @value={{model.lastRenewal}}>
-    {{date-format model.lastRenewal 'MMM DD, YYYY hh:mm:ss A'}}
+    {{date-format model.lastRenewal 'MMM dd, yyyy hh:mm:ss a'}}
     <br/>
     <code>
       {{model.lastRenewal}}
     </code>
   </InfoTableRow>
   {{#if model.expireTime}}
     <InfoTableRow @label="Expiration time" @value={{model.expireTime}}>
-      {{date-format model.expireTime 'MMM DD, YYYY hh:mm:ss A'}}
+      {{date-format model.expireTime 'MMM dd, yyyy hh:mm:ss a'}}
       <br/>
       <code>
         {{model.expireTime}}

ui/lib/core/addon/helpers/changelog-url-for.js

@@ -5,7 +5,7 @@ This helper returns a url to the changelog for the specified version.
 It assumes that Changelog headers for Vault versions >= 1.4.3 are structured as:
 
 ## 1.5.0
-### Month, DD, YYYY
+### Month, DD, yyyy
 
 ## 1.4.5
 ### Month, DD, YYY

ui/lib/core/addon/helpers/date-format.js

@@ -1,8 +1,10 @@
 import { helper } from '@ember/component/helper';
-import formatDate from 'date-fns/format';
+import { format, parseISO } from 'date-fns';
 
-export function dateFormat([date, format]) {
-  return formatDate(date, format);
+export function dateFormat([date, style]) {
+  // see format breaking in upgrade to date-fns 2.x https://github.com/date-fns/date-fns/blob/master/CHANGELOG.md#changed-5
+  let number = typeof date === 'string' ? parseISO(date) : date;
+  return format(number, style);
 }
 
 export default helper(dateFormat);

ui/lib/replication/addon/templates/mode/secondaries/add.hbs

@@ -69,7 +69,7 @@
             value=ttl}}
           {{info-table-row
             label="Expires"
-            value=(date-format expirationDate 'MMM DD, YYYY hh:mm:ss A')}}
+            value=(date-format expirationDate 'MMM dd, yyyy hh:mm:ss a')}}
         </div>
       </div>
     </section>

ui/package.json

@@ -64,7 +64,7 @@
     "d3-time-format": "^2.1.1",
     "d3-tip": "^0.9.1",
     "d3-transition": "^1.2.0",
-    "date-fns": "^1.30.0",
+    "date-fns": "^2.16.1",
     "deepmerge": "^4.0.0",
     "doctoc": "^1.4.0",
     "ember-api-actions": "^0.2.8",

ui/tests/integration/components/pricing-metrics-dates-test.js

@@ -13,10 +13,10 @@ module('Integration | Component | pricing-metrics-dates', function(hooks) {
     await render(hbs`
       <PricingMetricsDates />
     `);
-    assert.dom('[data-test-end-input]').hasValue(format(expectedEnd, 'MM/YYYY'), 'End input is last month');
+    assert.dom('[data-test-end-input]').hasValue(format(expectedEnd, 'MM/yyyy'), 'End input is last month');
     assert
       .dom('[data-test-start-input]')
-      .hasValue(format(expectedStart, 'MM/YYYY'), 'Start input is 12 months before last month');
+      .hasValue(format(expectedStart, 'MM/yyyy'), 'Start input is 12 months before last month');
   });
 
   test('On init if end date passed, start is calculated', async function(assert) {
@@ -28,7 +28,7 @@ module('Integration | Component | pricing-metrics-dates', function(hooks) {
     assert.dom('[data-test-end-input]').hasValue('09/2020', 'End input matches query');
     assert
       .dom('[data-test-start-input]')
-      .hasValue(format(expectedStart, 'MM/YYYY'), 'Start input is 12 months before end input');
+      .hasValue(format(expectedStart, 'MM/yyyy'), 'Start input is 12 months before end input');
   });
 
   test('On init if query start date passed, end is default', async function(assert) {
@@ -37,7 +37,7 @@ module('Integration | Component | pricing-metrics-dates', function(hooks) {
     await render(hbs`
       <PricingMetricsDates @queryStart={{queryStart}} />
     `);
-    assert.dom('[data-test-end-input]').hasValue(format(expectedEnd, 'MM/YYYY'), 'End input is last month');
+    assert.dom('[data-test-end-input]').hasValue(format(expectedEnd, 'MM/yyyy'), 'End input is last month');
     assert.dom('[data-test-start-input]').hasValue('01/2020', 'Start input matches query');
   });
 
@@ -91,15 +91,15 @@ module('Integration | Component | pricing-metrics-dates', function(hooks) {
     `);
     assert.dom('[data-test-form-error]').doesNotExist('No form error shows by default');
 
-    await fillIn('[data-test-start-input]', format(subMonths(firstAvailable, 1), 'MM/YYYY'));
+    await fillIn('[data-test-start-input]', format(subMonths(firstAvailable, 1), 'MM/yyyy'));
     assert
       .dom('[data-test-form-error]')
       .includesText(
-        `No data retained before ${format(firstAvailable, 'MM/YYYY')}`,
+        `No data retained before ${format(firstAvailable, 'MM/yyyy')}`,
         'shows the correct error message for starting before the configured retainment period'
       );
 
-    await fillIn('[data-test-end-input]', format(subMonths(lastAvailable, -1), 'MM/YYYY'));
+    await fillIn('[data-test-end-input]', format(subMonths(lastAvailable, -1), 'MM/yyyy'));
     assert
       .dom('[data-test-form-error]')
       .includesText(
@@ -111,15 +111,15 @@ module('Integration | Component | pricing-metrics-dates', function(hooks) {
     assert
       .dom('[data-test-form-error]')
       .includesText(
-        'End date is invalid. Please use format MM/YYYY',
+        'End date is invalid. Please use format MM/yyyy',
         'shows the correct error message for non-date input'
       );
 
-    await fillIn('[data-test-start-input]', `13/${format(lastAvailable, 'YYYY')}`);
+    await fillIn('[data-test-start-input]', `13/${format(lastAvailable, 'yyyy')}`);
     assert
       .dom('[data-test-form-error]')
       .includesText(
-        'Start date is invalid. Please use format MM/YYYY',
+        'Start date is invalid. Please use format MM/yyyy',
         'shows the correct error message for an invalid month'
       );
   });