Add nav others (#6313)

frontend/src/components/dir-view-mode/dir-column-nav.css

@@ -0,0 +1,20 @@
+.dir-content-nav .tree-section:first-child {
+  margin-top: 12px;
+}
+
+.dir-content-nav .tree-section:last-child {
+  margin-bottom: 28px;
+}
+
+.dir-others .tree-node-inner:hover {
+  background-color: #f0f0f0;
+  border-radius: 0.25rem;
+}
+
+.dir-others .tree-node-inner .tree-node-text {
+  padding-left: 2rem;
+}
+
+.dir-others .tree-node-inner .left-icon {
+  padding-left: 10px;
+}

frontend/src/components/dir-view-mode/dir-column-nav.js

@@ -14,6 +14,9 @@ import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import TreeSection from '../../components/tree-section';
 import DirViews from './dir-views';
+import DirOthers from './dir-others';
+
+import './dir-column-nav.css';
 
 const propTypes = {
   currentPath: PropTypes.string.isRequired,
@@ -268,7 +271,17 @@ class DirColumnNav extends React.Component {
             repoID={this.props.repoID}
           />
         </TreeSection>
-        <DirViews repoID={this.props.repoID} currentPath={this.props.currentPath} userPerm={this.props.userPerm} onNodeClick={this.onNodeClick}/>
+        <DirViews
+          repoID={this.props.repoID}
+          currentPath={this.props.currentPath}
+          userPerm={this.props.userPerm}
+          onNodeClick={this.onNodeClick}
+        />
+        <DirOthers
+          repoID={this.props.repoID}
+          currentPath={this.props.currentPath}
+          userPerm={this.props.userPerm}
+        />
       </>
     );
   };

frontend/src/components/dir-view-mode/dir-others.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext, siteRoot } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import TreeSection from '../tree-section';
+
+const DirOthers = ({ userPerm, repoID, currentPath }) => {
+
+  let trashUrl = null;
+  let historyUrl = null;
+  if (userPerm === 'rw' && !Utils.isMarkdownFile(currentPath)) {
+    if (Utils.getFileName(currentPath)) {
+      trashUrl = siteRoot + 'repo/' + repoID + '/trash/?path=' + encodeURIComponent(currentPath);
+    } else {
+      trashUrl = siteRoot + 'repo/' + repoID + '/trash/';
+      historyUrl = siteRoot + 'repo/history/' + repoID + '/';
+    }
+  }
+
+  return (
+    <TreeSection title={gettext('Others')} className="dir-others">
+      {trashUrl &&
+        <div className='tree-node-inner text-nowrap' title={gettext('Trash')} onClick={() => location.href = trashUrl}>
+          <div className="tree-node-text">{gettext('Trash')}</div>
+          <div className="left-icon">
+            <div className="tree-node-icon">
+              <span className="sf3-font-recycle1 sf3-font"></span>
+            </div>
+          </div>
+        </div>
+      }
+      {historyUrl &&
+        <div className='tree-node-inner text-nowrap' title={gettext('History')} onClick={() => location.href = historyUrl}>
+          <div className="tree-node-text">{gettext('History')}</div>
+          <div className="left-icon">
+            <div className="tree-node-icon">
+              <span className="sf3-font-history sf3-font"></span>
+            </div>
+          </div>
+        </div>
+      }
+    </TreeSection>
+  );
+};
+
+DirOthers.propTypes = {
+  userPerm: PropTypes.string,
+  repoID: PropTypes.string,
+  currentPath: PropTypes.string,
+};
+
+export default DirOthers;

frontend/src/components/dir-view-mode/dir-views.js

@@ -1,13 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { gettext } from '../../../utils/constants';
-import { Utils } from '../../../utils/utils';
-import TreeSection from '../../tree-section';
-import { MetadataStatusManagementDialog, MetadataTreeView } from '../../../metadata';
-import metadataAPI from '../../../metadata/api';
-import toaster from '../../toast';
-
-import './index.css';
+import { gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import TreeSection from '../tree-section';
+import { MetadataStatusManagementDialog, MetadataTreeView } from '../../metadata';
+import metadataAPI from '../../metadata/api';
+import toaster from '../toast';
 
 const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => {
   const enableMetadataManagement = useMemo(() => {
@@ -63,11 +61,21 @@ const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => {
 
   return (
     <>
-      <TreeSection title={gettext('Views')} moreKey={{ name: 'views' }} moreOperations={moreOperations} moreOperationClick={moreOperationClick}>
+      <TreeSection
+        title={gettext('Views')}
+        moreKey={{ name: 'views' }}
+        moreOperations={moreOperations}
+        moreOperationClick={moreOperationClick}
+      >
         {!loading && metadataStatus && (<MetadataTreeView repoID={repoID} currentPath={currentPath} onNodeClick={onNodeClick} />)}
       </TreeSection>
       {showMetadataStatusManagementDialog && (
-        <MetadataStatusManagementDialog value={metadataStatus} repoID={repoID} toggle={closeMetadataManagementDialog} submit={toggleMetadataStatus} />
+        <MetadataStatusManagementDialog
+          value={metadataStatus}
+          repoID={repoID}
+          toggle={closeMetadataManagementDialog}
+          submit={toggleMetadataStatus}
+        />
       )}
     </>
   );

frontend/src/components/dir-view-mode/dir-views/index.css

@@ -1,7 +0,0 @@
-.dir-content-nav .tree-section:first-child {
-  margin-top: 12px;
-}
-
-.dir-content-nav .tree-section:last-child {
-  margin-bottom: 28px;
-}