commit 8e684b9673b8e0aee68151a5ab30e1ff1c534262
Author: Ben Rohlfs <brohlfs@google.com>
Date:   Wed Oct 7 09:09:38 2020 +0200

    Add 'Since' and 'Submitted' columns to dashboard sections
    
    Change-Id: I45944beb1a4b03a475442f074275cd2b5d83296c

diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.ts
index 5a345f2..fee5247 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.ts
@@ -46,6 +46,7 @@ import {
   ServerInfo,
   AccountInfo,
   QuickLabelInfo,
+  Timestamp,
 } from '../../../types/common';
 import {hasOwnProperty} from '../../../utils/common-util';
 
@@ -383,6 +384,14 @@ export class GrChangeListItem extends ChangeTableMixin(
     }
   }
 
+  _computeSince(
+    account?: AccountInfo,
+    change?: ChangeInfo
+  ): Timestamp | undefined {
+    if (!account?._account_id || !change?.attention_set) return undefined;
+    return change?.attention_set[account._account_id]?.last_update;
+  }
+
   toggleReviewed() {
     const newVal = !this.change?.reviewed;
     this.set('change.reviewed', newVal);
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.ts
index 2e98349..2ae6c37 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.ts
@@ -265,6 +265,26 @@ export const htmlTemplate = html`
     ></gr-date-formatter>
   </td>
   <td
+    class="cell submitted"
+    hidden$="[[isColumnHidden('Submitted', visibleChangeTableColumns)]]"
+  >
+    <gr-date-formatter
+      has-tooltip=""
+      date-str="[[change.submitted]]"
+    ></gr-date-formatter>
+  </td>
+  <td
+    class="cell since"
+    hidden$="[[isColumnHidden('Since', visibleChangeTableColumns)]]"
+  >
+    <gr-date-formatter
+      has-tooltip=""
+      force-relative=""
+      relative-option-no-ago=""
+      date-str="[[_computeSince(account, change)]]"
+    ></gr-date-formatter>
+  </td>
+  <td
     class="cell size"
     hidden$="[[isColumnHidden('Size', visibleChangeTableColumns)]]"
   >
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.ts b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.ts
index 974d648..974238f 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.ts
@@ -38,6 +38,7 @@ import {
   GerritNav,
   DashboardSection,
   YOUR_TURN,
+  CLOSED,
 } from '../../core/gr-navigation/gr-navigation';
 import {getPluginEndpoints} from '../../shared/gr-js-api-interface/gr-plugin-endpoints';
 import {getPluginLoader} from '../../shared/gr-js-api-interface/gr-plugin-loader';
@@ -59,6 +60,8 @@ const LABEL_PREFIX_INVALID_PROLOG = 'Invalid-Prolog-Rules-Label-Name--';
 const MAX_SHORTCUT_CHARS = 5;
 
 export interface ChangeListSection {
+  name?: string;
+  query?: string;
   results: ChangeInfo[];
 }
 export interface GrChangeList {
@@ -231,9 +234,35 @@ export class GrChangeList extends ChangeTableMixin(
     }
   }
 
-  _computeColspan(changeTableColumns: string[], labelNames: string[]) {
-    if (!changeTableColumns || !labelNames) return;
-    return changeTableColumns.length + labelNames.length + NUMBER_FIXED_COLUMNS;
+  /**
+   * This methods allows us to customize the columns per section.
+   *
+   * @param visibleColumns are the columns according to configs and user prefs
+   */
+  _computeColumns(
+    section?: ChangeListSection,
+    visibleColumns?: string[]
+  ): string[] {
+    if (!section || !visibleColumns) return [];
+    const cols = [...visibleColumns];
+    const updatedIndex = cols.indexOf('Updated');
+    if (section.name === YOUR_TURN.name && updatedIndex !== -1) {
+      cols[updatedIndex] = 'Since';
+    }
+    if (section.name === CLOSED.name && updatedIndex !== -1) {
+      cols[updatedIndex] = 'Submitted';
+    }
+    return cols;
+  }
+
+  _computeColspan(
+    section?: ChangeListSection,
+    visibleColumns?: string[],
+    labelNames?: string[]
+  ) {
+    const cols = this._computeColumns(section, visibleColumns);
+    if (!cols || !labelNames) return 1;
+    return cols.length + labelNames.length + NUMBER_FIXED_COLUMNS;
   }
 
   _computeLabelNames(sections: ChangeListSection[]) {
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_html.ts b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_html.ts
index eb489b0..6a66472 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_html.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_html.ts
@@ -61,7 +61,7 @@ export const htmlTemplate = html`
             ></td>
             <td
               class="cell"
-              colspan$="[[_computeColspan(changeTableColumns, labelNames)]]"
+              colspan$="[[_computeColspan(changeSection, visibleChangeTableColumns, labelNames)]]"
             >
               <a
                 href$="[[_sectionHref(changeSection.query)]]"
@@ -83,7 +83,7 @@ export const htmlTemplate = html`
             <td aria-hidden="true" class="star" hidden></td>
             <td
               class="cell"
-              colspan$="[[_computeColspan(changeTableColumns, labelNames)]]"
+              colspan$="[[_computeColspan(changeSection, visibleChangeTableColumns, labelNames)]]"
             >
               <template
                 is="dom-if"
@@ -110,11 +110,12 @@ export const htmlTemplate = html`
               hidden=""
             ></td>
             <td class="number" hidden$="[[!showNumber]]" hidden="">#</td>
-            <template is="dom-repeat" items="[[changeTableColumns]]" as="item">
-              <td
-                class$="[[_lowerCase(item)]]"
-                hidden$="[[isColumnHidden(item, visibleChangeTableColumns)]]"
-              >
+            <template
+              is="dom-repeat"
+              items="[[_computeColumns(changeSection, visibleChangeTableColumns)]]"
+              as="item"
+            >
+              <td class$="[[_lowerCase(item)]]">
                 [[item]]
               </td>
             </template>
@@ -144,7 +145,7 @@ export const htmlTemplate = html`
             change="[[change]]"
             config="[[_config]]"
             section-name="[[changeSection.name]]"
-            visible-change-table-columns="[[visibleChangeTableColumns]]"
+            visible-change-table-columns="[[_computeColumns(changeSection, visibleChangeTableColumns)]]"
             show-number="[[showNumber]]"
             show-star="[[showStar]]"
             tabindex$="[[_computeTabIndex(sectionIndex, index, selectedIndex)]]"
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.js b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.js
index b31d907..494d05a 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.js
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.js
@@ -146,7 +146,7 @@ suite('gr-change-list basic tests', () => {
     const changeTableColumns = [];
     const labelNames = [];
     assert.equal(tdItemCount, element._computeColspan(
-        changeTableColumns, labelNames));
+        {}, changeTableColumns, labelNames));
   });
 
   test('keyboard shortcuts', done => {
@@ -417,11 +417,9 @@ suite('gr-change-list basic tests', () => {
       for (const column of element.changeTableColumns) {
         const elementClass = '.' + column.toLowerCase();
         if (column === 'Repo') {
-          assert.isTrue(element.shadowRoot
-              .querySelector(elementClass).hidden);
+          assert.isNotOk(element.shadowRoot.querySelector(elementClass));
         } else {
-          assert.isFalse(element.shadowRoot
-              .querySelector(elementClass).hidden);
+          assert.isOk(element.shadowRoot.querySelector(elementClass));
         }
       }
     });
diff --git a/polygerrit-ui/app/elements/core/gr-navigation/gr-navigation.ts b/polygerrit-ui/app/elements/core/gr-navigation/gr-navigation.ts
index 7b56688..34addcd 100644
--- a/polygerrit-ui/app/elements/core/gr-navigation/gr-navigation.ts
+++ b/polygerrit-ui/app/elements/core/gr-navigation/gr-navigation.ts
@@ -208,7 +208,7 @@ const CCED: DashboardSection = {
   query: 'is:open -is:ignored cc:${user}',
   suffixForDashboard: 'limit:10',
 };
-const CLOSED: DashboardSection = {
+export const CLOSED: DashboardSection = {
   name: 'Recently closed',
   // Closed changes where viewed user is owner, reviewer, or assignee.
   // Changes ignored by the viewing user are filtered out, and so are WIP
diff --git a/polygerrit-ui/app/elements/shared/gr-date-formatter/gr-date-formatter.ts b/polygerrit-ui/app/elements/shared/gr-date-formatter/gr-date-formatter.ts
index 798f58b..c64dc2a 100644
--- a/polygerrit-ui/app/elements/shared/gr-date-formatter/gr-date-formatter.ts
+++ b/polygerrit-ui/app/elements/shared/gr-date-formatter/gr-date-formatter.ts
@@ -122,7 +122,13 @@ export class GrDateFormatter extends TooltipMixin(
   _timeFormat?: string;
 
   @property({type: Boolean})
-  _relative?: boolean;
+  _relative = false;
+
+  @property({type: Boolean})
+  forceRelative = false;
+
+  @property({type: Boolean})
+  relativeOptionNoAgo = false;
 
   constructor() {
     super();
@@ -143,7 +149,7 @@ export class GrDateFormatter extends TooltipMixin(
       if (!loggedIn) {
         this._timeFormat = TimeFormats.TIME_24;
         this._dateFormat = DateFormats.STD;
-        this._relative = false;
+        this._relative = this.forceRelative;
         return;
       }
       return Promise.all([this._loadTimeFormat(), this._loadRelative()]);
@@ -198,7 +204,8 @@ export class GrDateFormatter extends TooltipMixin(
   _loadRelative() {
     return this._getPreferences().then(prefs => {
       // prefs.relative_date_in_change_table is not set when false.
-      this._relative = !!(prefs && prefs.relative_date_in_change_table);
+      this._relative =
+        this.forceRelative || !!(prefs && prefs.relative_date_in_change_table);
     });
   }
 
@@ -225,7 +232,7 @@ export class GrDateFormatter extends TooltipMixin(
       return '';
     }
     if (relative) {
-      return fromNow(date);
+      return fromNow(date, this.relativeOptionNoAgo);
     }
     const now = new Date();
     let format = dateFormat.full;
diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.ts b/polygerrit-ui/app/styles/gr-change-list-styles.ts
index 38a94d4..da62936 100644
--- a/polygerrit-ui/app/styles/gr-change-list-styles.ts
+++ b/polygerrit-ui/app/styles/gr-change-list-styles.ts
@@ -91,6 +91,8 @@ $_documentContainer.innerHTML = `<dom-module id="gr-change-list-styles">
       .owner,
       .assignee,
       .updated,
+      .submitted,
+      .since,
       .size,
       .status,
       .repo {
@@ -170,6 +172,8 @@ $_documentContainer.innerHTML = `<dom-module id="gr-change-list-styles">
         .repo,
         .branch,
         .updated,
+        .submitted,
+        .since,
         .label,
         .assignee,
         .groupHeader .star,
diff --git a/polygerrit-ui/app/utils/date-util.ts b/polygerrit-ui/app/utils/date-util.ts
index 7748b9d..3cad21a 100644
--- a/polygerrit-ui/app/utils/date-util.ts
+++ b/polygerrit-ui/app/utils/date-util.ts
@@ -36,25 +36,29 @@ export function isValidDate(date: any): date is Date {
 }
 
 // similar to fromNow from moment.js
-export function fromNow(date: Date) {
+export function fromNow(date: Date, noAgo = false) {
   const now = new Date();
+  const ago = noAgo ? '' : ' ago';
   const secondsAgo = Math.round((now.valueOf() - date.valueOf()) / 1000);
-  if (secondsAgo <= 44) return 'just now';
-  if (secondsAgo <= 89) return 'a minute ago';
+  if (secondsAgo <= 59) return 'just now';
+  if (secondsAgo <= 119) return `1 minute${ago}`;
   const minutesAgo = Math.round(secondsAgo / 60);
-  if (minutesAgo <= 44) return `${minutesAgo} minutes ago`;
-  if (minutesAgo <= 89) return 'an hour ago';
+  if (minutesAgo <= 59) return `${minutesAgo} minutes${ago}`;
+  if (minutesAgo === 60) return `1 hour${ago}`;
+  if (minutesAgo <= 119) return `1 hour ${minutesAgo - 60} min${ago}`;
   const hoursAgo = Math.round(minutesAgo / 60);
-  if (hoursAgo <= 21) return `${hoursAgo} hours ago`;
-  if (hoursAgo <= 35) return 'a day ago';
+  if (hoursAgo <= 23) return `${hoursAgo} hours${ago}`;
+  if (hoursAgo === 24) return `1 day${ago}`;
+  if (hoursAgo <= 47) return `1 day ${hoursAgo - 24} hr${ago}`;
   const daysAgo = Math.round(hoursAgo / 24);
-  if (daysAgo <= 25) return `${daysAgo} days ago`;
-  if (daysAgo <= 45) return 'a month ago';
+  if (daysAgo <= 30) return `${daysAgo} days${ago}`;
+  if (daysAgo <= 60) return `1 month${ago}`;
   const monthsAgo = Math.round(daysAgo / 30);
-  if (daysAgo <= 319) return `${monthsAgo} months ago`;
-  if (daysAgo <= 547) return 'a year ago';
+  if (monthsAgo <= 11) return `${monthsAgo} months${ago}`;
+  if (monthsAgo === 12) return `1 year${ago}`;
+  if (monthsAgo <= 24) return `1 year ${monthsAgo - 12} m${ago}`;
   const yearsAgo = Math.round(daysAgo / 365);
-  return `${yearsAgo} years ago`;
+  return `${yearsAgo} years${ago}`;
 }
 
 /**
diff --git a/polygerrit-ui/app/utils/date-util_test.js b/polygerrit-ui/app/utils/date-util_test.js
index 7b22cc6..a003c65 100644
--- a/polygerrit-ui/app/utils/date-util_test.js
+++ b/polygerrit-ui/app/utils/date-util_test.js
@@ -39,15 +39,18 @@ suite('date-util tests', () => {
       const fakeNow = new Date('May 08 2020 12:00:00');
       sinon.useFakeTimers(fakeNow.getTime());
       assert.equal('just now', fromNow(new Date('May 08 2020 11:59:30')));
-      assert.equal('a minute ago', fromNow(new Date('May 08 2020 11:59:00')));
+      assert.equal('1 minute ago', fromNow(new Date('May 08 2020 11:59:00')));
       assert.equal('5 minutes ago', fromNow(new Date('May 08 2020 11:55:00')));
-      assert.equal('an hour ago', fromNow(new Date('May 08 2020 11:00:00')));
+      assert.equal('1 hour ago', fromNow(new Date('May 08 2020 11:00:00')));
+      assert.equal(
+          '1 hour 5 min ago', fromNow(new Date('May 08 2020 10:55:00')));
       assert.equal('3 hours ago', fromNow(new Date('May 08 2020 9:00:00')));
-      assert.equal('a day ago', fromNow(new Date('May 07 2020 12:00:00')));
+      assert.equal('1 day ago', fromNow(new Date('May 07 2020 12:00:00')));
+      assert.equal('1 day 2 hr ago', fromNow(new Date('May 07 2020 10:00:00')));
       assert.equal('3 days ago', fromNow(new Date('May 05 2020 12:00:00')));
-      assert.equal('a month ago', fromNow(new Date('Apr 05 2020 12:00:00')));
+      assert.equal('1 month ago', fromNow(new Date('Apr 05 2020 12:00:00')));
       assert.equal('2 months ago', fromNow(new Date('Mar 05 2020 12:00:00')));
-      assert.equal('a year ago', fromNow(new Date('May 05 2019 12:00:00')));
+      assert.equal('1 year ago', fromNow(new Date('May 05 2019 12:00:00')));
       assert.equal('10 years ago', fromNow(new Date('May 05 2010 12:00:00')));
     });
   });
@@ -118,4 +121,4 @@ suite('date-util tests', () => {
           formatDate(new Date('Jul 03 2013 00:15:00'), timeFormat));
     });
   });
-});
\ No newline at end of file
+});