add context menu for libraries list (#6909)

* add context menu for libraries list

* support context menu on grid mode

* optimize code

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -32,7 +32,8 @@ const propTypes = {
   onItemUnshare: PropTypes.func.isRequired,
   onItemRename: PropTypes.func,
   onItemDelete: PropTypes.func,
-  onMonitorRepo: PropTypes.func
+  onMonitorRepo: PropTypes.func,
+  onContextMenu: PropTypes.func.isRequired,
 };
 
 class SharedRepoListItem extends React.Component {
@@ -157,7 +158,7 @@ class SharedRepoListItem extends React.Component {
   };
 
   onMenuItemClick = (e) => {
-    let operation = e.target.dataset.toggle;
+    let operation = e.target.dataset.toggle || e.target.dataset.operation;
     switch (operation) {
       case 'Rename':
         this.onItemRenameToggle();
@@ -616,6 +617,10 @@ class SharedRepoListItem extends React.Component {
     }
   };
 
+  handleContextMenu = (e) => {
+    this.props.onContextMenu(e, this.props.repo);
+  };
+
   renderPCUI = () => {
     const { isStarred } = this.state;
     let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
@@ -627,6 +632,7 @@ class SharedRepoListItem extends React.Component {
         onMouseOver={this.onMouseOver}
         onMouseLeave={this.onMouseLeave}
         onFocus={this.onMouseEnter}
+        onContextMenu={this.handleContextMenu}
       >
         <td className="text-center">
           <i
@@ -659,6 +665,7 @@ class SharedRepoListItem extends React.Component {
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}
         onFocus={this.onMouseEnter}
+        onContextMenu={this.handleContextMenu}
       >
         <div className="d-flex align-items-center text-truncate">
           <img src={iconUrl} title={iconTitle} alt={iconTitle} width="36" className="mr-2" />

frontend/src/components/shared-repo-list-view/shared-repo-list-view.js

@@ -7,6 +7,8 @@ import toaster from '../toast';
 import LibsMobileThead from '../libs-mobile-thead';
 import Loading from '../loading';
 import { LIST_MODE } from '../dir-view-mode/constants';
+import ContextMenu from '../context-menu/context-menu';
+import { hideMenu, handleContextClick } from '../context-menu/actions';
 
 const propTypes = {
   currentViewMode: PropTypes.string,
@@ -33,6 +35,7 @@ class SharedRepoListView extends React.Component {
     this.state = {
       isItemFreezed: false,
     };
+    this.repoItems = [];
   }
 
   sortByName = (e) => {
@@ -86,13 +89,41 @@ class SharedRepoListView extends React.Component {
     this.props.onItemRename(repo, newName);
   };
 
+  setRepoItemRef = (index) => item => {
+    this.repoItems[index] = item;
+  };
+
+  getRepoIndex = (repo) => {
+    return this.props.repoList.findIndex(item => {
+      return item.repo_id === repo.repo_id;
+    });
+  };
+
+  onMenuItemClick = (operation, currentObject, event) => {
+    const index = this.getRepoIndex(currentObject);
+    if (this.repoItems[index]) {
+      this.repoItems[index].onMenuItemClick(event);
+    }
+    hideMenu();
+  };
+
+  onContextMenu = (event, repo) => {
+    event.preventDefault();
+    const { libraryType, currentGroup } = this.props;
+    const isPublic = libraryType === 'public';
+    const id = isPublic ? 'shared-repo-item-menu' : `shared-repo-item-menu-${currentGroup.id}`;
+    const menuList = Utils.getSharedRepoOperationList(repo, currentGroup, isPublic);
+    handleContextClick(event, id, menuList, repo);
+  };
+
   renderRepoListView = () => {
     const { currentViewMode = LIST_MODE } = this.props;
     return (
       <Fragment>
-        {this.props.repoList.map(repo => {
+        {this.props.repoList.map((repo, index) => {
           return (
             <SharedRepoListItem
+              ref={this.setRepoItemRef(index)}
               key={repo.repo_id}
               repo={repo}
               libraryType={this.props.libraryType}
@@ -105,6 +136,7 @@ class SharedRepoListView extends React.Component {
               onItemRename={this.props.onItemRename}
               onMonitorRepo={this.props.onMonitorRepo}
               currentViewMode={currentViewMode}
+              onContextMenu={this.onContextMenu}
             />
           );
         })}
@@ -113,31 +145,43 @@ class SharedRepoListView extends React.Component {
   };
 
   renderPCUI = () => {
-    const { theadHidden = false, currentViewMode = LIST_MODE } = this.props;
+    const { theadHidden = false, currentViewMode = LIST_MODE, currentGroup, libraryType } = this.props;
     const { sortByName, sortByTime, sortBySize, sortIcon } = this.getSortMetaData();
 
-    return currentViewMode == LIST_MODE ? (
-      <table className={theadHidden ? 'table-thead-hidden' : ''}>
-        <thead>
-          <tr>
-            <th width="4%"></th>
-            <th width="3%"><span className="sr-only">{gettext('Library Type')}</span></th>
-            <th width="35%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
-            <th width="10%"><span className="sr-only">{gettext('Actions')}</span></th>
-            <th width="14%"><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
-            <th width="17%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
-            <th width="17%">{gettext('Owner')}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {this.renderRepoListView()}
-        </tbody>
-      </table>
+    const content = currentViewMode == LIST_MODE ? (
+      <>
+        <table className={theadHidden ? 'table-thead-hidden' : ''}>
+          <thead>
+            <tr>
+              <th width="4%"></th>
+              <th width="3%"><span className="sr-only">{gettext('Library Type')}</span></th>
+              <th width="35%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
+              <th width="10%"><span className="sr-only">{gettext('Actions')}</span></th>
+              <th width="14%"><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
+              <th width="17%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
+              <th width="17%">{gettext('Owner')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {this.renderRepoListView()}
+          </tbody>
+        </table>
+      </>
     ) : (
       <div className="d-flex justify-content-between flex-wrap">
         {this.renderRepoListView()}
       </div>
     );
+
+    return (
+      <>
+        {content}
+        <ContextMenu
+          id={`${libraryType === 'public' ? 'shared-repo-item-menu' : `shared-repo-item-menu-${currentGroup.id}`}`}
+          onMenuItemClick={this.onMenuItemClick}
+        />;
+      </>
+    );
   };
 
   renderMobileUI = () => {