implemented so that not found page will have a tab made of components

src/client/js/app.jsx

@@ -17,6 +17,7 @@ import CommentEditorLazyRenderer from './components/PageComment/CommentEditorLaz
 import PageManagement from './components/Page/PageManagement';
 import TrashPage from './components/TrashPage';
 import TrashPageAlert from './components/Page/TrashPageAlert';
+import NotFoundPage from './components/NotFoundPage';
 import NotFoundAlert from './components/Page/NotFoundAlert';
 import PageStatusAlert from './components/PageStatusAlert';
 import RecentCreated from './components/RecentCreated/RecentCreated';
@@ -77,6 +78,8 @@ Object.assign(componentMappings, {
 
   'trash-page': <TrashPage />,
 
+  'not-found-page': <NotFoundPage />,
+
   'not-found-alert': <NotFoundAlert onPageCreateClicked={navigationContainer.setEditorMode} />,
 
   'page-timeline': <PageTimeline />,

src/client/js/components/NotFoundPage.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import PageListIcon from './Icons/PageListIcon';
+import CustomNavigation from './CustomNavigation';
+import PageList from './PageList';
+
+
+const NotFoundPage = (props) => {
+  const { t } = props;
+
+  const navTabMapping = {
+    pagelist: {
+      icon: <PageListIcon />,
+      i18n: t('page_list'),
+      tabContent: <PageList />,
+      index: 0,
+    },
+  };
+
+  return (
+    <div className="grw-custom-navigation mt-5">
+      <CustomNavigation navTabMapping={navTabMapping} />
+    </div>
+  );
+};
+
+NotFoundPage.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+};
+
+export default withTranslation()(NotFoundPage);

src/client/js/components/TrashPage.jsx

@@ -19,7 +19,7 @@ const TrashPage = (props) => {
   };
 
   return (
-    <div className="grw-trash-page mt-5">
+    <div className="grw-custom-navigation mt-5">
       <CustomNavigation navTabMapping={navTabMapping} />
     </div>
   );

src/client/styles/scss/_navbar.scss

@@ -76,7 +76,7 @@
   }
 }
 
-.grw-trash-page {
+.grw-custom-navigation {
   .grw-nav-slide-hr {
     border-bottom: 2px solid;
     transition: 0.3s ease-in-out;

src/client/styles/scss/theme/_apply-colors.scss

@@ -288,7 +288,7 @@ pre:not(.hljs):not(.CodeMirror-line) {
   }
 }
 
-.grw-trash-page {
+.grw-custom-navigation {
   .nav-title {
     color: $color-link;
   }

src/server/views/widget/not_found_content.html

@@ -8,7 +8,7 @@
 
   <div id="display-switcher"></div>
   <div id="not-found-alert"></div>
-  {% include 'not_found_tabs.html' %}
+  <div id="not-found-page"></div>
 
   <div class="tab-content">
 
@@ -28,20 +28,6 @@
     {% endif %}
 
     {# TODO: should be removed and transplanted to PageContainer.initStateMarkdown ------ to here ------ #}
-
-
-
-    {# list view #}
-    <div class="pt-2 active tab-pane page-list-container" id="revision-body">
-      {% if pages.length == 0 %}
-        <div class="mt-2">
-          There are no pages under <strong>{{ path | preventXss }}</strong>.
-        </div>
-      {% endif  %}
-
-      {% include '../widget/page_list.html' with { pages: pages, pager: pager, viewConfig: viewConfig } %}
-    </div>
-
   </div>
 
   <div id="grw-page-status-alert-container"></div>

src/server/views/widget/not_found_tabs.html

@@ -1,8 +0,0 @@
-  <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>
-