mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-21 16:55:34 +03:00
Code Issues Projects Releases Packages Wiki Activity

Use semantic headings for room settings content (#10734)

Browse source 
* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab
This commit is contained in:
Kerry 2023-05-03 09:14:36 +12:00 committed by GitHub
parent e7f5261eda
commit 4736f0e44c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 439 additions and 380 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
res/css/views/settings/tabs/_SettingsTab.pcss
View file

@ -103,5 +103,5 @@ limitations under the License.
grid-template-columns: 1fr;
grid-gap: $spacing-32;
padding: $spacing-16 0;
padding-bottom: $spacing-16;
}

2
res/css/views/settings/tabs/room/_RolesRoomSettingsTab.pcss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_RolesRoomSettingsTab ul {
.mx_RolesRoomSettingsTab_bannedList {
margin-bottom: 0;
}

18
res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
View file

@ -14,14 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_SecurityRoomSettingsTab {
.mx_SettingsTab_showAdvanced {
margin-bottom: $spacing-16;
}
.mx_SecurityRoomSettingsTab_warning {
display: flex;
align-items: center;
column-gap: $spacing-4;
}
.mx_SecurityRoomSettingsTab_advancedSection {
margin-top: $spacing-16;
}
.mx_SecurityRoomSettingsTab_warning {
display: flex;
align-items: center;
column-gap: $spacing-4;
}

48
src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx
View file

@ -27,6 +27,9 @@ import { Action } from "../../../../../dispatcher/actions";
import CopyableText from "../../../elements/CopyableText";
import { ViewRoomPayload } from "../../../../../dispatcher/payloads/ViewRoomPayload";
import SettingsStore from "../../../../../settings/SettingsStore";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection from "../../shared/SettingsSubsection";
interface IProps {
room: Room;
@ -154,30 +157,27 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
}
return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("Advanced")}</div>
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
<span className="mx_SettingsTab_subheading">
{room.isSpaceRoom() ? _t("Space information") : _t("Room information")}
</span>
<div>
<span>{_t("Internal room ID")}</span>
<CopyableText getTextToCopy={() => this.props.room.roomId}>
{this.props.room.roomId}
</CopyableText>
</div>
{unfederatableSection}
</div>
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
<span className="mx_SettingsTab_subheading">{_t("Room version")}</span>
<div>
<span>{_t("Room version:")}</span>&nbsp;
{room.getVersion()}
</div>
{oldRoomLink}
{roomUpgradeButton}
</div>
</div>
<SettingsTab>
<SettingsSection heading={_t("Advanced")}>
<SettingsSubsection heading={room.isSpaceRoom() ? _t("Space information") : _t("Room information")}>
<div>
<span>{_t("Internal room ID")}</span>
<CopyableText getTextToCopy={() => this.props.room.roomId}>
{this.props.room.roomId}
</CopyableText>
</div>
{unfederatableSection}
</SettingsSubsection>
<SettingsSubsection heading={_t("Room version")}>
<div>
<span>{_t("Room version:")}</span>&nbsp;
{room.getVersion()}
</div>
{oldRoomLink}
{roomUpgradeButton}
</SettingsSubsection>
</SettingsSection>
</SettingsTab>
);
}
}

9
src/components/views/settings/tabs/room/BridgeSettingsTab.tsx
View file

@ -21,6 +21,8 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { _t } from "../../../../../languageHandler";
import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
import BridgeTile from "../../BridgeTile";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
const BRIDGE_EVENT_TYPES = [
"uk.half-shot.bridge",
@ -99,10 +101,9 @@ export default class BridgeSettingsTab extends React.Component<IProps> {
}
return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("Bridges")}</div>
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">{content}</div>
</div>
<SettingsTab>
<SettingsSection heading={_t("Bridges")}>{content}</SettingsSection>
</SettingsTab>
);
}
}

52
src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx
View file

