Apply suggestions from review

res/css/views/dialogs/_ExportDialog.scss

@@ -1,3 +1,19 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 .mx_ExportDialog {
     .mx_ExportDialog_subheading {
         font-size: $font-16px;
@@ -46,19 +62,14 @@
             margin-top: unset;
             margin-left: 18px;
         }
-        .mx_ExportDialog_spinner {
+
-            animation: mx_rotate 2s linear infinite;
+        .mx_Spinner {
-            z-index: 2;
+            width: unset;
-            position: relative;
+            height: unset;
+            flex: unset;
             margin-right: 10px;
-            width: 24px;
-            height: 24px;
-            & .mx_ExportDialog_spinner_path {
-                stroke: $accent-color;
-                stroke-linecap: round;
-                animation: mx_dash 1.5s ease-in-out infinite;
-            }
         }
+
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
@@ -78,24 +89,3 @@
         padding: 9px 10px;
     }
 }
-
-@keyframes mx_rotate {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes mx_dash {
-    0% {
-        stroke-dasharray: 1, 150;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -35;
-    }
-    100% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -124;
-    }
-}

src/components/views/avatars/MemberAvatar.tsx

@@ -18,7 +18,6 @@ limitations under the License.
 import React from 'react';
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { ResizeMethod } from 'matrix-js-sdk/src/@types/partials';
-import { omit } from "lodash";
 
 import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
