Use semantic headings in user settings - Ignored users (#11006)

* account password section

* account email and phone numbers

* update cypress selectors

* use settingsection for General section

* use semantic headings for profile settings

* fix show advanced spacing

* udpate snapshot

* use semantic headings in mjolnir settings

* remove debug

* unit test UI changes for mjolnir settings

res/css/views/settings/tabs/_SettingsSection.pcss

@@ -17,7 +17,6 @@ limitations under the License.
 .mx_SettingsSection {
     --SettingsTab_section-margin-bottom-preferences-labs: 30px;
     --SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */
-    --SettingsTab_fullWidthField-margin-inline-end: 100px;
     --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */
 
     color: $primary-content;

res/css/views/settings/tabs/_SettingsTab.pcss

@@ -16,7 +16,6 @@ limitations under the License.
 
 .mx_SettingsTab {
     --SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */
-    --SettingsTab_fullWidthField-margin-inline-end: 100px;
     --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */
 
     color: $primary-content;

res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.pcss

@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MjolnirUserSettingsTab .mx_Field {
-    margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
-}
-
 .mx_MjolnirUserSettingsTab_listItem {
     margin-bottom: 2px;
 }

src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx

@@ -28,6 +28,9 @@ import ErrorDialog from "../../../dialogs/ErrorDialog";
 import QuestionDialog from "../../../dialogs/QuestionDialog";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import Field from "../../../elements/Field";
+import SettingsTab from "../SettingsTab";
+import { SettingsSection } from "../../shared/SettingsSection";
+import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
 
 interface IState {
     busy: boolean;
@@ -250,13 +253,11 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
         const brand = SdkConfig.get().brand;
 
         return (
-            <div className="mx_SettingsTab mx_MjolnirUserSettingsTab">
+            <SettingsTab>
-                <div className="mx_SettingsTab_heading">{_t("Ignored users")}</div>
+                <SettingsSection heading={_t("Ignored users")}>
-                <div className="mx_SettingsTab_section">
+                    <SettingsSubsectionText>
-                    <div className="mx_SettingsTab_subsectionText">
                         <span className="warning">{_t("⚠ These settings are meant for advanced users.")}</span>
-                        <br />
+                        <p>
-                        <br />
                             {_t(
                                 "Add users and servers you want to ignore here. Use asterisks " +
                                     "to have %(brand)s match any characters. For example, <code>@bot:*</code> " +
@@ -264,19 +265,18 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
                                 { brand },
                                 { code: (s) => <code>{s}</code> },
                             )}
-                        <br />
+                        </p>
-                        <br />
+                        <p>
                             {_t(
                                 "Ignoring people is done through ban lists which contain rules for " +
                                     "who to ban. Subscribing to a ban list means the users/servers blocked by " +
                                     "that list will be hidden from you.",
                             )}
-                    </div>
+                        </p>
-                </div>
+                    </SettingsSubsectionText>
-                <div className="mx_SettingsTab_section">
+                    <SettingsSubsection
-                    <span className="mx_SettingsTab_subheading">{_t("Personal ban list")}</span>
+                        heading={_t("Personal ban list")}
-                    <div className="mx_SettingsTab_subsectionText">
+                        description={_t(
-                        {_t(
                             "Your personal ban list holds all the users/servers you personally don't " +
                                 "want to see messages from. After ignoring your first user/server, a new room " +
                                 "will show up in your room list named '%(myBanList)s' - stay in this room to keep " +
@@ -285,9 +285,8 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
                                 myBanList: _t("My Ban List"),
                             },
                         )}
-                    </div>
+                    >
-                    <div>{this.renderPersonalBanListRules()}</div>
+                        {this.renderPersonalBanListRules()}
-                    <div>
                         <form onSubmit={this.onAddPersonalRule} autoComplete="off">
                             <Field
                                 type="text"
@@ -305,17 +304,22 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
                                 {_t("Ignore")}
                             </AccessibleButton>
                         </form>
-                    </div>
+                    </SettingsSubsection>
-                </div>
+                    <SettingsSubsection
-                <div className="mx_SettingsTab_section">
+                        heading={_t("Subscribed lists")}
-                    <span className="mx_SettingsTab_subheading">{_t("Subscribed lists")}</span>
+                        description={
-                    <div className="mx_SettingsTab_subsectionText">
+                            <>
-                        <span className="warning">{_t("Subscribing to a ban list will cause you to join it!")}</span>
+                                <span className="warning">
+                                    {_t("Subscribing to a ban list will cause you to join it!")}
+                                </span>
                                 &nbsp;
-                        <span>{_t("If this isn't what you want, please use a different tool to ignore users.")}</span>
+                                <span>
-                    </div>
+                                    {_t("If this isn't what you want, please use a different tool to ignore users.")}
-                    <div>{this.renderSubscribedBanLists()}</div>
+                                </span>
-                    <div>
+                            </>
+                        }
+                    >
+                        {this.renderSubscribedBanLists()}
                         <form onSubmit={this.onSubscribeList} autoComplete="off">
                             <Field
                                 type="text"
@@ -332,9 +336,9 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
                                 {_t("Subscribe")}
                             </AccessibleButton>
                         </form>
-                    </div>
+                    </SettingsSubsection>
-                </div>
+                </SettingsSection>
-            </div>
+            </SettingsTab>
         );
     }
 }

test/components/views/settings/tabs/user/MjolnirUserSettingsTab-test.tsx

@@ -0,0 +1,45 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { render } from "@testing-library/react";
+
+import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../../test-utils";
+import MjolnirUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/MjolnirUserSettingsTab";
+import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
+import SettingsStore from "../../../../../../src/settings/SettingsStore";
+
+describe("<MjolnirUserSettingsTab />", () => {
+    const userId = "@alice:server.org";
+    const mockClient = getMockClientWithEventEmitter({
+        ...mockClientMethodsUser(userId),
+        getRoom: jest.fn(),
+    });
+
+    const getComponent = () =>
+        render(<MjolnirUserSettingsTab />, {
+            wrapper: ({ children }) => (
+                <MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
+            ),
+        });
+
+    it("renders correctly when user has no ignored users", () => {
+        jest.spyOn(SettingsStore, "getValue").mockReturnValue(null);
+        const { container } = getComponent();
+
+        expect(container).toMatchSnapshot();
+    });
+});

test/components/views/settings/tabs/user/__snapshots__/MjolnirUserSettingsTab-test.tsx.snap

@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<MjolnirUserSettingsTab /> renders correctly when user has no ignored users 1`] = `
+<div>
+  <div
+    class="mx_SettingsTab"
+  >
+    <div
+      class="mx_SettingsTab_sections"
+    >
+      <div
+        class="mx_SettingsSection"
+      >
+        <h2
+          class="mx_Heading_h2"
+        >
+          Ignored users
+        </h2>
+        <div
+          class="mx_SettingsSection_subSections"
+        >
+          <div
+            class="mx_SettingsSubsection_text"
+          >
+            <span
+              class="warning"
+            >
+              ⚠ These settings are meant for advanced users.
+            </span>
+            <p>
+              <span>
+                Add users and servers you want to ignore here. Use asterisks to have Element match any characters. For example, 
+                <code>
+                  @bot:*
+                </code>
+                 would ignore all users that have the name 'bot' on any server.
+              </span>
+            </p>
+            <p>
+              Ignoring people is done through ban lists which contain rules for who to ban. Subscribing to a ban list means the users/servers blocked by that list will be hidden from you.
+            </p>
+          </div>
+          <div
+            class="mx_SettingsSubsection"
+          >
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                Personal ban list
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_description"
+            >
+              <div
+                class="mx_SettingsSubsection_text"
+              >
+                Your personal ban list holds all the users/servers you personally don't want to see messages from. After ignoring your first user/server, a new room will show up in your room list named 'My Ban List' - stay in this room to keep the ban list in effect.
+              </div>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <i>
+                You have not ignored anyone.
+              </i>
+              <form
+                autocomplete="off"
+              >
+                <div
+                  class="mx_Field mx_Field_input"
+                >
+                  <input
+                    id="mx_Field_1"
+                    label="Server or user ID to ignore"
+                    placeholder="eg: @bot:* or example.org"
+                    type="text"
+                    value=""
+                  />
+                  <label
+                    for="mx_Field_1"
+                  >
+                    Server or user ID to ignore
+                  </label>
+                </div>
+                <div
+                  class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+                  role="button"
+                  tabindex="0"
+                  type="submit"
+                >
+                  Ignore
+                </div>
+              </form>
+            </div>
+          </div>
+          <div
+            class="mx_SettingsSubsection"
+          >
+            <div
+              class="mx_SettingsSubsectionHeading"
+            >
+              <h3
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+              >
+                Subscribed lists
+              </h3>
+            </div>
+            <div
+              class="mx_SettingsSubsection_description"
+            >
+              <div
+                class="mx_SettingsSubsection_text"
+              >
+                <span
+                  class="warning"
+                >
+                  Subscribing to a ban list will cause you to join it!
+                </span>
+                 
+                <span>
+                  If this isn't what you want, please use a different tool to ignore users.
+                </span>
+              </div>
+            </div>
+            <div
+              class="mx_SettingsSubsection_content"
+            >
+              <i>
+                You are not subscribed to any lists
+              </i>
+              <form
+                autocomplete="off"
+              >
+                <div
+                  class="mx_Field mx_Field_input"
+                >
+                  <input
+                    id="mx_Field_2"
+                    label="Room ID or address of ban list"
+                    placeholder="Room ID or address of ban list"
+                    type="text"
+                    value=""
+                  />
+                  <label
+                    for="mx_Field_2"
+                  >
+                    Room ID or address of ban list
+                  </label>
+                </div>
+                <div
+                  class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+                  role="button"
+                  tabindex="0"
+                  type="submit"
+                >
+                  Subscribe
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;