Use semantic headings in user settings Security (#10774)

* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* test cross signing panel

* strict

* more strict

* tweak

* test eventindexpanel

* strict fixes
This commit is contained in:
Kerry 2023-05-19 10:32:10 +12:00 committed by GitHub
parent 6c262fff6b
commit d9a61c093c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 721 additions and 303 deletions

View file

@ -27,6 +27,7 @@ import { SettingLevel } from "../../../settings/SettingLevel";
import SeshatResetDialog from "../dialogs/SeshatResetDialog";
import InlineSpinner from "../elements/InlineSpinner";
import ExternalLink from "../elements/ExternalLink";
import { SettingsSubsectionText } from "./shared/SettingsSubsection";
interface IState {
enabling: boolean;
@ -145,8 +146,8 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
if (EventIndexPeg.get() !== null) {
eventIndexingSettings = (
<div>
<div className="mx_SettingsTab_subsectionText">
<>
<SettingsSubsectionText>
{_t(
"Securely cache encrypted messages locally for them " +
"to appear in search results, using %(size)s to store messages from %(rooms)s rooms.",
@ -158,27 +159,25 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
rooms: formatCountLong(this.state.roomCount),
},
)}
</div>
<div>
<AccessibleButton kind="primary" onClick={this.onManage}>
{_t("Manage")}
</AccessibleButton>
</div>
</div>
</SettingsSubsectionText>
<AccessibleButton kind="primary" onClick={this.onManage}>
{_t("Manage")}
</AccessibleButton>
</>
);
} else if (!this.state.eventIndexingEnabled && EventIndexPeg.supportIsInstalled()) {
eventIndexingSettings = (
<div>
<div className="mx_SettingsTab_subsectionText">
<>
<SettingsSubsectionText>
{_t("Securely cache encrypted messages locally for them to appear in search results.")}
</div>
</SettingsSubsectionText>
<div>
<AccessibleButton kind="primary" disabled={this.state.enabling} onClick={this.onEnable}>
{_t("Enable")}
</AccessibleButton>
{this.state.enabling ? <InlineSpinner /> : <div />}
</div>
</div>
</>
);
} else if (EventIndexPeg.platformHasSupport() && !EventIndexPeg.supportIsInstalled()) {
const nativeLink =
@ -187,7 +186,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
"adding-seshat-for-search-in-e2e-encrypted-rooms";
eventIndexingSettings = (
<div className="mx_SettingsTab_subsectionText">
<SettingsSubsectionText>
{_t(
"%(brand)s is missing some components required for securely " +
"caching encrypted messages locally. If you'd like to " +
@ -204,11 +203,11 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
),
},
)}
</div>
</SettingsSubsectionText>
);
} else if (!EventIndexPeg.platformHasSupport()) {
eventIndexingSettings = (
<div className="mx_SettingsTab_subsectionText">
<SettingsSubsectionText>
{_t(
"%(brand)s can't securely cache encrypted messages locally " +
"while running in a web browser. Use <desktopLink>%(brand)s Desktop</desktopLink> " +
@ -228,24 +227,28 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
),
},
)}
</div>
</SettingsSubsectionText>
);
} else {
eventIndexingSettings = (
<div className="mx_SettingsTab_subsectionText">
<p>{this.state.enabling ? <InlineSpinner /> : _t("Message search initialisation failed")}</p>
<>
<SettingsSubsectionText>
{this.state.enabling ? <InlineSpinner /> : _t("Message search initialisation failed")}
</SettingsSubsectionText>
{EventIndexPeg.error && (
<details>
<summary>{_t("Advanced")}</summary>
<code>{EventIndexPeg.error.message}</code>
<p>
<AccessibleButton key="delete" kind="danger" onClick={this.confirmEventStoreReset}>
{_t("Reset")}
</AccessibleButton>
</p>
</details>
<SettingsSubsectionText>
<details>
<summary>{_t("Advanced")}</summary>
<code>{EventIndexPeg.error.message}</code>
<p>
<AccessibleButton key="delete" kind="danger" onClick={this.confirmEventStoreReset}>
{_t("Reset")}
</AccessibleButton>
</p>
</details>
</SettingsSubsectionText>
)}
</div>
</>
);
}