@@ -91,11 +90,10 @@ export default class MemberAvatar extends React.Component<IProps, IState> {
     }
 
     render() {
-        let { member, fallbackUserId, onClick, viewUserOnClick, ...otherProps } = this.props;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        let { member, fallbackUserId, onClick, viewUserOnClick, forExport, ...otherProps } = this.props;
         const userId = member ? member.userId : fallbackUserId;
 
-        otherProps = omit(otherProps, "forExport");
-
         if (viewUserOnClick) {
             onClick = () => {
                 dis.dispatch({

src/components/views/dialogs/ExportDialog.tsx

@@ -1,3 +1,19 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import React, { useRef, useState } from "react";
 import { Room } from "matrix-js-sdk/src";
 import { _t } from "../../../languageHandler";
@@ -19,6 +35,7 @@ import JSONExporter from "../../../utils/exportUtils/JSONExport";
 import PlainTextExporter from "../../../utils/exportUtils/PlainTextExport";
 import { useStateCallback } from "../../../hooks/useStateCallback";
 import Exporter from "../../../utils/exportUtils/Exporter";
+import Spinner from "../elements/Spinner";
 
 interface IProps extends IDialogProps {
     room: Room;
@@ -352,16 +369,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                 </div>
                 { isExporting ? (
                     <div className="mx_ExportDialog_progress">
-                        <svg className="mx_ExportDialog_spinner" viewBox="0 0 50 50">
+                        <Spinner w={24} h={24} />
-                            <circle
-                                className="mx_ExportDialog_spinner_path"
-                                cx="25"
-                                cy="25"
-                                r="20"
-                                fill="none"
-                                stroke-width="5"
-                            />
-                        </svg>
                         <p ref={exportProgressRef}>
                             { _t("Processing...") }
                         </p>

src/components/views/elements/EventListSummary.tsx

@@ -76,8 +76,8 @@ const EventListSummary: React.FC<IProps> = ({
             { children }
         </React.Fragment>;
     } else {
-        const avatars = summaryMembers.map((m, idx) =>
+        const avatars = summaryMembers.map((m) => <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
-            <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
+
         body = (
             <div className="mx_EventTile_line">
                 <div className="mx_EventTile_info">

src/components/views/elements/ReplyThread.tsx

@@ -354,8 +354,14 @@ export default class ReplyThread extends React.Component<IProps, IState> {
             </blockquote>;
         } else if (this.props.forExport) {
             const eventId = ReplyThread.getParentEventId(this.props.parentEv);
-            header = <p style={{ marginTop: -5, marginBottom: 5 }}>
+            header = <p className="mx_ReplyThread_Export">
-                In reply to <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}>this message</a>
+                { _t("In reply to <messageLink/>",
+                    {},
+                    { messageLink: () => (
+                        <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}> { _t("this message") } </a>
+                    ),
+                    })
+                }
             </p>;
         } else if (this.state.loading) {
             header = <Spinner w={16} h={16} />;

src/components/views/messages/RedactedBody.tsx

@@ -39,7 +39,7 @@ const RedactedBody = React.forwardRef<any, IBodyProps>(({ mxEvent, forExport },
 
     return (
         <span className="mx_RedactedBody" ref={ref} title={titleText}>
-            { forExport ? <img alt="Redacted" className="mx_export_trash_icon" src="icons/trash.svg" /> : null }
+            { forExport ? <img alt={_t("Redacted")} className="mx_export_trash_icon" src="icons/trash.svg" /> : null }
             { text }
         </span>
     );

src/i18n/strings/en_EN.json

@@ -1951,6 +1951,7 @@
     "<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
     "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
     "Message deleted on %(date)s": "Message deleted on %(date)s",
+    "Redacted": "Redacted",
     "%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s",
     "%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.",
     "%(senderDisplayName)s changed the room avatar to <img/>": "%(senderDisplayName)s changed the room avatar to <img/>",
@@ -2098,6 +2099,8 @@
     "QR Code": "QR Code",
     "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.",
     "<a>In reply to</a> <pill>": "<a>In reply to</a> <pill>",
+    "In reply to <messageLink/>": "In reply to <messageLink/>",
+    "this message": "this message",
     "Room address": "Room address",
     "e.g. my-room": "e.g. my-room",
     "Some characters not allowed": "Some characters not allowed",

src/utils/exportUtils/Exporter.ts

@@ -1,7 +1,23 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
-import { exportOptions, exportTypes } from "./exportUtils";
+import { IExportOptions, exportTypes } from "./exportUtils";
 import { decryptFile } from "../DecryptFile";
 import { mediaFromContent } from "../../customisations/Media";
 import { formatFullDateNoDay } from "../../DateUtils";
@@ -23,7 +39,7 @@ export default abstract class Exporter {
     protected constructor(
         protected room: Room,
         protected exportType: exportTypes,
-        protected exportOptions: exportOptions,
+        protected exportOptions: IExportOptions,
         protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
     ) {
         this.cancelled = false;
@@ -53,6 +69,8 @@ export default abstract class Exporter {
     protected async downloadZIP(): Promise<any> {
         const filename = `matrix-export-${formatFullDateNoDay(new Date())}.zip`;
 
+        console.log(this.files, this.files.length);
+
         const zip = new JSZip();
         // Create a writable stream to the directory
         if (!this.cancelled) this.updateProgress("Generating a ZIP");
@@ -62,7 +80,7 @@ export default abstract class Exporter {
 
         const content = await zip.generateAsync({ type: "blob" });
 
-        await saveAs(content, filename);
+        saveAs(content, filename);
     }
 
     protected cleanUp(): string {

src/utils/exportUtils/HtmlExport.tsx

@@ -1,3 +1,19 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import React, { MutableRefObject } from "react";
 import Exporter from "./Exporter";
 import { mediaFromMxc } from "../../customisations/Media";
@@ -18,7 +34,7 @@ import exportCSS from "./exportCSS";
 import exportJS from "./exportJS";
 import exportIcons from "./exportIcons";
 import { exportTypes } from "./exportUtils";
-import { exportOptions } from "./exportUtils";
+import { IExportOptions } from "./exportUtils";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 
 export default class HTMLExporter extends Exporter {
@@ -30,7 +46,7 @@ export default class HTMLExporter extends Exporter {
     constructor(
         room: Room,
         exportType: exportTypes,
-        exportOptions: exportOptions,
+        exportOptions: IExportOptions,
         exportProgressRef: MutableRefObject<HTMLParagraphElement>,
     ) {
         super(room, exportType, exportOptions, exportProgressRef);

src/utils/exportUtils/JSONExport.ts

@@ -1,10 +1,26 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import Exporter from "./Exporter";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { formatFullDateNoDay, formatFullDateNoDayNoTime } from "../../DateUtils";
 import { haveTileForEvent } from "../../components/views/rooms/EventTile";
 import { exportTypes } from "./exportUtils";
-import { exportOptions } from "./exportUtils";
+import { IExportOptions } from "./exportUtils";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { MutableRefObject } from "react";
 
@@ -15,7 +31,7 @@ export default class JSONExporter extends Exporter {
     constructor(
         room: Room,
         exportType: exportTypes,
-        exportOptions: exportOptions,
+        exportOptions: IExportOptions,
         exportProgressRef: MutableRefObject<HTMLParagraphElement>,
     ) {
         super(room, exportType, exportOptions, exportProgressRef);

src/utils/exportUtils/PlainTextExport.ts

@@ -1,3 +1,19 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import Exporter from "./Exporter";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
@@ -5,7 +21,7 @@ import { formatFullDateNoDay } from "../../DateUtils";
 import { _t } from "../../languageHandler";
 import { haveTileForEvent } from "../../components/views/rooms/EventTile";
 import { exportTypes } from "./exportUtils";
-import { exportOptions } from "./exportUtils";
+import { IExportOptions } from "./exportUtils";
 import { textForEvent } from "../../TextForEvent";
 import { MutableRefObject } from "react";
 
@@ -16,7 +32,7 @@ export default class PlainTextExporter extends Exporter {
     constructor(
         room: Room,
         exportType: exportTypes,
-        exportOptions: exportOptions,
+        exportOptions: IExportOptions,
         exportProgressRef: MutableRefObject<HTMLParagraphElement>,
     ) {
         super(room, exportType, exportOptions, exportProgressRef);

src/utils/exportUtils/exportCSS.ts

@@ -1,3 +1,19 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 /* eslint-disable max-len */
 const lightCSS = `@charset "utf-8";
 .hljs-addition {
@@ -25405,6 +25421,11 @@ a.mx_reply_anchor:hover{
   }
 }
 
+.mx_ReplyThread_Export {
+  margin-top: -5px;
+  margin-bottom: 5px;
+}
+
 .mx_RedactedBody img.mx_export_trash_icon {
   height: 14px;
   width: 14px;

src/utils/exportUtils/exportUtils.ts

@@ -1,3 +1,19 @@
+/*
+Copyright 2018-2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import { _t } from "../../languageHandler";
 
 export enum exportFormats {
@@ -37,7 +53,7 @@ export const textForType = (type: string): string => {
     }
 };
 
-export interface exportOptions {
+export interface IExportOptions {
     startDate?: number;
     numberOfMessages?: number;
     attachmentsIncluded: boolean;