Refactor className and children to component properties instead och view model snapshots in shared components (#32711)

* Refactor className? to component property in EncryptionEventView

* Refactor extraClassNames to default react className as component property for DecryptionFailureBodyView

* Refactor className to component property for MessageTimestampView

* Refactor className and children to component properties for ReactionsRowButton

* Refactor className to component property for DisambiguatedProfile

* Refactor className to a component property in DateSeparatorView

* Fix for lint errors and EncryptionEventView unsupported icon color

* EncryptionEventView fix for icon color css specificity/order

apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -717,9 +717,10 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
               style="height: 400px;"
             >
               <div
-                class="_container_sq5fu_8 mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon"
+                class="_container_sq5fu_8 mx_EventTileBubble mx_cryptoEvent _content_m88ar_8"
               >
                 <svg
+                  data-state="supported"
                   fill="currentColor"
                   height="1em"
                   viewBox="0 0 24 24"

apps/web/test/viewmodels/event-tiles/EncryptionEventViewModel-test.ts

@@ -64,7 +64,6 @@ describe("EncryptionEventViewModel", () => {
         await waitFor(() => expect(vm.getSnapshot().state).toBe(EncryptionEventState.ENABLED));
         expect(vm.getSnapshot()).toMatchObject({
             state: EncryptionEventState.ENABLED,
-            className: "mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon",
             encryptedStateEvents: false,
         });
     });
@@ -125,7 +124,6 @@ describe("EncryptionEventViewModel", () => {
 
         const vm = createVm();
         await waitFor(() => expect(vm.getSnapshot().state).toBe(EncryptionEventState.UNSUPPORTED));
-        expect(vm.getSnapshot().className).toBe("mx_EventTileBubble mx_cryptoEvent");
     });
 
     it("sets ENABLED_DM with partner display name", async () => {

apps/web/test/viewmodels/message-body/DecryptionFailureBodyViewModel-test.tsx

@@ -22,19 +22,6 @@ describe("DecryptionFailureBodyViewModel", () => {
         });
     });
 
-    it("should return the snapshot with extra class names", () => {
-        const vm = new DecryptionFailureBodyViewModel({
-            decryptionFailureCode: null,
-            verificationState: true,
-            extraClassNames: ["custom-class"],
-        });
-        expect(vm.getSnapshot()).toMatchObject({
-            decryptionFailureReason: DecryptionFailureReason.UNABLE_TO_DECRYPT,
-            isLocalDeviceVerified: true,
-            extraClassNames: ["mx_DecryptionFailureBody", "mx_EventTile_content", "custom-class"],
-        });
-    });
-
     it.each([
         {
             code: DecryptionFailureCode.HISTORICAL_MESSAGE_BACKUP_UNCONFIGURED,

apps/web/test/viewmodels/message-body/MessageTimestampViewModel-test.tsx

@@ -42,14 +42,13 @@ describe("MessageTimestampViewModel", () => {
         });
     });
 
-    it("should return the snapshot with extra class names", () => {
+    it("should return the snapshot without presentation class names", () => {
         const vm = new MessageTimestampViewModel({
             ts: nowDate.getTime(),
         });
         expect(vm.getSnapshot()).toMatchObject({
             ts: "08:09",
             tsSentAt: "Fri, Dec 17, 2021, 08:09:00",
-            className: "mx_MessageTimestamp",
         });
     });
 

apps/web/test/viewmodels/message-body/ReactionsRowViewModel-test.tsx

@@ -29,7 +29,6 @@ describe("ReactionsRowViewModel", () => {
         expect(snapshot.showAllButtonVisible).toBe(true);
         expect(snapshot.showAddReactionButton).toBe(true);
         expect(snapshot.addReactionButtonActive).toBe(false);
-        expect(snapshot.className).toContain("mx_ReactionsRow");
     });
 
     it("hides show-all after onShowAllClick", () => {

apps/web/test/viewmodels/profile/DisambiguatedProfileViewModel-test.tsx

@@ -31,7 +31,6 @@ describe("DisambiguatedProfileViewModel", () => {
         expect(vm.getSnapshot()).toEqual({
             displayName: "Alice",
             colorClass: "mx_Username_color3",
-            className: undefined,
             displayIdentifier: "@alice:example.org",
             title: "Alice (@alice:example.org)",
             emphasizeDisplayName: true,
@@ -47,23 +46,12 @@ describe("DisambiguatedProfileViewModel", () => {
         expect(vm.getSnapshot()).toMatchObject({
             displayName: "Fallback",
             colorClass: undefined,
-            className: undefined,
             displayIdentifier: undefined,
             title: undefined,
             emphasizeDisplayName: undefined,
         });
     });
 
-    it("should pass through className prop", () => {
-        const vm = new DisambiguatedProfileViewModel({
-            member,
-            fallbackName: "Fallback",
-            className: "mx_DisambiguatedProfile",
-        });
-
-        expect(vm.getSnapshot().className).toBe("mx_DisambiguatedProfile");
-    });
-
     it("should delegate onClick without emitting a snapshot update", () => {
         const onClick = jest.fn();
         const vm = new DisambiguatedProfileViewModel({

apps/web/test/viewmodels/timeline/DateSeparatorViewModel-test.tsx

@@ -109,7 +109,6 @@ describe("DateSeparatorViewModel", () => {
         const vm = createViewModel();
 
         expect(vm.getSnapshot().label).toBe("today");
-        expect(vm.getSnapshot().className).toBe("mx_TimelineSeparator");
     });
 
     it("uses full date when exporting", () => {