Refactor MessageTimestamp using MVVM and move to shared-components (#31988)

* Create a MessageTimestampView in shared components

* Switching to use shared component and view model in element-web

* Add .mx_MessageTimestamp tp _common.pcss since it is used extensively in element-web

* Added comments to view model

* Updating after Add options for consistent screenshots

* Moved rendering of late icon to EventTile

* Update shared component snaps

* Added I18nContext.Provider to Modal.tsx and HtmlExport.tsx to make them work with shared components

* Avoid circular dependencies for ModuleApi

* Adjust role and wire handlers in view model

* Change to role="link"

* Revert I18nContext.Provider changes

* Updated snapshot

* Provide I18nContext for shared-components used inside dialogs and html-export rendered in a separate root.

* Add patch for react-sdk-module-api to shared components

* Add setProps to MessageTimeViewModel and useEffect on wrappers

* Added more tests to improve coverage

* Changes after PR review

* Use specific setters in the viewmodel more relating to the business logic.

* Remove unused CSS properties

* New snapshot after merge

* Removed aria-hidden logic and display tooltips in stories

* Remove await for toolitp in HasInhibitTooltip story

* Add screenshots with visible tooltips

* Fixes after merge and review comments

* Updated snapshots for unit tests

* Removed one test since tooltips are not rendered to snapshots

test/unit-tests/components/views/messages/MessageTimestamp-test.tsx

@@ -1,55 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import { render, screen } from "jest-matrix-react";
-import userEvent from "@testing-library/user-event";
-
-import MessageTimestamp from "../../../../../src/components/views/messages/MessageTimestamp";
-
-jest.mock("../../../../../src/settings/SettingsStore");
-
-describe("MessageTimestamp", () => {
-    // Friday Dec 17 2021, 9:09am
-    const nowDate = new Date("2021-12-17T08:09:00.000Z");
-
-    const HOUR_MS = 3600000;
-    const DAY_MS = HOUR_MS * 24;
-
-    it("should render HH:MM", () => {
-        const { asFragment } = render(<MessageTimestamp ts={nowDate.getTime()} />);
-        expect(asFragment()).toMatchInlineSnapshot(`
-<DocumentFragment>
-  <span
-    aria-hidden="true"
-    aria-live="off"
-    class="mx_MessageTimestamp"
-    tabindex="0"
-  >
-    08:09
-  </span>
-</DocumentFragment>
-`);
-    });
-
-    it("should show full date & time on hover", async () => {
-        const { container } = render(<MessageTimestamp ts={nowDate.getTime()} />);
-        await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!);
-        expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(`"Fri, Dec 17, 2021, 08:09:00"`);
-    });
-
-    it("should show sent & received time on hover if passed", async () => {
-        const { container } = render(
-            <MessageTimestamp ts={nowDate.getTime()} receivedTs={nowDate.getTime() + DAY_MS} />,
-        );
-        await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!);
-        expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(
-            `"Sent at: Fri, Dec 17, 2021, 08:09:00Received at: Sat, Dec 18, 2021, 08:09:00"`,
-        );
-    });
-});

test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap

@@ -93,7 +93,7 @@ exports[`<MImageBody/> should open ImageView using thumbnail for encrypted svg 1
         </div>
         <a
           aria-live="off"
-          class="mx_MessageTimestamp"
+          class="mx_MessageTimestamp _content_kc5mt_8"
           href="https://matrix.to/#/!room:server/undefined"
         >
           Thu, Jan 15, 1970, 06:56

test/unit-tests/utils/exportUtils/HTMLExport-test.ts

@@ -246,7 +246,7 @@ describe("HTMLExport", () => {
 
         const file = getMessageFile(exporter);
         expect(await file.text()).toMatchSnapshot();
-    });
+    }, 10000);
 
     it("should include the room's avatar", async () => {
         mockMessages(EVENT_MESSAGE);