Open the proper integration settings on integrations disabled error (#30538)

* Open the proper integration settings on integrations disabled error.

* Convert to functional component.

* Add test

* update snap

Author: Half-Shot

src/components/views/dialogs/IntegrationsDisabledDialog.tsx

@@ -1,55 +1,53 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2019 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { useCallback } from "react";
 
 import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
+import { UserTab } from "./UserTab";
 
 interface IProps {
     onFinished(): void;
 }
 
-export default class IntegrationsDisabledDialog extends React.Component<IProps> {
-    private onAcknowledgeClick = (): void => {
-        this.props.onFinished();
-    };
+export const IntegrationsDisabledDialog: React.FC<IProps> = ({ onFinished }) => {
+    const onOpenSettingsClick = useCallback(() => {
+        onFinished();
+        dis.dispatch({
+            action: Action.ViewUserSettings,
+            initialTabId: UserTab.Security,
+        });
+    }, [onFinished]);
 
-    private onOpenSettingsClick = (): void => {
-        this.props.onFinished();
-        dis.fire(Action.ViewUserSettings);
-    };
-
-    public render(): React.ReactNode {
-        return (
-            <BaseDialog
-                className="mx_IntegrationsDisabledDialog"
-                hasCancel={true}
-                onFinished={this.props.onFinished}
-                title={_t("integrations|disabled_dialog_title")}
-            >
-                <div className="mx_IntegrationsDisabledDialog_content">
-                    <p>
-                        {_t("integrations|disabled_dialog_description", {
-                            manageIntegrations: _t("integration_manager|manage_title"),
-                        })}
-                    </p>
-                </div>
-                <DialogButtons
-                    primaryButton={_t("common|settings")}
-                    onPrimaryButtonClick={this.onOpenSettingsClick}
-                    cancelButton={_t("action|ok")}
-                    onCancel={this.onAcknowledgeClick}
-                />
-            </BaseDialog>
-        );
-    }
-}
+    return (
+        <BaseDialog
+            className="mx_IntegrationsDisabledDialog"
+            hasCancel={true}
+            onFinished={onFinished}
+            title={_t("integrations|disabled_dialog_title")}
+        >
+            <div className="mx_IntegrationsDisabledDialog_content">
+                <p>
+                    {_t("integrations|disabled_dialog_description", {
+                        manageIntegrations: _t("integration_manager|manage_title"),
+                    })}
+                </p>
+            </div>
+            <DialogButtons
+                primaryButton={_t("common|settings")}
+                onPrimaryButtonClick={onOpenSettingsClick}
+                cancelButton={_t("action|ok")}
+                onCancel={onFinished}
+            />
+        </BaseDialog>
+    );
+};

src/integrations/IntegrationManagers.ts

@@ -13,7 +13,7 @@ import SdkConfig from "../SdkConfig";
 import Modal from "../Modal";
 import { IntegrationManagerInstance, Kind } from "./IntegrationManagerInstance";
 import IntegrationsImpossibleDialog from "../components/views/dialogs/IntegrationsImpossibleDialog";
-import IntegrationsDisabledDialog from "../components/views/dialogs/IntegrationsDisabledDialog";
+import { IntegrationsDisabledDialog } from "../components/views/dialogs/IntegrationsDisabledDialog";
 import WidgetUtils from "../utils/WidgetUtils";
 import { MatrixClientPeg } from "../MatrixClientPeg";
 

test/unit-tests/components/views/dialogs/IntegrationsDisabledDialog-test.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { fireEvent, render } from "jest-matrix-react";
+
+import { IntegrationsDisabledDialog } from "../../../../../src/components/views/dialogs/IntegrationsDisabledDialog.tsx";
+import defaultDispatcher from "../../../../../src/dispatcher/dispatcher.ts";
+import { Action } from "../../../../../src/dispatcher/actions.ts";
+import { UserTab } from "../../../../../src/components/views/dialogs/UserTab.ts";
+
+describe("<IntegrationsDisabledDialog />", () => {
+    const onFinished = jest.fn();
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    function renderComponent() {
+        return render(<IntegrationsDisabledDialog onFinished={onFinished} />);
+    }
+
+    it("should render as expected", () => {
+        const { asFragment } = renderComponent();
+        expect(asFragment()).toMatchSnapshot();
+    });
+    it("should do nothing on clicking OK", () => {
+        const { getByText } = renderComponent();
+        fireEvent.click(getByText("OK"));
+        expect(onFinished).toHaveBeenCalled();
+    });
+    it("should open the correct user settings tab on clicking Settings", () => {
+        jest.spyOn(defaultDispatcher, "dispatch").mockImplementation(() => {});
+        const { getByText } = renderComponent();
+        fireEvent.click(getByText("Settings"));
+        expect(onFinished).toHaveBeenCalled();
+        expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({
+            action: Action.ViewUserSettings,
+            initialTabId: UserTab.Security,
+        });
+    });
+});

test/unit-tests/components/views/dialogs/__snapshots__/IntegrationsDisabledDialog-test.tsx.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<IntegrationsDisabledDialog /> should render as expected 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_IntegrationsDisabledDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+    tabindex="-1"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Integrations are disabled
+      </h1>
+    </div>
+    <div
+      class="mx_IntegrationsDisabledDialog_content"
+    >
+      <p>
+        Enable 'Manage integrations' in Settings to do this.
+      </p>
+    </div>
+    <div
+      class="mx_Dialog_buttons"
+    >
+      <span
+        class="mx_Dialog_buttons_row"
+      >
+        <button
+          data-testid="dialog-cancel-button"
+          type="button"
+        >
+          OK
+        </button>
+        <button
+          class="mx_Dialog_primary"
+          data-testid="dialog-primary-button"
+          type="button"
+        >
+          Settings
+        </button>
+      </span>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;