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,17 +208,26 @@ class TrashDialog extends React.Component {
             <EmptyTip text={gettext('No file')} className="m-0" />
           }
           {!isLoading && items.length > 0 &&
-          <Content
+            <div>
-            data={this.state}
+              <div className="path-container dir-view-path mb-2">
-            repoID={this.props.repoID}
+                <span className="path-label mr-1">{gettext('Current path: ')}</span>
-            getMore={this.getMore}
+                {showFolder ?
-            currentPage={this.state.currentPage}
+                  this.renderFolderPath() :
-            curPerPage={this.state.perPage}
+                  <span className="last-path-item" title={repoFolderName}>{repoFolderName}</span>
-            hasNextPage={this.state.hasNextPage}
+                }
-            renderFolder={this.renderFolder}
+              </div>
-            getListByPage={this.getItems2}
+              <Content
-            resetPerPage={this.resetPerPage}
+                data={this.state}
-          />
+                repoID={this.props.repoID}
+                getMore={this.getMore}
+                currentPage={this.state.currentPage}
+                curPerPage={this.state.perPage}
+                hasNextPage={this.state.hasNextPage}
+                renderFolder={this.renderFolder}
+                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;