Allow user to set timezone (#12775)

* Allow user to set timezone

* Update test snapshots

---------

Co-authored-by: Florian Duros <florianduros@element.io>

test/TimezoneHandler-test.ts

@@ -0,0 +1,31 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2022 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.
+*/
+
+import * as tzh from "../src/TimezoneHandler";
+
+describe("TimezoneHandler", () => {
+    it("should support setting a user timezone", async () => {
+        const tz = "Europe/Paris";
+        await tzh.setUserTimezone(tz);
+        expect(tzh.getUserTimezone()).toEqual(tz);
+    });
+    it("Return undefined with an empty TZ", async () => {
+        await tzh.setUserTimezone("");
+        expect(tzh.getUserTimezone()).toEqual(undefined);
+    });
+});

test/components/views/rooms/SendMessageComposer-test.tsx

@@ -66,6 +66,7 @@ describe("<SendMessageComposer/>", () => {
         lowBandwidth: false,
         alwaysShowTimestamps: false,
         showTwelveHourTimestamps: false,
+        userTimezone: undefined,
         readMarkerInViewThresholdMs: 3000,
         readMarkerOutOfViewThresholdMs: 30000,
         showHiddenEvents: false,

test/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx

@@ -55,6 +55,32 @@ describe("PreferencesUserSettingsTab", () => {
         expect(reloadStub).toHaveBeenCalled();
     });
 
+    it("should search and select a user timezone", async () => {
+        renderTab();
+
+        expect(await screen.findByText(/Browser default/)).toBeInTheDocument();
+        const timezoneDropdown = await screen.findByRole("button", { name: "Set timezone" });
+        await userEvent.click(timezoneDropdown);
+
+        // Without filtering `expect(screen.queryByRole("option" ...` take over 1s.
+        await fireEvent.change(screen.getByRole("combobox", { name: "Set timezone" }), {
+            target: { value: "Africa/Abidjan" },
+        });
+
+        expect(screen.queryByRole("option", { name: "Africa/Abidjan" })).toBeInTheDocument();
+        expect(screen.queryByRole("option", { name: "Europe/Paris" })).not.toBeInTheDocument();
+
+        await fireEvent.change(screen.getByRole("combobox", { name: "Set timezone" }), {
+            target: { value: "Europe/Paris" },
+        });
+
+        expect(screen.queryByRole("option", { name: "Africa/Abidjan" })).not.toBeInTheDocument();
+        const option = await screen.getByRole("option", { name: "Europe/Paris" });
+        await userEvent.click(option);
+
+        expect(await screen.findByText("Europe/Paris")).toBeInTheDocument();
+    });
+
     it("should not show spell check setting if unsupported", async () => {
         PlatformPeg.get()!.supportsSpellCheckSettings = jest.fn().mockReturnValue(false);
 

test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap

@@ -31,7 +31,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               class="mx_SettingsSubsection_content"
             >
               <div
-                class="mx_SettingsSubsection_contentStretch"
+                class="mx_SettingsSubsection_dropdown"
               >
                 Application language
                 <div
@@ -224,6 +224,35 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             <div
               class="mx_SettingsSubsection_content"
             >
+              <div
+                class="mx_SettingsSubsection_dropdown"
+              >
+                Set timezone
+                <div
+                  class="mx_Dropdown mx_dropdownUserTimezone"
+                >
+                  <div
+                    aria-describedby="mx_dropdownUserTimezone_value"
+                    aria-expanded="false"
+                    aria-haspopup="listbox"
+                    aria-label="Set timezone"
+                    aria-owns="mx_dropdownUserTimezone_input"
+                    class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
+                    role="button"
+                    tabindex="0"
+                  >
+                    <div
+                      class="mx_Dropdown_option"
+                      id="mx_dropdownUserTimezone_value"
+                    >
+                      Browser default (UTC)
+                    </div>
+                    <span
+                      class="mx_Dropdown_arrow"
+                    />
+                  </div>
+                </div>
+              </div>
               <div
                 class="mx_SettingsFlag"
               >

test/test-utils/room.ts

@@ -72,6 +72,7 @@ export function getRoomContext(room: Room, override: Partial<IRoomState>): IRoom
         layout: Layout.Group,
         lowBandwidth: false,
         alwaysShowTimestamps: false,
+        userTimezone: undefined,
         showTwelveHourTimestamps: false,
         readMarkerInViewThresholdMs: 3000,
         readMarkerOutOfViewThresholdMs: 30000,