Skip to content
This repository was archived by the owner on Oct 22, 2024. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 55 additions & 73 deletions src/components/views/rooms/RoomHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,6 @@ import { useIsVideoRoom } from "../../../utils/video-rooms";
import { notificationLevelToIndicator } from "../../../utils/notifications";
import { CallGuestLinkButton } from "./RoomHeader/CallGuestLinkButton";
import { ButtonEvent } from "../elements/AccessibleButton";
import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement";
import { useIsReleaseAnnouncementOpen } from "../../../hooks/useIsReleaseAnnouncementOpen";
import { ReleaseAnnouncementStore } from "../../../stores/ReleaseAnnouncementStore";
import WithPresenceIndicator, { useDmMember } from "../avatars/WithPresenceIndicator";
import { IOOBData } from "../../../stores/ThreepidInviteStore";
import RoomContext from "../../../contexts/RoomContext";
Expand Down Expand Up @@ -225,8 +222,6 @@ export default function RoomHeader({
voiceCallButton = undefined;
}

const isReleaseAnnouncementOpen = useIsReleaseAnnouncementOpen("newRoomHeader");

const roomContext = useContext(RoomContext);
const isVideoRoom = useIsVideoRoom(room);
const showChatButton =
Expand All @@ -237,75 +232,62 @@ export default function RoomHeader({
return (
<>
<Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
<ReleaseAnnouncement
feature="newRoomHeader"
header={_t("room|header|release_announcement_header")}
description={_t("room|header|release_announcement_description")}
closeLabel={_t("action|ok")}
placement="bottom"
<button
aria-label={_t("right_panel|room_summary_card|title")}
tabIndex={0}
onClick={() => RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary)}
className="mx_RoomHeader_infoWrapper"
>
<button
aria-label={_t("right_panel|room_summary_card|title")}
tabIndex={0}
onClick={() => {
if (isReleaseAnnouncementOpen) {
ReleaseAnnouncementStore.instance.nextReleaseAnnouncement();
}
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
}}
className="mx_RoomHeader_infoWrapper"
>
<WithPresenceIndicator room={room} size="8px">
<RoomAvatar room={room} size="40px" oobData={oobData} />
</WithPresenceIndicator>
<Box flex="1" className="mx_RoomHeader_info">
<BodyText
as="div"
size="lg"
weight="semibold"
dir="auto"
role="heading"
aria-level={1}
className="mx_RoomHeader_heading"
>
<span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>

{!isDirectMessage && joinRule === JoinRule.Public && (
<Tooltip label={_t("common|public_room")} placement="right">
<PublicIcon
width="16px"
height="16px"
className="mx_RoomHeader_icon text-secondary"
aria-label={_t("common|public_room")}
/>
</Tooltip>
)}

{isDirectMessage && e2eStatus === E2EStatus.Verified && (
<Tooltip label={_t("common|verified")} placement="right">
<VerifiedIcon
width="16px"
height="16px"
className="mx_RoomHeader_icon mx_Verified"
aria-label={_t("common|verified")}
/>
</Tooltip>
)}

{isDirectMessage && e2eStatus === E2EStatus.Warning && (
<Tooltip label={_t("room|header_untrusted_label")} placement="right">
<ErrorIcon
width="16px"
height="16px"
className="mx_RoomHeader_icon mx_Untrusted"
aria-label={_t("room|header_untrusted_label")}
/>
</Tooltip>
)}
</BodyText>
</Box>
</button>
</ReleaseAnnouncement>
<WithPresenceIndicator room={room} size="8px">
<RoomAvatar room={room} size="40px" oobData={oobData} />
</WithPresenceIndicator>
<Box flex="1" className="mx_RoomHeader_info">
<BodyText
as="div"
size="lg"
weight="semibold"
dir="auto"
role="heading"
aria-level={1}
className="mx_RoomHeader_heading"
>
<span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>

{!isDirectMessage && joinRule === JoinRule.Public && (
<Tooltip label={_t("common|public_room")} placement="right">
<PublicIcon
width="16px"
height="16px"
className="mx_RoomHeader_icon text-secondary"
aria-label={_t("common|public_room")}
/>
</Tooltip>
)}

{isDirectMessage && e2eStatus === E2EStatus.Verified && (
<Tooltip label={_t("common|verified")} placement="right">
<VerifiedIcon
width="16px"
height="16px"
className="mx_RoomHeader_icon mx_Verified"
aria-label={_t("common|verified")}
/>
</Tooltip>
)}

{isDirectMessage && e2eStatus === E2EStatus.Warning && (
<Tooltip label={_t("room|header_untrusted_label")} placement="right">
<ErrorIcon
width="16px"
height="16px"
className="mx_RoomHeader_icon mx_Untrusted"
aria-label={_t("room|header_untrusted_label")}
/>
</Tooltip>
)}
</BodyText>
</Box>
</button>
<Flex align="center" gap="var(--cpd-space-2x)">
{additionalButtons?.map((props) => {
const label = props.label();
Expand Down
2 changes: 0 additions & 2 deletions src/i18n/strings/en_EN.json
Original file line number Diff line number Diff line change
Expand Up @@ -1965,8 +1965,6 @@
"one": "Asking to join",
"other": "%(count)s people asking to join"
},
"release_announcement_description": "Enjoy a simpler, more accessible room header.",
"release_announcement_header": "New design!",
"room_is_public": "This room is public",
"show_widgets_button": "Show Widgets",
"video_call_button_ec": "Video call (%(brand)s)",
Expand Down
2 changes: 1 addition & 1 deletion src/stores/ReleaseAnnouncementStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { Features } from "../settings/Settings";
/**
* The features are shown in the array order.
*/
const FEATURES = ["threadsActivityCentre", "newRoomHeader"] as const;
const FEATURES = ["threadsActivityCentre"] as const;
/**
* All the features that can be shown in the release announcements.
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<button
aria-expanded="false"
aria-haspopup="dialog"
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
Expand Down Expand Up @@ -182,8 +180,6 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<button
aria-expanded="false"
aria-haspopup="dialog"
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
Expand Down Expand Up @@ -439,8 +435,6 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<button
aria-expanded="false"
aria-haspopup="dialog"
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
Expand Down Expand Up @@ -773,8 +767,6 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<button
aria-expanded="false"
aria-haspopup="dialog"
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<button
aria-expanded="false"
aria-haspopup="dialog"
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
Expand Down
12 changes: 4 additions & 8 deletions test/stores/ReleaseAnnouncementStore-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -89,15 +89,11 @@ describe("ReleaseAnnouncementStore", () => {
// Sanity check
expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("threadsActivityCentre");

let promise = listenReleaseAnnouncementChanged();
const promise = listenReleaseAnnouncementChanged();
await releaseAnnouncementStore.nextReleaseAnnouncement();

expect(await promise).toBe("newRoomHeader");
expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("newRoomHeader");

promise = listenReleaseAnnouncementChanged();
await releaseAnnouncementStore.nextReleaseAnnouncement();
expect(await promise).toBeNull();
expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBeNull();

const secondStore = new ReleaseAnnouncementStore();
// All the release announcements have been viewed, so it should be updated in the store account
Expand All @@ -112,7 +108,7 @@ describe("ReleaseAnnouncementStore", () => {
const promise = listenReleaseAnnouncementChanged();
await secondStore.nextReleaseAnnouncement();

expect(await promise).toBe("newRoomHeader");
expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("newRoomHeader");
expect(await promise).toBeNull();
expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBeNull();
});
});
Loading