From 59850651b88180c74cba7ab7c4eea855da96031d Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Tue, 14 Mar 2023 09:56:47 -0700 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20format-time-du?= =?UTF-8?q?ration=20helper?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add format-time-duration helper to provide human-readable duration string ✅ Closes: ICU-8233 --- .../addon/helpers/format-time-duration.js | 25 +++++++++++ .../core/app/helpers/format-time-duration.js | 1 + addons/core/package.json | 3 +- .../helpers/format-time-duration-test.js | 30 +++++++++++++ .../scopes/scope/session-recordings/index.hbs | 6 +++ yarn.lock | 44 ++++++++++++++----- 6 files changed, 97 insertions(+), 12 deletions(-) create mode 100644 addons/core/addon/helpers/format-time-duration.js create mode 100644 addons/core/app/helpers/format-time-duration.js create mode 100644 addons/core/tests/integration/helpers/format-time-duration-test.js diff --git a/addons/core/addon/helpers/format-time-duration.js b/addons/core/addon/helpers/format-time-duration.js new file mode 100644 index 000000000..bf3e3efe8 --- /dev/null +++ b/addons/core/addon/helpers/format-time-duration.js @@ -0,0 +1,25 @@ +import Helper from '@ember/component/helper'; +import { inject as service } from '@ember/service'; +import DurationUnitFormat from 'intl-unofficial-duration-unit-format'; + +export default class extends Helper { + // =services + @service intl; + + // =methods + /** + * + * @param {number} durationInMs Duration in milliseconds + * @returns localized human-readable duration string. For example, in English "1 hr 23 min 20 sec" + */ + compute([durationInMs]) { + const durationInSeconds = durationInMs / 1000; + const durationFormat = new DurationUnitFormat(this.intl.primaryLocale, { + style: 'short', + format: '{days} {hours} {minutes} {seconds}', + round: true, + }); + + return durationFormat.format(durationInSeconds); + } +} diff --git a/addons/core/app/helpers/format-time-duration.js b/addons/core/app/helpers/format-time-duration.js new file mode 100644 index 000000000..fa028c296 --- /dev/null +++ b/addons/core/app/helpers/format-time-duration.js @@ -0,0 +1 @@ +export { default } from 'core/helpers/format-time-duration'; diff --git a/addons/core/package.json b/addons/core/package.json index e5fb106b7..c3af48918 100644 --- a/addons/core/package.json +++ b/addons/core/package.json @@ -40,7 +40,8 @@ "ember-feature-flags": "^6.0.0", "ember-intl": "^6.0.0-beta.4", "ember-loading": "^2.0.0", - "ember-truth-helpers": "^3.0.0" + "ember-truth-helpers": "^3.0.0", + "intl-unofficial-duration-unit-format": "^3.1.0" }, "devDependencies": { "@babel/eslint-parser": "^7.18.2", diff --git a/addons/core/tests/integration/helpers/format-time-duration-test.js b/addons/core/tests/integration/helpers/format-time-duration-test.js new file mode 100644 index 000000000..66eabaca2 --- /dev/null +++ b/addons/core/tests/integration/helpers/format-time-duration-test.js @@ -0,0 +1,30 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'dummy/tests/helpers'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; +import { setupIntl } from 'ember-intl/test-support'; + +module('Integration | Helper | format-time-duration', function (hooks) { + setupRenderingTest(hooks); + setupIntl(hooks); + + test('It renders in human-readable duration strings given different durations in milliseconds', async function (assert) { + // Set mock input (in milliseconds) durations + this.set('inputDurationSeconds', 3000); + this.set('inputDurationMinutes', 2700000); + this.set('inputDurationHours', 5000000); + this.set('inputDurationDays', 177800000); + + await render(hbs`{{format-time-duration this.inputDurationSeconds}}`); + assert.dom(this.element).hasText('3 sec'); + + await render(hbs`{{format-time-duration this.inputDurationMinutes}}`); + assert.dom(this.element).hasText('45 min'); + + await render(hbs`{{format-time-duration this.inputDurationHours}}`); + assert.dom(this.element).hasText('1 hr 23 min 20 sec'); + + await render(hbs`{{format-time-duration this.inputDurationDays}}`); + assert.dom(this.element).hasText('2 days 1 hr 23 min 20 sec'); + }); +}); diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs index 1ce0230e6..e6b42053c 100644 --- a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs +++ b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs @@ -10,5 +10,11 @@ > {{@model.session_recording_id}} +

+

{{format-time-duration 3000}}

+

{{format-time-duration 2700000}}

+

{{format-time-duration 5000000}}

+

{{format-time-duration 177800000}}

+ {{!--

{{format-time-duration 177800000}}

--}} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 094a5753d..aebf9d8ae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10551,9 +10551,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001157, caniuse-lite@^1.0.30001449: - version "1.0.30001458" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001458.tgz#871e35866b4654a7d25eccca86864f411825540c" - integrity sha512-lQ1VlUUq5q9ro9X+5gOEyH7i3vm+AYVT1WDCVB69XOZ17KZRhnZ9J0Sqz7wTHQaLBJccNCHq8/Ww5LlOIZbB0w== + version "1.0.30001466" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001466.tgz#c1e6197c540392e09709ecaa9e3e403428c53375" + integrity sha512-ewtFBSfWjEmxUgNBSZItFSmVtvk9zkwkl1OfRZlKA8slltRN+/C/tuGVrF9styXkN36Yu3+SeJ1qkXxDEyNZ5w== capture-exit@^2.0.0: version "2.0.0" @@ -11905,7 +11905,7 @@ debug@^3.0.0, debug@^3.0.1, debug@^3.1.0, debug@^3.1.1, debug@^3.2.7: dependencies: ms "^2.1.1" -debuglog@^1.0.1: +debuglog@*, debuglog@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492" integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI= @@ -17097,7 +17097,7 @@ import-local@^3.0.2: pkg-dir "^4.2.0" resolve-cwd "^3.0.0" -imurmurhash@^0.1.4: +imurmurhash@*, imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= @@ -17269,6 +17269,11 @@ intl-messageformat@10.2.1, intl-messageformat@^10.1.0: "@formatjs/icu-messageformat-parser" "2.1.10" tslib "2.4.0" +intl-unofficial-duration-unit-format@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/intl-unofficial-duration-unit-format/-/intl-unofficial-duration-unit-format-3.1.0.tgz#994feefc8d903d9e5044dc7e4e1d38ebad59394b" + integrity sha512-yjvUDwV63zSGkbeUqpDRJmOgMQoJA8OFhNeo+1KY20q+lFCtcvRWszJNsq/ssrUJRy8g+Mt3BYNfwFvRRSAkow== + invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" @@ -19228,6 +19233,11 @@ lodash._baseflatten@^3.0.0: lodash.isarguments "^3.0.0" lodash.isarray "^3.0.0" +lodash._baseindexof@*: + version "3.1.0" + resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c" + integrity sha512-bSYo8Pc/f0qAkr8fPJydpJjtrHiSynYfYBjtANIgXv5xEf1WlTC63dIDlgu0s9dmTvzRu1+JJTxcIAHe+sH0FQ== + lodash._baseuniq@~4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8" @@ -19236,11 +19246,16 @@ lodash._baseuniq@~4.6.0: lodash._createset "~4.0.0" lodash._root "~3.0.0" -lodash._bindcallback@^3.0.0: +lodash._bindcallback@*, lodash._bindcallback@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e" integrity sha512-2wlI0JRAGX8WEf4Gm1p/mv/SZ+jLijpj0jyaE/AXeuQphzCgD8ZQW4oSpoN8JAopujOFGU3KMuq7qfHBWlGpjQ== +lodash._cacheindexof@*: + version "3.0.2" + resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92" + integrity sha512-S8dUjWr7SUT/X6TBIQ/OYoCHo1Stu1ZRy6uMUSKqzFnZp5G5RyQizSm6kvxD2Ewyy6AVfMg4AToeZzKfF99T5w== + lodash._createassigner@^3.0.0: version "3.1.1" resolved "https://registry.yarnpkg.com/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz#838a5bae2fdaca63ac22dee8e19fa4e6d6970b11" @@ -19250,12 +19265,19 @@ lodash._createassigner@^3.0.0: lodash._isiterateecall "^3.0.0" lodash.restparam "^3.0.0" +lodash._createcache@*: + version "3.1.2" + resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093" + integrity sha512-ev5SP+iFpZOugyab/DEUQxUeZP5qyciVTlgQ1f4Vlw7VUcCD8fVnyIqVUEIaoFH9zjAqdgi69KiofzvVmda/ZQ== + dependencies: + lodash._getnative "^3.0.0" + lodash._createset@~4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26" integrity sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA== -lodash._getnative@^3.0.0: +lodash._getnative@*, lodash._getnative@^3.0.0: version "3.9.1" resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" integrity sha512-RrL9VxMEPyDMHOd9uFbvMe8X55X16/cGM5IgOKgRElQZutpX89iS6vwl64duTV1/16w5JY7tuFNXqoekmh1EmA== @@ -19468,7 +19490,7 @@ lodash.pick@^4.4.0: resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3" integrity sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q== -lodash.restparam@^3.0.0: +lodash.restparam@*, lodash.restparam@^3.0.0: version "3.6.1" resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805" integrity sha512-L4/arjjuq4noiUJpt3yS6KIKDtJwNe2fIYgMqyYYKoeIfV1iEqvPwhCx23o+R9dzouGihDAPN1dTIRWa7zk8tw== @@ -25706,9 +25728,9 @@ terser-webpack-plugin@^5.1.3: terser "^5.7.2" terser@^4.1.2, terser@^4.6.3, terser@^5.14.2, terser@^5.3.0, terser@^5.3.4, terser@^5.7.2: - version "5.16.5" - resolved "https://registry.yarnpkg.com/terser/-/terser-5.16.5.tgz#1c285ca0655f467f92af1bbab46ab72d1cb08e5a" - integrity sha512-qcwfg4+RZa3YvlFh0qjifnzBHjKGNbtDo9yivMqMFDy9Q6FSaQWSB/j1xKhsoUFJIqDOM3TsN6D5xbrMrFcHbg== + version "5.16.6" + resolved "https://registry.yarnpkg.com/terser/-/terser-5.16.6.tgz#f6c7a14a378ee0630fbe3ac8d1f41b4681109533" + integrity sha512-IBZ+ZQIA9sMaXmRZCUMDjNH0D5AQQfdn4WUjHL0+1lF4TP1IHRJbrhb6fNaXWikrYQTSkb7SLxkeXAiy1p7mbg== dependencies: "@jridgewell/source-map" "^0.3.2" acorn "^8.5.0" From 7782739d2d46900440c4c024576cd36f615d3fa6 Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Tue, 14 Mar 2023 12:28:54 -0700 Subject: [PATCH 2/3] Change durationUnitFormat style from short to narrow --- addons/core/addon/helpers/format-time-duration.js | 2 +- .../app/templates/scopes/scope/session-recordings/index.hbs | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/addons/core/addon/helpers/format-time-duration.js b/addons/core/addon/helpers/format-time-duration.js index bf3e3efe8..5477b5b40 100644 --- a/addons/core/addon/helpers/format-time-duration.js +++ b/addons/core/addon/helpers/format-time-duration.js @@ -15,7 +15,7 @@ export default class extends Helper { compute([durationInMs]) { const durationInSeconds = durationInMs / 1000; const durationFormat = new DurationUnitFormat(this.intl.primaryLocale, { - style: 'short', + style: 'narrow', format: '{days} {hours} {minutes} {seconds}', round: true, }); diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs index e6b42053c..c0a36d055 100644 --- a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs +++ b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs @@ -15,6 +15,5 @@

{{format-time-duration 2700000}}

{{format-time-duration 5000000}}

{{format-time-duration 177800000}}

- {{!--

{{format-time-duration 177800000}}

--}} \ No newline at end of file From e0a595c9ecf90586c6c2040275c1b9e45dd3115f Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Tue, 14 Mar 2023 12:41:43 -0700 Subject: [PATCH 3/3] Update test with new format --- .../integration/helpers/format-time-duration-test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/addons/core/tests/integration/helpers/format-time-duration-test.js b/addons/core/tests/integration/helpers/format-time-duration-test.js index 66eabaca2..7efa7adb9 100644 --- a/addons/core/tests/integration/helpers/format-time-duration-test.js +++ b/addons/core/tests/integration/helpers/format-time-duration-test.js @@ -16,15 +16,15 @@ module('Integration | Helper | format-time-duration', function (hooks) { this.set('inputDurationDays', 177800000); await render(hbs`{{format-time-duration this.inputDurationSeconds}}`); - assert.dom(this.element).hasText('3 sec'); + assert.dom(this.element).hasText('3s'); await render(hbs`{{format-time-duration this.inputDurationMinutes}}`); - assert.dom(this.element).hasText('45 min'); + assert.dom(this.element).hasText('45m'); await render(hbs`{{format-time-duration this.inputDurationHours}}`); - assert.dom(this.element).hasText('1 hr 23 min 20 sec'); + assert.dom(this.element).hasText('1h 23m 20s'); await render(hbs`{{format-time-duration this.inputDurationDays}}`); - assert.dom(this.element).hasText('2 days 1 hr 23 min 20 sec'); + assert.dom(this.element).hasText('2d 1h 23m 20s'); }); });