Enable Sign in with QR section in Settings where the Homeserver supports it

Author: hughns

src/components/views/settings/devices/LoginWithQRSection.tsx

@@ -20,7 +20,6 @@ import type { IServerVersions } from "matrix-js-sdk/src/matrix";
 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../elements/AccessibleButton";
 import SettingsSubsection from "../shared/SettingsSubsection";
-import SettingsStore from "../../../../settings/SettingsStore";
 
 interface IProps {
     onShowQr: () => void;
@@ -33,12 +32,10 @@ export default class LoginWithQRSection extends React.Component<IProps> {
     }
 
     public render(): JSX.Element | null {
+        // Needs server support for MSC3882 and MSC3886:
         const msc3882Supported = !!this.props.versions?.unstable_features?.["org.matrix.msc3882"];
         const msc3886Supported = !!this.props.versions?.unstable_features?.["org.matrix.msc3886"];
-
-        // Needs to be enabled as a feature + server support MSC3886 or have a default rendezvous server configured:
-        const offerShowQr =
-            SettingsStore.getValue("feature_qr_signin_reciprocate_show") && msc3882Supported && msc3886Supported; // We don't support configuration of a fallback at the moment so we just check the MSCs
+        const offerShowQr = msc3882Supported && msc3886Supported;
 
         // don't show anything if no method is available
         if (!offerShowQr) {

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

@@ -381,7 +381,6 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
         }
 
         const useNewSessionManager = SettingsStore.getValue("feature_new_device_manager");
-        const showQrCodeEnabled = SettingsStore.getValue("feature_qr_signin_reciprocate_show");
         const devicesSection = useNewSessionManager ? null : (
             <>
                 <div className="mx_SettingsTab_heading">{_t("Where you're signed in")}</div>
@@ -394,15 +393,13 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
                     </span>
                     <DevicesPanel />
                 </div>
-                {showQrCodeEnabled ? (
-                    <LoginWithQRSection onShowQr={this.onShowQRClicked} versions={this.state.versions} />
-                ) : null}
+                <LoginWithQRSection onShowQr={this.onShowQRClicked} versions={this.state.versions} />
             </>
         );
 
         const client = MatrixClientPeg.get();
 
-        if (showQrCodeEnabled && this.state.showLoginWithQR) {
+        if (this.state.showLoginWithQR) {
             return (
                 <div className="mx_SettingsTab mx_SecurityUserSettingsTab">
                     <LoginWithQR

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

@@ -34,7 +34,6 @@ import { deleteDevicesWithInteractiveAuth } from "../../devices/deleteDevices";
 import SettingsTab from "../SettingsTab";
 import LoginWithQRSection from "../../devices/LoginWithQRSection";
 import LoginWithQR, { Mode } from "../../../auth/LoginWithQR";
-import SettingsStore from "../../../../../settings/SettingsStore";
 import { useAsyncMemo } from "../../../../../hooks/useAsyncMemo";
 import QuestionDialog from "../../../dialogs/QuestionDialog";
 import { FilterVariation } from "../../devices/filter";
@@ -212,8 +211,6 @@ const SessionManagerTab: React.FC = () => {
 
     const [signInWithQrMode, setSignInWithQrMode] = useState<Mode | null>();
 
-    const showQrCodeEnabled = SettingsStore.getValue("feature_qr_signin_reciprocate_show");
-
     const onQrFinish = useCallback(() => {
         setSignInWithQrMode(null);
     }, [setSignInWithQrMode]);
@@ -222,7 +219,7 @@ const SessionManagerTab: React.FC = () => {
         setSignInWithQrMode(Mode.Show);
     }, [setSignInWithQrMode]);
 
-    if (showQrCodeEnabled && signInWithQrMode) {
+    if (signInWithQrMode) {
         return <LoginWithQR mode={signInWithQrMode} onFinished={onQrFinish} client={matrixClient} />;
     }
 
@@ -282,7 +279,7 @@ const SessionManagerTab: React.FC = () => {
                     />
                 </SettingsSubsection>
             )}
-            {showQrCodeEnabled ? <LoginWithQRSection onShowQr={onShowQrClicked} versions={clientVersions} /> : null}
+            <LoginWithQRSection onShowQr={onShowQrClicked} versions={clientVersions} />
         </SettingsTab>
     );
 };

src/settings/Settings.tsx

@@ -496,16 +496,6 @@ export const SETTINGS: { [setting: string]: ISetting } = {
             ),
         },
     },
-    "feature_qr_signin_reciprocate_show": {
-        isFeature: true,
-        labsGroup: LabGroup.Experimental,
-        supportedLevels: LEVELS_FEATURE,
-        displayName: _td(
-            "Allow a QR code to be shown in session manager to sign in another device " +
-                "(requires compatible homeserver)",
-        ),
-        default: false,
-    },
     "feature_rust_crypto": {
         // use the rust matrix-sdk-crypto-js for crypto.
         isFeature: true,

test/components/views/settings/devices/LoginWithQRSection-test.tsx

@@ -21,8 +21,6 @@ import React from "react";
 
 import LoginWithQRSection from "../../../../../src/components/views/settings/devices/LoginWithQRSection";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import { SettingLevel } from "../../../../../src/settings/SettingLevel";
-import SettingsStore from "../../../../../src/settings/SettingsStore";
 
 function makeClient() {
     return mocked({
@@ -67,22 +65,14 @@ describe("<LoginWithQRSection />", () => {
             expect(container).toMatchSnapshot();
         });
 
-        it("feature enabled", async () => {
-            await SettingsStore.setValue("feature_qr_signin_reciprocate_show", null, SettingLevel.DEVICE, true);
-            const { container } = render(getComponent());
-            expect(container).toMatchSnapshot();
-        });
-
-        it("only feature + MSC3882 enabled", async () => {
-            await SettingsStore.setValue("feature_qr_signin_reciprocate_show", null, SettingLevel.DEVICE, true);
+        it("only MSC3882 enabled", async () => {
             const { container } = render(getComponent({ versions: makeVersions({ "org.matrix.msc3882": true }) }));
             expect(container).toMatchSnapshot();
         });
     });
 
     describe("should render panel", () => {
-        it("enabled by feature + MSC3882 + MSC3886", async () => {
-            await SettingsStore.setValue("feature_qr_signin_reciprocate_show", null, SettingLevel.DEVICE, true);
+        it("MSC3882 + MSC3886", async () => {
             const { container } = render(
                 getComponent({
                     versions: makeVersions({

test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap

@@ -1,12 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<LoginWithQRSection /> should not render feature enabled 1`] = `<div />`;
-
 exports[`<LoginWithQRSection /> should not render no support at all 1`] = `<div />`;
 
-exports[`<LoginWithQRSection /> should not render only feature + MSC3882 enabled 1`] = `<div />`;
+exports[`<LoginWithQRSection /> should not render only MSC3882 enabled 1`] = `<div />`;
 
-exports[`<LoginWithQRSection /> should render panel enabled by feature + MSC3882 + MSC3886 1`] = `
+exports[`<LoginWithQRSection /> should render panel MSC3882 + MSC3886 1`] = `
 <div>
   <div
     class="mx_SettingsSubsection"

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

@@ -79,17 +79,7 @@ describe("<SecurityUserSettingsTab />", () => {
         expect(queryByTestId("devices-section")).toBeFalsy();
     });
 
-    it("does not render qr code login section when disabled", () => {
-        settingsValueSpy.mockReturnValue(false);
-        const { queryByText } = render(getComponent());
-
-        expect(settingsValueSpy).toHaveBeenCalledWith("feature_qr_signin_reciprocate_show");
-
-        expect(queryByText("Sign in with QR code")).toBeFalsy();
-    });
-
-    it("renders qr code login section when enabled", async () => {
-        settingsValueSpy.mockImplementation((settingName) => settingName === "feature_qr_signin_reciprocate_show");
+    it("renders qr code login section", async () => {
         const { getByText } = render(getComponent());
 
         // wait for versions call to settle
@@ -99,7 +89,6 @@ describe("<SecurityUserSettingsTab />", () => {
     });
 
     it("enters qr code login section when show QR code button clicked", async () => {
-        settingsValueSpy.mockImplementation((settingName) => settingName === "feature_qr_signin_reciprocate_show");
         const { getByText, getByTestId } = render(getComponent());
         // wait for versions call to settle
         await flushPromises();

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

@@ -1351,17 +1351,7 @@ describe("<SessionManagerTab />", () => {
             });
         });
 
-        it("does not render qr code login section when disabled", () => {
-            settingsValueSpy.mockReturnValue(false);
-            const { queryByText } = render(getComponent());
-
-            expect(settingsValueSpy).toHaveBeenCalledWith("feature_qr_signin_reciprocate_show");
-
-            expect(queryByText("Sign in with QR code")).toBeFalsy();
-        });
-
-        it("renders qr code login section when enabled", async () => {
-            settingsValueSpy.mockImplementation((settingName) => settingName === "feature_qr_signin_reciprocate_show");
+        it("renders qr code login section", async () => {
             const { getByText } = render(getComponent());
 
             // wait for versions call to settle
@@ -1371,7 +1361,6 @@ describe("<SessionManagerTab />", () => {
         });
 
         it("enters qr code login section when show QR code button clicked", async () => {
-            settingsValueSpy.mockImplementation((settingName) => settingName === "feature_qr_signin_reciprocate_show");
             const { getByText, getByTestId } = render(getComponent());
             // wait for versions call to settle
             await flushPromises();