@ -27,6 +27,9 @@ import { UIFeature } from "../../../../../settings/UIFeature";
import UrlPreviewSettings from "../../../room_settings/UrlPreviewSettings";
import AliasSettings from "../../../room_settings/AliasSettings";
import PosthogTrackers from "../../../../../PosthogTrackers";
import SettingsSubsection from "../../shared/SettingsSubsection";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
interface IProps {
room: Room;
@ -72,35 +75,36 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
let leaveSection;
if (room.getMyMembership() === "join") {
leaveSection = (
<>
<span className="mx_SettingsTab_subheading">{_t("Leave room")}</span>
<div className="mx_SettingsTab_section">
<AccessibleButton kind="danger" onClick={this.onLeaveClick}>
{_t("Leave room")}
</AccessibleButton>
</div>
</>
<SettingsSubsection heading={_t("Leave room")}>
<AccessibleButton kind="danger" onClick={this.onLeaveClick}>
{_t("Leave room")}
</AccessibleButton>
</SettingsSubsection>
);
}
return (
<div className="mx_SettingsTab mx_GeneralRoomSettingsTab">
<div className="mx_SettingsTab_heading">{_t("General")}</div>
<div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
<RoomProfileSettings roomId={room.roomId} />
</div>
<SettingsTab>
<SettingsSection heading={_t("General")}>
<div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
<RoomProfileSettings roomId={room.roomId} />
</div>
</SettingsSection>
<div className="mx_SettingsTab_heading">{_t("Room Addresses")}</div>
<AliasSettings
roomId={room.roomId}
canSetCanonicalAlias={canSetCanonical}
canSetAliases={canSetAliases}
canonicalAliasEvent={canonicalAliasEv}
/>
<div className="mx_SettingsTab_heading">{_t("Other")}</div>
{urlPreviewSettings}
{leaveSection}
</div>
<SettingsSection heading={_t("Room Addresses")}>
<AliasSettings
roomId={room.roomId}
canSetCanonicalAlias={canSetCanonical}
canSetAliases={canSetAliases}
canonicalAliasEvent={canonicalAliasEv}
/>
</SettingsSection>
<SettingsSection heading={_t("Other")}>
{urlPreviewSettings}
{leaveSection}
</SettingsSection>
</SettingsTab>
);
}
}

278
src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
View file

