imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Display pinned messages on a banner at the top of a room (#12917)

Browse source 
* Move pinned message hooks to a dedicated file

* Add a banner at the top of a room to display the pinned messages

* Put the pinning banner behind labs pinning labs flag

* Add redacted event support

* Handle UTD in pinning message banner

* Add tests for redaction

* Make all the banner clickable

* Add tests for PinnedMessageBanner.tsx

* Add e2e tests for the pinned message banner

* Review changes
This commit is contained in:
Florian Duros 2024-08-29 16:26:10 +02:00 • committed by GitHub
parent 8b2ded8a0e
commit d16ab09866
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 1130 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

166
test/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap Normal file
View file

@ -0,0 +1,166 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<PinnedMessageBanner /> should render 2 pinned event 1`] = `
<DocumentFragment>
<div
aria-label="This room has pinned messages. Click to view them."
class="mx_PinnedMessageBanner"
data-single-message="false"
data-testid="pinned-message-banner"
>
<button
aria-label="View the pinned message in the timeline."
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
>
<div
class="mx_PinnedMessageBanner_Indicators"
>
<div
class="mx_PinnedMessageBanner_Indicator"
data-testid="banner-indicator"
/>
<div
class="mx_PinnedMessageBanner_Indicator mx_PinnedMessageBanner_Indicator--active"
data-testid="banner-indicator"
/>
</div>
<div
class="mx_PinnedMessageBanner_PinIcon"
width="20"
/>
<div
class="mx_PinnedMessageBanner_title"
data-testid="banner-counter"
>
<span>
<span
class="mx_PinnedMessageBanner_title_counter"
>
2 of 2
</span>
Pinned messages
</span>
</div>
<span
class="mx_PinnedMessageBanner_message"
>
Second pinned message
</span>
</div>
</button>
<button
class="_button_zt6rp_17 mx_PinnedMessageBanner_actions"
data-kind="tertiary"
data-size="lg"
role="button"
tabindex="0"
>
View all
</button>
</div>
</DocumentFragment>
`;
exports[`<PinnedMessageBanner /> should render 4 pinned event 1`] = `
<DocumentFragment>
<div
aria-label="This room has pinned messages. Click to view them."
class="mx_PinnedMessageBanner"
data-single-message="false"
data-testid="pinned-message-banner"
>
<button
aria-label="View the pinned message in the timeline."
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
>
<div
class="mx_PinnedMessageBanner_Indicators"
>
<div
class="mx_PinnedMessageBanner_Indicator mx_PinnedMessageBanner_Indicator--active"
data-testid="banner-indicator"
/>
<div
class="mx_PinnedMessageBanner_Indicator mx_PinnedMessageBanner_Indicator--hidden"
data-testid="banner-indicator"
/>
<div
class="mx_PinnedMessageBanner_Indicator mx_PinnedMessageBanner_Indicator--hidden"
data-testid="banner-indicator"
/>
</div>
<div
class="mx_PinnedMessageBanner_PinIcon"
width="20"
/>
<div
class="mx_PinnedMessageBanner_title"
data-testid="banner-counter"
>
<span>
<span
class="mx_PinnedMessageBanner_title_counter"
>
4 of 4
</span>
Pinned messages
</span>
</div>
<span
class="mx_PinnedMessageBanner_message"
>
Fourth pinned message
</span>
</div>
</button>
<button
class="_button_zt6rp_17 mx_PinnedMessageBanner_actions"
data-kind="tertiary"
data-size="lg"
role="button"
tabindex="0"
>
View all
</button>
</div>
</DocumentFragment>
`;
exports[`<PinnedMessageBanner /> should render a single pinned event 1`] = `
<DocumentFragment>
<div
aria-label="This room has pinned messages. Click to view them."
class="mx_PinnedMessageBanner"
data-single-message="true"
data-testid="pinned-message-banner"
>
<button
aria-label="View the pinned message in the timeline."
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
>
<div
class="mx_PinnedMessageBanner_PinIcon"
width="20"
/>
<span
class="mx_PinnedMessageBanner_message"
>
First pinned message
</span>
</div>
</button>
</div>
</DocumentFragment>
`;