From 3eca71bc8498e580741d6096145ea18902e6bd2f Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Thu, 27 Jan 2022 09:55:08 +0100
Subject: [PATCH] Unit test ExportDialog (#7619)

* add test ids to dialog buttons

Signed-off-by: Kerry Archibald <kerrya@element.io>

* unit test ExportDialog

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove extra snapshot

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix bad snapshots

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove wrappers from snapshot

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 src/components/views/dialogs/ExportDialog.tsx |    8 +-
 .../views/elements/DialogButtons.tsx          |    2 +
 .../views/elements/StyledCheckbox.tsx         |    3 +-
 .../views/dialogs/ExportDialog-test.tsx       |  253 ++
 .../__snapshots__/ExportDialog-test.tsx.snap  | 2912 +++++++++++++++++
 5 files changed, 3175 insertions(+), 3 deletions(-)
 create mode 100644 test/components/views/dialogs/ExportDialog-test.tsx
 create mode 100644 test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap

diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 4bbd68071a..cfbd6af1bf 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -138,7 +138,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                 },
                 invalid: () => {
                     const min = 1;
-                    const max = 10 ** 8;
+                    const max = 2000;
                     return _t("Enter a number between %(min)s and %(max)s", {
                         min,
                         max,
@@ -239,6 +239,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
     if (exportType === ExportType.LastNMessages) {
         messageCount = (
             <Field
+                id="message-count"
                 element="input"
                 type="number"
                 value={numberOfMessages.toString()}
@@ -335,6 +336,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                     </span>
 
                     <Field
+                        id="export-type"
                         element="select"
                         value={exportType}
                         onChange={(e) => {
@@ -350,6 +352,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                     </span>
 
                     <Field
+                        id="size-limit"
                         type="number"
                         autoComplete="off"
                         onValidate={onValidateSize}
@@ -361,6 +364,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                     />
 
                     <StyledCheckbox
+                        id="include-attachments"
                         checked={includeAttachments}
                         onChange={(e) =>
                             setAttachments(
@@ -372,7 +376,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                     </StyledCheckbox>
                 </div>
                 { isExporting ? (
-                    <div className="mx_ExportDialog_progress">
+                    <div data-test-id='export-progress' className="mx_ExportDialog_progress">
                         <Spinner w={24} h={24} />
                         <p>
                             { exportProgressText }
diff --git a/src/components/views/elements/DialogButtons.tsx b/src/components/views/elements/DialogButtons.tsx
index 210e768aa7..480e364630 100644
--- a/src/components/views/elements/DialogButtons.tsx
+++ b/src/components/views/elements/DialogButtons.tsx
@@ -83,6 +83,7 @@ export default class DialogButtons extends React.Component<IProps> {
             cancelButton = <button
                 // important: the default type is 'submit' and this button comes before the
                 // primary in the DOM so will get form submissions unless we make it not a submit.
+                data-test-id="dialog-cancel-button"
                 type="button"
                 onClick={this.onCancelClick}
                 className={this.props.cancelButtonClass}
@@ -103,6 +104,7 @@ export default class DialogButtons extends React.Component<IProps> {
                 { cancelButton }
                 { this.props.children }
                 <button type={this.props.primaryIsSubmit ? 'submit' : 'button'}
+                    data-test-id="dialog-primary-button"
                     className={primaryButtonClassName}
                     onClick={this.props.onPrimaryButtonClick}
                     autoFocus={this.props.focus}
diff --git a/src/components/views/elements/StyledCheckbox.tsx b/src/components/views/elements/StyledCheckbox.tsx
index 814ed6b38f..6fe59562bb 100644
--- a/src/components/views/elements/StyledCheckbox.tsx
+++ b/src/components/views/elements/StyledCheckbox.tsx
@@ -28,6 +28,7 @@ export enum CheckboxStyle {
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
     inputRef?: React.RefObject<HTMLInputElement>;
     kind?: CheckboxStyle;
+    id?: string;
 }
 
 interface IState {
@@ -44,7 +45,7 @@ export default class StyledCheckbox extends React.PureComponent<IProps, IState>
     constructor(props: IProps) {
         super(props);
         // 56^10 so unlikely chance of collision.
-        this.id = "checkbox_" + randomString(10);
+        this.id = this.props.id || "checkbox_" + randomString(10);
     }
 
     public render() {
diff --git a/test/components/views/dialogs/ExportDialog-test.tsx b/test/components/views/dialogs/ExportDialog-test.tsx
new file mode 100644
index 0000000000..8d6d36ad08
--- /dev/null
+++ b/test/components/views/dialogs/ExportDialog-test.tsx
@@ -0,0 +1,253 @@
+/*
+Copyright 2022 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 from 'react';
+import { mount } from 'enzyme';
+import '../../../skinned-sdk';
+import { act } from "react-dom/test-utils";
+import { Room } from 'matrix-js-sdk';
+
+import ExportDialog from '../../../../src/components/views/dialogs/ExportDialog';
+import { ExportType, ExportFormat } from '../../../../src/utils/exportUtils/exportUtils';
+import { createTestClient, mkStubRoom } from '../../../test-utils';
+import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
+import HTMLExporter from "../../../../src/utils/exportUtils/HtmlExport";
+
+jest.useFakeTimers();
+
+const mockHtmlExporter = ({
+    export: jest.fn().mockResolvedValue({}),
+});
+jest.mock("../../../../src/utils/exportUtils/HtmlExport", () => jest.fn());
+
+describe('<ExportDialog />', () => {
+    const mockClient = createTestClient();
+    jest.spyOn(MatrixClientPeg, 'get').mockReturnValue(mockClient);
+
+    const roomId = 'test:test.org';
+    const defaultProps = {
+        room: mkStubRoom(roomId, 'test', mockClient) as unknown as Room,
+        onFinished: jest.fn(),
+    };
+
+    const getComponent = (props = {}) => mount(<ExportDialog {...defaultProps} {...props} />);
+
+    const getSizeInput = (component) => component.find('input[id="size-limit"]');
+    const getExportTypeInput = (component) => component.find('select[id="export-type"]');
+    const getAttachmentsCheckbox = (component) => component.find('input[id="include-attachments"]');
+    const getMessageCountInput = (component) => component.find('input[id="message-count"]');
+    const getExportFormatInput = (component, format) => component.find(`input[id="exportFormat-${format}"]`);
+    const getPrimaryButton = (component) => component.find('[data-test-id="dialog-primary-button"]');
+    const getSecondaryButton = (component) => component.find('[data-test-id="dialog-cancel-button"]');
+
+    const submitForm = async (component) => act(async () => {
+        getPrimaryButton(component).simulate('click');
+        component.setProps({});
+    });
+    const selectExportFormat = async (component, format: ExportFormat) => act(async () => {
+        getExportFormatInput(component, format).simulate('change');
+        component.setProps({});
+    });
+    const selectExportType = async (component, type: ExportType) => act(async () => {
+        getExportTypeInput(component).simulate('change', { target: { value: type } });
+        component.setProps({});
+    });
+    const setMessageCount = async (component, count: number) => act(async () => {
+        getMessageCountInput(component).simulate('change', { target: { value: count } });
+        component.setProps({});
+    });
+
+    const setSizeLimit = async (component, limit: number) => act(async () => {
+        getSizeInput(component).simulate('change', { target: { value: limit } });
+        component.setProps({});
+    });
+
+    const setIncludeAttachments = async (component, checked) => act(async () => {
+        getAttachmentsCheckbox(component).simulate('change', { target: { checked } });
+        component.setProps({});
+    });
+
+    beforeEach(() => {
+        (HTMLExporter as jest.Mock).mockImplementation(jest.fn().mockReturnValue(mockHtmlExporter));
+        mockHtmlExporter.export.mockClear();
+    });
+
+    it('renders export dialog', () => {
+        const component = getComponent();
+        expect(component.find('.mx_ExportDialog')).toMatchSnapshot();
+    });
+
+    it('calls onFinished when cancel button is clicked', () => {
+        const onFinished = jest.fn();
+        const component = getComponent({ onFinished });
+        act(() => {
+            getSecondaryButton(component).simulate('click');
+        });
+        expect(onFinished).toHaveBeenCalledWith(false);
+    });
+
+    it('exports room on submit', async () => {
+        const component = getComponent();
+        await submitForm(component);
+
+        // 4th arg is an component function
+        const exportConstructorProps = (HTMLExporter as jest.Mock).mock.calls[0].slice(0, 3);
+        expect(exportConstructorProps).toEqual([
+            defaultProps.room,
+            ExportType.Timeline,
+            {
+                attachmentsIncluded: false,
+                maxSize: 8388608, // 8MB to bytes
+                numberOfMessages: 100,
+            },
+        ]);
+        expect(mockHtmlExporter.export).toHaveBeenCalled();
+    });
+
+    it('renders success screen when export is finished', async () => {
+        const component = getComponent();
+        await submitForm(component);
+        component.setProps({});
+
+        jest.runAllTimers();
+
+        expect(component.find('.mx_InfoDialog .mx_Dialog_content')).toMatchSnapshot();
+    });
+
+    describe('export format', () => {
+        it('renders export format with html selected by default', () => {
+            const component = getComponent();
+            expect(getExportFormatInput(component, ExportFormat.Html).props().checked).toBeTruthy();
+        });
+
+        it('sets export format on radio button click', async () => {
+            const component = getComponent();
+            await selectExportFormat(component, ExportFormat.PlainText);
+            expect(getExportFormatInput(component, ExportFormat.PlainText).props().checked).toBeTruthy();
+            expect(getExportFormatInput(component, ExportFormat.Html).props().checked).toBeFalsy();
+        });
+    });
+
+    describe('export type', () => {
+        it('renders export type with timeline selected by default', () => {
+            const component = getComponent();
+            expect(getExportTypeInput(component).props().value).toEqual(ExportType.Timeline);
+        });
+
+        it('sets export type on change', async () => {
+            const component = getComponent();
+            await selectExportType(component, ExportType.Beginning);
+            expect(getExportTypeInput(component).props().value).toEqual(ExportType.Beginning);
+        });
+
+        it('does not render message count input', async () => {
+            const component = getComponent();
+            expect(getMessageCountInput(component).length).toBeFalsy();
+        });
+
+        it('renders message count input with default value 100 when export type is lastNMessages', async () => {
+            const component = getComponent();
+            await selectExportType(component, ExportType.LastNMessages);
+            expect(getMessageCountInput(component).props().value).toEqual("100");
+        });
+
+        it('sets message count on change', async () => {
+            const component = getComponent();
+            await selectExportType(component, ExportType.LastNMessages);
+            await setMessageCount(component, 10);
+            expect(getMessageCountInput(component).props().value).toEqual("10");
+        });
+
+        it('does not export when export type is lastNMessages and message count is falsy', async () => {
+            const component = getComponent();
+            await selectExportType(component, ExportType.LastNMessages);
+            await setMessageCount(component, 0);
+            await submitForm(component);
+
+            expect(mockHtmlExporter.export).not.toHaveBeenCalled();
+        });
+
+        it('does not export when export type is lastNMessages and message count is more than max', async () => {
+            const component = getComponent();
+            await selectExportType(component, ExportType.LastNMessages);
+            await setMessageCount(component, 99999999999);
+            await submitForm(component);
+
+            expect(mockHtmlExporter.export).not.toHaveBeenCalled();
+        });
+
+        it('exports when export type is NOT lastNMessages and message count is falsy', async () => {
+            const component = getComponent();
+            await selectExportType(component, ExportType.LastNMessages);
+            await setMessageCount(component, 0);
+            await selectExportType(component, ExportType.Timeline);
+            await submitForm(component);
+
+            expect(mockHtmlExporter.export).toHaveBeenCalled();
+        });
+    });
+
+    describe('size limit', () => {
+        it('renders size limit input with default value', () => {
+            const component = getComponent();
+            expect(getSizeInput(component).props().value).toEqual("8");
+        });
+
+        it('updates size limit on change', async () => {
+            const component = getComponent();
+            await setSizeLimit(component, 20);
+            expect(getSizeInput(component).props().value).toEqual("20");
+        });
+
+        it('does not export when size limit is falsy', async () => {
+            const component = getComponent();
+            await setSizeLimit(component, 0);
+            await submitForm(component);
+
+            expect(mockHtmlExporter.export).not.toHaveBeenCalled();
+        });
+
+        it('does not export when size limit is larger than max', async () => {
+            const component = getComponent();
+            await setSizeLimit(component, 2001);
+            await submitForm(component);
+
+            expect(mockHtmlExporter.export).not.toHaveBeenCalled();
+        });
+
+        it('exports when size limit is max', async () => {
+            const component = getComponent();
+            await setSizeLimit(component, 2000);
+            await submitForm(component);
+
+            expect(mockHtmlExporter.export).toHaveBeenCalled();
+        });
+    });
+
+    describe('include attachements', () => {
+        it('renders input with default value of false', () => {
+            const component = getComponent();
+            expect(getAttachmentsCheckbox(component).props().checked).toEqual(false);
+        });
+
+        it('updates include attachments on change', async () => {
+            const component = getComponent();
+            await setIncludeAttachments(component, true);
+            expect(getAttachmentsCheckbox(component).props().checked).toEqual(true);
+        });
+    });
+});
+
diff --git a/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
new file mode 100644
index 0000000000..68081248d7
--- /dev/null
+++ b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
@@ -0,0 +1,2912 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ExportDialog /> renders export dialog 1`] = `
+Array [
+  <BaseDialog
+    className="mx_ExportDialog false"
+    contentId="mx_Dialog_content"
+    fixedWidth={true}
+    hasCancel={true}
+    onFinished={[MockFunction]}
+    title="Export Chat"
+  >
+    <ForwardRef(FocusLockUICombination)
+      className="mx_ExportDialog false mx_Dialog_fixedWidth"
+      lockProps={
+        Object {
+          "aria-describedby": "mx_Dialog_content",
+          "aria-labelledby": "mx_BaseDialog_title",
+          "onKeyDown": [Function],
+          "role": "dialog",
+        }
+      }
+      returnFocus={true}
+    >
+      <ForwardRef(FocusLockUI)
+        as="div"
+        autoFocus={true}
+        className="mx_ExportDialog false mx_Dialog_fixedWidth"
+        crossFrame={true}
+        disabled={false}
+        lockProps={
+          Object {
+            "aria-describedby": "mx_Dialog_content",
+            "aria-labelledby": "mx_BaseDialog_title",
+            "onKeyDown": [Function],
+            "role": "dialog",
+          }
+        }
+        noFocusGuards={false}
+        persistentFocus={false}
+        returnFocus={true}
+        sideCar={[Function]}
+      >
+        <div
+          data-focus-guard={true}
+          key="guard-first"
+          style={
+            Object {
+              "height": "0px",
+              "left": "1px",
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "fixed",
+              "top": "1px",
+              "width": "1px",
+            }
+          }
+          tabIndex={0}
+        />
+        <div
+          data-focus-guard={true}
+          key="guard-nearest"
+          style={
+            Object {
+              "height": "0px",
+              "left": "1px",
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "fixed",
+              "top": "1px",
+              "width": "1px",
+            }
+          }
+          tabIndex={1}
+        />
+        <SideEffect(FocusWatcher)
+          autoFocus={true}
+          crossFrame={true}
+          disabled={false}
+          id={Object {}}
+          observed={
+            <div
+              aria-describedby="mx_Dialog_content"
+              aria-labelledby="mx_BaseDialog_title"
+              class="mx_ExportDialog false mx_Dialog_fixedWidth"
+              data-focus-lock-disabled="false"
+              role="dialog"
+            >
+              <div
+                class="mx_Dialog_header mx_Dialog_headerWithCancel"
+              >
+                <h2
+                  class="mx_Heading_h2 mx_Dialog_title"
+                  id="mx_BaseDialog_title"
+                >
+                  Export Chat
+                </h2>
+                <div
+                  aria-label="Close dialog"
+                  class="mx_AccessibleButton mx_Dialog_cancelButton"
+                  role="button"
+                  tabindex="0"
+                />
+              </div>
+              <p>
+                Select from the options below to export chats from your timeline
+              </p>
+              <span
+                class="mx_ExportDialog_subheading"
+              >
+                Format
+              </span>
+              <div
+                class="mx_ExportDialog_options"
+              >
+                <label
+                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+                >
+                  <input
+                    checked=""
+                    id="exportFormat-Html"
+                    name="exportFormat"
+                    type="radio"
+                    value="Html"
+                  />
+                  <div>
+                    <div />
+                  </div>
+                  <div
+                    class="mx_StyledRadioButton_content"
+                  >
+                    HTML
+                  </div>
+                  <div
+                    class="mx_StyledRadioButton_spacer"
+                  />
+                </label>
+                <label
+                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                >
+                  <input
+                    id="exportFormat-PlainText"
+                    name="exportFormat"
+                    type="radio"
+                    value="PlainText"
+                  />
+                  <div>
+                    <div />
+                  </div>
+                  <div
+                    class="mx_StyledRadioButton_content"
+                  >
+                    Plain Text
+                  </div>
+                  <div
+                    class="mx_StyledRadioButton_spacer"
+                  />
+                </label>
+                <label
+                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                >
+                  <input
+                    id="exportFormat-Json"
+                    name="exportFormat"
+                    type="radio"
+                    value="Json"
+                  />
+                  <div>
+                    <div />
+                  </div>
+                  <div
+                    class="mx_StyledRadioButton_content"
+                  >
+                    JSON
+                  </div>
+                  <div
+                    class="mx_StyledRadioButton_spacer"
+                  />
+                </label>
+                <span
+                  class="mx_ExportDialog_subheading"
+                >
+                  Messages
+                </span>
+                <div
+                  class="mx_Field mx_Field_select"
+                >
+                  <select
+                    id="export-type"
+                    type="text"
+                  >
+                    <option
+                      value="Timeline"
+                    >
+                      Current Timeline
+                    </option>
+                    <option
+                      value="Beginning"
+                    >
+                      From the beginning
+                    </option>
+                    <option
+                      value="LastNMessages"
+                    >
+                      Specify a number of messages
+                    </option>
+                  </select>
+                  <label
+                    for="export-type"
+                  />
+                </div>
+                <span
+                  class="mx_ExportDialog_subheading"
+                >
+                  Size Limit
+                </span>
+                <div
+                  class="mx_Field mx_Field_input"
+                >
+                  <input
+                    autocomplete="off"
+                    id="size-limit"
+                    type="number"
+                    value="8"
+                  />
+                  <label
+                    for="size-limit"
+                  />
+                  <span
+                    class="mx_Field_postfix"
+                  >
+                    <span>
+                      MB
+                    </span>
+                  </span>
+                </div>
+                <span
+                  class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+                >
+                  <input
+                    id="include-attachments"
+                    type="checkbox"
+                  />
+                  <label
+                    for="include-attachments"
+                  >
+                    <div
+                      class="mx_Checkbox_background"
+                    >
+                      <div
+                        class="mx_Checkbox_checkmark"
+                      />
+                    </div>
+                    <div>
+                      Include Attachments
+                    </div>
+                  </label>
+                </span>
+              </div>
+              <div
+                class="mx_Dialog_buttons"
+              >
+                <button
+                  data-test-id="dialog-cancel-button"
+                  type="button"
+                >
+                  Cancel
+                </button>
+                <button
+                  class="mx_Dialog_primary"
+                  data-test-id="dialog-primary-button"
+                  type="button"
+                >
+                  Export
+                </button>
+              </div>
+            </div>
+          }
+          onActivation={[Function]}
+          onDeactivation={[Function]}
+          persistentFocus={false}
+          returnFocus={[Function]}
+          shards={Array []}
+          sideCar={
+            Object {
+              "assignMedium": [Function],
+              "assignSyncMedium": [Function],
+              "options": Object {
+                "async": true,
+                "ssr": false,
+              },
+              "read": [Function],
+              "useMedium": [Function],
+            }
+          }
+        >
+          <FocusWatcher
+            autoFocus={true}
+            crossFrame={true}
+            disabled={false}
+            id={Object {}}
+            observed={
+              <div
+                aria-describedby="mx_Dialog_content"
+                aria-labelledby="mx_BaseDialog_title"
+                class="mx_ExportDialog false mx_Dialog_fixedWidth"
+                data-focus-lock-disabled="false"
+                role="dialog"
+              >
+                <div
+                  class="mx_Dialog_header mx_Dialog_headerWithCancel"
+                >
+                  <h2
+                    class="mx_Heading_h2 mx_Dialog_title"
+                    id="mx_BaseDialog_title"
+                  >
+                    Export Chat
+                  </h2>
+                  <div
+                    aria-label="Close dialog"
+                    class="mx_AccessibleButton mx_Dialog_cancelButton"
+                    role="button"
+                    tabindex="0"
+                  />
+                </div>
+                <p>
+                  Select from the options below to export chats from your timeline
+                </p>
+                <span
+                  class="mx_ExportDialog_subheading"
+                >
+                  Format
+                </span>
+                <div
+                  class="mx_ExportDialog_options"
+                >
+                  <label
+                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+                  >
+                    <input
+                      checked=""
+                      id="exportFormat-Html"
+                      name="exportFormat"
+                      type="radio"
+                      value="Html"
+                    />
+                    <div>
+                      <div />
+                    </div>
+                    <div
+                      class="mx_StyledRadioButton_content"
+                    >
+                      HTML
+                    </div>
+                    <div
+                      class="mx_StyledRadioButton_spacer"
+                    />
+                  </label>
+                  <label
+                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                  >
+                    <input
+                      id="exportFormat-PlainText"
+                      name="exportFormat"
+                      type="radio"
+                      value="PlainText"
+                    />
+                    <div>
+                      <div />
+                    </div>
+                    <div
+                      class="mx_StyledRadioButton_content"
+                    >
+                      Plain Text
+                    </div>
+                    <div
+                      class="mx_StyledRadioButton_spacer"
+                    />
+                  </label>
+                  <label
+                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                  >
+                    <input
+                      id="exportFormat-Json"
+                      name="exportFormat"
+                      type="radio"
+                      value="Json"
+                    />
+                    <div>
+                      <div />
+                    </div>
+                    <div
+                      class="mx_StyledRadioButton_content"
+                    >
+                      JSON
+                    </div>
+                    <div
+                      class="mx_StyledRadioButton_spacer"
+                    />
+                  </label>
+                  <span
+                    class="mx_ExportDialog_subheading"
+                  >
+                    Messages
+                  </span>
+                  <div
+                    class="mx_Field mx_Field_select"
+                  >
+                    <select
+                      id="export-type"
+                      type="text"
+                    >
+                      <option
+                        value="Timeline"
+                      >
+                        Current Timeline
+                      </option>
+                      <option
+                        value="Beginning"
+                      >
+                        From the beginning
+                      </option>
+                      <option
+                        value="LastNMessages"
+                      >
+                        Specify a number of messages
+                      </option>
+                    </select>
+                    <label
+                      for="export-type"
+                    />
+                  </div>
+                  <span
+                    class="mx_ExportDialog_subheading"
+                  >
+                    Size Limit
+                  </span>
+                  <div
+                    class="mx_Field mx_Field_input"
+                  >
+                    <input
+                      autocomplete="off"
+                      id="size-limit"
+                      type="number"
+                      value="8"
+                    />
+                    <label
+                      for="size-limit"
+                    />
+                    <span
+                      class="mx_Field_postfix"
+                    >
+                      <span>
+                        MB
+                      </span>
+                    </span>
+                  </div>
+                  <span
+                    class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+                  >
+                    <input
+                      id="include-attachments"
+                      type="checkbox"
+                    />
+                    <label
+                      for="include-attachments"
+                    >
+                      <div
+                        class="mx_Checkbox_background"
+                      >
+                        <div
+                          class="mx_Checkbox_checkmark"
+                        />
+                      </div>
+                      <div>
+                        Include Attachments
+                      </div>
+                    </label>
+                  </span>
+                </div>
+                <div
+                  class="mx_Dialog_buttons"
+                >
+                  <button
+                    data-test-id="dialog-cancel-button"
+                    type="button"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    class="mx_Dialog_primary"
+                    data-test-id="dialog-primary-button"
+                    type="button"
+                  >
+                    Export
+                  </button>
+                </div>
+              </div>
+            }
+            onActivation={[Function]}
+            onDeactivation={[Function]}
+            persistentFocus={false}
+            returnFocus={[Function]}
+            shards={Array []}
+            sideCar={
+              Object {
+                "assignMedium": [Function],
+                "assignSyncMedium": [Function],
+                "options": Object {
+                  "async": true,
+                  "ssr": false,
+                },
+                "read": [Function],
+                "useMedium": [Function],
+              }
+            }
+          />
+        </SideEffect(FocusWatcher)>
+        <div
+          aria-describedby="mx_Dialog_content"
+          aria-labelledby="mx_BaseDialog_title"
+          className="mx_ExportDialog false mx_Dialog_fixedWidth"
+          data-focus-lock-disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          role="dialog"
+        >
+          <div
+            className="mx_Dialog_header mx_Dialog_headerWithCancel"
+          >
+            <Heading
+              className="mx_Dialog_title"
+              id="mx_BaseDialog_title"
+              size="h2"
+            >
+              <h2
+                className="mx_Heading_h2 mx_Dialog_title"
+                id="mx_BaseDialog_title"
+              >
+                Export Chat
+              </h2>
+            </Heading>
+            <AccessibleButton
+              aria-label="Close dialog"
+              className="mx_Dialog_cancelButton"
+              element="div"
+              onClick={[Function]}
+              role="button"
+              tabIndex={0}
+            >
+              <div
+                aria-label="Close dialog"
+                className="mx_AccessibleButton mx_Dialog_cancelButton"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                role="button"
+                tabIndex={0}
+              />
+            </AccessibleButton>
+          </div>
+          <p>
+            Select from the options below to export chats from your timeline
+          </p>
+          <span
+            className="mx_ExportDialog_subheading"
+          >
+            Format
+          </span>
+          <div
+            className="mx_ExportDialog_options"
+          >
+            <StyledRadioGroup
+              definitions={
+                Array [
+                  Object {
+                    "label": "HTML",
+                    "value": "Html",
+                  },
+                  Object {
+                    "label": "Plain Text",
+                    "value": "PlainText",
+                  },
+                  Object {
+                    "label": "JSON",
+                    "value": "Json",
+                  },
+                ]
+              }
+              name="exportFormat"
+              onChange={[Function]}
+              value="Html"
+            >
+              <StyledRadioButton
+                checked={true}
+                childrenInLabel={true}
+                className=""
+                id="exportFormat-Html"
+                name="exportFormat"
+                onChange={[Function]}
+                value="Html"
+              >
+                <label
+                  className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+                >
+                  <input
+                    checked={true}
+                    id="exportFormat-Html"
+                    name="exportFormat"
+                    onChange={[Function]}
+                    type="radio"
+                    value="Html"
+                  />
+                  <div>
+                    <div />
+                  </div>
+                  <div
+                    className="mx_StyledRadioButton_content"
+                  >
+                    HTML
+                  </div>
+                  <div
+                    className="mx_StyledRadioButton_spacer"
+                  />
+                </label>
+              </StyledRadioButton>
+              <StyledRadioButton
+                checked={false}
+                childrenInLabel={true}
+                className=""
+                id="exportFormat-PlainText"
+                name="exportFormat"
+                onChange={[Function]}
+                value="PlainText"
+              >
+                <label
+                  className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                >
+                  <input
+                    checked={false}
+                    id="exportFormat-PlainText"
+                    name="exportFormat"
+                    onChange={[Function]}
+                    type="radio"
+                    value="PlainText"
+                  />
+                  <div>
+                    <div />
+                  </div>
+                  <div
+                    className="mx_StyledRadioButton_content"
+                  >
+                    Plain Text
+                  </div>
+                  <div
+                    className="mx_StyledRadioButton_spacer"
+                  />
+                </label>
+              </StyledRadioButton>
+              <StyledRadioButton
+                checked={false}
+                childrenInLabel={true}
+                className=""
+                id="exportFormat-Json"
+                name="exportFormat"
+                onChange={[Function]}
+                value="Json"
+              >
+                <label
+                  className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                >
+                  <input
+                    checked={false}
+                    id="exportFormat-Json"
+                    name="exportFormat"
+                    onChange={[Function]}
+                    type="radio"
+                    value="Json"
+                  />
+                  <div>
+                    <div />
+                  </div>
+                  <div
+                    className="mx_StyledRadioButton_content"
+                  >
+                    JSON
+                  </div>
+                  <div
+                    className="mx_StyledRadioButton_spacer"
+                  />
+                </label>
+              </StyledRadioButton>
+            </StyledRadioGroup>
+            <span
+              className="mx_ExportDialog_subheading"
+            >
+              Messages
+            </span>
+            <Field
+              element="select"
+              id="export-type"
+              onChange={[Function]}
+              type="text"
+              validateOnBlur={true}
+              validateOnChange={true}
+              validateOnFocus={true}
+              value="Timeline"
+            >
+              <div
+                className="mx_Field mx_Field_select"
+              >
+                <select
+                  id="export-type"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="text"
+                  value="Timeline"
+                >
+                  <option
+                    key="Timeline"
+                    value="Timeline"
+                  >
+                    Current Timeline
+                  </option>
+                  <option
+                    key="Beginning"
+                    value="Beginning"
+                  >
+                    From the beginning
+                  </option>
+                  <option
+                    key="LastNMessages"
+                    value="LastNMessages"
+                  >
+                    Specify a number of messages
+                  </option>
+                </select>
+                <label
+                  htmlFor="export-type"
+                />
+              </div>
+            </Field>
+            <span
+              className="mx_ExportDialog_subheading"
+            >
+              Size Limit
+            </span>
+            <Field
+              autoComplete="off"
+              element="input"
+              id="size-limit"
+              onChange={[Function]}
+              onValidate={[Function]}
+              postfixComponent={
+                <span>
+                  MB
+                </span>
+              }
+              type="number"
+              validateOnBlur={true}
+              validateOnChange={true}
+              validateOnFocus={true}
+              value="8"
+            >
+              <div
+                className="mx_Field mx_Field_input"
+              >
+                <input
+                  autoComplete="off"
+                  id="size-limit"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="number"
+                  value="8"
+                />
+                <label
+                  htmlFor="size-limit"
+                />
+                <span
+                  className="mx_Field_postfix"
+                >
+                  <span>
+                    MB
+                  </span>
+                </span>
+              </div>
+            </Field>
+            <StyledCheckbox
+              checked={false}
+              className=""
+              id="include-attachments"
+              onChange={[Function]}
+            >
+              <span
+                className="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+              >
+                <input
+                  checked={false}
+                  id="include-attachments"
+                  onChange={[Function]}
+                  type="checkbox"
+                />
+                <label
+                  htmlFor="include-attachments"
+                >
+                  <div
+                    className="mx_Checkbox_background"
+                  >
+                    <div
+                      className="mx_Checkbox_checkmark"
+                    />
+                  </div>
+                  <div>
+                    Include Attachments
+                  </div>
+                </label>
+              </span>
+            </StyledCheckbox>
+          </div>
+          <DialogButtons
+            disabled={false}
+            hasCancel={true}
+            onCancel={[Function]}
+            onPrimaryButtonClick={[Function]}
+            primaryButton="Export"
+          >
+            <div
+              className="mx_Dialog_buttons"
+            >
+              <button
+                data-test-id="dialog-cancel-button"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                Cancel
+              </button>
+              <button
+                className="mx_Dialog_primary"
+                data-test-id="dialog-primary-button"
+                onClick={[Function]}
+                type="button"
+              >
+                Export
+              </button>
+            </div>
+          </DialogButtons>
+        </div>
+        <div
+          data-focus-guard={true}
+          style={
+            Object {
+              "height": "0px",
+              "left": "1px",
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "fixed",
+              "top": "1px",
+              "width": "1px",
+            }
+          }
+          tabIndex={0}
+        />
+      </ForwardRef(FocusLockUI)>
+    </ForwardRef(FocusLockUICombination)>
+  </BaseDialog>,
+  <ForwardRef(FocusLockUICombination)
+    className="mx_ExportDialog false mx_Dialog_fixedWidth"
+    lockProps={
+      Object {
+        "aria-describedby": "mx_Dialog_content",
+        "aria-labelledby": "mx_BaseDialog_title",
+        "onKeyDown": [Function],
+        "role": "dialog",
+      }
+    }
+    returnFocus={true}
+  >
+    <ForwardRef(FocusLockUI)
+      as="div"
+      autoFocus={true}
+      className="mx_ExportDialog false mx_Dialog_fixedWidth"
+      crossFrame={true}
+      disabled={false}
+      lockProps={
+        Object {
+          "aria-describedby": "mx_Dialog_content",
+          "aria-labelledby": "mx_BaseDialog_title",
+          "onKeyDown": [Function],
+          "role": "dialog",
+        }
+      }
+      noFocusGuards={false}
+      persistentFocus={false}
+      returnFocus={true}
+      sideCar={[Function]}
+    >
+      <div
+        data-focus-guard={true}
+        key="guard-first"
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />
+      <div
+        data-focus-guard={true}
+        key="guard-nearest"
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={1}
+      />
+      <SideEffect(FocusWatcher)
+        autoFocus={true}
+        crossFrame={true}
+        disabled={false}
+        id={Object {}}
+        observed={
+          <div
+            aria-describedby="mx_Dialog_content"
+            aria-labelledby="mx_BaseDialog_title"
+            class="mx_ExportDialog false mx_Dialog_fixedWidth"
+            data-focus-lock-disabled="false"
+            role="dialog"
+          >
+            <div
+              class="mx_Dialog_header mx_Dialog_headerWithCancel"
+            >
+              <h2
+                class="mx_Heading_h2 mx_Dialog_title"
+                id="mx_BaseDialog_title"
+              >
+                Export Chat
+              </h2>
+              <div
+                aria-label="Close dialog"
+                class="mx_AccessibleButton mx_Dialog_cancelButton"
+                role="button"
+                tabindex="0"
+              />
+            </div>
+            <p>
+              Select from the options below to export chats from your timeline
+            </p>
+            <span
+              class="mx_ExportDialog_subheading"
+            >
+              Format
+            </span>
+            <div
+              class="mx_ExportDialog_options"
+            >
+              <label
+                class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+              >
+                <input
+                  checked=""
+                  id="exportFormat-Html"
+                  name="exportFormat"
+                  type="radio"
+                  value="Html"
+                />
+                <div>
+                  <div />
+                </div>
+                <div
+                  class="mx_StyledRadioButton_content"
+                >
+                  HTML
+                </div>
+                <div
+                  class="mx_StyledRadioButton_spacer"
+                />
+              </label>
+              <label
+                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+              >
+                <input
+                  id="exportFormat-PlainText"
+                  name="exportFormat"
+                  type="radio"
+                  value="PlainText"
+                />
+                <div>
+                  <div />
+                </div>
+                <div
+                  class="mx_StyledRadioButton_content"
+                >
+                  Plain Text
+                </div>
+                <div
+                  class="mx_StyledRadioButton_spacer"
+                />
+              </label>
+              <label
+                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+              >
+                <input
+                  id="exportFormat-Json"
+                  name="exportFormat"
+                  type="radio"
+                  value="Json"
+                />
+                <div>
+                  <div />
+                </div>
+                <div
+                  class="mx_StyledRadioButton_content"
+                >
+                  JSON
+                </div>
+                <div
+                  class="mx_StyledRadioButton_spacer"
+                />
+              </label>
+              <span
+                class="mx_ExportDialog_subheading"
+              >
+                Messages
+              </span>
+              <div
+                class="mx_Field mx_Field_select"
+              >
+                <select
+                  id="export-type"
+                  type="text"
+                >
+                  <option
+                    value="Timeline"
+                  >
+                    Current Timeline
+                  </option>
+                  <option
+                    value="Beginning"
+                  >
+                    From the beginning
+                  </option>
+                  <option
+                    value="LastNMessages"
+                  >
+                    Specify a number of messages
+                  </option>
+                </select>
+                <label
+                  for="export-type"
+                />
+              </div>
+              <span
+                class="mx_ExportDialog_subheading"
+              >
+                Size Limit
+              </span>
+              <div
+                class="mx_Field mx_Field_input"
+              >
+                <input
+                  autocomplete="off"
+                  id="size-limit"
+                  type="number"
+                  value="8"
+                />
+                <label
+                  for="size-limit"
+                />
+                <span
+                  class="mx_Field_postfix"
+                >
+                  <span>
+                    MB
+                  </span>
+                </span>
+              </div>
+              <span
+                class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+              >
+                <input
+                  id="include-attachments"
+                  type="checkbox"
+                />
+                <label
+                  for="include-attachments"
+                >
+                  <div
+                    class="mx_Checkbox_background"
+                  >
+                    <div
+                      class="mx_Checkbox_checkmark"
+                    />
+                  </div>
+                  <div>
+                    Include Attachments
+                  </div>
+                </label>
+              </span>
+            </div>
+            <div
+              class="mx_Dialog_buttons"
+            >
+              <button
+                data-test-id="dialog-cancel-button"
+                type="button"
+              >
+                Cancel
+              </button>
+              <button
+                class="mx_Dialog_primary"
+                data-test-id="dialog-primary-button"
+                type="button"
+              >
+                Export
+              </button>
+            </div>
+          </div>
+        }
+        onActivation={[Function]}
+        onDeactivation={[Function]}
+        persistentFocus={false}
+        returnFocus={[Function]}
+        shards={Array []}
+        sideCar={
+          Object {
+            "assignMedium": [Function],
+            "assignSyncMedium": [Function],
+            "options": Object {
+              "async": true,
+              "ssr": false,
+            },
+            "read": [Function],
+            "useMedium": [Function],
+          }
+        }
+      >
+        <FocusWatcher
+          autoFocus={true}
+          crossFrame={true}
+          disabled={false}
+          id={Object {}}
+          observed={
+            <div
+              aria-describedby="mx_Dialog_content"
+              aria-labelledby="mx_BaseDialog_title"
+              class="mx_ExportDialog false mx_Dialog_fixedWidth"
+              data-focus-lock-disabled="false"
+              role="dialog"
+            >
+              <div
+                class="mx_Dialog_header mx_Dialog_headerWithCancel"
+              >
+                <h2
+                  class="mx_Heading_h2 mx_Dialog_title"
+                  id="mx_BaseDialog_title"
+                >
+                  Export Chat
+                </h2>
+                <div
+                  aria-label="Close dialog"
+                  class="mx_AccessibleButton mx_Dialog_cancelButton"
+                  role="button"
+                  tabindex="0"
+                />
+              </div>
+              <p>
+                Select from the options below to export chats from your timeline
+              </p>
+              <span
+                class="mx_ExportDialog_subheading"
+              >
+                Format
+              </span>
+              <div
+                class="mx_ExportDialog_options"
+              >
+                <label
+                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+                >
+                  <input
+                    checked=""
+                    id="exportFormat-Html"
+                    name="exportFormat"
+                    type="radio"
+                    value="Html"
+                  />
+                  <div>
+                    <div />
+                  </div>
+                  <div
+                    class="mx_StyledRadioButton_content"
+                  >
+                    HTML
+                  </div>
+                  <div
+                    class="mx_StyledRadioButton_spacer"
+                  />
+                </label>
+                <label
+                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                >
+                  <input
+                    id="exportFormat-PlainText"
+                    name="exportFormat"
+                    type="radio"
+                    value="PlainText"
+                  />
+                  <div>
+                    <div />
+                  </div>
+                  <div
+                    class="mx_StyledRadioButton_content"
+                  >
+                    Plain Text
+                  </div>
+                  <div
+                    class="mx_StyledRadioButton_spacer"
+                  />
+                </label>
+                <label
+                  class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                >
+                  <input
+                    id="exportFormat-Json"
+                    name="exportFormat"
+                    type="radio"
+                    value="Json"
+                  />
+                  <div>
+                    <div />
+                  </div>
+                  <div
+                    class="mx_StyledRadioButton_content"
+                  >
+                    JSON
+                  </div>
+                  <div
+                    class="mx_StyledRadioButton_spacer"
+                  />
+                </label>
+                <span
+                  class="mx_ExportDialog_subheading"
+                >
+                  Messages
+                </span>
+                <div
+                  class="mx_Field mx_Field_select"
+                >
+                  <select
+                    id="export-type"
+                    type="text"
+                  >
+                    <option
+                      value="Timeline"
+                    >
+                      Current Timeline
+                    </option>
+                    <option
+                      value="Beginning"
+                    >
+                      From the beginning
+                    </option>
+                    <option
+                      value="LastNMessages"
+                    >
+                      Specify a number of messages
+                    </option>
+                  </select>
+                  <label
+                    for="export-type"
+                  />
+                </div>
+                <span
+                  class="mx_ExportDialog_subheading"
+                >
+                  Size Limit
+                </span>
+                <div
+                  class="mx_Field mx_Field_input"
+                >
+                  <input
+                    autocomplete="off"
+                    id="size-limit"
+                    type="number"
+                    value="8"
+                  />
+                  <label
+                    for="size-limit"
+                  />
+                  <span
+                    class="mx_Field_postfix"
+                  >
+                    <span>
+                      MB
+                    </span>
+                  </span>
+                </div>
+                <span
+                  class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+                >
+                  <input
+                    id="include-attachments"
+                    type="checkbox"
+                  />
+                  <label
+                    for="include-attachments"
+                  >
+                    <div
+                      class="mx_Checkbox_background"
+                    >
+                      <div
+                        class="mx_Checkbox_checkmark"
+                      />
+                    </div>
+                    <div>
+                      Include Attachments
+                    </div>
+                  </label>
+                </span>
+              </div>
+              <div
+                class="mx_Dialog_buttons"
+              >
+                <button
+                  data-test-id="dialog-cancel-button"
+                  type="button"
+                >
+                  Cancel
+                </button>
+                <button
+                  class="mx_Dialog_primary"
+                  data-test-id="dialog-primary-button"
+                  type="button"
+                >
+                  Export
+                </button>
+              </div>
+            </div>
+          }
+          onActivation={[Function]}
+          onDeactivation={[Function]}
+          persistentFocus={false}
+          returnFocus={[Function]}
+          shards={Array []}
+          sideCar={
+            Object {
+              "assignMedium": [Function],
+              "assignSyncMedium": [Function],
+              "options": Object {
+                "async": true,
+                "ssr": false,
+              },
+              "read": [Function],
+              "useMedium": [Function],
+            }
+          }
+        />
+      </SideEffect(FocusWatcher)>
+      <div
+        aria-describedby="mx_Dialog_content"
+        aria-labelledby="mx_BaseDialog_title"
+        className="mx_ExportDialog false mx_Dialog_fixedWidth"
+        data-focus-lock-disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        role="dialog"
+      >
+        <div
+          className="mx_Dialog_header mx_Dialog_headerWithCancel"
+        >
+          <Heading
+            className="mx_Dialog_title"
+            id="mx_BaseDialog_title"
+            size="h2"
+          >
+            <h2
+              className="mx_Heading_h2 mx_Dialog_title"
+              id="mx_BaseDialog_title"
+            >
+              Export Chat
+            </h2>
+          </Heading>
+          <AccessibleButton
+            aria-label="Close dialog"
+            className="mx_Dialog_cancelButton"
+            element="div"
+            onClick={[Function]}
+            role="button"
+            tabIndex={0}
+          >
+            <div
+              aria-label="Close dialog"
+              className="mx_AccessibleButton mx_Dialog_cancelButton"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              role="button"
+              tabIndex={0}
+            />
+          </AccessibleButton>
+        </div>
+        <p>
+          Select from the options below to export chats from your timeline
+        </p>
+        <span
+          className="mx_ExportDialog_subheading"
+        >
+          Format
+        </span>
+        <div
+          className="mx_ExportDialog_options"
+        >
+          <StyledRadioGroup
+            definitions={
+              Array [
+                Object {
+                  "label": "HTML",
+                  "value": "Html",
+                },
+                Object {
+                  "label": "Plain Text",
+                  "value": "PlainText",
+                },
+                Object {
+                  "label": "JSON",
+                  "value": "Json",
+                },
+              ]
+            }
+            name="exportFormat"
+            onChange={[Function]}
+            value="Html"
+          >
+            <StyledRadioButton
+              checked={true}
+              childrenInLabel={true}
+              className=""
+              id="exportFormat-Html"
+              name="exportFormat"
+              onChange={[Function]}
+              value="Html"
+            >
+              <label
+                className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+              >
+                <input
+                  checked={true}
+                  id="exportFormat-Html"
+                  name="exportFormat"
+                  onChange={[Function]}
+                  type="radio"
+                  value="Html"
+                />
+                <div>
+                  <div />
+                </div>
+                <div
+                  className="mx_StyledRadioButton_content"
+                >
+                  HTML
+                </div>
+                <div
+                  className="mx_StyledRadioButton_spacer"
+                />
+              </label>
+            </StyledRadioButton>
+            <StyledRadioButton
+              checked={false}
+              childrenInLabel={true}
+              className=""
+              id="exportFormat-PlainText"
+              name="exportFormat"
+              onChange={[Function]}
+              value="PlainText"
+            >
+              <label
+                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+              >
+                <input
+                  checked={false}
+                  id="exportFormat-PlainText"
+                  name="exportFormat"
+                  onChange={[Function]}
+                  type="radio"
+                  value="PlainText"
+                />
+                <div>
+                  <div />
+                </div>
+                <div
+                  className="mx_StyledRadioButton_content"
+                >
+                  Plain Text
+                </div>
+                <div
+                  className="mx_StyledRadioButton_spacer"
+                />
+              </label>
+            </StyledRadioButton>
+            <StyledRadioButton
+              checked={false}
+              childrenInLabel={true}
+              className=""
+              id="exportFormat-Json"
+              name="exportFormat"
+              onChange={[Function]}
+              value="Json"
+            >
+              <label
+                className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+              >
+                <input
+                  checked={false}
+                  id="exportFormat-Json"
+                  name="exportFormat"
+                  onChange={[Function]}
+                  type="radio"
+                  value="Json"
+                />
+                <div>
+                  <div />
+                </div>
+                <div
+                  className="mx_StyledRadioButton_content"
+                >
+                  JSON
+                </div>
+                <div
+                  className="mx_StyledRadioButton_spacer"
+                />
+              </label>
+            </StyledRadioButton>
+          </StyledRadioGroup>
+          <span
+            className="mx_ExportDialog_subheading"
+          >
+            Messages
+          </span>
+          <Field
+            element="select"
+            id="export-type"
+            onChange={[Function]}
+            type="text"
+            validateOnBlur={true}
+            validateOnChange={true}
+            validateOnFocus={true}
+            value="Timeline"
+          >
+            <div
+              className="mx_Field mx_Field_select"
+            >
+              <select
+                id="export-type"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                type="text"
+                value="Timeline"
+              >
+                <option
+                  key="Timeline"
+                  value="Timeline"
+                >
+                  Current Timeline
+                </option>
+                <option
+                  key="Beginning"
+                  value="Beginning"
+                >
+                  From the beginning
+                </option>
+                <option
+                  key="LastNMessages"
+                  value="LastNMessages"
+                >
+                  Specify a number of messages
+                </option>
+              </select>
+              <label
+                htmlFor="export-type"
+              />
+            </div>
+          </Field>
+          <span
+            className="mx_ExportDialog_subheading"
+          >
+            Size Limit
+          </span>
+          <Field
+            autoComplete="off"
+            element="input"
+            id="size-limit"
+            onChange={[Function]}
+            onValidate={[Function]}
+            postfixComponent={
+              <span>
+                MB
+              </span>
+            }
+            type="number"
+            validateOnBlur={true}
+            validateOnChange={true}
+            validateOnFocus={true}
+            value="8"
+          >
+            <div
+              className="mx_Field mx_Field_input"
+            >
+              <input
+                autoComplete="off"
+                id="size-limit"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                type="number"
+                value="8"
+              />
+              <label
+                htmlFor="size-limit"
+              />
+              <span
+                className="mx_Field_postfix"
+              >
+                <span>
+                  MB
+                </span>
+              </span>
+            </div>
+          </Field>
+          <StyledCheckbox
+            checked={false}
+            className=""
+            id="include-attachments"
+            onChange={[Function]}
+          >
+            <span
+              className="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+            >
+              <input
+                checked={false}
+                id="include-attachments"
+                onChange={[Function]}
+                type="checkbox"
+              />
+              <label
+                htmlFor="include-attachments"
+              >
+                <div
+                  className="mx_Checkbox_background"
+                >
+                  <div
+                    className="mx_Checkbox_checkmark"
+                  />
+                </div>
+                <div>
+                  Include Attachments
+                </div>
+              </label>
+            </span>
+          </StyledCheckbox>
+        </div>
+        <DialogButtons
+          disabled={false}
+          hasCancel={true}
+          onCancel={[Function]}
+          onPrimaryButtonClick={[Function]}
+          primaryButton="Export"
+        >
+          <div
+            className="mx_Dialog_buttons"
+          >
+            <button
+              data-test-id="dialog-cancel-button"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+            <button
+              className="mx_Dialog_primary"
+              data-test-id="dialog-primary-button"
+              onClick={[Function]}
+              type="button"
+            >
+              Export
+            </button>
+          </div>
+        </DialogButtons>
+      </div>
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />
+    </ForwardRef(FocusLockUI)>
+  </ForwardRef(FocusLockUICombination)>,
+  <ForwardRef(FocusLockUI)
+    as="div"
+    autoFocus={true}
+    className="mx_ExportDialog false mx_Dialog_fixedWidth"
+    crossFrame={true}
+    disabled={false}
+    lockProps={
+      Object {
+        "aria-describedby": "mx_Dialog_content",
+        "aria-labelledby": "mx_BaseDialog_title",
+        "onKeyDown": [Function],
+        "role": "dialog",
+      }
+    }
+    noFocusGuards={false}
+    persistentFocus={false}
+    returnFocus={true}
+    sideCar={[Function]}
+  >
+    <div
+      data-focus-guard={true}
+      key="guard-first"
+      style={
+        Object {
+          "height": "0px",
+          "left": "1px",
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "fixed",
+          "top": "1px",
+          "width": "1px",
+        }
+      }
+      tabIndex={0}
+    />
+    <div
+      data-focus-guard={true}
+      key="guard-nearest"
+      style={
+        Object {
+          "height": "0px",
+          "left": "1px",
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "fixed",
+          "top": "1px",
+          "width": "1px",
+        }
+      }
+      tabIndex={1}
+    />
+    <SideEffect(FocusWatcher)
+      autoFocus={true}
+      crossFrame={true}
+      disabled={false}
+      id={Object {}}
+      observed={
+        <div
+          aria-describedby="mx_Dialog_content"
+          aria-labelledby="mx_BaseDialog_title"
+          class="mx_ExportDialog false mx_Dialog_fixedWidth"
+          data-focus-lock-disabled="false"
+          role="dialog"
+        >
+          <div
+            class="mx_Dialog_header mx_Dialog_headerWithCancel"
+          >
+            <h2
+              class="mx_Heading_h2 mx_Dialog_title"
+              id="mx_BaseDialog_title"
+            >
+              Export Chat
+            </h2>
+            <div
+              aria-label="Close dialog"
+              class="mx_AccessibleButton mx_Dialog_cancelButton"
+              role="button"
+              tabindex="0"
+            />
+          </div>
+          <p>
+            Select from the options below to export chats from your timeline
+          </p>
+          <span
+            class="mx_ExportDialog_subheading"
+          >
+            Format
+          </span>
+          <div
+            class="mx_ExportDialog_options"
+          >
+            <label
+              class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+            >
+              <input
+                checked=""
+                id="exportFormat-Html"
+                name="exportFormat"
+                type="radio"
+                value="Html"
+              />
+              <div>
+                <div />
+              </div>
+              <div
+                class="mx_StyledRadioButton_content"
+              >
+                HTML
+              </div>
+              <div
+                class="mx_StyledRadioButton_spacer"
+              />
+            </label>
+            <label
+              class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+            >
+              <input
+                id="exportFormat-PlainText"
+                name="exportFormat"
+                type="radio"
+                value="PlainText"
+              />
+              <div>
+                <div />
+              </div>
+              <div
+                class="mx_StyledRadioButton_content"
+              >
+                Plain Text
+              </div>
+              <div
+                class="mx_StyledRadioButton_spacer"
+              />
+            </label>
+            <label
+              class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+            >
+              <input
+                id="exportFormat-Json"
+                name="exportFormat"
+                type="radio"
+                value="Json"
+              />
+              <div>
+                <div />
+              </div>
+              <div
+                class="mx_StyledRadioButton_content"
+              >
+                JSON
+              </div>
+              <div
+                class="mx_StyledRadioButton_spacer"
+              />
+            </label>
+            <span
+              class="mx_ExportDialog_subheading"
+            >
+              Messages
+            </span>
+            <div
+              class="mx_Field mx_Field_select"
+            >
+              <select
+                id="export-type"
+                type="text"
+              >
+                <option
+                  value="Timeline"
+                >
+                  Current Timeline
+                </option>
+                <option
+                  value="Beginning"
+                >
+                  From the beginning
+                </option>
+                <option
+                  value="LastNMessages"
+                >
+                  Specify a number of messages
+                </option>
+              </select>
+              <label
+                for="export-type"
+              />
+            </div>
+            <span
+              class="mx_ExportDialog_subheading"
+            >
+              Size Limit
+            </span>
+            <div
+              class="mx_Field mx_Field_input"
+            >
+              <input
+                autocomplete="off"
+                id="size-limit"
+                type="number"
+                value="8"
+              />
+              <label
+                for="size-limit"
+              />
+              <span
+                class="mx_Field_postfix"
+              >
+                <span>
+                  MB
+                </span>
+              </span>
+            </div>
+            <span
+              class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+            >
+              <input
+                id="include-attachments"
+                type="checkbox"
+              />
+              <label
+                for="include-attachments"
+              >
+                <div
+                  class="mx_Checkbox_background"
+                >
+                  <div
+                    class="mx_Checkbox_checkmark"
+                  />
+                </div>
+                <div>
+                  Include Attachments
+                </div>
+              </label>
+            </span>
+          </div>
+          <div
+            class="mx_Dialog_buttons"
+          >
+            <button
+              data-test-id="dialog-cancel-button"
+              type="button"
+            >
+              Cancel
+            </button>
+            <button
+              class="mx_Dialog_primary"
+              data-test-id="dialog-primary-button"
+              type="button"
+            >
+              Export
+            </button>
+          </div>
+        </div>
+      }
+      onActivation={[Function]}
+      onDeactivation={[Function]}
+      persistentFocus={false}
+      returnFocus={[Function]}
+      shards={Array []}
+      sideCar={
+        Object {
+          "assignMedium": [Function],
+          "assignSyncMedium": [Function],
+          "options": Object {
+            "async": true,
+            "ssr": false,
+          },
+          "read": [Function],
+          "useMedium": [Function],
+        }
+      }
+    >
+      <FocusWatcher
+        autoFocus={true}
+        crossFrame={true}
+        disabled={false}
+        id={Object {}}
+        observed={
+          <div
+            aria-describedby="mx_Dialog_content"
+            aria-labelledby="mx_BaseDialog_title"
+            class="mx_ExportDialog false mx_Dialog_fixedWidth"
+            data-focus-lock-disabled="false"
+            role="dialog"
+          >
+            <div
+              class="mx_Dialog_header mx_Dialog_headerWithCancel"
+            >
+              <h2
+                class="mx_Heading_h2 mx_Dialog_title"
+                id="mx_BaseDialog_title"
+              >
+                Export Chat
+              </h2>
+              <div
+                aria-label="Close dialog"
+                class="mx_AccessibleButton mx_Dialog_cancelButton"
+                role="button"
+                tabindex="0"
+              />
+            </div>
+            <p>
+              Select from the options below to export chats from your timeline
+            </p>
+            <span
+              class="mx_ExportDialog_subheading"
+            >
+              Format
+            </span>
+            <div
+              class="mx_ExportDialog_options"
+            >
+              <label
+                class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+              >
+                <input
+                  checked=""
+                  id="exportFormat-Html"
+                  name="exportFormat"
+                  type="radio"
+                  value="Html"
+                />
+                <div>
+                  <div />
+                </div>
+                <div
+                  class="mx_StyledRadioButton_content"
+                >
+                  HTML
+                </div>
+                <div
+                  class="mx_StyledRadioButton_spacer"
+                />
+              </label>
+              <label
+                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+              >
+                <input
+                  id="exportFormat-PlainText"
+                  name="exportFormat"
+                  type="radio"
+                  value="PlainText"
+                />
+                <div>
+                  <div />
+                </div>
+                <div
+                  class="mx_StyledRadioButton_content"
+                >
+                  Plain Text
+                </div>
+                <div
+                  class="mx_StyledRadioButton_spacer"
+                />
+              </label>
+              <label
+                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+              >
+                <input
+                  id="exportFormat-Json"
+                  name="exportFormat"
+                  type="radio"
+                  value="Json"
+                />
+                <div>
+                  <div />
+                </div>
+                <div
+                  class="mx_StyledRadioButton_content"
+                >
+                  JSON
+                </div>
+                <div
+                  class="mx_StyledRadioButton_spacer"
+                />
+              </label>
+              <span
+                class="mx_ExportDialog_subheading"
+              >
+                Messages
+              </span>
+              <div
+                class="mx_Field mx_Field_select"
+              >
+                <select
+                  id="export-type"
+                  type="text"
+                >
+                  <option
+                    value="Timeline"
+                  >
+                    Current Timeline
+                  </option>
+                  <option
+                    value="Beginning"
+                  >
+                    From the beginning
+                  </option>
+                  <option
+                    value="LastNMessages"
+                  >
+                    Specify a number of messages
+                  </option>
+                </select>
+                <label
+                  for="export-type"
+                />
+              </div>
+              <span
+                class="mx_ExportDialog_subheading"
+              >
+                Size Limit
+              </span>
+              <div
+                class="mx_Field mx_Field_input"
+              >
+                <input
+                  autocomplete="off"
+                  id="size-limit"
+                  type="number"
+                  value="8"
+                />
+                <label
+                  for="size-limit"
+                />
+                <span
+                  class="mx_Field_postfix"
+                >
+                  <span>
+                    MB
+                  </span>
+                </span>
+              </div>
+              <span
+                class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+              >
+                <input
+                  id="include-attachments"
+                  type="checkbox"
+                />
+                <label
+                  for="include-attachments"
+                >
+                  <div
+                    class="mx_Checkbox_background"
+                  >
+                    <div
+                      class="mx_Checkbox_checkmark"
+                    />
+                  </div>
+                  <div>
+                    Include Attachments
+                  </div>
+                </label>
+              </span>
+            </div>
+            <div
+              class="mx_Dialog_buttons"
+            >
+              <button
+                data-test-id="dialog-cancel-button"
+                type="button"
+              >
+                Cancel
+              </button>
+              <button
+                class="mx_Dialog_primary"
+                data-test-id="dialog-primary-button"
+                type="button"
+              >
+                Export
+              </button>
+            </div>
+          </div>
+        }
+        onActivation={[Function]}
+        onDeactivation={[Function]}
+        persistentFocus={false}
+        returnFocus={[Function]}
+        shards={Array []}
+        sideCar={
+          Object {
+            "assignMedium": [Function],
+            "assignSyncMedium": [Function],
+            "options": Object {
+              "async": true,
+              "ssr": false,
+            },
+            "read": [Function],
+            "useMedium": [Function],
+          }
+        }
+      />
+    </SideEffect(FocusWatcher)>
+    <div
+      aria-describedby="mx_Dialog_content"
+      aria-labelledby="mx_BaseDialog_title"
+      className="mx_ExportDialog false mx_Dialog_fixedWidth"
+      data-focus-lock-disabled={false}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      role="dialog"
+    >
+      <div
+        className="mx_Dialog_header mx_Dialog_headerWithCancel"
+      >
+        <Heading
+          className="mx_Dialog_title"
+          id="mx_BaseDialog_title"
+          size="h2"
+        >
+          <h2
+            className="mx_Heading_h2 mx_Dialog_title"
+            id="mx_BaseDialog_title"
+          >
+            Export Chat
+          </h2>
+        </Heading>
+        <AccessibleButton
+          aria-label="Close dialog"
+          className="mx_Dialog_cancelButton"
+          element="div"
+          onClick={[Function]}
+          role="button"
+          tabIndex={0}
+        >
+          <div
+            aria-label="Close dialog"
+            className="mx_AccessibleButton mx_Dialog_cancelButton"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            role="button"
+            tabIndex={0}
+          />
+        </AccessibleButton>
+      </div>
+      <p>
+        Select from the options below to export chats from your timeline
+      </p>
+      <span
+        className="mx_ExportDialog_subheading"
+      >
+        Format
+      </span>
+      <div
+        className="mx_ExportDialog_options"
+      >
+        <StyledRadioGroup
+          definitions={
+            Array [
+              Object {
+                "label": "HTML",
+                "value": "Html",
+              },
+              Object {
+                "label": "Plain Text",
+                "value": "PlainText",
+              },
+              Object {
+                "label": "JSON",
+                "value": "Json",
+              },
+            ]
+          }
+          name="exportFormat"
+          onChange={[Function]}
+          value="Html"
+        >
+          <StyledRadioButton
+            checked={true}
+            childrenInLabel={true}
+            className=""
+            id="exportFormat-Html"
+            name="exportFormat"
+            onChange={[Function]}
+            value="Html"
+          >
+            <label
+              className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+            >
+              <input
+                checked={true}
+                id="exportFormat-Html"
+                name="exportFormat"
+                onChange={[Function]}
+                type="radio"
+                value="Html"
+              />
+              <div>
+                <div />
+              </div>
+              <div
+                className="mx_StyledRadioButton_content"
+              >
+                HTML
+              </div>
+              <div
+                className="mx_StyledRadioButton_spacer"
+              />
+            </label>
+          </StyledRadioButton>
+          <StyledRadioButton
+            checked={false}
+            childrenInLabel={true}
+            className=""
+            id="exportFormat-PlainText"
+            name="exportFormat"
+            onChange={[Function]}
+            value="PlainText"
+          >
+            <label
+              className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+            >
+              <input
+                checked={false}
+                id="exportFormat-PlainText"
+                name="exportFormat"
+                onChange={[Function]}
+                type="radio"
+                value="PlainText"
+              />
+              <div>
+                <div />
+              </div>
+              <div
+                className="mx_StyledRadioButton_content"
+              >
+                Plain Text
+              </div>
+              <div
+                className="mx_StyledRadioButton_spacer"
+              />
+            </label>
+          </StyledRadioButton>
+          <StyledRadioButton
+            checked={false}
+            childrenInLabel={true}
+            className=""
+            id="exportFormat-Json"
+            name="exportFormat"
+            onChange={[Function]}
+            value="Json"
+          >
+            <label
+              className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+            >
+              <input
+                checked={false}
+                id="exportFormat-Json"
+                name="exportFormat"
+                onChange={[Function]}
+                type="radio"
+                value="Json"
+              />
+              <div>
+                <div />
+              </div>
+              <div
+                className="mx_StyledRadioButton_content"
+              >
+                JSON
+              </div>
+              <div
+                className="mx_StyledRadioButton_spacer"
+              />
+            </label>
+          </StyledRadioButton>
+        </StyledRadioGroup>
+        <span
+          className="mx_ExportDialog_subheading"
+        >
+          Messages
+        </span>
+        <Field
+          element="select"
+          id="export-type"
+          onChange={[Function]}
+          type="text"
+          validateOnBlur={true}
+          validateOnChange={true}
+          validateOnFocus={true}
+          value="Timeline"
+        >
+          <div
+            className="mx_Field mx_Field_select"
+          >
+            <select
+              id="export-type"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              type="text"
+              value="Timeline"
+            >
+              <option
+                key="Timeline"
+                value="Timeline"
+              >
+                Current Timeline
+              </option>
+              <option
+                key="Beginning"
+                value="Beginning"
+              >
+                From the beginning
+              </option>
+              <option
+                key="LastNMessages"
+                value="LastNMessages"
+              >
+                Specify a number of messages
+              </option>
+            </select>
+            <label
+              htmlFor="export-type"
+            />
+          </div>
+        </Field>
+        <span
+          className="mx_ExportDialog_subheading"
+        >
+          Size Limit
+        </span>
+        <Field
+          autoComplete="off"
+          element="input"
+          id="size-limit"
+          onChange={[Function]}
+          onValidate={[Function]}
+          postfixComponent={
+            <span>
+              MB
+            </span>
+          }
+          type="number"
+          validateOnBlur={true}
+          validateOnChange={true}
+          validateOnFocus={true}
+          value="8"
+        >
+          <div
+            className="mx_Field mx_Field_input"
+          >
+            <input
+              autoComplete="off"
+              id="size-limit"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              type="number"
+              value="8"
+            />
+            <label
+              htmlFor="size-limit"
+            />
+            <span
+              className="mx_Field_postfix"
+            >
+              <span>
+                MB
+              </span>
+            </span>
+          </div>
+        </Field>
+        <StyledCheckbox
+          checked={false}
+          className=""
+          id="include-attachments"
+          onChange={[Function]}
+        >
+          <span
+            className="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+          >
+            <input
+              checked={false}
+              id="include-attachments"
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <label
+              htmlFor="include-attachments"
+            >
+              <div
+                className="mx_Checkbox_background"
+              >
+                <div
+                  className="mx_Checkbox_checkmark"
+                />
+              </div>
+              <div>
+                Include Attachments
+              </div>
+            </label>
+          </span>
+        </StyledCheckbox>
+      </div>
+      <DialogButtons
+        disabled={false}
+        hasCancel={true}
+        onCancel={[Function]}
+        onPrimaryButtonClick={[Function]}
+        primaryButton="Export"
+      >
+        <div
+          className="mx_Dialog_buttons"
+        >
+          <button
+            data-test-id="dialog-cancel-button"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            Cancel
+          </button>
+          <button
+            className="mx_Dialog_primary"
+            data-test-id="dialog-primary-button"
+            onClick={[Function]}
+            type="button"
+          >
+            Export
+          </button>
+        </div>
+      </DialogButtons>
+    </div>
+    <div
+      data-focus-guard={true}
+      style={
+        Object {
+          "height": "0px",
+          "left": "1px",
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "fixed",
+          "top": "1px",
+          "width": "1px",
+        }
+      }
+      tabIndex={0}
+    />
+  </ForwardRef(FocusLockUI)>,
+  <div
+    aria-describedby="mx_Dialog_content"
+    aria-labelledby="mx_BaseDialog_title"
+    className="mx_ExportDialog false mx_Dialog_fixedWidth"
+    data-focus-lock-disabled={false}
+    onBlur={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    role="dialog"
+  >
+    <div
+      className="mx_Dialog_header mx_Dialog_headerWithCancel"
+    >
+      <Heading
+        className="mx_Dialog_title"
+        id="mx_BaseDialog_title"
+        size="h2"
+      >
+        <h2
+          className="mx_Heading_h2 mx_Dialog_title"
+          id="mx_BaseDialog_title"
+        >
+          Export Chat
+        </h2>
+      </Heading>
+      <AccessibleButton
+        aria-label="Close dialog"
+        className="mx_Dialog_cancelButton"
+        element="div"
+        onClick={[Function]}
+        role="button"
+        tabIndex={0}
+      >
+        <div
+          aria-label="Close dialog"
+          className="mx_AccessibleButton mx_Dialog_cancelButton"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          role="button"
+          tabIndex={0}
+        />
+      </AccessibleButton>
+    </div>
+    <p>
+      Select from the options below to export chats from your timeline
+    </p>
+    <span
+      className="mx_ExportDialog_subheading"
+    >
+      Format
+    </span>
+    <div
+      className="mx_ExportDialog_options"
+    >
+      <StyledRadioGroup
+        definitions={
+          Array [
+            Object {
+              "label": "HTML",
+              "value": "Html",
+            },
+            Object {
+              "label": "Plain Text",
+              "value": "PlainText",
+            },
+            Object {
+              "label": "JSON",
+              "value": "Json",
+            },
+          ]
+        }
+        name="exportFormat"
+        onChange={[Function]}
+        value="Html"
+      >
+        <StyledRadioButton
+          checked={true}
+          childrenInLabel={true}
+          className=""
+          id="exportFormat-Html"
+          name="exportFormat"
+          onChange={[Function]}
+          value="Html"
+        >
+          <label
+            className="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+          >
+            <input
+              checked={true}
+              id="exportFormat-Html"
+              name="exportFormat"
+              onChange={[Function]}
+              type="radio"
+              value="Html"
+            />
+            <div>
+              <div />
+            </div>
+            <div
+              className="mx_StyledRadioButton_content"
+            >
+              HTML
+            </div>
+            <div
+              className="mx_StyledRadioButton_spacer"
+            />
+          </label>
+        </StyledRadioButton>
+        <StyledRadioButton
+          checked={false}
+          childrenInLabel={true}
+          className=""
+          id="exportFormat-PlainText"
+          name="exportFormat"
+          onChange={[Function]}
+          value="PlainText"
+        >
+          <label
+            className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+          >
+            <input
+              checked={false}
+              id="exportFormat-PlainText"
+              name="exportFormat"
+              onChange={[Function]}
+              type="radio"
+              value="PlainText"
+            />
+            <div>
+              <div />
+            </div>
+            <div
+              className="mx_StyledRadioButton_content"
+            >
+              Plain Text
+            </div>
+            <div
+              className="mx_StyledRadioButton_spacer"
+            />
+          </label>
+        </StyledRadioButton>
+        <StyledRadioButton
+          checked={false}
+          childrenInLabel={true}
+          className=""
+          id="exportFormat-Json"
+          name="exportFormat"
+          onChange={[Function]}
+          value="Json"
+        >
+          <label
+            className="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+          >
+            <input
+              checked={false}
+              id="exportFormat-Json"
+              name="exportFormat"
+              onChange={[Function]}
+              type="radio"
+              value="Json"
+            />
+            <div>
+              <div />
+            </div>
+            <div
+              className="mx_StyledRadioButton_content"
+            >
+              JSON
+            </div>
+            <div
+              className="mx_StyledRadioButton_spacer"
+            />
+          </label>
+        </StyledRadioButton>
+      </StyledRadioGroup>
+      <span
+        className="mx_ExportDialog_subheading"
+      >
+        Messages
+      </span>
+      <Field
+        element="select"
+        id="export-type"
+        onChange={[Function]}
+        type="text"
+        validateOnBlur={true}
+        validateOnChange={true}
+        validateOnFocus={true}
+        value="Timeline"
+      >
+        <div
+          className="mx_Field mx_Field_select"
+        >
+          <select
+            id="export-type"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            type="text"
+            value="Timeline"
+          >
+            <option
+              key="Timeline"
+              value="Timeline"
+            >
+              Current Timeline
+            </option>
+            <option
+              key="Beginning"
+              value="Beginning"
+            >
+              From the beginning
+            </option>
+            <option
+              key="LastNMessages"
+              value="LastNMessages"
+            >
+              Specify a number of messages
+            </option>
+          </select>
+          <label
+            htmlFor="export-type"
+          />
+        </div>
+      </Field>
+      <span
+        className="mx_ExportDialog_subheading"
+      >
+        Size Limit
+      </span>
+      <Field
+        autoComplete="off"
+        element="input"
+        id="size-limit"
+        onChange={[Function]}
+        onValidate={[Function]}
+        postfixComponent={
+          <span>
+            MB
+          </span>
+        }
+        type="number"
+        validateOnBlur={true}
+        validateOnChange={true}
+        validateOnFocus={true}
+        value="8"
+      >
+        <div
+          className="mx_Field mx_Field_input"
+        >
+          <input
+            autoComplete="off"
+            id="size-limit"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            type="number"
+            value="8"
+          />
+          <label
+            htmlFor="size-limit"
+          />
+          <span
+            className="mx_Field_postfix"
+          >
+            <span>
+              MB
+            </span>
+          </span>
+        </div>
+      </Field>
+      <StyledCheckbox
+        checked={false}
+        className=""
+        id="include-attachments"
+        onChange={[Function]}
+      >
+        <span
+          className="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+        >
+          <input
+            checked={false}
+            id="include-attachments"
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <label
+            htmlFor="include-attachments"
+          >
+            <div
+              className="mx_Checkbox_background"
+            >
+              <div
+                className="mx_Checkbox_checkmark"
+              />
+            </div>
+            <div>
+              Include Attachments
+            </div>
+          </label>
+        </span>
+      </StyledCheckbox>
+    </div>
+    <DialogButtons
+      disabled={false}
+      hasCancel={true}
+      onCancel={[Function]}
+      onPrimaryButtonClick={[Function]}
+      primaryButton="Export"
+    >
+      <div
+        className="mx_Dialog_buttons"
+      >
+        <button
+          data-test-id="dialog-cancel-button"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          className="mx_Dialog_primary"
+          data-test-id="dialog-primary-button"
+          onClick={[Function]}
+          type="button"
+        >
+          Export
+        </button>
+      </div>
+    </DialogButtons>
+  </div>,
+]
+`;
+
+exports[`<ExportDialog /> renders success screen when export is finished 1`] = `
+<div
+  className="mx_Dialog_content"
+  id="mx_Dialog_content"
+>
+  Your export was successful. Find it in your Downloads folder.
+</div>
+`;