diff --git a/src/components/views/dialogs/TabbedIntegrationManagerDialog.js b/src/components/views/dialogs/TabbedIntegrationManagerDialog.tsx similarity index 76% rename from src/components/views/dialogs/TabbedIntegrationManagerDialog.js rename to src/components/views/dialogs/TabbedIntegrationManagerDialog.tsx index 8723d4a453..c8ab25b1bb 100644 --- a/src/components/views/dialogs/TabbedIntegrationManagerDialog.js +++ b/src/components/views/dialogs/TabbedIntegrationManagerDialog.tsx @@ -15,42 +15,53 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import { IntegrationManagers } from "../../../integrations/IntegrationManagers"; import { Room } from "matrix-js-sdk/src/models/room"; -import * as sdk from '../../../index'; import { dialogTermsInteractionCallback, TermsNotSignedError } from "../../../Terms"; import classNames from 'classnames'; import * as ScalarMessaging from "../../../ScalarMessaging"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { IntegrationManagerInstance } from "../../../integrations/IntegrationManagerInstance"; +import ScalarAuthClient from "../../../ScalarAuthClient"; +import AccessibleButton from "../elements/AccessibleButton"; +import IntegrationManager from "../settings/IntegrationManager"; + +interface IProps { + /** + * Called with: + * * success {bool} True if the user accepted any douments, false if cancelled + * * agreedUrls {string[]} List of agreed URLs + */ + onFinished: () => void; + + /** + * Optional room where the integration manager should be open to + */ + room: Room; + + /** + * Optional screen to open on the integration manager + */ + screen?: string; + + /** + * Optional integration ID to open in the integration manager + */ + integrationId?: string; +} + +interface IState { + managers: IntegrationManagerInstance[]; + busy: boolean; + currentIndex: number; + currentConnected: boolean; + currentLoading: boolean; + currentScalarClient: ScalarAuthClient; +} @replaceableComponent("views.dialogs.TabbedIntegrationManagerDialog") -export default class TabbedIntegrationManagerDialog extends React.Component { - static propTypes = { - /** - * Called with: - * * success {bool} True if the user accepted any douments, false if cancelled - * * agreedUrls {string[]} List of agreed URLs - */ - onFinished: PropTypes.func.isRequired, - - /** - * Optional room where the integration manager should be open to - */ - room: PropTypes.instanceOf(Room), - - /** - * Optional screen to open on the integration manager - */ - screen: PropTypes.string, - - /** - * Optional integration ID to open in the integration manager - */ - integrationId: PropTypes.string, - }; - - constructor(props) { +export default class TabbedIntegrationManagerDialog extends React.Component { + constructor(props: IProps) { super(props); this.state = { @@ -63,11 +74,11 @@ export default class TabbedIntegrationManagerDialog extends React.Component { }; } - componentDidMount() { + public componentDidMount(): void { this.openManager(0, true); } - openManager = async (i, force = false) => { + private openManager = async (i: number, force = false): Promise => { if (i === this.state.currentIndex && !force) return; const manager = this.state.managers[i]; @@ -120,8 +131,7 @@ export default class TabbedIntegrationManagerDialog extends React.Component { } }; - _renderTabs() { - const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton"); + private renderTabs(): JSX.Element[] { return this.state.managers.map((m, i) => { const classes = classNames({ 'mx_TabbedIntegrationManagerDialog_tab': true, @@ -140,8 +150,7 @@ export default class TabbedIntegrationManagerDialog extends React.Component { }); } - _renderTab() { - const IntegrationManager = sdk.getComponent("views.settings.IntegrationManager"); + public renderTab(): JSX.Element { let uiUrl = null; if (this.state.currentScalarClient) { uiUrl = this.state.currentScalarClient.getScalarInterfaceUrlForRoom( @@ -151,7 +160,6 @@ export default class TabbedIntegrationManagerDialog extends React.Component { ); } return ; } - render() { + public render(): JSX.Element { return (
- { this._renderTabs() } + { this.renderTabs() }
- { this._renderTab() } + { this.renderTab() }
);