Fix department group no repo style (#7035)

* fix department group no repo

* Revert "add new repo in my-libraries-view and group-view"

This reverts commit b75d772424.

frontend/src/pages/groups/group-view.js

@@ -20,7 +20,6 @@ import LeaveGroupDialog from '../../components/dialog/leave-group-dialog';
 import SharedRepoListView from '../../components/shared-repo-list-view/shared-repo-list-view';
 import SortOptionsDialog from '../../components/dialog/sort-options';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
-import NewLibrary from '../my-libs/new-library';
 
 import '../../css/group-view.css';
 
@@ -145,8 +144,7 @@ class GroupView extends React.Component {
           return (
             <EmptyTip
               title={gettext('No libraries')}
-              text={gettext('You can create libraries by clicking the "New Library" button above.')}
+              text={gettext('You can create libraries by clicking the "New Library" button in the menu bar.')}
-              className="m-0 pt-0 pb-8"
             />
           );
         }
@@ -389,7 +387,7 @@ class GroupView extends React.Component {
   };
 
   render() {
-    const { errMessage, emptyTip, currentGroup, isDepartmentGroup, isMembersDialogOpen, isStaff } = this.state;
+    const { errMessage, emptyTip, currentGroup, isDepartmentGroup, isMembersDialogOpen } = this.state;
 
     let useRate = 0;
     if (isDepartmentGroup && currentGroup.group_quota) {
@@ -443,24 +441,19 @@ class GroupView extends React.Component {
               {(!this.state.isLoading && errMessage) && <div className="error text-center mt-2">{errMessage}</div>}
               {(!this.state.isLoading && this.state.repoList.length === 0) && emptyTip}
               {(!this.state.isLoading && this.state.repoList.length > 0) &&
-                <>
+                <SharedRepoListView
-                  <SharedRepoListView
+                  repoList={this.state.repoList}
-                    repoList={this.state.repoList}
+                  hasNextPage={this.state.hasNextPage}
-                    hasNextPage={this.state.hasNextPage}
+                  currentGroup={this.state.currentGroup}
-                    currentGroup={this.state.currentGroup}
+                  sortBy={this.state.sortBy}
-                    sortBy={this.state.sortBy}
+                  sortOrder={this.state.sortOrder}
-                    sortOrder={this.state.sortOrder}
+                  sortItems={this.sortItems}
-                    sortItems={this.sortItems}
+                  onItemUnshare={this.onItemUnshare}
-                    onItemUnshare={this.onItemUnshare}
+                  onItemDelete={this.onItemDelete}
-                    onItemDelete={this.onItemDelete}
+                  onItemRename={this.onItemRename}
-                    onItemRename={this.onItemRename}
+                  onMonitorRepo={this.onMonitorRepo}
-                    onMonitorRepo={this.onMonitorRepo}
+                  onTransferRepo={this.onItemTransfer}
-                    onTransferRepo={this.onItemTransfer}
+                />
-                  />
-                  {((!isDepartmentGroup && canAddRepo) || (isDepartmentGroup && isStaff)) &&
-                    <NewLibrary onClick={this.onCreateRepoToggle} />
-                  }
-                </>
               }
             </div>
           </div>

frontend/src/pages/my-libs/my-libs.js

@@ -168,7 +168,6 @@ class MyLibraries extends Component {
                   onTransferRepo={this.onTransferRepo}
                   onMonitorRepo={this.onMonitorRepo}
                   sortRepoList={this.sortRepoList}
-                  toggleCreateRepoDialog={this.toggleCreateRepoDialog}
                 />
               }
             </div>

frontend/src/pages/my-libs/mylib-repo-list-view.js

@@ -8,7 +8,6 @@ import { LIST_MODE } from '../../components/dir-view-mode/constants';
 import ContextMenu from '../../components/context-menu/context-menu';
 import { Utils } from '../../utils/utils';
 import { hideMenu, handleContextClick } from '../../components/context-menu/actions';
-import NewLibrary from './new-library';
 
 const propTypes = {
   sortBy: PropTypes.string.isRequired,
@@ -117,41 +116,22 @@ class MylibRepoListView extends React.Component {
     const sortIcon = this.props.sortOrder === 'asc' ? <span className="sf3-font sf3-font-down rotate-180 d-inline-block"></span> : <span className="sf3-font sf3-font-down"></span>;
 
     return currentViewMode == LIST_MODE ? (
-      <>
+      <table className={inAllLibs ? 'table-thead-hidden' : ''}>
-        <table className={inAllLibs ? 'table-thead-hidden' : ''}>
+        <thead>
-          <thead>
+          <tr>
-            <tr>
+            <th width="4%"></th>
-              <th width="4%"></th>
+            <th width="3%"><span className="sr-only">{gettext('Library Type')}</span></th>
-              <th width="3%">
+            <th width={showStorageBackend ? '36%' : '35%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {this.props.sortBy === 'name' && sortIcon}</a></th>
-                <span className="sr-only">{gettext('Library Type')}</span>
+            <th width="10%"><span className="sr-only">{gettext('Actions')}</span></th>
-              </th>
+            <th width={showStorageBackend ? '15%' : '14%'}><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {this.props.sortBy === 'size' && sortIcon}</a></th>
-              <th width={showStorageBackend ? '36%' : '35%'}>
+            {showStorageBackend ? <th width="17%">{gettext('Storage Backend')}</th> : null}
-                <a className="d-block table-sort-op" href="#" onClick={this.sortByName}>
+            <th width={showStorageBackend ? '15%' : '34%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {this.props.sortBy === 'time' && sortIcon}</a></th>
-                  {gettext('Name')} {this.props.sortBy === 'name' && sortIcon}
+          </tr>
-                </a>
+        </thead>
-              </th>
+        <tbody>
-              <th width="10%">
+          {this.renderRepoListView()}
-                <span className="sr-only">{gettext('Actions')}</span>
+        </tbody>
-              </th>
+      </table>
-              <th width={showStorageBackend ? '15%' : '14%'}>
-                <a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>
-                  {gettext('Size')} {this.props.sortBy === 'size' && sortIcon}
-                </a>
-              </th>
-              {showStorageBackend ? <th width="17%">{gettext('Storage Backend')}</th> : null}
-              <th width={showStorageBackend ? '15%' : '34%'}>
-                <a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>
-                  {gettext('Last Update')} {this.props.sortBy === 'time' && sortIcon}
-                </a>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {this.renderRepoListView()}
-          </tbody>
-        </table>
-        {!inAllLibs && <NewLibrary onClick={this.props.toggleCreateRepoDialog} />}
-      </>
     ) : (
       <div className="d-flex justify-content-between flex-wrap">
         {this.renderRepoListView()}

frontend/src/pages/my-libs/new-library.css

@@ -1,31 +0,0 @@
-.new-library-container {
-  height: 41px;
-  line-height: 41px;
-  border-bottom: 1px solid #e8e8e8;
-  display: flex;
-  flex-direction: row;
-  cursor: pointer;
-  margin-bottom: 60px;
-}
-
-.new-library-container:hover {
-  background-color: #f8f8f8;
-}
-
-.new-library-container .new-library-star {
-  width: 4%;
-}
-
-.new-library-container .new-library-plus {
-  width: 3%;
-  padding-right: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #999;
-}
-
-.new-library-container .new-library-text {
-  padding-left: 3px;
-  font-size: 0.875rem;
-}

frontend/src/pages/my-libs/new-library.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { gettext } from '../../utils/constants';
-import './new-library.css';
-
-export default function NewLibrary({ onClick }) {
-  return (
-    <div className="new-library-container" onClick={onClick}>
-      <div className="new-library-star"></div>
-      <div className="new-library-plus">
-        <i className="sf2-icon-plus nav-icon" aria-hidden="true"></i>
-      </div>
-      <div className="new-library-text" aria-label={gettext('New Library')}>{gettext('New Library')}</div>
-    </div>
-  );
-}