Refactor MFileBody using MVVM and move to shared-components (#32730)

* Refactor MFileBody using MVVM and move to shared component

* Simplyfing rendering properties

* Create a first version of view model for the component

* Simplifying component properties and make it possible to override module css using data-* attributes

* Create a MBodyFactory in element-web and use it to render MFileBodyView from MessageEvent

* Use <MediaBody instead of <button to support legacy rendering

* Updated styling and comments

* Refactoring className from snapshot to component property

* Rename MFileBody* to FileBody*

* Rename MFileBody* to FileBody*

* Refactoring render branches to allow for displaying nothing

* Fix styling issues

* Fix lint errors

* Fix for css selectors in playwright tests

* Remove the MFileBody component and change all callers to use MBodyFactory:FileBodyView

* Remove unused strings in element-web

* Revert to render text in story iframes

* Fix for prettier error

* Fix playwright test css selectors

* Apply legacy styling in element-web

* Add legacy styling for mx_MFileBody

* Restore file

* Change from <div to <button

* Calculate span width ad update screenshots

* Remove width calculation and update snapshots

* Fix for letter-spacing and better content in story

* Updated playwright screenshots

* Updated snapshots

* Fixing Sonar errors/warnings

* Removed extra parentheses

* Changes after review

* Change border-radius to px and updated snapshots

* Fix typo in description

* And another typo fix

* Changes after review

apps/web/playwright/e2e/audio-player/audio-player.spec.ts

@@ -245,9 +245,9 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await expect(tile.getByRole("region", { name: "Audio player" })).toBeVisible();
 
             // Assert that replied audio file is rendered as file button inside ReplyChain
-            const button = tile.locator(".mx_ReplyChain_wrapper .mx_MFileBody_info[role='button']");
+            const button = tile.locator(".mx_ReplyChain_wrapper .mx_MFileBody [role='button']");
             // Assert that the file button has file name
-            await expect(button.locator(".mx_MFileBody_info_filename")).toBeVisible();
+            await expect(button.locator("span")).toBeVisible();
 
             await takeSnapshots(page, app, "Selected EventTile of audio player with a reply");
         },
@@ -307,9 +307,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
 
             // Assert that the file button contains the name of the file sent at first
             await expect(
-                replyChain
-                    .locator(".mx_MFileBody_info[role='button']")
-                    .locator(".mx_MFileBody_info_filename", { hasText: "upload-first.ogg" }),
+                replyChain.locator(".mx_MFileBody [role='button']").locator("span", { hasText: "upload-first.ogg" }),
             ).toBeVisible();
 
             // Take snapshots
@@ -357,9 +355,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
 
         const composer = thread.locator(".mx_MessageComposer--compact");
         // Assert that the reply preview contains audio ReplyTile the file info button
-        await expect(
-            composer.locator(".mx_ReplyPreview .mx_ReplyTile .mx_MFileBody_info[role='button']"),
-        ).toBeVisible();
+        await expect(composer.locator(".mx_ReplyPreview .mx_ReplyTile .mx_MFileBody [role='button']")).toBeVisible();
 
         // Select :smile: emoji and send it
         await composer.getByTestId("basicmessagecomposer").fill(":smile:");
@@ -367,6 +363,6 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await composer.getByTestId("basicmessagecomposer").press("Enter");
 
         // Assert that the file name is rendered on the file button
-        await expect(threadTile.locator(".mx_ReplyTile .mx_MFileBody_info[role='button']")).toBeVisible();
+        await expect(threadTile.locator(".mx_ReplyTile .mx_MFileBody [role='button']")).toBeVisible();
     });
 });

apps/web/playwright/e2e/right-panel/file-panel.spec.ts

@@ -85,7 +85,7 @@ test.describe("FilePanel", () => {
             await expect(filePanelMessageList.locator(".mx_EventTile")).toHaveCount(3);
 
             // Assert that the download links are rendered
-            await expect(filePanelMessageList.locator(".mx_MFileBody_download,.mx_MFileBody_info")).toHaveCount(3);
+            await expect(filePanelMessageList.locator(".mx_MFileBody")).toHaveCount(3);
 
             // Assert that the sender of the files is rendered on all of the tiles
             await expect(filePanelMessageList.getByText(NAME)).toHaveCount(3);
@@ -103,9 +103,7 @@ test.describe("FilePanel", () => {
 
             // Detect the JSON file
             // Assert that the tile is rendered as a button
-            const file = filePanelMessageList.locator(
-                ".mx_EventTile_mediaLine .mx_MFileBody .mx_MFileBody_info[role='button'] .mx_MFileBody_info_filename",
-            );
+            const file = filePanelMessageList.locator(".mx_EventTile_mediaLine .mx_MFileBody [role='button']");
             // Assert that the file name is rendered inside the button with ellipsis
             await expect(file.getByText(/matrix.*?\.json/)).toBeVisible();
 
@@ -177,8 +175,7 @@ test.describe("FilePanel", () => {
             const tile = page.locator(".mx_FilePanel .mx_EventTile");
             // Assert that the file size is displayed in kibibytes, not kilobytes (1000 bytes)
             // See: https://github.com/vector-im/element-web/issues/24866
-            await expect(tile.locator(".mx_MFileBody_info_filename", { hasText: size })).toBeVisible();
-            await expect(tile.locator(".mx_MFileBody_info", { hasText: size })).toBeVisible();
+            await expect(tile.locator(".mx_MFileBody [data-type='info']", { hasText: size })).toBeVisible();
         });
     });
 
@@ -194,7 +191,7 @@ test.describe("FilePanel", () => {
                 ".mx_FilePanel .mx_RoomView_MessageList .mx_EventTile_mediaLine.mx_EventTile_image .mx_MImageBody",
             );
 
-            const link = imageBody.locator(".mx_MFileBody_download a");
+            const link = imageBody.locator(".mx_MFileBody a");
 
             const downloadPromise = page.waitForEvent("download");
 

apps/web/playwright/e2e/timeline/timeline.spec.ts

@@ -779,7 +779,7 @@ test.describe("Timeline", () => {
             // Assert that the file size is displayed in kibibytes (1024 bytes), not kilobytes (1000 bytes)
             // See: https://github.com/vector-im/element-web/issues/24866
             await expect(
-                page.locator(".mx_EventTile_last .mx_MFileBody_info_filename").getByText(/1.12 KB/),
+                page.locator(".mx_EventTile_last .mx_MFileBody [data-type='info']").getByText(/1.12 KB/),
             ).toBeVisible();
         });
 

apps/web/playwright/e2e/widgets/stickers.spec.ts

@@ -103,7 +103,7 @@ async function expectTimelineSticker(page: Page, serverName: string, roomId: str
 }
 
 async function expectFileTile(page: Page, roomId: string, contentUri: string) {
-    await expect(page.locator(".mx_MFileBody_info_filename")).toContainText(STICKER_NAME);
+    await expect(page.locator(".mx_MFileBody [data-type='info']")).toContainText(STICKER_NAME);
 }
 
 async function setWidgetAccountData(