Replace 2-digit years with numerical years everywhere in the frontend (#2394)

Closes #2365

---------

Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>

frontend/src/components/orgs-list.ts

@@ -738,7 +738,14 @@ export class OrgsList extends BtrixElement {
           </a>
         </btrix-table-cell>
         <btrix-table-cell class="p-2">
-          ${this.localize.date(org.created, { dateStyle: "short" })}
+          ${org.created
+            ? html` <btrix-format-date
+                date=${org.created}
+                month="2-digit"
+                day="2-digit"
+                year="numeric"
+              ></btrix-format-date>`
+            : none}
         </btrix-table-cell>
         <btrix-table-cell class="p-2">
           ${memberCount ? this.localize.number(memberCount) : none}
@@ -750,7 +757,12 @@ export class OrgsList extends BtrixElement {
         </btrix-table-cell>
         <btrix-table-cell class="p-2">
           ${org.lastCrawlFinished
-            ? this.localize.date(org.lastCrawlFinished, { dateStyle: "short" })
+            ? html`<btrix-format-date
+                date=${org.lastCrawlFinished}
+                month="2-digit"
+                day="2-digit"
+                year="numeric"
+              ></btrix-format-date>`
             : none}
         </btrix-table-cell>
         <btrix-table-cell class="p-1">

frontend/src/components/ui/format-date.ts

@@ -31,7 +31,9 @@ export class FormatDate extends LitElement {
   @property() era?: "narrow" | "short" | "long";
 
   /** The format for displaying the year. */
-  @property() year?: "numeric" | "2-digit";
+  // Technically "2-digit" is a valid option here too, but we've chosen not to
+  // use it, because it's sometimes ambiguous
+  @property() year?: "numeric";
 
   /** The format for displaying the month. */
   @property() month?: "numeric" | "2-digit" | "narrow" | "short" | "long";

frontend/src/features/archived-items/archived-item-list.ts

@@ -231,7 +231,7 @@ export class ArchivedItemListItem extends BtrixElement {
               .date=${this.item.finished}
               month="2-digit"
               day="2-digit"
-              year="2-digit"
+              year="numeric"
             ></btrix-format-date>
           </sl-tooltip>
         </btrix-table-cell>

frontend/src/features/archived-items/crawl-list.ts

@@ -78,7 +78,7 @@ export class CrawlListItem extends BtrixElement {
                 date=${crawl.started}
                 month="2-digit"
                 day="2-digit"
-                year="2-digit"
+                year="numeric"
                 hour="2-digit"
                 minute="2-digit"
               ></btrix-format-date>
@@ -148,7 +148,7 @@ export class CrawlListItem extends BtrixElement {
                       date=${crawl.started}
                       month="2-digit"
                       day="2-digit"
-                      year="2-digit"
+                      year="numeric"
                       hour="2-digit"
                       minute="2-digit"
                     ></btrix-format-date>
@@ -164,7 +164,7 @@ export class CrawlListItem extends BtrixElement {
                     date=${crawl.finished}
                     month="2-digit"
                     day="2-digit"
-                    year="2-digit"
+                    year="numeric"
                     hour="2-digit"
                     minute="2-digit"
                   ></btrix-format-date>

frontend/src/features/archived-items/crawl-logs.ts

@@ -126,7 +126,7 @@ export class CrawlLogs extends LitElement {
                     date=${log.timestamp}
                     month="2-digit"
                     day="2-digit"
-                    year="2-digit"
+                    year="numeric"
                     hour="2-digit"
                     minute="2-digit"
                     second="2-digit"

frontend/src/features/browser-profiles/select-browser-profile.ts

@@ -88,7 +88,7 @@ export class SelectBrowserProfile extends BtrixElement {
                     .date=${profile.modified}
                     month="2-digit"
                     day="2-digit"
-                    year="2-digit"
+                    year="numeric"
                   ></btrix-format-date>
                 </div></div
             ></sl-option>
@@ -106,7 +106,7 @@ export class SelectBrowserProfile extends BtrixElement {
                     .date=${this.selectedProfile.modified}
                     month="2-digit"
                     day="2-digit"
-                    year="2-digit"
+                    year="numeric"
                     hour="2-digit"
                     minute="2-digit"
                   ></btrix-format-date>

frontend/src/features/collections/collection-workflow-list.ts

@@ -280,7 +280,7 @@ export class CollectionWorkflowList extends BtrixElement {
               .date=${crawl.finished}
               month="2-digit"
               day="2-digit"
-              year="2-digit"
+              year="numeric"
               hour="2-digit"
               minute="2-digit"
             ></btrix-format-date>

frontend/src/features/crawl-workflows/workflow-list.ts

@@ -262,7 +262,7 @@ export class WorkflowListItem extends BtrixElement {
                   date="${workflow.lastRun.toString()}"
                   month="2-digit"
                   day="2-digit"
-                  year="2-digit"
+                  year="numeric"
                   hour="2-digit"
                   minute="2-digit"
                 ></btrix-format-date>
@@ -350,7 +350,7 @@ export class WorkflowListItem extends BtrixElement {
                 date="${workflow.modified}"
                 month="2-digit"
                 day="2-digit"
-                year="2-digit"
+                year="numeric"
                 hour="2-digit"
                 minute="2-digit"
               ></btrix-format-date>

frontend/src/pages/org/archived-item-detail/archived-item-detail.ts

@@ -155,7 +155,7 @@ export class ArchivedItemDetail extends BtrixElement {
       date=${this.item.finished!}
       month="2-digit"
       day="2-digit"
-      year="2-digit"
+      year="numeric"
       hour="numeric"
       minute="numeric"
       time-zone-name="short"
@@ -778,7 +778,7 @@ export class ArchivedItemDetail extends BtrixElement {
                     date=${this.item!.started}
                     month="2-digit"
                     day="2-digit"
-                    year="2-digit"
+                    year="numeric"
                     hour="numeric"
                     minute="numeric"
                     time-zone-name="short"

frontend/src/pages/org/archived-item-detail/ui/qa.ts

@@ -353,7 +353,7 @@ export class ArchivedItemDetailQA extends BtrixElement {
               date=${run.started}
               month="2-digit"
               day="2-digit"
-              year="2-digit"
+              year="numeric"
               hour="2-digit"
               minute="2-digit"
             ></btrix-format-date>
@@ -365,7 +365,7 @@ export class ArchivedItemDetailQA extends BtrixElement {
                     date=${run.finished}
                     month="2-digit"
                     day="2-digit"
-                    year="2-digit"
+                    year="numeric"
                     hour="2-digit"
                     minute="2-digit"
                   ></btrix-format-date>
@@ -433,7 +433,7 @@ export class ArchivedItemDetailQA extends BtrixElement {
               date=${runToBeDeleted.started}
               month="2-digit"
               day="2-digit"
-              year="2-digit"
+              year="numeric"
               hour="2-digit"
               minute="2-digit"
             ></btrix-format-date>

frontend/src/pages/org/archived-item-qa/archived-item-qa.ts

@@ -903,7 +903,7 @@ export class ArchivedItemQA extends BtrixElement {
                 .date=${page.ts}
                 month="2-digit"
                 day="2-digit"
-                year="2-digit"
+                year="numeric"
                 hour="2-digit"
                 minute="2-digit"
               >

frontend/src/pages/org/browser-profiles-detail.ts

@@ -119,7 +119,7 @@ export class BrowserProfilesDetail extends BtrixElement {
                     date=${this.profile.created}
                     month="2-digit"
                     day="2-digit"
-                    year="2-digit"
+                    year="numeric"
                     hour="numeric"
                     minute="numeric"
                     time-zone-name="short"
@@ -136,7 +136,7 @@ export class BrowserProfilesDetail extends BtrixElement {
                   }
                   month="2-digit"
                   day="2-digit"
-                  year="2-digit"
+                  year="numeric"
                   hour="numeric"
                   minute="numeric"
                   time-zone-name="short"

frontend/src/pages/org/browser-profiles-list.ts

@@ -281,7 +281,7 @@ export class BrowserProfilesList extends BtrixElement {
               date=${data.created}
               month="2-digit"
               day="2-digit"
-              year="2-digit"
+              year="numeric"
               hour="2-digit"
               minute="2-digit"
             ></btrix-format-date>
@@ -299,7 +299,7 @@ export class BrowserProfilesList extends BtrixElement {
               }
               month="2-digit"
               day="2-digit"
-              year="2-digit"
+              year="numeric"
               hour="2-digit"
               minute="2-digit"
             ></btrix-format-date>

frontend/src/pages/org/collections-list.ts

@@ -566,7 +566,7 @@ export class CollectionsList extends BtrixElement {
           date=${col.modified}
           month="2-digit"
           day="2-digit"
-          year="2-digit"
+          year="numeric"
         ></btrix-format-date>
       </btrix-table-cell>
       <btrix-table-cell class="p-0">

frontend/src/utils/localize.test.ts

@@ -70,7 +70,7 @@ describe("Localize", () => {
       const localize = new Localize();
       localize.setLanguage("es");
       expect(localize.date(new Date("2024-01-01T00:00:00.000Z"))).to.equal(
-        "31/12/23, 19:00",
+        "31/12/2023, 19:00",
       );
     });
 
@@ -110,7 +110,7 @@ describe("Localize", () => {
     it("formats with the current language", () => {
       const localize = new Localize("ko");
       expect(localize.date(new Date("2024-01-01T00:00:00.000Z"))).to.equal(
-        "23. 12. 31. 오후 07:00",
+        "2023. 12. 31. 오후 07:00",
       );
     });
 

frontend/src/utils/localize.ts

@@ -36,7 +36,7 @@ const { getLocale, setLocale } = configureLocalization({
 });
 
 const defaultDateOptions: Intl.DateTimeFormatOptions = {
-  year: "2-digit",
+  year: "numeric",
   month: "2-digit",
   day: "2-digit",
   hour: "2-digit",