implemented the component of NotFoundAlert

src/client/js/app.jsx

@@ -16,6 +16,7 @@ import PageTimeline from './components/PageTimeline';
 import CommentEditorLazyRenderer from './components/PageComment/CommentEditorLazyRenderer';
 import PageManagement from './components/Page/PageManagement';
 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';
@@ -73,6 +74,8 @@ Object.assign(componentMappings, {
 
   'trash-page-alert': <TrashPageAlert />,
 
+  'not-found-alert': <NotFoundAlert />,
+
   'page-timeline': <PageTimeline />,
 
   'personal-setting': <PersonalSettings crowi={personalContainer} />,

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import NavigationContainer from '../../services/NavigationContainer';
+import { withUnstatedContainers } from '../UnstatedUtils';
+import Editor from '../PageEditor';
+import EditorNavbarBottom from '../PageEditor/EditorNavbarBottom';
+
+const NotFoundAlert = (props) => {
+  const { navigationContainer } = props;
+  const { editorMode } = navigationContainer.state;
+
+  function clickHandler() {
+    navigationContainer.setEditorMode('edit');
+  }
+
+  function renderNotFound() {
+    if (editorMode === 'view') {
+      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}
+            >
+              <i className="icon-note icon-fw" />
+              {/* Todo make the message supported by i18n GW4050 */ }
+              ページを作成する
+            </button>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div id="page-editor">
+        <Editor />
+        <EditorNavbarBottom />
+      </div>
+    );
+
+  }
+
+
+  return (
+    <div>
+      { renderNotFound() }
+    </div>
+  );
+};
+
+
+/**
+ * Wrapper component for using unstated
+ */
+const NotFoundAlertWrapper = withUnstatedContainers(NotFoundAlert, [NavigationContainer]);
+
+
+NotFoundAlert.propTypes = {
+  // t: PropTypes.func.isRequired, // i18next
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+};
+
+// export default withTranslation()(TrashPageAlertWrapper);
+
+export default NotFoundAlertWrapper;

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,7 @@
   {% endif %}
   >
 
+  <div id="not-found-alert"></div>
   {% include 'not_found_tabs.html' %}
 
   <div class="tab-content">
@@ -49,13 +41,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>