@ -32,6 +32,9 @@ import defaultDispatcher from "../../../../../dispatcher/dispatcher";
import { Action } from "../../../../../dispatcher/actions";
import { UserTab } from "../../../dialogs/UserTab";
import { chromeFileInputFix } from "../../../../../utils/BrowserWorkarounds";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection from "../../shared/SettingsSubsection";
interface IProps {
roomId: string;
@ -168,149 +171,148 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
}
return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("Notifications")}</div>
<div className="mx_SettingsTab_section mx_NotificationSettingsTab_notificationsSection">
<StyledRadioGroup
name="roomNotificationSetting"
definitions={[
{
value: RoomNotifState.AllMessages,
className: "mx_NotificationSettingsTab_defaultEntry",
label: (
<>
{_t("Default")}
<div className="mx_NotificationSettingsTab_microCopy">
{_t(
"Get notifications as set up in your <a>settings</a>",
{},
{
a: (sub) => (
<AccessibleButton
kind="link_inline"
onClick={this.onOpenSettingsClick}
>
{sub}
</AccessibleButton>
),
},
)}
</div>
</>
),
},
{
value: RoomNotifState.AllMessagesLoud,
className: "mx_NotificationSettingsTab_allMessagesEntry",
label: (
<>
{_t("All messages")}
<div className="mx_NotificationSettingsTab_microCopy">
{_t("Get notified for every message")}
</div>
</>
),
},
{
value: RoomNotifState.MentionsOnly,
className: "mx_NotificationSettingsTab_mentionsKeywordsEntry",
label: (
<>
{_t("@mentions & keywords")}
<div className="mx_NotificationSettingsTab_microCopy">
{_t(
"Get notified only with mentions and keywords " +
"as set up in your <a>settings</a>",
{},
{
a: (sub) => (
<AccessibleButton
kind="link_inline"
onClick={this.onOpenSettingsClick}
>
{sub}
</AccessibleButton>
),
},
)}
</div>
</>
),
},
{
value: RoomNotifState.Mute,
className: "mx_NotificationSettingsTab_noneEntry",
label: (
<>
{_t("Off")}
<div className="mx_NotificationSettingsTab_microCopy">
{_t("You won't get any notifications")}
</div>
</>
),
},
]}
onChange={this.onRoomNotificationChange}
value={this.roomProps.notificationVolume}
/>
</div>
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
<span className="mx_SettingsTab_subheading">{_t("Sounds")}</span>
<div>
<div className="mx_SettingsTab_subsectionText">
<span>
{_t("Notification sound")}: <code>{this.state.currentSound}</code>
</span>
</div>
<AccessibleButton
className="mx_NotificationSound_resetSound"
disabled={this.state.currentSound == "default"}
onClick={this.clearSound}
kind="primary"
>
{_t("Reset")}
</AccessibleButton>
<SettingsTab>
<SettingsSection heading={_t("Notifications")}>
<div className="mx_NotificationSettingsTab_notificationsSection">
<StyledRadioGroup
name="roomNotificationSetting"
definitions={[
{
value: RoomNotifState.AllMessages,
className: "mx_NotificationSettingsTab_defaultEntry",
label: (
<>
{_t("Default")}
<div className="mx_NotificationSettingsTab_microCopy">
{_t(
"Get notifications as set up in your <a>settings</a>",
{},
{
a: (sub) => (
<AccessibleButton
kind="link_inline"
onClick={this.onOpenSettingsClick}
>
{sub}
</AccessibleButton>
),
},
)}
</div>
</>
),
},
{
value: RoomNotifState.AllMessagesLoud,
className: "mx_NotificationSettingsTab_allMessagesEntry",
label: (
<>
{_t("All messages")}
<div className="mx_NotificationSettingsTab_microCopy">
{_t("Get notified for every message")}
</div>
</>
),
},
{
value: RoomNotifState.MentionsOnly,
className: "mx_NotificationSettingsTab_mentionsKeywordsEntry",
label: (
<>
{_t("@mentions & keywords")}
<div className="mx_NotificationSettingsTab_microCopy">
{_t(
"Get notified only with mentions and keywords " +
"as set up in your <a>settings</a>",
{},
{
a: (sub) => (
<AccessibleButton
kind="link_inline"
onClick={this.onOpenSettingsClick}
>
{sub}
</AccessibleButton>
),
},
)}
</div>
</>
),
},
{
value: RoomNotifState.Mute,
className: "mx_NotificationSettingsTab_noneEntry",
label: (
<>
{_t("Off")}
<div className="mx_NotificationSettingsTab_microCopy">
{_t("You won't get any notifications")}
</div>
</>
),
},
]}
onChange={this.onRoomNotificationChange}
value={this.roomProps.notificationVolume}
/>
</div>
<div>
<h3>{_t("Set a new custom sound")}</h3>
<div className="mx_SettingsFlag">
<form autoComplete="off" noValidate={true}>
<input
ref={this.soundUpload}
className="mx_NotificationSound_soundUpload"
type="file"
onClick={chromeFileInputFix}
onChange={this.onSoundUploadChanged}
accept="audio/*"
aria-label={_t("Upload custom sound")}
/>
</form>
{currentUploadedFile}
<SettingsSubsection heading={_t("Sounds")}>
<div>
<div className="mx_SettingsTab_subsectionText">
<span>
{_t("Notification sound")}: <code>{this.state.currentSound}</code>
</span>
</div>
<AccessibleButton
className="mx_NotificationSound_resetSound"
disabled={this.state.currentSound == "default"}
onClick={this.clearSound}
kind="primary"
>
{_t("Reset")}
</AccessibleButton>
</div>
<div>
<h4>{_t("Set a new custom sound")}</h4>
<div className="mx_SettingsFlag">
<form autoComplete="off" noValidate={true}>
<input
ref={this.soundUpload}
className="mx_NotificationSound_soundUpload"
type="file"
onClick={chromeFileInputFix}
onChange={this.onSoundUploadChanged}
accept="audio/*"
aria-label={_t("Upload custom sound")}
/>
</form>
<AccessibleButton
className="mx_NotificationSound_browse"
onClick={this.triggerUploader}
kind="primary"
>
{_t("Browse")}
</AccessibleButton>
{currentUploadedFile}
</div>
<AccessibleButton
className="mx_NotificationSound_save"
disabled={this.state.uploadedFile == null}
onClick={this.onClickSaveSound}
kind="primary"
>
{_t("Save")}
</AccessibleButton>
<br />
</div>
</div>
</div>
<AccessibleButton
className="mx_NotificationSound_browse"
onClick={this.triggerUploader}
kind="primary"
>
{_t("Browse")}
</AccessibleButton>
<AccessibleButton
className="mx_NotificationSound_save"
disabled={this.state.uploadedFile == null}
onClick={this.onClickSaveSound}
kind="primary"
>
{_t("Save")}
</AccessibleButton>
<br />
</div>
</SettingsSubsection>
</SettingsSection>
</SettingsTab>
);
}
}

