Create export dialog and async import export utils

src/components/views/dialogs/ExportDialog.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Room } from 'matrix-js-sdk/src';
+import { _t } from '../../../languageHandler';
+import { IDialogProps } from './IDialogProps';
+import BaseDialog from "./BaseDialog"
+import DialogButtons from "../elements/DialogButtons";
+
+interface IProps extends IDialogProps{
+    room: Room;
+}
+
+export default class ExportDialog extends React.PureComponent<IProps> {
+    onExportClick = async () => {
+        const {
+            default: exportConversationalHistory,
+            exportFormats,
+            exportTypes,
+        } = await import("../../../utils/exportUtils/exportUtils");
+
+        await exportConversationalHistory(
+            this.props.room,
+            exportFormats.PLAIN_TEXT,
+            exportTypes.START_DATE,
+            {
+                startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
+                attachmentsIncluded: true,
+                maxSize: 7 * 1024 * 1024, // 7 MB
+            },
+        );
+    };
+
+    onCancel = () => {
+        this.props.onFinished(false);
+    };
+
+    render() {
+        return (
+            <BaseDialog
+                title={_t("Export Chat")}
+                contentId='mx_Dialog_content'
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                fixedWidth={false}
+            >
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
+                    Export
+                </div>
+                <DialogButtons
+                    primaryButton={_t('Export')}
+                    onPrimaryButtonClick={this.onExportClick}
+                    onCancel={this.onCancel}
+                />
+            </BaseDialog>
+        );
+    }
+}

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -47,6 +47,7 @@ import {useRoomMemberCount} from "../../../hooks/useRoomMembers";
 import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import RoomName from "../elements/RoomName";
 import UIStore from "../../../stores/UIStore";
+import ExportDialog from "../dialogs/ExportDialog";
 
 interface IProps {
     room: Room;
@@ -233,6 +234,12 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
         });
     };
 
+    const onRoomExportClick = () => {
+        Modal.createTrackedDialog('export room dialog', '', ExportDialog, {
+            room,
+        });
+    };
+
     const isRoomEncrypted = useIsEncrypted(cli, room);
     const roomContext = useContext(RoomContext);
     const e2eStatus = roomContext.e2eStatus;
@@ -279,7 +286,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
             <Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>
                 {_t("Room settings")}
             </Button>
-            <Button className="mx_RoomSummaryCard_icon_export" onClick = {() => {}}>
+            <Button className="mx_RoomSummaryCard_icon_export" onClick = {onRoomExportClick}>
                 {_t("Export chat")}
             </Button>
         </Group>

src/components/views/rooms/RoomHeader.js

@@ -31,7 +31,6 @@ import RoomTopic from "../elements/RoomTopic";
 import RoomName from "../elements/RoomName";
 import { PlaceCallType } from "../../../CallHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import exportConversationalHistory, { exportTypes, exportFormats } from '../../../utils/exportUtils/exportUtils';
 
 
 @replaceableComponent("views.rooms.RoomHeader")
@@ -80,20 +79,6 @@ export default class RoomHeader extends React.Component {
         this.forceUpdate();
     }, 500);
 
-
-    _exportConversationalHistory = async () => {
-        await exportConversationalHistory(
-            this.props.room,
-            exportFormats.PLAIN_TEXT,
-            exportTypes.START_DATE,
-            {
-                startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
-                attachmentsIncluded: true,
-                maxSize: 7 * 1024 * 1024, // 7 MB
-            },
-        );
-    }
-
     render() {
         let searchStatus = null;
 
@@ -197,14 +182,8 @@ export default class RoomHeader extends React.Component {
                     title={_t("Video call")} />;
         }
 
-        const exportButton = <AccessibleTooltipButton
-            className="mx_RoomHeader_button mx_ImageView_button_download"
-            onClick={this._exportConversationalHistory}
-            title={_t("Export conversation")} />;
-
         const rightRow =
             <div className="mx_RoomHeader_buttons">
-                { exportButton }
                 { videoCallButton }
                 { voiceCallButton }
                 { forgetButton }