Merge pull request #1164 from weseek/imprv/revision-path-in-trash

Imprv/revision path in trash

resource/locales/en-US/translation.json

@@ -8,6 +8,7 @@
   "Click to copy": "Click to copy",
   "Move/Rename": "Move/Rename",
   "Moved": "Moved",
+  "Redirected": "Redirected",
   "Unlinked": "Unlinked",
   "Like!": "Like!",
   "Seen by": "Seen by",
@@ -242,13 +243,14 @@
   },
 
   "page_page": {
-      "notice": {
-          "version": "This is not the current version.",
-          "moved": "This page was moved from <code>%s</code>",
-          "duplicated": "This page was duplicated from <code>%s</code>",
-          "unlinked": "Redirect pages to this page have been deleted.",
-          "restricted": "Access to this page is restricted"
-      }
+    "notice": {
+      "version": "This is not the current version.",
+      "moved": "This page was moved from <code>%s</code>",
+      "redirected": "You are redirected from <code>%s</code>",
+      "duplicated": "This page was duplicated from <code>%s</code>",
+      "unlinked": "Redirect pages to this page have been deleted.",
+      "restricted": "Access to this page is restricted"
+    }
   },
 
   "page_edit": {

resource/locales/ja/translation.json

@@ -8,6 +8,7 @@
   "Click to copy": "クリックでコピー",
   "Move/Rename": "移動/名前変更",
   "Moved": "移動しました",
+  "Redirected": "リダイレクトされました",
   "Unlinked": "リダイレクト削除",
   "Like!": "いいね！",
   "Seen by": "見た人",
@@ -240,13 +241,14 @@
   },
 
   "page_page": {
-      "notice": {
-          "version": "これは現在の版ではありません。",
-          "moved": "このページは <code>%s</code> から移動しました。",
-          "duplicated": "このページは <code>%s</code> から複製されました。",
-          "unlinked": "このページへのリダイレクトは削除されました。",
-          "restricted": "このページの閲覧は制限されています"
-      }
+    "notice": {
+      "version": "これは現在の版ではありません。",
+      "moved": "このページは <code>%s</code> から移動しました。",
+      "redirected": "リダイレクト元 >> <code>%s</code>",
+      "duplicated": "このページは <code>%s</code> から複製されました。",
+      "unlinked": "このページへのリダイレクトは削除されました。",
+      "restricted": "このページの閲覧は制限されています"
+    }
   },
 
   "page_edit": {

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

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
+import urljoin from 'url-join';
+
 import CopyDropdown from './CopyDropdown';
 
 class RevisionPath extends React.Component {
@@ -14,6 +16,7 @@ class RevisionPath extends React.Component {
       pages: [],
       isListPage: false,
       isLinkToListPage: true,
+      isInTrash: false,
     };
 
     // retrieve xss library from window
@@ -30,6 +33,23 @@ class RevisionPath extends React.Component {
     const isLinkToListPage = (behaviorType === 'crowi');
     this.setState({ isLinkToListPage });
 
+    this.generateHierarchyData();
+  }
+
+  /**
+   * 1. split `pagePath` with '/'
+   * 2. list hierararchical page paths
+   *
+   * e.g.
+   *  when `pagePath` is '/foo/bar/baz`
+   *  return:
+   *  [
+   *    { pagePath: '/foo',         pageName: 'foo' },
+   *    { pagePath: '/foo/bar',     pageName: 'bar' },
+   *    { pagePath: '/foo/bar/baz', pageName: 'baz' },
+   *  ]
+   */
+  generateHierarchyData() {
     // generate pages obj
     const splitted = this.props.pagePath.split(/\//);
     splitted.shift(); // omit first element with shift()
@@ -38,13 +58,19 @@ class RevisionPath extends React.Component {
     }
 
     const pages = [];
-    let parentPath = '/';
+    const pagePaths = [];
     splitted.forEach((pageName) => {
+      // skip trash
+      if (pageName === 'trash' && splitted.length > 1) {
+        this.setState({ isInTrash: true });
+        return;
+      }
+
+      pagePaths.push(encodeURIComponent(pageName));
       pages.push({
-        pagePath: parentPath + encodeURIComponent(pageName),
+        pagePath: urljoin('/', ...pagePaths),
         pageName: this.xss.process(pageName),
       });
-      parentPath += `${pageName}/`;
     });
 
     this.setState({ pages });
@@ -86,6 +112,7 @@ class RevisionPath extends React.Component {
       padding: '0 2px',
     };
 
+    const { isInTrash } = this.state;
     const pageLength = this.state.pages.length;
 
     const afterElements = [];
@@ -109,7 +136,12 @@ class RevisionPath extends React.Component {
 
     return (
       <span className="d-flex align-items-center">
-        <span className="separator" style={rootStyle}>
+        { isInTrash && (
+          <span className="path-segment">
+            <a href="/trash"><i className="icon-trash"></i></a>
+          </span>
+        ) }
+        <span className="separator" style={isInTrash ? separatorStyle : rootStyle}>
           <a href="/">/</a>
         </span>
         {afterElements}

src/server/views/widget/page_alerts.html

@@ -13,35 +13,18 @@
       </p>
     {% endif %}
 
-    {% if isTrashPage() %}
-    <div class="alert alert-warning alert-trash d-flex align-items-center justify-content-between">
-      <div>
-        <i class="icon-trash" aria-hidden="true"></i>
-        This page is in the trash.
-        {% if page.isDeleted() %}
-        <br>Deleted by <img src="{{ page.lastUpdateUser|picture }}" class="picture picture-sm img-circle"> {{ page.lastUpdateUser.name }} at {{ page.updatedAt|datetz('Y-m-d H:i:s') }}
-        {% endif %}
-      </div>
-      {% if page.isDeleted() and user %}
-      <ul class="list-inline">
-        <li>
-          <button href="#" class="btn btn-default btn-rounded btn-sm" data-target="#putBackPage" data-toggle="modal"><i class="icon-action-undo" aria-hidden="true"></i> {{ t('Put Back') }}</button>
-        </li>
-        <li>
-            <button href="#" class="btn btn-danger btn-rounded btn-sm" {% if !user.canDeleteCompletely(page.creator._id) %} disabled="disabled" {% endif %} data-target="#deletePage" data-toggle="modal"><i class="icon-fire" aria-hidden="true"></i> {{ t('Delete Completely') }}</button>
-        </li>
-      </ul>{# /.pull-right #}
-      {% endif %}
-    </div>
-    {% endif %}
-
-    {% if not page.isDeleted() and (redirectFrom or req.query.renamed or req.query.redirectFrom) %}
+    {% if redirectFrom or req.query.renamed or req.query.redirectFrom %}
     <div class="alert alert-info alert-moved d-flex align-items-center justify-content-between">
       <span>
         {% set fromPath = req.query.renamed or req.query.redirectFrom %}
-        <strong>{{ t('Moved') }}: </strong> {{ t('page_page.notice.moved', req.sanitize(fromPath)) }}
+        {% if redirectFrom or req.query.redirectFrom %}
+          <strong>{{ t('Redirected') }}:</strong> {{ t('page_page.notice.redirected', req.sanitize(fromPath)) }}
+        {% endif %}
+        {% if req.query.renamed %}
+          <strong>{{ t('Moved') }}:</strong> {{ t('page_page.notice.moved', req.sanitize(fromPath)) }}
+        {% endif %}
       </span>
-      {% if user %}
+      {% if user and not page.isDeleted() %}
       <form role="form" id="unlink-page-form" onsubmit="return false;">
         <input type="hidden" name="_csrf" value="{{ csrf() }}">
         <input type="hidden" name="path" value="{{ path }}">
@@ -81,5 +64,26 @@
       {{ dmessage }}
     </div>
     {% endif %}
+
+    {% if isTrashPage() %}
+    <div class="alert alert-warning alert-trash d-flex align-items-center justify-content-between">
+      <div>
+        This page is in the trash <i class="icon-trash" aria-hidden="true"></i>.
+        {% if page.isDeleted() %}
+        <br>Deleted by <img src="{{ page.lastUpdateUser|picture }}" class="picture picture-sm img-circle"> {{ page.lastUpdateUser.name }} at {{ page.updatedAt|datetz('Y-m-d H:i:s') }}
+        {% endif %}
+      </div>
+      {% if page.isDeleted() and user %}
+      <ul class="list-inline">
+        <li>
+          <button href="#" class="btn btn-default btn-rounded btn-sm" data-target="#putBackPage" data-toggle="modal"><i class="icon-action-undo" aria-hidden="true"></i> {{ t('Put Back') }}</button>
+        </li>
+        <li>
+            <button href="#" class="btn btn-danger btn-rounded btn-sm" {% if !user.canDeleteCompletely(page.creator._id) %} disabled="disabled" {% endif %} data-target="#deletePage" data-toggle="modal"><i class="icon-fire" aria-hidden="true"></i> {{ t('Delete Completely') }}</button>
+        </li>
+      </ul>{# /.pull-right #}
+      {% endif %}
+    </div>
+    {% endif %}
   </div>
 </div>