Merge branch 'feat/article-area-renovation' into imprv/article-area-gw4101

resource/locales/en_US/translation.json

@@ -160,6 +160,9 @@
     "Create Page": "Create Page",
     "page_not_exist_alert": "This page does not exist. Please create a new page."
   },
+  "custom_navigation": {
+    "no_page_list": "There are no pages under <a href='{{path}}'><strong>{{ path }}</strong></a>."
+  },
   "installer": {
     "setup": "Setup",
     "create_initial_account": "Create an initial account",

resource/locales/ja_JP/translation.json

@@ -163,6 +163,9 @@
     "Create Page": "ページを作成する",
     "page_not_exist_alert": "このページは存在しません。新たに作成する必要があります。"
   },
+  "custom_navigation": {
+    "no_page_list": "<a href='{{path}}'><strong>{{ path }}</strong></a>の配下にはページが存在しません。"
+  },
   "installer": {
     "setup": "セットアップ",
     "create_initial_account": "最初のアカウントの作成",

resource/locales/zh_CN/translation.json

@@ -159,6 +159,9 @@
   "not_found_page": {
     "Create Page": "创建页面",
     "page_not_exist_alert": "该页面不存在，请创建一个新页面"
+  },
+  "custom_navigation": {
+    "no_page_list": "There are no pages under <a href='{{path}}'><strong>{{ path }}</strong></a>."
   },
 	"installer": {
 		"setup": "安装",

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/PageList.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
 
 import Page from './PageList/Page';
 import { withUnstatedContainers } from './UnstatedUtils';
@@ -11,7 +12,7 @@ import PaginationWrapper from './PaginationWrapper';
 
 
 const PageList = (props) => {
-  const { appContainer, pageContainer } = props;
+  const { appContainer, pageContainer, t } = props;
   const { path } = pageContainer.state;
   const [pages, setPages] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -56,6 +57,14 @@ const PageList = (props) => {
       <Page page={page} />
     </li>
   ));
+  if (pageList.length === 0) {
+    return (
+      <div className="mt-2">
+        {/* eslint-disable-next-line react/no-danger */}
+        <p dangerouslySetInnerHTML={{ __html: t('custom_navigation.no_page_list', { path }) }} />
+      </div>
+    );
+  }
 
   return (
     <div className="page-list-container-create">
@@ -77,10 +86,13 @@ const PageList = (props) => {
 
 const PageListWrapper = withUnstatedContainers(PageList, [AppContainer, PageContainer]);
 
+const PageListTranslation = withTranslation()(PageListWrapper);
+
 
 PageList.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer),
   pageContainer: PropTypes.instanceOf(PageContainer),
 };
 
-export default PageListWrapper;
+export default PageListTranslation;

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>
-