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

Use semantic headings in user settings - integrations and account deletion (#10837)

Browse source 
* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* put back margin var

* use SettingsTab wrapper

* use semantic headings for deactivate acc section

* use semantic heading in manage integratios

* i18n

* explicit cast to boolean

* Update src/components/views/settings/shared/SettingsSubsection.tsx

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* test manage integration settings

* test deactivate account section display

* remove debug

* fix cypress test

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
Kerry 2023-05-17 19:52:44 +12:00 • committed by GitHub
parent c3687489dd
commit 8cd84b0e7b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 232 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/views/settings/SetIntegrationManager.tsx
View file

@ -23,6 +23,8 @@ import { IntegrationManagerInstance } from "../../../integrations/IntegrationMan
import SettingsStore from "../../../settings/SettingsStore";
import { SettingLevel } from "../../../settings/SettingLevel";
import ToggleSwitch from "../elements/ToggleSwitch";
import Heading from "../typography/Heading";
import { SettingsSubsectionText } from "./shared/SettingsSubsection";
interface IProps {}
@ -70,11 +72,15 @@ export default class SetIntegrationManager extends React.Component<IProps, IStat
}
return (
<label className="mx_SetIntegrationManager" htmlFor="toggle_integration">
<label
className="mx_SetIntegrationManager"
data-testid="mx_SetIntegrationManager"
htmlFor="toggle_integration"
>
<div className="mx_SettingsFlag">
<div className="mx_SetIntegrationManager_heading_manager">
<span className="mx_SettingsTab_heading">{_t("Manage integrations")}</span>
<span className="mx_SettingsTab_subheading">{managerName}</span>
<Heading size="h2">{_t("Manage integrations")}</Heading>
<Heading size="h3">{managerName}</Heading>
</div>
<ToggleSwitch
id="toggle_integration"
@ -83,13 +89,13 @@ export default class SetIntegrationManager extends React.Component<IProps, IStat
onChange={this.onProvisioningToggled}
/>
</div>
<div className="mx_SettingsTab_subsectionText">{bodyText}</div>
<div className="mx_SettingsTab_subsectionText">
<SettingsSubsectionText>{bodyText}</SettingsSubsectionText>
<SettingsSubsectionText>
{_t(
"Integration managers receive configuration data, and can modify widgets, " +
"send room invites, and set power levels on your behalf.",
)}
</div>
</SettingsSubsectionText>
</label>
);
}

43
src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
View file

@ -54,6 +54,9 @@ import SetIdServer from "../../SetIdServer";
import SetIntegrationManager from "../../SetIntegrationManager";
import ToggleSwitch from "../../../elements/ToggleSwitch";
import { IS_MAC } from "../../../../../Keyboard";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection from "../../shared/SettingsSubsection";
interface IProps {
closeSettingsFn: () => void;
@ -492,27 +495,24 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
private renderManagementSection(): JSX.Element {
// TODO: Improve warning text for account deactivation
return (
<div className="mx_SettingsTab_section" data-testid="account-management-section">
<span className="mx_SettingsTab_subheading">{_t("Account management")}</span>
<span className="mx_SettingsTab_subsectionText">
{_t("Deactivating your account is a permanent action — be careful!")}
</span>
<AccessibleButton onClick={this.onDeactivateClicked} kind="danger">
{_t("Deactivate Account")}
</AccessibleButton>
</div>
<SettingsSection heading={_t("Deactivate account")}>
<SettingsSubsection
heading={_t("Account management")}
data-testid="account-management-section"
description={_t("Deactivating your account is a permanent action — be careful!")}
>
<AccessibleButton onClick={this.onDeactivateClicked} kind="danger">
{_t("Deactivate Account")}
</AccessibleButton>
</SettingsSubsection>
</SettingsSection>
);
}
private renderIntegrationManagerSection(): ReactNode {
if (!SettingsStore.getValue(UIFeature.Widgets)) return null;
return (
<div className="mx_SettingsTab_section">
{/* has its own heading as it includes the current integration manager */}
<SetIntegrationManager />
</div>
);
return <SetIntegrationManager />;
}
public render(): React.ReactNode {
@ -531,12 +531,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
let accountManagementSection: JSX.Element | undefined;
if (SettingsStore.getValue(UIFeature.Deactivate)) {
accountManagementSection = (
<>
<div className="mx_SettingsTab_heading">{_t("Deactivate account")}</div>
{this.renderManagementSection()}
</>
);
accountManagementSection = this.renderManagementSection();
}
let discoverySection;
@ -552,7 +547,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
}
return (
<div className="mx_SettingsTab mx_GeneralUserSettingsTab">
<SettingsTab data-testid="mx_GeneralUserSettingsTab">
<div className="mx_SettingsTab_heading" data-testid="general">
{_t("General")}
</div>
@ -561,9 +556,9 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
{this.renderLanguageSection()}
{supportsMultiLanguageSpellCheck ? this.renderSpellCheckSection() : null}
{discoverySection}
{this.renderIntegrationManagerSection() /* Has its own title */}
{this.renderIntegrationManagerSection()}
{accountManagementSection}
</div>
</SettingsTab>
);
}
}