impl ErrorViewer

src/client/js/components/Admin/ImportData/ErrorViewer.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import Modal from 'react-bootstrap/es/Modal';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+
+
+class ErrorViewer extends React.Component {
+
+  render() {
+    const { errors } = this.props;
+
+    let value = '(no errors)';
+    if (errors != null) {
+      const lines = errors.map((obj) => {
+        return JSON.stringify(obj);
+      });
+      value = lines.join('\n');
+    }
+
+    return (
+      <Modal show={this.props.isOpen} onHide={this.props.onClose}>
+        <Modal.Header closeButton className="bg-danger">
+          <Modal.Title className="text-white">Errors</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <textarea className="form-control" rows="8" readOnly wrap="off" defaultValue={value}></textarea>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
+}
+
+ErrorViewer.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+
+  errors: PropTypes.arrayOf(PropTypes.object),
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const ErrorViewerWrapper = (props) => {
+  return createSubscribedElement(ErrorViewer, props, []);
+};
+
+export default withTranslation()(ErrorViewerWrapper);

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

@@ -11,6 +11,7 @@ import { toastSuccess, toastError } from '../../../util/apiNotification';
 import GrowiZipImportOption from '../../../models/GrowiZipImportOption';
 
 import GrowiZipImportItem, { DEFAULT_MODE, MODE_RESTRICTED_COLLECTION } from './GrowiZipImportItem';
+import ErrorViewer from './ErrorViewer';
 
 
 const GROUPS_PAGE = [
@@ -35,10 +36,16 @@ class GrowiImportForm extends React.Component {
       progressMap: [],
       errorsMap: [],
 
-      collectionNameToFileNameMap: {},
       selectedCollections: new Set(),
+
+      // store relations from collection name to file name
+      collectionNameToFileNameMap: {},
+      // store relations from collection name to GrowiZipImportOption instance
       optionsMap: {},
 
+      isErrorsViewerOpen: false,
+      collectionNameForErrorsViewer: null,
+
       canImport: false,
       warnForPageGroups: [],
       warnForUserGroups: [],
@@ -62,6 +69,7 @@ class GrowiImportForm extends React.Component {
     this.checkAll = this.checkAll.bind(this);
     this.uncheckAll = this.uncheckAll.bind(this);
     this.updateOption = this.updateOption.bind(this);
+    this.showErrorsViewer = this.showErrorsViewer.bind(this);
     this.validate = this.validate.bind(this);
     this.import = this.import.bind(this);
   }
@@ -134,8 +142,8 @@ class GrowiImportForm extends React.Component {
     this.setState({ optionsMap: newOptionsMap });
   }
 
-  showErrorsModal(collectionName) {
-
+  showErrorsViewer(collectionName) {
+    this.setState({ isErrorsViewerOpen: true, collectionNameForErrorsViewer: collectionName });
   }
 
   async validate() {
@@ -357,7 +365,7 @@ class GrowiImportForm extends React.Component {
                 option={optionsMap[collectionName]}
                 onChange={this.toggleCheckbox}
                 onOptionChange={this.updateOption}
-                onErrorLinkClicked={this.showErrorsModal}
+                onErrorLinkClicked={this.showErrorsViewer}
               />
             </div>
           );
@@ -366,6 +374,18 @@ class GrowiImportForm extends React.Component {
     );
   }
 
+  renderErrorsViewer() {
+    const { isErrorsViewerOpen, errorsMap, collectionNameForErrorsViewer } = this.state;
+    const errors = errorsMap[collectionNameForErrorsViewer];
+
+    return (
+      <ErrorViewer
+        isOpen={isErrorsViewerOpen}
+        onClose={() => this.setState({ isErrorsViewerOpen: false })}
+        errors={errors}
+      />
+    );
+  }
 
   render() {
     const { t } = this.props;
@@ -399,6 +419,8 @@ class GrowiImportForm extends React.Component {
             { t('importer_management.import') }
           </button>
         </div>
+
+        { this.renderErrorsViewer() }
       </>
     );
   }

src/client/js/components/Admin/ImportData/GrowiZipImportItem.jsx

@@ -160,7 +160,7 @@ export default class GrowiZipImportItem extends React.Component {
       <div className="w-100 text-center">
         <span className="text-info"><strong>{insertedCount}</strong> Inserted</span>,&nbsp;
         <span className="text-success"><strong>{modifiedCount}</strong> Modified</span>,&nbsp;
-        <a className="text-danger" href="#" onClick={this.errorLinkClickedHandler}><u><strong>{errorsCount}</strong> Failed</u></a>
+        <a className="text-danger" role="button" onClick={this.errorLinkClickedHandler}><u><strong>{errorsCount}</strong> Failed</u></a>
       </div>
     );