Update recently used view (#6487)

* improve recently used item list ui

* update view in recently used from repo list to folder list

frontend/src/components/file-chooser/file-chooser.js

@@ -7,6 +7,7 @@ import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import RepoInfo from '../../models/repo-info';
 import RepoListView from './repo-list-view';
+import RecentlyUsedListView from './recently-used-list-view';
 import Loading from '../loading';
 import SearchedListView from './searched-list-view';
 
@@ -416,7 +417,7 @@ class FileChooser extends React.Component {
   renderRepoListView = () => {
     const { mode, currentPath, isShowFile, fileSuffixes } = this.props;
     const { isCurrentRepoShow, isOtherRepoShow, currentRepoInfo, repoList, selectedRepo, selectedPath, selectedItemInfo } = this.state;
-    const recentlyUsedRepos = JSON.parse(localStorage.getItem('recently-used-repos')) || [];
+    const recentlyUsedList = JSON.parse(localStorage.getItem('recently-used-list')) || [];
 
     return (
       <div className='scroll-wrapper' onScroll={this.onScroll}>
@@ -520,16 +521,10 @@ class FileChooser extends React.Component {
           )}
           {mode === 'recently_used' && (
             <div className="list-view">
-              <RepoListView
-                initToShowChildren={false}
-                repoList={recentlyUsedRepos}
+              <RecentlyUsedListView
+                recentlyUsedList={recentlyUsedList}
                 selectedRepo={selectedRepo}
-                selectedPath={selectedPath}
-                onRepoItemClick={this.onRepoItemClick}
                 onDirentItemClick={this.onDirentItemClick}
-                isShowFile={isShowFile}
-                fileSuffixes={fileSuffixes}
-                selectedItemInfo={selectedItemInfo}
               />
             </div>
           )}

frontend/src/components/file-chooser/recently-used-list-item.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const RecentlyUsedListItem = ({ path, isSelected, onItemClick }) => {
+  const title = path.split('/').pop();
+
+  const handleItemClick = () => {
+    onItemClick(path);
+  };
+
+  return (
+    <li>
+      <div className={`${isSelected ? 'item-active' : ''} item-info recently-used`} onClick={handleItemClick}>
+        <div className="item-left-icon">
+          <i className="tree-node-icon">
+            <span className="icon sf3-font sf3-font-folder tree-node-icon"></span>
+          </i>
+        </div>
+        <div className="item-text">
+          <span className="name user-select-none ellipsis" title={title}>{title}</span>
+        </div>
+      </div>
+    </li>
+  );
+};
+
+export default RecentlyUsedListItem;

frontend/src/components/file-chooser/recently-used-list-view.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import RecentlyUsedListItem from './recently-used-list-item';
+
+const RecentlyUsedListView = ({ recentlyUsedList, selectedRepo, onDirentItemClick }) => {
+  const [selectedItem, setSelectedItem] = useState(null);
+
+  const onItemClick = (path) => {
+    setSelectedItem(path);
+    onDirentItemClick(selectedRepo, path);
+  };
+
+  return (
+    <ul className="list-view-content file-chooser-item" >
+      {recentlyUsedList.length > 0 && recentlyUsedList.map((path, index) => {
+        return (
+          <RecentlyUsedListItem
+            key={index}
+            path={path}
+            isSelected={selectedItem === path}
+            onItemClick={onItemClick}
+          />
+        );
+      })}
+    </ul>
+  );
+};
+
+export default RecentlyUsedListView;