Iterate

matrix-org · Aug 18, 2023 · 60106a1 · 60106a1
1 parent 19dd2f0
commit 60106a1
Show file tree

Hide file tree

Showing 17 changed files with 83 additions and 47 deletions.
diff --git a/cypress/e2e/editing/editing.spec.ts b/cypress/e2e/editing/editing.spec.ts
@@ -119,7 +119,7 @@ describe("Editing", () => {
                 // Assert that the date separator is rendered at the top
                 cy.get("li:nth-child(1) .mx_DateSeparator").within(() => {
                     cy.get("h2").within(() => {
-                        cy.findByText("Today");
+                        cy.findByText("today").should("have.css", "text-transform", "capitalize");
                     });
                 });
 
@@ -184,7 +184,7 @@ describe("Editing", () => {
                 // Assert that the date is rendered
                 cy.get("li:nth-child(1) .mx_DateSeparator").within(() => {
                     cy.get("h2").within(() => {
-                        cy.findByText("Today");
+                        cy.findByText("today").should("have.css", "text-transform", "capitalize");
                     });
                 });
 

diff --git a/cypress/e2e/settings/general-user-settings-tab.spec.ts b/cypress/e2e/settings/general-user-settings-tab.spec.ts
@@ -133,10 +133,12 @@ describe("General user settings tab", () => {
                     cy.findByRole("button", { name: "Language Dropdown" }).click();
 
                     // Assert that the default option is rendered and highlighted
-                    cy.findByRole("option", { name: /Bahasa Indonesia/ })
+                    cy.findByRole("option", { name: /Albanian/ })
                         .should("be.visible")
                         .should("have.class", "mx_Dropdown_option_highlight");
 
+                    cy.findByRole("option", { name: /Deutsch/ }).should("be.visible");
+
                     // Click again to close the dropdown
                     cy.findByRole("button", { name: "Language Dropdown" }).click();
 

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
@@ -190,6 +190,7 @@
 @import "./views/elements/_InteractiveTooltip.pcss";
 @import "./views/elements/_InviteReason.pcss";
 @import "./views/elements/_LabelledCheckbox.pcss";
+@import "./views/elements/_LanguageDropdown.pcss";
 @import "./views/elements/_MiniAvatarUploader.pcss";
 @import "./views/elements/_Pill.pcss";
 @import "./views/elements/_PowerSelector.pcss";

diff --git a/res/css/views/elements/_LanguageDropdown.pcss b/res/css/views/elements/_LanguageDropdown.pcss
@@ -0,0 +1,21 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_LanguageDropdown {
+    .mx_Dropdown_option > div {
+        text-transform: capitalize;
+    }
+}
diff --git a/src/DateUtils.ts b/src/DateUtils.ts
@@ -41,7 +41,7 @@ export function formatDate(date: Date, showTwelveHour = false, locale?: string):
     } else if (now.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
         return new Intl.DateTimeFormat(_locale, {
             weekday: "short",
-            hour: "2-digit",
+            hour: "numeric",
             minute: "2-digit",
             hour12: showTwelveHour,
         }).format(new Date());
@@ -50,7 +50,7 @@ export function formatDate(date: Date, showTwelveHour = false, locale?: string):
             weekday: "short",
             month: "short",
             day: "numeric",
-            hour: "2-digit",
+            hour: "numeric",
             minute: "2-digit",
             hour12: showTwelveHour,
         }).format(new Date());
@@ -73,7 +73,7 @@ export function formatFullDate(date: Date, showTwelveHour = false, showSeconds =
         month: "short",
         day: "numeric",
         year: "numeric",
-        hour: "2-digit",
+        hour: "numeric",
         minute: "2-digit",
         second: showSeconds ? "2-digit" : undefined,
         hour12: showTwelveHour,
@@ -91,14 +91,13 @@ export function formatDateForInput(date: Date): string {
     const year = `${date.getFullYear()}`.padStart(4, "0");
     const month = `${date.getMonth() + 1}`.padStart(2, "0");
     const day = `${date.getDate()}`.padStart(2, "0");
-    const dateInputValue = `${year}-${month}-${day}`;
-    return dateInputValue;
+    return `${year}-${month}-${day}`;
 }
 
 export function formatFullTime(date: Date, showTwelveHour = false, locale?: string): string {
     return new Intl.DateTimeFormat(locale ?? getUserLanguage(), {
         weekday: "short",
-        hour: "2-digit",
+        hour: "numeric",
         minute: "2-digit",
         second: "2-digit",
         hour12: showTwelveHour,
@@ -107,7 +106,7 @@ export function formatFullTime(date: Date, showTwelveHour = false, locale?: stri
 
 export function formatTime(date: Date, showTwelveHour = false, locale?: string): string {
     return new Intl.DateTimeFormat(locale ?? getUserLanguage(), {
-        hour: "2-digit",
+        hour: "numeric",
         minute: "2-digit",
         hour12: showTwelveHour,
     }).format(date);

diff --git a/src/components/views/elements/LanguageDropdown.tsx b/src/components/views/elements/LanguageDropdown.tsx
@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React, { ReactElement } from "react";
+import classNames from "classnames";
 
 import * as languageHandler from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
@@ -27,6 +28,7 @@ import { NonEmptyArray } from "../../../@types/common";
 type Languages = Awaited<ReturnType<typeof languageHandler.getAllLanguagesWithLabels>>;
 
 function languageMatchesSearchQuery(query: string, language: Languages[0]): boolean {
+    if (language.labelInTargetLanguage.toUpperCase().includes(query.toUpperCase())) return true;
     if (language.label.toUpperCase().includes(query.toUpperCase())) return true;
     if (language.value.toUpperCase() === query.toUpperCase()) return true;
     return false;
@@ -59,8 +61,8 @@ export default class LanguageDropdown extends React.Component<IProps, IState> {
             .getAllLanguagesWithLabels()
             .then((langs) => {
                 langs.sort(function (a, b) {
-                    if (a.label < b.label) return -1;
-                    if (a.label > b.label) return 1;
+                    if (a.labelInTargetLanguage < b.labelInTargetLanguage) return -1;
+                    if (a.labelInTargetLanguage > b.labelInTargetLanguage) return 1;
                     return 0;
                 });
                 this.setState({ langs });
@@ -106,7 +108,7 @@ export default class LanguageDropdown extends React.Component<IProps, IState> {
         }
 
         const options = displayedLanguages.map((language) => {
-            return <div key={language.value}>{language.label}</div>;
+            return <div key={language.value}>{language.labelInTargetLanguage}</div>;
         }) as NonEmptyArray<ReactElement & { key: string }>;
 
         // default value here too, otherwise we need to handle null / undefined
@@ -123,7 +125,7 @@ export default class LanguageDropdown extends React.Component<IProps, IState> {
         return (
             <Dropdown
                 id="mx_LanguageDropdown"
-                className={this.props.className}
+                className={classNames("mx_LanguageDropdown", this.props.className)}
                 onOptionChange={this.props.onOptionChange}
                 onSearchChange={this.onSearchChange}
                 searchEnabled={true}

diff --git a/test/components/structures/TimelinePanel-test.tsx b/test/components/structures/TimelinePanel-test.tsx
@@ -96,6 +96,7 @@ const mockEvents = (room: Room, count = 2): MatrixEvent[] => {
                 type: EventType.RoomMessage,
                 sender: "userId",
                 content: createMessageEventContent("`Event${index}`"),
+                origin_server_ts: index,
             }),
         );
     }
@@ -447,7 +448,7 @@ describe("TimelinePanel", () => {
 
             render(<TimelinePanel {...props} />);
 
-            const event = new MatrixEvent({ type: RoomEvent.Timeline });
+            const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
             const data = { timeline: otherTimeline, liveEvent: true };
             client.emit(RoomEvent.Timeline, event, room, false, false, data);
 
@@ -463,7 +464,7 @@ describe("TimelinePanel", () => {
 
             render(<TimelinePanel {...props} />);
 
-            const event = new MatrixEvent({ type: RoomEvent.Timeline });
+            const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
             const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: false };
             client.emit(RoomEvent.Timeline, event, room, false, false, data);
 
@@ -479,7 +480,7 @@ describe("TimelinePanel", () => {
 
             render(<TimelinePanel {...props} />);
 
-            const event = new MatrixEvent({ type: RoomEvent.Timeline });
+            const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
             const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: false };
             const toStartOfTimeline = true;
             client.emit(RoomEvent.Timeline, event, room, toStartOfTimeline, false, data);
@@ -496,7 +497,7 @@ describe("TimelinePanel", () => {
 
             render(<TimelinePanel {...props} />);
 
-            const event = new MatrixEvent({ type: RoomEvent.Timeline });
+            const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
             const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: true };
             client.emit(RoomEvent.Timeline, event, room, false, false, data);
 
@@ -521,7 +522,7 @@ describe("TimelinePanel", () => {
 
             await flushPromises();
 
-            const event = new MatrixEvent({ type: RoomEvent.Timeline });
+            const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
             const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: true };
             client.emit(RoomEvent.Timeline, event, room, false, false, data);
 
@@ -539,11 +540,13 @@ describe("TimelinePanel", () => {
                 type: "m.call.invite",
                 room_id: virtualRoom.roomId,
                 event_id: `virtualCallEvent1`,
+                origin_server_ts: 0,
             });
             const virtualCallMetaEvent = new MatrixEvent({
                 type: "org.matrix.call.sdp_stream_metadata_changed",
                 room_id: virtualRoom.roomId,
                 event_id: `virtualCallEvent2`,
+                origin_server_ts: 0,
             });
             const virtualEvents = [virtualCallInvite, ...mockEvents(virtualRoom), virtualCallMetaEvent];
             const { timelineSet: overlayTimelineSet } = getProps(virtualRoom, virtualEvents);
@@ -819,6 +822,7 @@ describe("TimelinePanel", () => {
                 type: EventType.RoomMessage,
                 sender: "userId",
                 content: createMessageEventContent("ReplyEvent1"),
+                origin_server_ts: 0,
             });
 
             reply2 = new MatrixEvent({
@@ -827,6 +831,7 @@ describe("TimelinePanel", () => {
                 type: EventType.RoomMessage,
                 sender: "userId",
                 content: createMessageEventContent("ReplyEvent2"),
+                origin_server_ts: 0,
             });
 
             root = new MatrixEvent({
@@ -835,6 +840,7 @@ describe("TimelinePanel", () => {
                 type: EventType.RoomMessage,
                 sender: "userId",
                 content: createMessageEventContent("RootEvent"),
+                origin_server_ts: 0,
             });
 
             const eventMap: { [key: string]: MatrixEvent } = {

diff --git a/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap b/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap
@@ -39,7 +39,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
           data-testid="__testid__"
         >
           <div
-            aria-label="Thu, Jan 1 1970"
+            aria-label="Thu, Jan 1, 1970"
             class="mx_DateSeparator"
             role="separator"
           >
@@ -53,7 +53,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
                 aria-hidden="true"
                 class="mx_DateSeparator_dateHeading"
               >
-                Thu, Jan 1 1970
+                Thu, Jan 1, 1970
               </h2>
             </div>
             <hr

diff --git a/test/components/views/dialogs/MessageEditHistoryDialog-test.tsx b/test/components/views/dialogs/MessageEditHistoryDialog-test.tsx
@@ -51,7 +51,7 @@ describe("<MessageEditHistory />", () => {
                         new MatrixEvent({
                             type: EventType.RoomMessage,
                             room_id: roomId,
-                            origin_server_ts: e.ts,
+                            origin_server_ts: e.ts ?? 0,
                             content: {
                                 body: e.msg,
                             },

diff --git a/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
@@ -45,7 +45,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
           >
             <li>
               <div
-                aria-label="Thu, Jan 1 1970"
+                aria-label="Thu, Jan 1, 1970"
                 class="mx_DateSeparator"
                 role="separator"
               >
@@ -59,7 +59,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
                     aria-hidden="true"
                     class="mx_DateSeparator_dateHeading"
                   >
-                    Thu, Jan 1 1970
+                    Thu, Jan 1, 1970
                   </h2>
                 </div>
                 <hr
@@ -77,7 +77,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
                   <span
                     class="mx_MessageTimestamp"
                   >
-                    00:00
+                    24:00
                   </span>
                   <div
                     class="mx_EventTile_content"
@@ -161,7 +161,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
           >
             <li>
               <div
-                aria-label=",  NaN NaN"
+                aria-label="Thu, Jan 1, 1970"
                 class="mx_DateSeparator"
                 role="separator"
               >
@@ -175,7 +175,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                     aria-hidden="true"
                     class="mx_DateSeparator_dateHeading"
                   >
-                    ,  NaN NaN
+                    Thu, Jan 1, 1970
                   </h2>
                 </div>
                 <hr
@@ -193,7 +193,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                   <span
                     class="mx_MessageTimestamp"
                   >
-                    NaN:NaN
+                    24:00
                   </span>
                   <div
                     class="mx_EventTile_content"
@@ -236,7 +236,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                   <span
                     class="mx_MessageTimestamp"
                   >
-                    NaN:NaN
+                    24:00
                   </span>
                   <div
                     class="mx_EventTile_content"
@@ -290,7 +290,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                   <span
                     class="mx_MessageTimestamp"
                   >
-                    NaN:NaN
+                    24:00
                   </span>
                   <div
                     class="mx_EventTile_content"

diff --git a/test/components/views/messages/DateSeparator-test.tsx b/test/components/views/messages/DateSeparator-test.tsx
@@ -60,11 +60,11 @@ describe("DateSeparator", () => {
 
     type TestCase = [string, number, string];
     const testCases: TestCase[] = [
-        ["the exact same moment", nowDate.getTime(), "Today"],
-        ["same day as current day", nowDate.getTime() - HOUR_MS, "Today"],
-        ["day before the current day", nowDate.getTime() - HOUR_MS * 12, "Yesterday"],
+        ["the exact same moment", nowDate.getTime(), "today"],
+        ["same day as current day", nowDate.getTime() - HOUR_MS, "today"],
+        ["day before the current day", nowDate.getTime() - HOUR_MS * 12, "yesterday"],
         ["2 days ago", nowDate.getTime() - DAY_MS * 2, "Wednesday"],
-        ["144 hours ago", nowDate.getTime() - HOUR_MS * 144, "Sat, Dec 11 2021"],
+        ["144 hours ago", nowDate.getTime() - HOUR_MS * 144, "Sat, Dec 11, 2021"],
         [
             "6 days ago, but less than 144h",
             new Date("Saturday Dec 11 2021 23:59:00 GMT+0100 (Central European Standard Time)").getTime(),