41
src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
View file

@ -36,6 +36,8 @@ import { VoiceBroadcastInfoEventType } from "../../../../../voice-broadcast";
import { ElementCall } from "../../../../../models/Call";
import SdkConfig, { DEFAULTS } from "../../../../../SdkConfig";
import { AddPrivilegedUsers } from "../../AddPrivilegedUsers";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
interface IEventShowOpts {
isState?: boolean;
@ -399,7 +401,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
const canBanUsers = currentUserLevel >= banLevel;
bannedUsersSection = (
<SettingsFieldset legend={_t("Banned users")}>
<ul>
<ul className="mx_RolesRoomSettingsTab_bannedList">
{banned.map((member) => {
const banEvent = member.events.member?.getContent();
const bannedById = member.events.member?.getSender();
@ -479,24 +481,25 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
.filter(Boolean);
return (
<div className="mx_SettingsTab mx_RolesRoomSettingsTab">
<div className="mx_SettingsTab_heading">{_t("Roles & Permissions")}</div>
{privilegedUsersSection}
{canChangeLevels && <AddPrivilegedUsers room={room} defaultUserLevel={defaultUserLevel} />}
{mutedUsersSection}
{bannedUsersSection}
<SettingsFieldset
legend={_t("Permissions")}
description={
isSpaceRoom
? _t("Select the roles required to change various parts of the space")
: _t("Select the roles required to change various parts of the room")
}
>
{powerSelectors}
{eventPowerSelectors}
</SettingsFieldset>
</div>
<SettingsTab>
<SettingsSection heading={_t("Roles & Permissions")}>
{privilegedUsersSection}
{canChangeLevels && <AddPrivilegedUsers room={room} defaultUserLevel={defaultUserLevel} />}
{mutedUsersSection}
{bannedUsersSection}
<SettingsFieldset
legend={_t("Permissions")}
description={
isSpaceRoom
? _t("Select the roles required to change various parts of the space")
: _t("Select the roles required to change various parts of the room")
}
>
{powerSelectors}
{eventPowerSelectors}
</SettingsFieldset>
</SettingsSection>
</SettingsTab>
);
}
}

81
src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
View file

@ -41,6 +41,8 @@ import SettingsFieldset from "../../SettingsFieldset";
import ExternalLink from "../../../elements/ExternalLink";
import PosthogTrackers from "../../../../../PosthogTrackers";
import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsTab from "../SettingsTab";
interface IProps {
room: Room;
@ -265,6 +267,23 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
roomName: room.name,
});
let advanced: JSX.Element | undefined;
if (room.getJoinRule() === JoinRule.Public) {
advanced = (
<div>
<AccessibleButton
onClick={this.toggleAdvancedSection}
kind="link"
className="mx_SettingsTab_showAdvanced"
aria-expanded={this.state.showAdvancedSection}
>
{this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced")}
</AccessibleButton>
{this.state.showAdvancedSection && this.renderAdvanced()}
</div>
);
}
return (
<SettingsFieldset legend={_t("Access")} description={description}>
<JoinRuleSettings
@ -275,6 +294,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
promptUpgrade={true}
aliasWarning={aliasWarning}
/>
{advanced}
</SettingsFieldset>
);
}
@ -399,7 +419,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
const canSetGuestAccess = state?.mayClientSendStateEvent(EventType.RoomGuestAccess, client);
return (
<>
<div className="mx_SecurityRoomSettingsTab_advancedSection">
<LabelledToggleSwitch
value={guestAccess === GuestAccess.CanJoin}
onChange={this.onGuestAccessChange}
@ -412,7 +432,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
"the room without having a registered account.",
)}
</p>
</>
</div>
);
}
@ -437,45 +457,30 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
const historySection = this.renderHistory();
let advanced: JSX.Element | undefined;
if (room.getJoinRule() === JoinRule.Public) {
advanced = (
<div className="mx_SettingsTab_section">
<AccessibleButton
onClick={this.toggleAdvancedSection}
kind="link"
className="mx_SettingsTab_showAdvanced"
aria-expanded={this.state.showAdvancedSection}
>
{this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced")}
</AccessibleButton>
{this.state.showAdvancedSection && this.renderAdvanced()}
</div>
);
}
return (
<div className="mx_SettingsTab mx_SecurityRoomSettingsTab">
<div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
<SettingsTab>
<SettingsSection heading={_t("Security & Privacy")}>
<SettingsFieldset
legend={_t("Encryption")}
description={_t("Once enabled, encryption cannot be disabled.")}
>
<LabelledToggleSwitch
value={isEncrypted}
onChange={this.onEncryptionChange}
label={_t("Encrypted")}
disabled={!canEnableEncryption}
/>
{encryptionSettings}
</SettingsFieldset>
<SettingsFieldset
legend={_t("Encryption")}
description={_t("Once enabled, encryption cannot be disabled.")}
>
<LabelledToggleSwitch
value={isEncrypted}
onChange={this.onEncryptionChange}
label={_t("Encrypted")}
disabled={!canEnableEncryption}
/>
{encryptionSettings}
</SettingsFieldset>
{this.renderJoinRule()}
{historySection}
</SettingsSection>
</SettingsTab>
// <div className="mx_SettingsTab mx_SecurityRoomSettingsTab">
// <div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
{this.renderJoinRule()}
{advanced}
{historySection}
</div>
// </div>
);
}
}

