From 178007706812c9412e2126c87c84980b2f2c2e37 Mon Sep 17 00:00:00 2001 From: Priya Patel Date: Mon, 2 Feb 2026 18:52:19 -0600 Subject: [PATCH] Replace time element with Hds::Time component (#3112) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: 💡 use Hds::Time component * refactor: 💡 fix data test selector * refactor: 💡 standardardized date/time format * refactor: 💡 fix tests and remove date helpers * fix: 🐛 fixed helper test import --- .../api/tests/unit/models/credential-test.js | 15 ++++---- .../api/tests/unit/utils/sqlite-query-test.js | 9 +++-- .../addon/helpers/format-date-iso-human.js | 17 --------- addons/core/addon/helpers/format-date-iso.js | 14 -------- .../core/app/helpers/format-date-iso-human.js | 6 ---- addons/core/app/helpers/format-date-iso.js | 6 ---- .../helpers/format-date-iso-human-test.js | 29 --------------- .../helpers/format-date-iso-test.js | 32 ----------------- .../helpers/format-day-year-test.js | 2 +- .../scopes/scope/session-recordings/index.hbs | 7 ++-- .../channels-by-connection/channel.hbs | 11 +++--- .../channels-by-connection/index.hbs | 36 ++++++++----------- .../templates/scopes/scope/sessions/index.hbs | 7 ++-- .../acceptance/host-catalogs/selectors.js | 3 +- .../session-recordings/list-test.js | 11 ++++-- .../tests/acceptance/sessions/list-test.js | 16 ++++----- .../helpers/format-date-user-friendly.js | 22 ++++++++++++ .../scopes/scope/projects/sessions/index.hbs | 4 +-- .../scopes/scope/projects/targets/index.hbs | 7 ++-- 19 files changed, 85 insertions(+), 169 deletions(-) delete mode 100644 addons/core/addon/helpers/format-date-iso-human.js delete mode 100644 addons/core/addon/helpers/format-date-iso.js delete mode 100644 addons/core/app/helpers/format-date-iso-human.js delete mode 100644 addons/core/app/helpers/format-date-iso.js delete mode 100644 addons/core/tests/integration/helpers/format-date-iso-human-test.js delete mode 100644 addons/core/tests/integration/helpers/format-date-iso-test.js create mode 100644 ui/admin/tests/helpers/format-date-user-friendly.js diff --git a/addons/api/tests/unit/models/credential-test.js b/addons/api/tests/unit/models/credential-test.js index 325c74c02..c4429f5f6 100644 --- a/addons/api/tests/unit/models/credential-test.js +++ b/addons/api/tests/unit/models/credential-test.js @@ -9,10 +9,9 @@ import { TYPE_CREDENTIAL_JSON, TYPE_CREDENTIAL_SSH_PRIVATE_KEY, TYPE_CREDENTIAL_USERNAME_PASSWORD_DOMAIN, - TYPE_CREDENTIAL_USERNAME_PASSWORD + TYPE_CREDENTIAL_USERNAME_PASSWORD, } from 'api/models/credential'; - module('Unit | Model | credential', function (hooks) { setupTest(hooks); @@ -35,7 +34,9 @@ module('Unit | Model | credential', function (hooks) { test('it has isJSON property and returns the expected values', async function (assert) { const store = this.owner.lookup('service:store'); - const modelA = store.createRecord('credential', { type: TYPE_CREDENTIAL_JSON }); + const modelA = store.createRecord('credential', { + type: TYPE_CREDENTIAL_JSON, + }); const modelB = store.createRecord('credential', { type: TYPE_CREDENTIAL_USERNAME_PASSWORD, }); @@ -51,13 +52,15 @@ module('Unit | Model | credential', function (hooks) { test('it has isUnknown property and returns the expected values', async function (assert) { const store = this.owner.lookup('service:store'); const modelA = store.createRecord('credential', { - type: TYPE_CREDENTIAL_USERNAME_PASSWORD + type: TYPE_CREDENTIAL_USERNAME_PASSWORD, }); const modelB = store.createRecord('credential', { - type: TYPE_CREDENTIAL_SSH_PRIVATE_KEY + type: TYPE_CREDENTIAL_SSH_PRIVATE_KEY, }); const modelC = store.createRecord('credential', { type: 'unknown' }); - const modelD = store.createRecord('credential', { type: TYPE_CREDENTIAL_USERNAME_PASSWORD_DOMAIN }); + const modelD = store.createRecord('credential', { + type: TYPE_CREDENTIAL_USERNAME_PASSWORD_DOMAIN, + }); assert.false(modelA.isUnknown); assert.false(modelB.isUnknown); diff --git a/addons/api/tests/unit/utils/sqlite-query-test.js b/addons/api/tests/unit/utils/sqlite-query-test.js index f8784ed84..e6590d7f7 100644 --- a/addons/api/tests/unit/utils/sqlite-query-test.js +++ b/addons/api/tests/unit/utils/sqlite-query-test.js @@ -70,7 +70,8 @@ module('Unit | Utility | sqlite-query', function (hooks) { { field: 'name', alias: 'resource_name' }, { field: 'type', alias: 'resource_type' }, ], - expectedSelect: '"target".name as resource_name, "target".type as resource_type', + expectedSelect: + '"target".name as resource_name, "target".type as resource_type', }, 'count with alias': { select: [{ field: 'id', isCount: true, alias: 'total_count' }], @@ -118,7 +119,8 @@ module('Unit | Utility | sqlite-query', function (hooks) { { field: 'type', isDistinct: true, isCount: true }, { field: 'status', isDistinct: true, isCount: true }, ], - expectedSelect: 'count(DISTINCT "target".type), count(DISTINCT "target".status)', + expectedSelect: + 'count(DISTINCT "target".type), count(DISTINCT "target".status)', }, 'distinct with alias': { select: [{ field: 'type', isDistinct: true, alias: 'unique_type' }], @@ -129,7 +131,8 @@ module('Unit | Utility | sqlite-query', function (hooks) { { field: 'type', isDistinct: true, alias: 'unique_type' }, { field: 'status', isDistinct: true, alias: 'unique_status' }, ], - expectedSelect: 'DISTINCT "target".type as unique_type, "target".status as unique_status', + expectedSelect: + 'DISTINCT "target".type as unique_type, "target".status as unique_status', }, 'count distinct multiple fields': { select: [ diff --git a/addons/core/addon/helpers/format-date-iso-human.js b/addons/core/addon/helpers/format-date-iso-human.js deleted file mode 100644 index 2f3939b90..000000000 --- a/addons/core/addon/helpers/format-date-iso-human.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Copyright IBM Corp. 2021, 2026 - * SPDX-License-Identifier: BUSL-1.1 - */ - -import { helper } from '@ember/component/helper'; - -/** - * Takes a `Date` instance and returns a string formatted in human-friendly - * ISO-ish, e.g. "2020-01-01 00:00:00". - */ -export default helper(function formatDateIsoHuman(params /*, hash*/) { - return params[0] - ?.toISOString() - .replace('T', ' ') - .replace(/\.\d*Z/, ''); -}); diff --git a/addons/core/addon/helpers/format-date-iso.js b/addons/core/addon/helpers/format-date-iso.js deleted file mode 100644 index 8d7bbcffe..000000000 --- a/addons/core/addon/helpers/format-date-iso.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Copyright IBM Corp. 2021, 2026 - * SPDX-License-Identifier: BUSL-1.1 - */ - -import { helper } from '@ember/component/helper'; - -/** - * Takes a `Date` instance and returns a string formatted in ISO, - * e.g. "2020-01-01T00:00:00.999Z". - */ -export default helper(function formatDateIso(params /*, hash*/) { - return params[0]?.toISOString(); -}); diff --git a/addons/core/app/helpers/format-date-iso-human.js b/addons/core/app/helpers/format-date-iso-human.js deleted file mode 100644 index b5e7ba59f..000000000 --- a/addons/core/app/helpers/format-date-iso-human.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Copyright IBM Corp. 2021, 2026 - * SPDX-License-Identifier: BUSL-1.1 - */ - -export { default } from 'core/helpers/format-date-iso-human'; diff --git a/addons/core/app/helpers/format-date-iso.js b/addons/core/app/helpers/format-date-iso.js deleted file mode 100644 index 919c7258f..000000000 --- a/addons/core/app/helpers/format-date-iso.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Copyright IBM Corp. 2021, 2026 - * SPDX-License-Identifier: BUSL-1.1 - */ - -export { default } from 'core/helpers/format-date-iso'; diff --git a/addons/core/tests/integration/helpers/format-date-iso-human-test.js b/addons/core/tests/integration/helpers/format-date-iso-human-test.js deleted file mode 100644 index 6c170b12f..000000000 --- a/addons/core/tests/integration/helpers/format-date-iso-human-test.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Copyright IBM Corp. 2021, 2026 - * SPDX-License-Identifier: BUSL-1.1 - */ - -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Helper | format-date-iso-human', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - this.set('inputValue', new Date('2020-01-01T00:00:00.999Z')); - - await render(hbs`{{format-date-iso-human this.inputValue}}`); - - assert.strictEqual(this.element.textContent.trim(), '2020-01-01 00:00:00'); - }); - - test('it renders when null', async function (assert) { - this.set('inputValue', null); - - await render(hbs`{{format-date-iso-human this.inputValue}}`); - - assert.strictEqual(this.element.textContent.trim(), ''); - }); -}); diff --git a/addons/core/tests/integration/helpers/format-date-iso-test.js b/addons/core/tests/integration/helpers/format-date-iso-test.js deleted file mode 100644 index e57c75fb5..000000000 --- a/addons/core/tests/integration/helpers/format-date-iso-test.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * Copyright IBM Corp. 2021, 2026 - * SPDX-License-Identifier: BUSL-1.1 - */ - -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Helper | format-date-iso', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - this.set('inputValue', new Date('2020-01-01T00:00:00.999Z')); - - await render(hbs`{{format-date-iso this.inputValue}}`); - - assert.strictEqual( - this.element.textContent.trim(), - '2020-01-01T00:00:00.999Z', - ); - }); - - test('it renders when null', async function (assert) { - this.set('inputValue', null); - - await render(hbs`{{format-date-iso this.inputValue}}`); - - assert.strictEqual(this.element.textContent.trim(), ''); - }); -}); diff --git a/addons/core/tests/integration/helpers/format-day-year-test.js b/addons/core/tests/integration/helpers/format-day-year-test.js index cf0a26051..5200aa3f0 100644 --- a/addons/core/tests/integration/helpers/format-day-year-test.js +++ b/addons/core/tests/integration/helpers/format-day-year-test.js @@ -32,7 +32,7 @@ module('Integration | Helper | format-day-year', function (hooks) { }); test('it renders when null', async function (assert) { this.set('inputValue', null); - await render(hbs`{{format-date-iso this.inputValue}}`); + await render(hbs`{{format-day-year this.inputValue}}`); assert.strictEqual(this.element.textContent.trim(), ''); }); }); 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 36f905452..974128fdd 100644 --- a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs +++ b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs @@ -183,9 +183,10 @@ {{#if data.created_time}} - + {{/if}} diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs index 45ee1f735..94a6c069c 100644 --- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs +++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs @@ -54,13 +54,10 @@ {{#if @model.channelRecording.start_time}} {{t 'form.started.label'}} - + {{/if}} {{! Duration }} diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs index 1ee4ee656..f2113894b 100644 --- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs +++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs @@ -216,13 +216,10 @@ {{#if @model.sessionRecording.created_time}} {{t 'form.created.label'}} - + {{/if}} {{! Duration }} @@ -257,32 +254,27 @@ {{#if @model.sessionRecording.retain_until}} {{t 'resources.policy.titles.retain_until'}} - {{/if}} {{#if @model.sessionRecording.delete_after}} {{t 'resources.policy.titles.delete_after'}} - + @date={{@model.sessionRecording.delete_after}} + @display='friendly-local' + /> {{/if}} diff --git a/ui/admin/app/templates/scopes/scope/sessions/index.hbs b/ui/admin/app/templates/scopes/scope/sessions/index.hbs index b7de53acb..45021da89 100644 --- a/ui/admin/app/templates/scopes/scope/sessions/index.hbs +++ b/ui/admin/app/templates/scopes/scope/sessions/index.hbs @@ -153,9 +153,10 @@ {{data.target.displayName}} - + diff --git a/ui/admin/tests/acceptance/host-catalogs/selectors.js b/ui/admin/tests/acceptance/host-catalogs/selectors.js index 3b833527d..1a527f8e6 100644 --- a/ui/admin/tests/acceptance/host-catalogs/selectors.js +++ b/ui/admin/tests/acceptance/host-catalogs/selectors.js @@ -29,8 +29,7 @@ export const MANAGE_DROPDOWN_HOST_CATALOG_DELETE = export const FIELD_ROLE_ARN = '[name="role_arn"]'; export const FIELD_ROLE_ARN_VALUE = 'arn:aws:iam'; -export const FIELD_CREDENTIAL_TYPE = - '.credential-selection input:checked'; +export const FIELD_CREDENTIAL_TYPE = '.credential-selection input:checked'; export const FIELD_DYNAMIC_CREDENTIAL = '[name="dynamic-credential"]'; export const FIELD_DYNAMIC_CREDENTIAL_VALUE = 'dynamic-credentials'; export const FIELD_STATIC_CREDENTIAL = '[name="static-credential"]'; diff --git a/ui/admin/tests/acceptance/session-recordings/list-test.js b/ui/admin/tests/acceptance/session-recordings/list-test.js index 14f9e5862..06a711829 100644 --- a/ui/admin/tests/acceptance/session-recordings/list-test.js +++ b/ui/admin/tests/acceptance/session-recordings/list-test.js @@ -11,6 +11,7 @@ import { setupSqlite } from 'api/test-support/helpers/sqlite'; import { faker } from '@faker-js/faker'; import * as commonSelectors from 'admin/tests/helpers/selectors'; import * as selectors from './selectors'; +import { formatDateUserFriendly } from 'admin/tests/helpers/format-date-user-friendly'; import { STATE_SESSION_RECORDING_STARTED, STATE_SESSION_RECORDING_AVAILABLE, @@ -31,6 +32,10 @@ module('Acceptance | session-recordings | list', function (hooks) { '2020-01-01T00:01:00.000Z', ]; + const CREATED_TIME_VALUES_FORMATTED = CREATED_TIME_VALUES_ARRAY.map( + formatDateUserFriendly, + ); + let featuresService; let createdTimeValues; @@ -325,6 +330,8 @@ module('Acceptance | session-recordings | list', function (hooks) { this.server.schema.sessionRecordings.all().destroy(); const expectedDescendingSort = CREATED_TIME_VALUES_ARRAY.toReversed(); + const expectedDescendingFormattedSort = + CREATED_TIME_VALUES_FORMATTED.toReversed(); faker.helpers.shuffle(expectedDescendingSort).forEach((value) => { this.server.create('session-recording', { created_time: value, @@ -337,7 +344,7 @@ module('Acceptance | session-recordings | list', function (hooks) { assert .dom(commonSelectors.TABLE_ROWS) .isVisible({ count: CREATED_TIME_VALUES_ARRAY.length }); - expectedDescendingSort.forEach((expected, index) => { + expectedDescendingFormattedSort.forEach((expected, index) => { // nth-child index starts at 1 assert.dom(commonSelectors.TABLE_ROW(index + 1)).containsText(expected); }); @@ -351,7 +358,7 @@ module('Acceptance | session-recordings | list', function (hooks) { key: 'created_time', values: CREATED_TIME_VALUES_ARRAY, }, - expectedAscendingSort: CREATED_TIME_VALUES_ARRAY, + expectedAscendingSort: CREATED_TIME_VALUES_FORMATTED, column: 1, }, 'on state': { diff --git a/ui/admin/tests/acceptance/sessions/list-test.js b/ui/admin/tests/acceptance/sessions/list-test.js index 222a9d875..627b75e5d 100644 --- a/ui/admin/tests/acceptance/sessions/list-test.js +++ b/ui/admin/tests/acceptance/sessions/list-test.js @@ -18,6 +18,7 @@ import { } from 'api/models/session'; import * as commonSelectors from 'admin/tests/helpers/selectors'; import * as selectors from './selectors'; +import { formatDateUserFriendly } from 'admin/tests/helpers/format-date-user-friendly'; import { setRunOptions } from 'ember-a11y-testing/test-support'; module('Acceptance | sessions | list', function (hooks) { @@ -31,14 +32,9 @@ module('Acceptance | sessions | list', function (hooks) { '2020-01-01T01:00:10.000Z', '2020-01-01T10:00:00.000Z', ]; - - const CREATED_TIME_ISO_VALUES_ARRAY = [ - '2020-01-01 00:00:01', - '2020-01-01 00:00:10', - '2020-01-01 00:10:01', - '2020-01-01 01:00:10', - '2020-01-01 10:00:00', - ]; + const CREATED_TIME_VALUES_FORMATTED = CREATED_TIME_VALUES_ARRAY.map( + formatDateUserFriendly, + ); const ID_VALUES_ARRAY = ['i_0001', 'i_0010', 'i_0100', 'i_1000', 'i_10000']; const instances = { @@ -485,7 +481,7 @@ module('Acceptance | sessions | list', function (hooks) { }); this.server.schema.sessions.all().destroy(); - const expectedDescendingSort = CREATED_TIME_ISO_VALUES_ARRAY.toReversed(); + const expectedDescendingSort = CREATED_TIME_VALUES_FORMATTED.toReversed(); faker.helpers.shuffle(CREATED_TIME_VALUES_ARRAY).forEach((value) => { this.server.create('session', { created_time: value, @@ -520,7 +516,7 @@ module('Acceptance | sessions | list', function (hooks) { key: 'created_time', values: CREATED_TIME_VALUES_ARRAY, }, - expectedAscendingSort: CREATED_TIME_ISO_VALUES_ARRAY, + expectedAscendingSort: CREATED_TIME_VALUES_FORMATTED, column: 4, }, 'on status': { diff --git a/ui/admin/tests/helpers/format-date-user-friendly.js b/ui/admin/tests/helpers/format-date-user-friendly.js new file mode 100644 index 000000000..2d6d42111 --- /dev/null +++ b/ui/admin/tests/helpers/format-date-user-friendly.js @@ -0,0 +1,22 @@ +/** + * Copyright IBM Corp. 2021, 2026 + * SPDX-License-Identifier: BUSL-1.1 + */ + +/** + * Formats a date string into a user-friendly date/time format. + * Example: Jan 1, 2024, 12:00:00 AM GMT + * @param {date string} value + * @returns + */ +export const formatDateUserFriendly = (value) => + new Intl.DateTimeFormat('en-US', { + month: 'short', + day: 'numeric', + year: 'numeric', + hour: 'numeric', + minute: '2-digit', + second: '2-digit', + hour12: true, + timeZoneName: 'short', + }).format(new Date(value)); diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs index 7816ff7b4..8a2b406c5 100644 --- a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs +++ b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs @@ -82,9 +82,7 @@ <:body as |B|> - +
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs index 9e1623510..0e2378b2c 100644 --- a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs +++ b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs @@ -253,9 +253,10 @@ <:body as |B|> - +