show/hide & discard data

resource/locales/en-US/translation.json

@@ -745,7 +745,8 @@
       "uploaded_data": "Uploaded Data",
       "extracted_file": "Extracted File",
       "collection": "Collection",
-      "upload": "Upload"
+      "upload": "Upload",
+      "discard": "Discard Uploaded Data"
     },
     "esa_settings": {
       "team_name": "Team name",

resource/locales/ja/translation.json

@@ -728,7 +728,8 @@
       "uploaded_data": "アップロードされたデータ",
       "extracted_file": "展開されたファイル",
       "collection": "コレクション",
-      "upload": "アップロード"
+      "upload": "アップロード",
+      "discard": "アップロードしたデータを破棄する"
     },
     "esa_settings": {
       "team_name": "チーム名",

src/client/js/components/Admin/Import/GrowiZipImportForm.jsx

@@ -69,6 +69,7 @@ class GrowiImportForm extends React.Component {
       <form className="row" onSubmit={this.import}>
         <div className="col-xs-12">
           <table className="table table-bordered table-mapping">
+            <caption>{t('importer_management.growi_settings.uploaded_data')}</caption>
             <thead>
               <tr>
                 <th></th>
@@ -111,10 +112,13 @@ class GrowiImportForm extends React.Component {
             </tbody>
           </table>
         </div>
-        <div className="col-xs-offset-3 col-xs-6">
-          <button type="submit" className="btn btn-primary" disabled={!this.validateForm()}>
+        <div className="col-xs-12 text-center">
+          <button type="submit" className="btn btn-primary mx-1" disabled={!this.validateForm()}>
             { t('importer_management.import') }
           </button>
+          <button type="button" className="btn btn-default mx-1" onClick={this.props.onDiscard}>
+            { t('importer_management.growi_settings.discard') }
+          </button>
         </div>
       </form>
     );
@@ -125,8 +129,10 @@ class GrowiImportForm extends React.Component {
 GrowiImportForm.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
   fileName: PropTypes.string,
   fileStats: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onDiscard: PropTypes.func.isRequired,
 };
 
 /**

src/client/js/components/Admin/Import/GrowiZipImportSection.jsx

@@ -13,18 +13,26 @@ class GrowiZipImportSection extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {
+    this.initialState = {
       fileName: '',
       fileStats: [],
     };
 
-    this.inputRef = React.createRef();
+    this.state = this.initialState;
 
     this.handleUpload = this.handleUpload.bind(this);
+    this.discardData = this.discardData.bind(this);
   }
 
   handleUpload({ meta, fileName, fileStats }) {
-    this.setState({ fileName, fileStats });
+    this.setState({
+      fileName,
+      fileStats,
+    });
+  }
+
+  discardData() {
+    this.setState(this.initialState);
   }
 
   render() {
@@ -38,17 +46,19 @@ class GrowiZipImportSection extends React.Component {
             <li>{t('importer_management.growi_settings.overwrite_documents')}</li>
           </ul>
         </div>
-        <GrowiZipUploadForm
-          onUpload={this.handleUpload}
-        />
-        {this.state.fileName && (
-        <Fragment>
-          <div className="h4">{t('importer_management.growi_settings.uploaded_data')}</div>
-          <GrowiZipImportForm
-            fileName={this.state.fileName}
-            fileStats={this.state.fileStats}
+
+        {this.state.fileName ? (
+          <Fragment>
+            <GrowiZipImportForm
+              fileName={this.state.fileName}
+              fileStats={this.state.fileStats}
+              onDiscard={this.discardData}
+            />
+          </Fragment>
+        ) : (
+          <GrowiZipUploadForm
+            onUpload={this.handleUpload}
           />
-        </Fragment>
         )}
       </Fragment>
     );