show path (#6747)

* show path

* [repo trash dialog] improved 'current path'

* update

---------

Co-authored-by: 孙永强 <11704063+s-yongqiang@user.noreply.gitee.com>
Co-authored-by: llj <lingjun.li1@gmail.com>

frontend/src/components/dialog/trash-dialog.js

@@ -141,6 +141,43 @@ class TrashDialog extends React.Component {
     });
   };
 
+
+  clickFolderPath = (folderPath, e) => {
+    e.preventDefault();
+    const { commitID, baseDir } = this.state;
+    this.renderFolder(commitID, baseDir, folderPath);
+  };
+
+  clickRoot = (e) => {
+    e.preventDefault();
+    this.refreshTrash2();
+  };
+
+  renderFolderPath = () => {
+    const pathList = this.state.folderPath.split('/');
+    const repoFolderName = this.props.currentRepoInfo.repo_name;
+
+    return (
+      <React.Fragment>
+        <a href="#" onClick={this.clickRoot} className="path-item" title={repoFolderName}>{repoFolderName}</a>
+        <span className="path-split">/</span>
+        {pathList.map((item, index) => {
+          if (index > 0 && index != pathList.length - 1) {
+            return (
+              <React.Fragment key={index}>
+                <a className="path-item" href="#" onClick={this.clickFolderPath.bind(this, pathList.slice(0, index + 1).join('/'))} title={pathList[index]}>{pathList[index]}</a>
+                <span className="path-split">/</span>
+              </React.Fragment>
+            );
+          }
+          return null;
+        }
+        )}
+        <span className="last-path-item" title={pathList[pathList.length - 1]}>{pathList[pathList.length - 1]}</span>
+      </React.Fragment>
+    );
+  };
+
   render() {
     const { showTrashDialog, toggleTrashDialog } = this.props;
     const { isCleanTrashDialogOpen, showFolder, isLoading, items } = this.state;
@@ -171,6 +208,14 @@ class TrashDialog extends React.Component {
             <EmptyTip text={gettext('No file')} className="m-0" />
           }
           {!isLoading && items.length > 0 &&
+            <div>
+              <div className="path-container dir-view-path mb-2">
+                <span className="path-label mr-1">{gettext('Current path: ')}</span>
+                {showFolder ?
+                  this.renderFolderPath() :
+                  <span className="last-path-item" title={repoFolderName}>{repoFolderName}</span>
+                }
+              </div>
               <Content
                 data={this.state}
                 repoID={this.props.repoID}
@@ -182,6 +227,7 @@ class TrashDialog extends React.Component {
                 getListByPage={this.getItems2}
                 resetPerPage={this.resetPerPage}
               />
+            </div>
           }
           {isCleanTrashDialogOpen &&
           <ModalPortal>

frontend/src/css/lib-content-view.css

@@ -238,7 +238,12 @@
   padding-left: 4px;
 }
 
-.dir-view-path .path-item {
+.dir-view-path .path-label {
+  color: #666;
+}
+
+.dir-view-path .path-item,
+.dir-view-path .last-path-item {
   display: inline-block;
   min-width: 0; /* overwrite some styles */
   padding: 0 6px;