Use semantic headings in user settings - discovery (#10838)

* 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 * use currentColor in warning-triangle svg, update use in RoomStatusBar * use semantic headings for discovery section * test manage integration settings * test deactivate account section display * remove SettingsFieldset margins * threepids styles * remove debug * test discovery email and phone
2023-05-24 14:37:10 +12:00 · 2023-05-24 14:37:10 +12:00 · 9f011b955b
commit 9f011b955b
parent 9211da20f4
19 changed files with 407 additions and 123 deletions
--- a/test/components/views/settings/snapshots/SettingsFieldset-test.tsx.snap
+++ b/test/components/views/settings/snapshots/SettingsFieldset-test.tsx.snap
@ -14,7 +14,11 @@ exports[`<SettingsFieldset /> renders fieldset with plain text description 1`] =
    <div
      class="mx_SettingsFieldset_description"
    >
-      Changes to who can read history.
+      <div
+        class="mx_SettingsSubsection_text"
+      >
+        Changes to who can read history.
+      </div>
    </div>
    <div>
      test
@ -37,14 +41,18 @@ exports[`<SettingsFieldset /> renders fieldset with react description 1`] = `
    <div
      class="mx_SettingsFieldset_description"
    >
-      <p>
-        Test
-      </p>
-      <a
-        href="#test"
+      <div
+        class="mx_SettingsSubsection_text"
      >
-        a link
-      </a>
+        <p>
+          Test
+        </p>
+        <a
+          href="#test"
+        >
+          a link
+        </a>
+      </div>
    </div>
    <div>
      test
--- a/test/components/views/settings/discovery/EmailAddresses-test.tsx
+++ b/test/components/views/settings/discovery/EmailAddresses-test.tsx
@ -21,7 +21,7 @@ import { IRequestTokenResponse } from "matrix-js-sdk/src/client";
 import { MatrixError } from "matrix-js-sdk/src/http-api";

 import { UserFriendlyError } from "../../../../../src/languageHandler";
-import { EmailAddress } from "../../../../../src/components/views/settings/discovery/EmailAddresses";
+import EmailAddresses, { EmailAddress } from "../../../../../src/components/views/settings/discovery/EmailAddresses";
 import { clearAllModals, getMockClientWithEventEmitter } from "../../../../test-utils";

 const mockGetAccessToken = jest.fn().mockResolvedValue("getAccessToken");
@ -147,3 +147,23 @@ describe("<EmailAddress/>", () => {
        });
    });
 });
+
+describe("<EmailAddresses />", () => {
+    it("should render a loader while loading", async () => {
+        const { container } = render(<EmailAddresses emails={[emailThreepidFixture]} isLoading={true} />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should render email addresses", async () => {
+        const { container } = render(<EmailAddresses emails={[emailThreepidFixture]} isLoading={false} />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should handle no email addresses", async () => {
+        const { container } = render(<EmailAddresses emails={[]} isLoading={false} />);
+
+        expect(container).toMatchSnapshot();
+    });
+});
--- a/test/components/views/settings/discovery/PhoneNumbers-test.tsx
+++ b/test/components/views/settings/discovery/PhoneNumbers-test.tsx
@ -18,18 +18,17 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";

-import { PhoneNumber } from "../../../../../src/components/views/settings/discovery/PhoneNumbers";
+import PhoneNumbers, { PhoneNumber } from "../../../../../src/components/views/settings/discovery/PhoneNumbers";

+const msisdn: IThreepid = {
+    medium: ThreepidMedium.Phone,
+    address: "+441111111111",
+    validated_at: 12345,
+    added_at: 12342,
+    bound: false,
+};
 describe("<PhoneNumber/>", () => {
    it("should track props.msisdn.bound changes", async () => {
-        const msisdn: IThreepid = {
-            medium: ThreepidMedium.Phone,
-            address: "+441111111111",
-            validated_at: 12345,
-            added_at: 12342,
-            bound: false,
-        };
-
        const { rerender } = render(<PhoneNumber msisdn={msisdn} />);
        await screen.findByText("Share");

@ -38,3 +37,23 @@ describe("<PhoneNumber/>", () => {
        await screen.findByText("Revoke");
    });
 });
+
+describe("<PhoneNumbers />", () => {
+    it("should render a loader while loading", async () => {
+        const { container } = render(<PhoneNumbers msisdns={[msisdn]} isLoading={true} />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should render phone numbers", async () => {
+        const { container } = render(<PhoneNumbers msisdns={[msisdn]} isLoading={false} />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should handle no numbers", async () => {
+        const { container } = render(<PhoneNumbers msisdns={[]} isLoading={false} />);
+
+        expect(container).toMatchSnapshot();
+    });
+});
--- a/test/components/views/settings/discovery/snapshots/EmailAddresses-test.tsx.snap
+++ b/test/components/views/settings/discovery/snapshots/EmailAddresses-test.tsx.snap
@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<EmailAddresses /> should handle no email addresses 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Email addresses
+      </h3>
+    </div>
+    <div
+      class="mx_SettingsSubsection_description"
+    >
+      <div
+        class="mx_SettingsSubsection_text"
+      >
+        Discovery options will appear once you have added an email above.
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<EmailAddresses /> should render a loader while loading 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Email addresses
+      </h3>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
+    >
+      <div
+        class="mx_InlineSpinner"
+      >
+        <div
+          aria-label="Loading…"
+          class="mx_InlineSpinner_icon mx_Spinner_icon"
+          style="width: 16px; height: 16px;"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<EmailAddresses /> should render email addresses 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Email addresses
+      </h3>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
+    >
+      <div
+        class="mx_GeneralUserSettingsTab_section--discovery_existing"
+      >
+        <span
+          class="mx_GeneralUserSettingsTab_section--discovery_existing_address"
+        >
+          foo@bar.com
+        </span>
+        <div
+          class="mx_AccessibleButton mx_GeneralUserSettingsTab_section--discovery_existing_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm"
+          role="button"
+          tabindex="0"
+        >
+          Share
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/test/components/views/settings/discovery/snapshots/PhoneNumbers-test.tsx.snap
+++ b/test/components/views/settings/discovery/snapshots/PhoneNumbers-test.tsx.snap
@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PhoneNumbers /> should handle no numbers 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+    data-testid="mx_PhoneNumbers"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Phone numbers
+      </h3>
+    </div>
+    <div
+      class="mx_SettingsSubsection_description"
+    >
+      <div
+        class="mx_SettingsSubsection_text"
+      >
+        Discovery options will appear once you have added a phone number above.
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<PhoneNumbers /> should render a loader while loading 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+    data-testid="mx_PhoneNumbers"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Phone numbers
+      </h3>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
+    >
+      <div
+        class="mx_InlineSpinner"
+      >
+        <div
+          aria-label="Loading…"
+          class="mx_InlineSpinner_icon mx_Spinner_icon"
+          style="width: 16px; height: 16px;"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<PhoneNumbers /> should render phone numbers 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+    data-testid="mx_PhoneNumbers"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h3
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+      >
+        Phone numbers
+      </h3>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
+    >
+      <div
+        class="mx_GeneralUserSettingsTab_section--discovery_existing"
+      >
+        <span
+          class="mx_GeneralUserSettingsTab_section--discovery_existing_address"
+        >
+          +
+          +441111111111
+        </span>
+        <div
+          class="mx_AccessibleButton mx_GeneralUserSettingsTab_section--discovery_existing_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_sm"
+          role="button"
+          tabindex="0"
+        >
+          Revoke
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/test/components/views/settings/tabs/room/snapshots/SecurityRoomSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/room/snapshots/SecurityRoomSettingsTab-test.tsx.snap
@ -12,7 +12,11 @@ exports[`<SecurityRoomSettingsTab /> history visibility uses shared as default h
  <div
    class="mx_SettingsFieldset_description"
  >
-    Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.
+    <div
+      class="mx_SettingsSubsection_text"
+    >
+      Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.
+    </div>
  </div>
  <label
    class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
--- a/test/components/views/spaces/snapshots/SpaceSettingsVisibilityTab-test.tsx.snap
+++ b/test/components/views/spaces/snapshots/SpaceSettingsVisibilityTab-test.tsx.snap
@ -46,7 +46,11 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
            <div
              class="mx_SettingsFieldset_description"
            >
-              Decide who can view and join mock-space.
+              <div
+                class="mx_SettingsSubsection_text"
+              >
+                Decide who can view and join mock-space.
+              </div>
            </div>
            <label
              class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"