Add timeColumn argument to Table::Row

web/app/components/documents/table.hbs

@@ -25,7 +25,7 @@
     </thead>
     <tbody>
       {{#each @docs as |doc|}}
-        <Table::Row @doc={{doc}} />
+        <Table::Row @doc={{doc}} @timeColumn="createdTime" />
       {{/each}}
     </tbody>
   </table>

web/app/components/table/row.hbs

@@ -1,4 +1,4 @@
-<tr>
+<tr ...attributes>
   <td class="name">
     <LinkTo
       data-test-document-link
@@ -55,6 +55,7 @@
   <td class="time">
     <div class="inner">
       <div
+        data-test-table-row-time-cell
         class={{if (eq this.time "Unknown") "text-color-foreground-disabled"}}
       >
         {{this.time}}

web/app/components/table/row.ts

@@ -1,39 +1,46 @@
 import Component from "@glimmer/component";
 import { HermesDocument } from "hermes/types/document";
-import { inject as service } from "@ember/service";
-import AuthenticatedUserService from "hermes/services/authenticated-user";
-import parseDate from "hermes/utils/parse-date";
+import timeAgo from "hermes/utils/time-ago";
+
+export enum TimeColumn {
+  Modified = "modifiedTime",
+  Created = "createdTime",
+}
 
 interface TableRowComponentSignature {
+  Element: HTMLTableRowElement;
   Args: {
     doc: HermesDocument;
+    timeColumn: `${TimeColumn}`;
   };
 }
 
 export default class TableRowComponent extends Component<TableRowComponentSignature> {
-  @service declare authenticatedUser: AuthenticatedUserService;
-
-  protected get isDraft() {
-    if (this.args.doc.isDraft) {
-      return true;
-    }
+  protected get time() {
+    const { modifiedTime, createdTime } = this.args.doc;
+    const { timeColumn } = this.args;
 
-    return this.args.doc.status === "WIP";
-  }
+    let time = null;
 
-  protected get ownerIsAuthenticatedUser() {
-    const docOwner = this.args.doc.owners?.[0];
+    if (modifiedTime && timeColumn === TimeColumn.Modified) {
+      time = modifiedTime;
+    } else if (createdTime && timeColumn === TimeColumn.Created) {
+      time = createdTime;
+    }
 
-    if (!docOwner) {
-      return false;
+    if (time) {
+      return timeAgo(time, { limitTo24Hours: true });
     }
 
-    return docOwner === this.authenticatedUser.info.email;
+    return "Unknown";
   }
 
-  protected get time() {
-    const { created } = this.args.doc;
-    return parseDate(created) as string;
+  protected get isDraft() {
+    if (this.args.doc.isDraft) {
+      return true;
+    }
+
+    return this.args.doc.status === "WIP";
   }
 }
 

web/app/components/table/sortable-header.ts

@@ -11,6 +11,7 @@ export enum SortDirection {
 
 export enum SortAttribute {
   CreatedTime = "createdTime",
+  ModifiedTime = "modifiedTime",
   Owner = "owners",
   Product = "product",
   Status = "status",

web/tests/integration/components/table/row-test.ts

@@ -0,0 +1,76 @@
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { MirageTestContext, setupMirage } from "ember-cli-mirage/test-support";
+import { setupRenderingTest } from "ember-qunit";
+import { TimeColumn } from "hermes/components/table/row";
+import { HermesDocument } from "hermes/types/document";
+import { authenticateTestUser } from "hermes/utils/mirage-utils";
+import { module, test } from "qunit";
+import MockDate from "mockdate";
+
+const TIME_CELL = "[data-test-table-row-time-cell]";
+
+interface TableRowComponentTestContext extends MirageTestContext {
+  doc: HermesDocument;
+  timeColumn: `${TimeColumn}`;
+}
+
+module("Integration | Component | table/row", function (hooks) {
+  setupRenderingTest(hooks);
+  setupMirage(hooks);
+
+  hooks.beforeEach(function (this: TableRowComponentTestContext) {
+    authenticateTestUser(this);
+    MockDate.set("2000-01-01T06:00:00.000-07:00");
+
+    const tenMinutesAgoInSeconds = Date.now() / 1000 - 10 * 60;
+    const tenSecondsAgoInSeconds = Date.now() / 1000 - 10;
+
+    this.server.create("document", {
+      createdTime: tenMinutesAgoInSeconds,
+      modifiedTime: tenSecondsAgoInSeconds,
+    });
+
+    this.set("doc", this.server.schema.document.first());
+    this.set("timeColumn", TimeColumn.Created);
+  });
+
+  hooks.afterEach(function () {
+    MockDate.reset();
+  });
+
+  test("it renders the correct time value", async function (this: TableRowComponentTestContext, assert) {
+    await render<TableRowComponentTestContext>(hbs`
+      <Table::Row
+        data-test-one
+        @doc={{this.doc}}
+        @timeColumn="createdTime"
+      />
+
+      <Table::Row
+        data-test-two
+        @doc={{this.doc}}
+        @timeColumn="modifiedTime"
+      />
+    `);
+
+    assert.dom(`[data-test-one] ${TIME_CELL}`).hasText("10 minutes ago");
+    assert.dom(`[data-test-two] ${TIME_CELL}`).hasText("10 seconds ago");
+  });
+
+  test('it renders "Unknown" as a fallback', async function (this: TableRowComponentTestContext, assert) {
+    this.set("doc", this.server.create("document", { createdTime: null }));
+
+    await render<TableRowComponentTestContext>(hbs`
+      <Table::Row
+        @doc={{this.doc}}
+        @timeColumn="createdTime"
+      />
+    `);
+
+    assert
+      .dom(TIME_CELL)
+      .hasText("Unknown")
+      .hasClass("text-color-foreground-disabled");
+  });
+});