refactor ExportPage

resource/locales/en-US/translation.json

@@ -766,10 +766,11 @@
 
   "export_management": {
     "beta_warning": "This function is Beta.",
-    "export_as_zip": "Export Data as Zip",
+    "exported_data_list": "Exported Data List",
     "export_collections": "Export Collections",
     "check_all": "Check All",
     "uncheck_all": "Uncheck All",
+    "create_new_exported_data": "Create New Exported Data",
     "export": "Export",
     "cancel": "Cancel",
     "file": "File",

resource/locales/ja/translation.json

@@ -749,10 +749,11 @@
 
   "export_management": {
     "beta_warning": "この機能はベータ版です",
-    "export_as_zip": "Zipファイルでエクスポート",
+    "exported_data_list": "エクスポートデータリスト",
     "export_collections": "コレクションのエクスポート",
     "check_all": "全てにチェックを付ける",
     "uncheck_all": "全てからチェックを外す",
+    "create_new_exported_data": "エクスポートデータの新規作成",
     "export": "エクスポート",
     "cancel": "キャンセル",
     "file": "ファイル名",

src/client/js/components/Admin/Export/ExportPage.jsx

@@ -94,15 +94,22 @@ class ExportPage extends React.Component {
 
     return (
       <Fragment>
-        <h2>{t('export_management.export_as_zip')}</h2>
         <div className="alert alert-warning">
           <i className="icon-exclamation"></i> { t('export_management.beta_warning') }
         </div>
-        <div className="row my-5">
-          <div className="col-xs-offset-3 col-xs-6">
-            <button type="submit" className="btn btn-sm btn-primary" onClick={this.openExportModal}>{t('export_management.export')}</button>
-          </div>
+
+        <h2>{t('Export Data')}</h2>
+
+        <button type="button" className="btn btn-default" onClick={this.openExportModal}>{t('export_management.create_new_exported_data')}</button>
+
+        <div className="mt-5">
+          <h3>{t('export_management.exported_data_list')}</h3>
+          <ZipFileTable
+            zipFileStats={this.state.zipFileStats}
+            onZipFileStatRemove={this.onZipFileStatRemove}
+          />
         </div>
+
         <ExportZipFormModal
           isOpen={this.state.isExportModalOpen}
           onClose={this.closeExportModal}
@@ -110,12 +117,6 @@ class ExportPage extends React.Component {
           zipFileStats={this.state.zipFileStats}
           onZipFileStatAdd={this.onZipFileStatAdd}
         />
-        {this.state.zipFileStats.length > 0 && (
-          <ZipFileTable
-            zipFileStats={this.state.zipFileStats}
-            onZipFileStatRemove={this.onZipFileStatRemove}
-          />
-        )}
       </Fragment>
     );
   }

src/client/js/components/Admin/Export/ExportTableMenu.jsx

@@ -19,12 +19,12 @@ class ExportTableMenu extends React.Component {
         <ul className="dropdown-menu" role="menu">
           <li className="dropdown-header">{t('export_management.export_menu')}</li>
           <li>
-            <a href={`/admin/export/${this.props.fileName}`}>
+            <a type="button" href={`/admin/export/${this.props.fileName}`}>
               <i className="icon-cloud-download" /> {t('export_management.download')}
             </a>
           </li>
-          <li onClick={() => this.props.onZipFileStatRemove(this.props.fileName)}>
-            <a>
+          <li>
+            <a type="button" onClick={() => this.props.onZipFileStatRemove(this.props.fileName)}>
               <span className="text-danger"><i className="icon-trash" /> {t('export_management.delete')}</span>
             </a>
           </li>