Merge branch 'feat/article-area-renovation' into imprv/gw4065-create-component-for-trash-andNotFound

# Conflicts:
#	src/client/js/app.jsx

resource/locales/en_US/translation.json

@@ -448,7 +448,8 @@
     "check_configuration": "Check your configuration following <a href='https://docs.growi.org/guide/admin-cookbook/integrate-with-hackmd.html'>the manual</a>.",
     "not_initialized": "HackmdEditor component has not initialized",
     "someone_editing": "Someone editing this page on HackMD",
-    "this_page_has_draft": "This page has a draft on HackMD"
+    "this_page_has_draft": "This page has a draft on HackMD",
+    "need_to_associate_with_growi_to_use_hackmd_refer_to_this": "To use HackMD for simultaneous multi-person editing, need to associate HackMD with GROWI.Please refer to <a href='https://docs.growi.org/en/admin-guide/admin-cookbook/integrate-with-hackmd.html'>here</a>."
   },
   "slack_notification": {
     "popover_title": "Slack Notification",

resource/locales/ja_JP/translation.json

@@ -450,7 +450,8 @@
     "check_configuration": "<a href='https://docs.growi.org/ja/admin-guide/admin-cookbook/integrate-with-hackmd.html'>こちらのマニュアル</a>から設定を確認してください",
     "not_initialized": "HackMD コンポーネントは初期化されていません",
     "someone_editing": "このページは、HackMD で編集されています。",
-    "this_page_has_draft": "このページは、HackMD のドラフトがあります。"
+    "this_page_has_draft": "このページは、HackMD のドラフトがあります。",
+    "need_to_associate_with_growi_to_use_hackmd_refer_to_this": "HackMD を利用して同時多人数編集を行うには、HackMD と GROWI を連携する必要があります。<a href='https://docs.growi.org/ja/admin-guide/admin-cookbook/integrate-with-hackmd.html'>こちら</a>を参照してください。"
   },
   "slack_notification": {
     "popover_title": "Slack 通知",

resource/locales/zh_CN/translation.json

@@ -424,7 +424,8 @@
 		"check_configuration": "Check your configuration following <a href='https://docs.growi.org/guide/admin-cookbook/integrate-with-hackmd.html'>the manual</a>.",
 		"not_initialized": "HackmdEditor component has not initialized",
 		"someone_editing": "Someone editing this page on HackMD",
-		"this_page_has_draft": "This page has a draft on HackMD"
+    "this_page_has_draft": "This page has a draft on HackMD",
+    "need_to_associate_with_growi_to_use_hackmd_refer_to_this": "To use HackMD for simultaneous multi-person editing, need to associate HackMD with GROWI.Please refer to <a href='https://docs.growi.org/en/admin-guide/admin-cookbook/integrate-with-hackmd.html'>here</a>."
   },
   "slack_notification": {
     "popover_title": "Slack Notification",

src/client/js/app.jsx

@@ -18,6 +18,7 @@ import PageManagement from './components/Page/PageManagement';
 import CustomNavbar from './components/CustomNavbar';
 import TrashPage from './components/TrashPage';
 import TrashPageAlert from './components/Page/TrashPageAlert';
+import NotFoundAlert from './components/Page/NotFoundAlert';
 import PageStatusAlert from './components/PageStatusAlert';
 import RecentCreated from './components/RecentCreated/RecentCreated';
 import MyDraftList from './components/MyDraftList/MyDraftList';
@@ -79,6 +80,8 @@ Object.assign(componentMappings, {
 
   'trash-page': <TrashPage />,
 
+  'not-found-alert': <NotFoundAlert onPageCreateClicked={navigationContainer.setEditorMode} />,
+
   'page-timeline': <PageTimeline />,
 
   'personal-setting': <PersonalSettings crowi={personalContainer} />,

src/client/js/components/Page/NotFoundAlert.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const NotFoundAlert = (props) => {
+
+  function clickHandler(viewType) {
+    if (props.onPageCreateClicked === null) {
+      return;
+    }
+    props.onPageCreateClicked(viewType);
+  }
+
+  return (
+    <div className="grw-not-found-alert border m-4 p-4">
+      <div className="col-md-12">
+        <h2 className="text-muted not-found-text">
+          <i className="icon-info" aria-hidden="true"></i>
+          {/* Todo make the message supported by i18n GW4050 */ }
+          このページは存在しません。新たに作成する必要があります。
+        </h2>
+        <button
+          type="button"
+          className="m-2 p-2"
+          onClick={() => { clickHandler('edit') }}
+        >
+          <i className="icon-note icon-fw" />
+          {/* Todo make the message supported by i18n GW4050 */ }
+          ページを作成する
+        </button>
+      </div>
+    </div>
+  );
+};
+
+
+NotFoundAlert.propTypes = {
+  onPageCreateClicked: PropTypes.func,
+};
+
+
+export default NotFoundAlert;

src/client/js/components/PageEditorByHackmd.jsx

@@ -243,6 +243,8 @@ class PageEditorByHackmd extends React.Component {
       content = (
         <div>
           <p className="text-center hackmd-status-label"><i className="fa fa-file-text"></i> { t('hackmd.not_set_up')}</p>
+          {/* eslint-disable-next-line react/no-danger */}
+          <p dangerouslySetInnerHTML={{ __html: t('hackmd.need_to_associate_with_growi_to_use_hackmd_refer_to_this') }} />
         </div>
       );
     }

src/client/js/services/NavigationContainer.js

@@ -37,6 +37,7 @@ export default class NavigationContainer extends Container {
 
     this.openPageCreateModal = this.openPageCreateModal.bind(this);
     this.closePageCreateModal = this.closePageCreateModal.bind(this);
+    this.setEditorMode = this.setEditorMode.bind(this);
     this.initDeviceSize();
     this.initScrollEvent();
   }

src/server/views/widget/not_found_content.html

@@ -1,12 +1,3 @@
-<div class="row not-found-message-row mb-4 d-edit-none">
-  <div class="col-md-12">
-    <h2 class="text-muted">
-      <i class="icon-info" aria-hidden="true"></i>
-      Page is not found
-    </h2>
-  </div>
-</div>
-
 <div id="content-main" class="content-main page-list"
   data-path="{{ encodeURI(path) }}"
   data-current-user="{% if user %}{{ user._id.toString() }}{% endif %}"
@@ -15,6 +6,8 @@
   {% endif %}
   >
 
+  <div id="display-switcher"></div>
+  <div id="not-found-alert"></div>
   {% include 'not_found_tabs.html' %}
 
   <div class="tab-content">
@@ -49,13 +42,6 @@
       {% include '../widget/page_list.html' with { pages: pages, pager: pager, viewConfig: viewConfig } %}
     </div>
 
-    {# edit view #}
-    <div class="tab-pane" id="edit">
-      <div id="page-editor">{% if pageForm.body %}{{ pageForm.body }}{% endif %}</div>
-    </div>
-
-    <div id="page-editor-navbar-bottom-container" class="d-none d-edit-block"></div>
-
   </div>
 
   <div id="grw-page-status-alert-container"></div>

src/server/views/widget/not_found_tabs.html

@@ -1,20 +1,8 @@
-<ul class="nav nav-tabs d-print-none" role="tablist">
-  <li class="nav-item grw-nav-main-left-tab">
-    <a class="nav-link active" role="tab" href="#revision-body" data-toggle="tab">
-      <i class="icon-notebook"></i> List
-    </a>
-  </li>
+  <ul class="nav nav-tabs d-print-none" role="tablist">
+    <li class="nav-item grw-nav-main-left-tab">
+      <a class="nav-link active" role="tab" href="#revision-body" data-toggle="tab">
+        <i class="icon-notebook"></i> List
+      </a>
+    </li>
+  </ul>
 
-  {% if !isTrashPage() and !page.isDeleted() %}
-  <li class="nav-item grw-nav-main-left-tab">
-    <a
-      {% if user %} href="#edit" role="tab" data-toggle="tab" class="nav-link edit-button" {% endif %}
-      {% if not user %} class="nav-link edit-button edit-button-disabled" data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}" {% endif %}
-    >
-      <i class="icon-note"></i> {{ t('Create') }}
-    </a>
-  </li>
-
-  <div id="page-editor-path-nav" class="d-none d-edit-sm-block ml-2"></div>
-  {% endif %}
-</ul>