feat(fe/panel_files): enable endpoint for admin

public/static/css/white.css

@@ -493,6 +493,7 @@
 .theme-default .pane-title {
   color: black;
   font-size: 1.6rem;
+  line-height: 1.6rem;
 }
 
 .theme-default #pane-settings {

src/client/web/src/components/panel_files.tsx

@@ -755,6 +755,24 @@ export class FilesPanel extends React.Component<Props, State, {}> {
   };
 
   render() {
+    const showEndpoints =
+      this.props.login.userRole === roleAdmin ? "" : "hidden";
+    const gotoRoot = () => this.chdir(List(["/"]));
+    const endPoints = (
+      <div className={showEndpoints}>
+        <Container>
+          <h5 className="pane-title margin-r-m">{this.props.msg.pkg.get("endpoints")}</h5>
+          <div className="hr"></div>
+
+          <button onClick={gotoRoot} className="margin-r-m">
+            {this.props.msg.pkg.get("endpoints.root")}
+          </button>
+          <button onClick={this.goHome}>
+            {this.props.msg.pkg.get("endpoints.home")}
+          </button>
+        </Container>
+      </div>
+    );
     const shareModeClass =
       this.props.ui.control.controls.get(sharingCtrl) === ctrlOn
         ? "hidden"
@@ -771,7 +789,9 @@ export class FilesPanel extends React.Component<Props, State, {}> {
               }
               className="item clickable"
             >
-              <span className="content">{pathPart}</span>
+              <span className="content">
+                {pathPart === "/" ? "~" : pathPart}
+              </span>
             </a>
             <span className="item">
               <span className="content">{"/"}</span>
@@ -851,8 +871,11 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       this.props.ui.control.controls.get(filesViewCtrl) === "table"
         ? "cyan1-font"
         : "black-font";
+
     const itemListPane = (
       <div>
+        {endPoints}
+
         <div className={showOp}>
           <Container>{ops}</Container>
         </div>

src/client/web/src/i18n/en_US.ts

@@ -133,4 +133,7 @@ export const msgs: Map<string, string> = Map({
   "op.cancel": "Cancel",
   "term.time": "Time",
   "breadcrumb.loc": "Location",
+  "endpoints": "Endpoints",
+  "endpoints.root": "Root",
+  "endpoints.home": "Home",
 });

src/client/web/src/i18n/zh_CN.ts

@@ -130,4 +130,7 @@ export const msgs: Map<string, string> = Map({
   "op.cancel": "取消",
   "term.time": "时间",
   "breadcrumb.loc": "位置",
+  "endpoints": "端点",
+  "endpoints.root": "根",
+  "endpoints.home": "家",
 });