show error message when connection to agent is failed

.prettierignore

@@ -1 +1,2 @@
+src/client/styles/bootstrap4/
 src/client/styles/scss/_override-bootstrap-variables.scss

src/client/js/components/PageEditorByHackmd/HackmdEditor.jsx

@@ -1,16 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import loggerFactory from '@alias/logger';
 
 import connectToChild from 'penpal/lib/connectToChild';
 
 const DEBUG_PENPAL = false;
 
+const logger = loggerFactory('growi:HackmdEditor');
+
 export default class HackmdEditor extends React.PureComponent {
 
   constructor(props) {
     super(props);
 
     this.state = {
+      hasPenpalError: true,
     };
 
     this.hackmd = null;
@@ -26,7 +30,7 @@ export default class HackmdEditor extends React.PureComponent {
     this.initHackmdWithPenpal();
   }
 
-  initHackmdWithPenpal() {
+  async initHackmdWithPenpal() {
     const _this = this; // for in methods scope
 
     const iframe = document.createElement('iframe');
@@ -43,14 +47,21 @@ export default class HackmdEditor extends React.PureComponent {
           _this.saveWithShortcutHandler(document);
         },
       },
+      timeout: 15000,
       debug: DEBUG_PENPAL,
     });
-    connection.promise.then((child) => {
+
+    try {
+      const child = await connection.promise;
       this.hackmd = child;
       if (this.props.initializationMarkdown != null) {
         child.setValueOnInit(this.props.initializationMarkdown);
       }
-    });
+    }
+    catch (err) {
+      logger.error(err);
+      this.setState({ hasPenpalError: true });
+    }
   }
 
   /**
@@ -80,8 +91,22 @@ export default class HackmdEditor extends React.PureComponent {
 
   render() {
     return (
-      // will be rendered in componentDidMount
-      <div id="iframe-hackmd-container" ref={(c) => { this.iframeContainer = c }}></div>
+      <div className="position-relative">
+        {/* will be rendered in componentDidMount */}
+        <div id="iframe-hackmd-container" ref={(c) => { this.iframeContainer = c }}></div>
+
+        { this.state.hasPenpalError && (
+          <div className="hackmd-error position-absolute d-flex flex-column justify-content-center align-items-center">
+            <div className="white-box text-center">
+              <h2 className="text-warning"><i className="icon-fw icon-exclamation"></i> HackMD Integration failed</h2>
+              <p>
+                GROWI system could not connect to GROWI agent for HackMD.<br />
+                Check your configuration following <a href="https://docs.growi.org/guide/admin-cookbook/integrate-with-hackmd.html">the manual</a>.
+              </p>
+            </div>
+          </div>
+        ) }
+      </div>
     );
   }
 

src/client/styles/bootstrap4/_utilities.scss

@@ -6,7 +6,7 @@
 // @import "utilities/embed";
 @import 'utilities/flex';
 // @import "utilities/float";
-// @import "utilities/position";
+@import 'utilities/position';
 // @import "utilities/screenreaders";
 // @import "utilities/shadows";
 // @import "utilities/sizing";

src/client/styles/bootstrap4/_variables.scss

@@ -606,8 +606,8 @@ $font-weight-bold: 700 !default;
 // // of components dependent on the z-axis and are designed to all work together.
 
 // $zindex-dropdown:                   1000 !default;
-// $zindex-sticky:                     1020 !default;
-// $zindex-fixed:                      1030 !default;
+$zindex-sticky:                     1020 !default;
+$zindex-fixed:                      1030 !default;
 // $zindex-modal-backdrop:             1040 !default;
 // $zindex-modal:                      1050 !default;
 // $zindex-popover:                    1060 !default;

src/client/styles/scss/_mixins.scss

@@ -73,6 +73,7 @@
       #page-editor-with-hackmd {
         &,
         .hackmd-preinit,
+        .hackmd-error,
         #iframe-hackmd-container > iframe {
           width: 100vw;
           height: calc(100vh - #{$header-plus-footer});

src/client/styles/scss/_on-edit.scss

@@ -267,6 +267,11 @@ body.on-edit {
       border: none;
     }
 
+    .hackmd-error {
+      top: 0;
+      background-color: rgba($gray-dark, 0.8);
+    }
+
     .hackmd-status-label {
       font-size: 3em;
       color: $muted;