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 }

src/i18n/strings/en_EN.json

@@ -1593,7 +1593,6 @@
     "Search": "Search",
     "Voice call": "Voice call",
     "Video call": "Video call",
-    "Export conversation": "Export conversation",
     "Start a Conversation": "Start a Conversation",
     "Open dial pad": "Open dial pad",
     "Invites": "Invites",
@@ -2250,6 +2249,8 @@
     "There was an error updating your community. The server is unable to process your request.": "There was an error updating your community. The server is unable to process your request.",
     "Update community": "Update community",
     "An error has occurred.": "An error has occurred.",
+    "Export Chat": "Export Chat",
+    "Export": "Export",
     "Feedback sent": "Feedback sent",
     "Rate %(brand)s": "Rate %(brand)s",
     "Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",
@@ -2978,7 +2979,6 @@
     "The exported file will allow anyone who can read it to decrypt any encrypted messages that you can see, so you should be careful to keep it secure. To help with this, you should enter a passphrase below, which will be used to encrypt the exported data. It will only be possible to import the data by using the same passphrase.": "The exported file will allow anyone who can read it to decrypt any encrypted messages that you can see, so you should be careful to keep it secure. To help with this, you should enter a passphrase below, which will be used to encrypt the exported data. It will only be possible to import the data by using the same passphrase.",
     "Enter passphrase": "Enter passphrase",
     "Confirm passphrase": "Confirm passphrase",
-    "Export": "Export",
     "Import room keys": "Import room keys",
     "This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.": "This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.",
     "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.": "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.",