libraries list view add margin bottom (#7040)

frontend/src/app.js

@@ -24,15 +24,15 @@ import ShareAdminLibraries from './pages/share-admin/libraries';
 import ShareAdminFolders from './pages/share-admin/folders';
 import ShareAdminShareLinks from './pages/share-admin/share-links';
 import ShareAdminUploadLinks from './pages/share-admin/upload-links';
-import SharedLibraries from './pages/shared-libs/shared-libs';
+import SharedLibraries from './pages/shared-libs/shared-libraries';
 import ShareWithOCM from './pages/share-with-ocm/shared-with-ocm';
 import OCMViaWebdav from './pages/ocm-via-webdav/ocm-via-webdav';
 import OCMRepoDir from './pages/share-with-ocm/remote-dir-view';
 import MyLibraries from './pages/my-libs/my-libs';
 import MyLibDeleted from './pages/my-libs/my-libs-deleted';
-import PublicSharedView from './pages/shared-with-all';
+import SharedWithAll from './pages/shared-with-all';
 import LibContentView from './pages/lib-content-view/lib-content-view';
-import Group from './pages/groups/group-view';
+import GroupView from './pages/groups/group-view';
 import InvitationsView from './pages/invitations/invitations-view';
 import Wikis from './pages/wikis/wikis';
 import Libraries from './pages/libraries';
@@ -333,7 +333,7 @@ class App extends Component {
               <MyLibDeleted path={siteRoot + 'my-libs/deleted/'} />
               <ShareAdminShareLinks path={siteRoot + 'share-admin-share-links'} />
               <ShareAdminUploadLinks path={siteRoot + 'share-admin-upload-links'} />
-              <PublicSharedView path={siteRoot + 'org/'} />
+              <SharedWithAll path={siteRoot + 'org/'} />
               <Wikis
                 path={siteRoot + 'published'}
                 sidePanelRate={sidePanelRate}
@@ -343,7 +343,7 @@ class App extends Component {
               <InvitationsView path={siteRoot + 'invitations/'} />
               <FilesActivities path={siteRoot + 'dashboard'} />
               <MyFileActivities path={siteRoot + 'my-activities'} />
-              <Group path={siteRoot + 'group/:groupID'} onGroupChanged={this.onGroupChanged} />
+              <GroupView path={siteRoot + 'group/:groupID'} onGroupChanged={this.onGroupChanged} />
               <LinkedDevices path={siteRoot + 'linked-devices'} />
               <ShareAdminLibraries path={siteRoot + 'share-admin-libs'} />
               <ShareAdminFolders path={siteRoot + 'share-admin-folders'} />

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

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import SharedRepoListItem from './shared-repo-list-item';
@@ -147,12 +148,12 @@ class SharedRepoListView extends React.Component {
   };
 
   renderPCUI = () => {
-    const { theadHidden = false, currentViewMode = LIST_MODE, currentGroup, libraryType } = this.props;
+    const { theadHidden = false, currentViewMode = LIST_MODE, currentGroup, libraryType, inAllLibs } = this.props;
     const { sortByName, sortByTime, sortBySize, sortIcon } = this.getSortMetaData();
 
     const content = currentViewMode == LIST_MODE ? (
       <>
-        <table className={theadHidden ? 'table-thead-hidden' : ''}>
+        <table className={classNames({ 'table-thead-hidden': theadHidden }, { 'repos-container': !inAllLibs })}>
           <thead>
             <tr>
               <th width="4%"></th>

frontend/src/css/layout.css

@@ -168,6 +168,10 @@
   position: relative;
 }
 
+.repos-container {
+  margin-bottom: 10rem;
+}
+
 .table-drop-active::before {
   border: 1px solid rgba(69, 170, 242);
   content: '';

frontend/src/pages/libraries/index.js

@@ -14,7 +14,7 @@ import SortOptionsDialog from '../../components/dialog/sort-options';
 import GuideForNewDialog from '../../components/dialog/guide-for-new-dialog';
 import CreateRepoDialog from '../../components/dialog/create-repo-dialog';
 import MylibRepoListView from '../../pages/my-libs/mylib-repo-list-view';
-import SharedLibs from '../../pages/shared-libs/shared-libs';
+import SharedLibraries from '../shared-libs/shared-libraries';
 import SharedWithAll from '../../pages/shared-with-all';
 import GroupItem from '../../pages/groups/group-item';
 import { LIST_MODE } from '../../components/dir-view-mode/constants';
@@ -247,7 +247,7 @@ class Libraries extends Component {
   };
 
   render() {
-    const { isLoading, currentViewMode, sortBy, sortOrder } = this.state;
+    const { isLoading, currentViewMode, sortBy, sortOrder, groupList } = this.state;
     const isDesktop = Utils.isDesktop();
 
     const sortOptions = this.sortOptions.map(item => {
@@ -327,7 +327,7 @@ class Libraries extends Component {
                   </div>
                 )}
                 <div className="pb-3">
-                  <SharedLibs
+                  <SharedLibraries
                     repoList={this.state.sharedRepoList}
                     inAllLibs={true}
                     currentViewMode={currentViewMode}
@@ -342,12 +342,11 @@ class Libraries extends Component {
                     />
                   </div>
                 }
-                <div className="group-list-panel">
-                  {this.state.groupList.length > 0 && (
-                    this.state.groupList.map((group, index) => {
+                <div className="repos-container">
+                  {groupList.length > 0 && groupList.map((group) => {
                     return (
                       <GroupItem
-                          key={index}
+                        key={group.id}
                         inAllLibs={true}
                         group={group}
                         updateGroup={this.updateGroup}
@@ -355,8 +354,7 @@ class Libraries extends Component {
                         currentViewMode={currentViewMode}
                       />
                     );
-                    })
-                  )}
+                  })}
                 </div>
               </div>
             }

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

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import MediaQuery from 'react-responsive';
 import { gettext, storages } from '../../utils/constants';
 import MylibRepoListItem from './mylib-repo-list-item';
@@ -116,7 +117,7 @@ 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={classNames({ 'table-thead-hidden': inAllLibs }, { 'repos-container': !inAllLibs })}>
         <thead>
           <tr>
             <th width="4%"></th>

frontend/src/pages/shared-libs/shared-libraries.js

@@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
+import classNames from 'classnames';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import cookie from 'react-cookies';
 import { Link, navigate } from '@gatsbyjs/reach-router';
@@ -140,7 +141,7 @@ class Content extends Component {
       );
       const content = currentViewMode == LIST_MODE ? (
         <>
-          <table className={(isDesktop && !theadHidden) ? '' : 'table-thead-hidden'}>
+          <table className={classNames({ 'repos-container': !inAllLibs }, { 'table-thead-hidden': !(isDesktop && !theadHidden) })}>
             {isDesktop ? desktopThead : <LibsMobileThead inAllLibs={inAllLibs} />}
             <tbody>
               {itemsContent}

frontend/src/pages/shared-with-all/index.js

@@ -22,7 +22,7 @@ const propTypes = {
   repoList: PropTypes.array,
 };
 
-class PublicSharedView extends React.Component {
+class SharedWithAll extends React.Component {
 
   constructor(props) {
     super(props);
@@ -274,6 +274,6 @@ class PublicSharedView extends React.Component {
   }
 }
 
-PublicSharedView.propTypes = propTypes;
+SharedWithAll.propTypes = propTypes;
 
-export default PublicSharedView;
+export default SharedWithAll;