Refactor DisambiguatedProfile to shared-components (#31835)
* Refactoring of DisambiguatedProfile into shared components * correct values and refactoring * Add username color classes to Storybook and clean up DisambiguatedProfile stories * Refactor DisambiguatedProfileView to use class component and enhance props structure * Refactor DisambiguatedProfile components to use member object and enhance props structure * Update copyright year to 2026 and adjust the tests to fit the correct memberinfro interface * Add DisambiguatedProfileViewModel class * Refactor DisambiguatedProfileViewModel to use member object and the rest of the props * Refactor SenderProfile to use DisambiguatedProfileViewModel and update DisambiguatedProfile styles * Refactor DisambiguatedProfileView to enhance interface documentation * Refactor DisambiguatedProfileView to use CSS modules for styling * Updated css + tests to fit the new changes * Update of the test snap to fit the current tests * Adjusted RoomMemberTitleView and SenderProfile to use the new viewmodel, removed the old component. * Implemented new viewmodel test for DisambiguatedProfileViewModel * Update copyright text * update css class names * update to correct snapshot after css name changes. * Apply suggestion from @florianduros Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * Moved logic to viewmodel instead of having it in the view. Removed unessecery functions and css. * removed unessecery file that I copied from root folder, this is no longed needed as I use the root file instead in the viewmodel * Better Formatting * Fix issues after merging develop * FIxed issues with eslint * Added Visible, non-interactive elements with click handlers must have at least one keyboard listener from eslint docs * Updated snapshot the fit the latest update with eslint button requirment * Update snapshot screens for new tests. * Update tests to reflect snapshots * Update snapshot due of outdated CSS module classes * Add useEffect to call setProps on the DisambiguatedProfileViewModel when props change, ensuring the view updates with the correct display name. Update LayoutSwitcher snapshot for new CSS classes. * Fix Playwright editing tests by adding exact match for Edit button selector The DisambiguatedProfile refactoring added role="button" to the component, causing the selector { name: "Edit" } to match both the user "Edith" and the actual Edit button. * Fix ForwardDialog location tests for async hook rendering The SenderProfile component now uses hooks that trigger async state updates. * Fix SenderProfile useEffect to only update changeable props * Added letter spacing * Added ClassName prop * Update snapshot * Update letter-spacing * Update snapshot screenshots * Update Snapshots * Update snapshot * Removal of letter spacing to test CI * Apply suggestion from @florianduros Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * Added closing brackets + added back letter-spacing * Update snapshots * Update snapshot * Update span to correctly apply to the CI tests, it wasn't possible to use classname as a prop * Update snapshot * Added comment to explain the span classNames * DisambiguatedProfileViewModel.setProps to runtime-changing props * replace DisambiguatedProfileViewModel setProps with explicit setters and update call sites * Update Setters * Prettier FIx * Update Setters * update DisambiguatedProfileViewModel setters and tests * Update SenderProfile to show connect display name * clone snapshot in setters to trigger reactive updates * use snapshot.merge in DisambiguatedProfileViewModel setters * emove duplicated logic in DisambiguatedProfileViewModel * Change snapshot name * Update viewmodel * Updated Tests * typo * Update src/viewmodels/profile/DisambiguatedProfileViewModel.ts Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * Removal of unused function * Update snapshots * Update tests to pass coverage * Update Eslint --------- Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
This commit is contained in:
Zack
Florian Duros
@@ -337,7 +337,7 @@ describe("ForwardDialog", () => {
|
||||
it("converts legacy location events to pin drop shares", async () => {
|
||||
const { container } = mountForwardDialog(legacyLocationEvent);
|
||||
|
||||
expect(container.querySelector(".mx_MLocationBody")).toBeTruthy();
|
||||
await waitFor(() => expect(container.querySelector(".mx_MLocationBody")).toBeTruthy());
|
||||
sendToFirstRoom(container);
|
||||
|
||||
// text and description from original event are removed
|
||||
@@ -364,7 +364,7 @@ describe("ForwardDialog", () => {
|
||||
it("removes personal information from static self location shares", async () => {
|
||||
const { container } = mountForwardDialog(modernLocationEvent);
|
||||
|
||||
expect(container.querySelector(".mx_MLocationBody")).toBeTruthy();
|
||||
await waitFor(() => expect(container.querySelector(".mx_MLocationBody")).toBeTruthy());
|
||||
sendToFirstRoom(container);
|
||||
|
||||
const timestamp = M_TIMESTAMP.findIn<number>(modernLocationEvent.getContent())!;
|
||||
@@ -404,7 +404,7 @@ describe("ForwardDialog", () => {
|
||||
};
|
||||
const { container } = mountForwardDialog(beaconEvent);
|
||||
|
||||
expect(container.querySelector(".mx_MLocationBody")).toBeTruthy();
|
||||
await waitFor(() => expect(container.querySelector(".mx_MLocationBody")).toBeTruthy());
|
||||
|
||||
sendToFirstRoom(container);
|
||||
|
||||
@@ -414,7 +414,7 @@ describe("ForwardDialog", () => {
|
||||
it("forwards pin drop event", async () => {
|
||||
const { container } = mountForwardDialog(pinDropLocationEvent);
|
||||
|
||||
expect(container.querySelector(".mx_MLocationBody")).toBeTruthy();
|
||||
await waitFor(() => expect(container.querySelector(".mx_MLocationBody")).toBeTruthy());
|
||||
|
||||
sendToFirstRoom(container);
|
||||
|
||||
|
||||
@@ -31,10 +31,12 @@ exports[`ReplyChain should call setQuoteExpanded if chain is longer than 2 lines
|
||||
u
|
||||
</span>
|
||||
<div
|
||||
class="mx_DisambiguatedProfile"
|
||||
class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
|
||||
class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName"
|
||||
dir="auto"
|
||||
>
|
||||
@userId:matrix.org
|
||||
|
||||
+9
-3
@@ -35,7 +35,9 @@ exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon wh
|
||||
class="mx_MemberTileView_name"
|
||||
>
|
||||
<div
|
||||
class="mx_DisambiguatedProfile"
|
||||
class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="@userId:matrix.org (@userId:matrix.org)"
|
||||
>
|
||||
<span
|
||||
@@ -109,7 +111,9 @@ exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon whe
|
||||
class="mx_MemberTileView_name"
|
||||
>
|
||||
<div
|
||||
class="mx_DisambiguatedProfile"
|
||||
class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="@userId:matrix.org (@userId:matrix.org)"
|
||||
>
|
||||
<span
|
||||
@@ -183,7 +187,9 @@ exports[`MemberTileView RoomMemberTileView should not display an E2EIcon when th
|
||||
class="mx_MemberTileView_name"
|
||||
>
|
||||
<div
|
||||
class="mx_DisambiguatedProfile"
|
||||
class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="@userId:matrix.org (@userId:matrix.org)"
|
||||
>
|
||||
<span
|
||||
|
||||
+12
-6
@@ -71,10 +71,12 @@ exports[`<LayoutSwitcher /> should render 1`] = `
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_DisambiguatedProfile"
|
||||
class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
|
||||
class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName"
|
||||
dir="auto"
|
||||
>
|
||||
Alice
|
||||
@@ -210,10 +212,12 @@ exports[`<LayoutSwitcher /> should render 1`] = `
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_DisambiguatedProfile"
|
||||
class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
|
||||
class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName"
|
||||
dir="auto"
|
||||
>
|
||||
Alice
|
||||
@@ -352,10 +356,12 @@ exports[`<LayoutSwitcher /> should render 1`] = `
|
||||
class="mx_MessageTimestamp"
|
||||
/>
|
||||
<div
|
||||
class="mx_DisambiguatedProfile"
|
||||
class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
|
||||
class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName"
|
||||
dir="auto"
|
||||
>
|
||||
Alice
|
||||
|
||||
+12
-6
@@ -214,10 +214,12 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_DisambiguatedProfile"
|
||||
class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
|
||||
class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName"
|
||||
dir="auto"
|
||||
>
|
||||
@userId:matrix.org
|
||||
@@ -353,10 +355,12 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_DisambiguatedProfile"
|
||||
class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
|
||||
class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName"
|
||||
dir="auto"
|
||||
>
|
||||
@userId:matrix.org
|
||||
@@ -495,10 +499,12 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
|
||||
class="mx_MessageTimestamp"
|
||||
/>
|
||||
<div
|
||||
class="mx_DisambiguatedProfile"
|
||||
class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
|
||||
class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName"
|
||||
dir="auto"
|
||||
>
|
||||
@userId:matrix.org
|
||||
|
||||
Reference in New Issue
Block a user