102
test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
View file

@ -6,50 +6,78 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
class="mx_SettingsTab"
>
<div
class="mx_SettingsTab_heading"
class="mx_SettingsTab_sections"
>
Advanced
</div>
<div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSection"
>
Room information
</span>
<div>
<span>
Internal room ID
</span>
<div
class="mx_CopyableText mx_CopyableText_border"
<h2
class="mx_Heading_h2"
>
Advanced
</h2>
<div
class="mx_SettingsSection_subSections"
>
!room:example.com
<div
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Room information
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div>
<span>
Internal room ID
</span>
<div
class="mx_CopyableText mx_CopyableText_border"
>
!room:example.com
<div
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
</div>
</div>
</div>
</div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Room version
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div>
<span>
Room version:
</span>
 1
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
>
<span
class="mx_SettingsTab_subheading"
>
Room version
</span>
<div>
<span>
Room version:
</span>
 1
</div>
</div>
</div>
</DocumentFragment>
`;

182
test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap
View file

@ -6,75 +6,83 @@ exports[`<BridgeSettingsTab /> renders when room is bridging messages 1`] = `
class="mx_SettingsTab"
>
<div
class="mx_SettingsTab_heading"
class="mx_SettingsTab_sections"
>
Bridges
</div>
<div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
>
<div>
<p>
<span>
This room is bridging messages to the following platforms.
<a
href="https://matrix.org/bridges/"
rel="noreferrer noopener"
target="_blank"
>
Learn more.
</a>
</span>
</p>
<ul
class="mx_RoomSettingsDialog_BridgeList"
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
>
<li
class="mx_RoomSettingsDialog_BridgeList_listItem"
>
<div
class="mx_RoomSettingsDialog_column_icon"
>
<div
class="mx_RoomSettingsDialog_noProtocolIcon"
/>
</div>
<div
class="mx_RoomSettingsDialog_column_data"
>
<h3
class="mx_RoomSettingsDialog_column_data_protocolName"
>
protocol-test
</h3>
<p
class="mx_RoomSettingsDialog_column_data_details mx_RoomSettingsDialog_workspace_channel_details"
>
<span
class="mx_RoomSettingsDialog_channel"
Bridges
</h2>
<div
class="mx_SettingsSection_subSections"
>
<div>
<p>
<span>
This room is bridging messages to the following platforms.
<a
href="https://matrix.org/bridges/"
rel="noreferrer noopener"
target="_blank"
>
<span>
Channel:
<span>
channel-test
</span>
</span>
</span>
</p>
<ul
class="mx_RoomSettingsDialog_column_data_metadata mx_RoomSettingsDialog_metadata"
Learn more.
</a>
</span>
</p>
<ul
class="mx_RoomSettingsDialog_BridgeList"
>
<li
class="mx_RoomSettingsDialog_BridgeList_listItem"
>
<li>
<span>
This bridge is managed by
.
</span>
</li>
</ul>
</div>
</li>
</ul>
<div
class="mx_RoomSettingsDialog_column_icon"
>
<div
class="mx_RoomSettingsDialog_noProtocolIcon"
/>
</div>
<div
class="mx_RoomSettingsDialog_column_data"
>
<h3
class="mx_RoomSettingsDialog_column_data_protocolName"
>
protocol-test
</h3>
<p
class="mx_RoomSettingsDialog_column_data_details mx_RoomSettingsDialog_workspace_channel_details"
>
<span
class="mx_RoomSettingsDialog_channel"
>
<span>
Channel:
<span>
channel-test
</span>
</span>
</span>
</p>
<ul
class="mx_RoomSettingsDialog_column_data_metadata mx_RoomSettingsDialog_metadata"
>
<li>
<span>
This bridge is managed by
.
</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
@ -87,25 +95,33 @@ exports[`<BridgeSettingsTab /> renders when room is not bridging messages to any
class="mx_SettingsTab"
>
<div
class="mx_SettingsTab_heading"
class="mx_SettingsTab_sections"
>
Bridges
</div>
<div
class="mx_SettingsTab_section mx_SettingsTab_subsectionText"
>
<p>
<span>
This room isn't bridging messages to any platforms.
<a
href="https://matrix.org/bridges/"
rel="noreferrer noopener"
target="_blank"
>
Learn more.
</a>
</span>
</p>
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
>
Bridges
</h2>
<div
class="mx_SettingsSection_subSections"
>
<p>
<span>
This room isn't bridging messages to any platforms.
<a
href="https://matrix.org/bridges/"
rel="noreferrer noopener"
target="_blank"
>
Learn more.
</a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>

4
test/components/views/settings/tabs/room/__snapshots__/RolesRoomSettingsTab-test.tsx.snap
View file

@ -9,7 +9,9 @@ exports[`RolesRoomSettingsTab Banned users renders banned users 1`] = `
>
Banned users
</legend>
<ul>
<ul
class="mx_RolesRoomSettingsTab_bannedList"
>
<li>
<span
title="Banned by @alice:server.org"