fix(fe/panel_files): add banner if the folder is empty

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

@@ -34,6 +34,7 @@ import {
 import { HotkeyHandler } from "../common/hotkeys";
 import { CronTable } from "../common/cron";
 import { Title } from "./visual/title";
+import { NotFoundBanner } from "./visual/banner_notfound";
 
 export interface Item {
   name: string;
@@ -772,10 +773,16 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       />
     );
     const viewType = this.props.ui.control.controls.get(filesViewCtrl);
-    const view = (
+    const view =
+      this.props.filesInfo.items.size > 0 ? (
+        <div>
+          {orderByButtons}
           <div className="margin-t-l">
             {this.prepareColumns(this.props.filesInfo.items, showOp)}
           </div>
+        </div>
+      ) : (
+        <NotFoundBanner title={this.props.msg.pkg.get("terms.nothingHere")} />
       ); // TODO: support better views in the future
 
     const usedSpace = FileSize(
@@ -925,7 +932,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
           />
 
           <div className="hr grey0-bg"></div>
-          {orderByButtons}
+
           {view}
         </Container>
       </div>

src/client/web/src/components/visual/banner_notfound.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { List } from "immutable";
 
-import { RiQuestionnaireFill } from "@react-icons/all-files/ri/RiQuestionnaireFill";
+import { RiFileList2Fill } from "@react-icons/all-files/ri/RiFileList2Fill";
 
 import { Flexbox } from "../layout/flexbox";
 
@@ -13,7 +13,7 @@ export const NotFoundBanner = (props: Props) => {
   return (
     <Flexbox
       children={List([
-        <RiQuestionnaireFill size="4rem" className="margin-r-m red0-font" />,
+        <RiFileList2Fill size="4rem" className="margin-r-m normal-font" />,
         <span>
           <h3 className="title-l">{props.title}</h3>
         </span>,

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

@@ -1,6 +1,7 @@
 import { Map } from "immutable";
 
 export const msgs: Map<string, string> = Map({
+  "terms.nothingHere": "There is nothing here",
   "stateMgr.cap.fail": "failed to get captcha id",
   "browser.upload.del.fail": "Failed to delete uploading item",
   "browser.folder.add.fail": "Folder name can not be empty",

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

@@ -2,6 +2,7 @@ import { Map } from "immutable";
 
 export const msgs: Map<string, string> = Map({
   "stateMgr.cap.fail": "获取captcha id失败",
+  "terms.nothingHere": "这里空空如也",
   "browser.upload.del.fail": "删除上传失败",
   "browser.folder.add.fail": "文件夹名不可为空",
   "browser.del.fail": "至少选择一个文件或文件夹",