Replace time element with Hds::Time component (#3112)

* 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

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"]';

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': {

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': {

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));