['New Group'] redesigned it: moved it from the top bar of the 'Files' page to the side panel (#6161)

frontend/src/components/main-side-nav.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
-import { gettext, siteRoot, canAddRepo, canGenerateShareLink, canGenerateUploadLink, canInvitePeople,
+import {
-  enableTC, sideNavFooterCustomHtml, additionalAppBottomLinks
+  gettext, siteRoot, canAddGroup,
+  canAddRepo, canGenerateShareLink, canGenerateUploadLink, canInvitePeople,
+  enableTC, sideNavFooterCustomHtml, additionalAppBottomLinks,
+  canViewOrg, isDocs, isPro, isDBSqlite3, customNavItems
 } from '../utils/constants';
 import { seafileAPI } from '../utils/seafile-api';
 import { Utils } from '../utils/utils';
-import toaster from './toast';
 import Group from '../models/group';
-
+import toaster from './toast';
-import { canViewOrg, isDocs, isPro, isDBSqlite3, customNavItems } from '../utils/constants';
+import CreateGroupDialog from '../components/dialog/create-group-dialog';
 
 const propTypes = {
   currentTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
@@ -26,6 +28,7 @@ class MainSideNav extends React.Component {
       sharedExtended: false,
       closeSideBar:false,
       groupItems: [],
+      isCreateGroupDialogOpen: false
     };
     this.adminHeight = 0;
     this.filesNavHeight = 0;
@@ -45,7 +48,7 @@ class MainSideNav extends React.Component {
         return group;
       });
 
-      this.filesNavHeight = (groupList.length + (canAddRepo ? 1 : 0) + (canViewOrg ? 1 : 0) + 1) * SUB_NAV_ITEM_HEIGHT;
+      this.filesNavHeight = (groupList.length + (canAddGroup ? 1 : 0) + (canAddRepo ? 1 : 0) + (canViewOrg ? 1 : 0) + 1) * SUB_NAV_ITEM_HEIGHT;
       _this.setState({
         groupItems: groupList.sort((a, b) => {
           return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
@@ -74,6 +77,22 @@ class MainSideNav extends React.Component {
     return this.props.currentTab === tab ? 'active' : '';
   };
 
+  onCreateGroup = (groupData) => {
+    const newGroup = new Group(groupData);
+    const { groupItems: newList } = this.state;
+    newList.push(newGroup);
+    this.filesNavHeight += SUB_NAV_ITEM_HEIGHT;
+    this.setState({
+      groupItems: newList
+    });
+  };
+
+  toggleCreateGroupDialog = () => {
+    this.setState({
+      isCreateGroupDialogOpen: !this.state.isCreateGroupDialogOpen
+    });
+  };
+
   renderSharedGroups() {
     return (
       <>
@@ -91,6 +110,22 @@ class MainSideNav extends React.Component {
             </li>
           );
         })}
+        {canAddGroup && (
+          <>
+            <li className="nav-item" onClick={this.toggleCreateGroupDialog}>
+              <span className="nav-link" role="button">
+                <i className="sf2-icon-plus nav-icon" aria-hidden="true"></i>
+                {gettext('New Group')}
+              </span>
+            </li>
+            {this.state.isCreateGroupDialogOpen &&
+            <CreateGroupDialog
+              toggleDialog={this.toggleCreateGroupDialog}
+              onCreateGroup={this.onCreateGroup}
+            />
+            }
+          </>
+        )}
       </>
     );
   }

frontend/src/pages/libraries/index.js

@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cookie from 'react-cookies';
 import { seafileAPI } from '../../utils/seafile-api';
-import { gettext, canAddRepo, canViewOrg, canAddGroup } from '../../utils/constants';
+import { gettext, canAddRepo, canViewOrg } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../../components/toast';
 import Repo from '../../models/repo';
@@ -10,7 +10,6 @@ import Group from '../../models/group';
 import Loading from '../../components/loading';
 import TopToolbar from '../../components/toolbar/top-toolbar';
 import MyLibsToolbar from '../../components/toolbar/my-libs-toolbar';
-import GroupsToolbar from '../../components/toolbar/groups-toolbar';
 import SortOptionsDialog from '../../components/dialog/sort-options';
 import GuideForNewDialog from '../../components/dialog/guide-for-new-dialog';
 import MylibRepoListView from '../../pages/my-libs/mylib-repo-list-view';
@@ -150,6 +149,7 @@ class Libraries extends Component {
   };
 
   // the following are for 'groups'
+  /*
   onCreateGroup = (groupData) => {
     const newGroup = new Group(groupData);
     const { groupList: newList } = this.state;
@@ -158,6 +158,7 @@ class Libraries extends Component {
       groupList: newList
     });
   };
+  */
 
   updateGroup = (group) => {
     const { groupList } = this.state;
@@ -181,7 +182,6 @@ class Libraries extends Component {
         >
           <>
             {canAddRepo && <MyLibsToolbar onCreateRepo={this.onCreateRepo} />}
-            {canAddGroup && <GroupsToolbar onCreateGroup={this.onCreateGroup} />}
           </>
         </TopToolbar>
         <div className="main-panel-center flex-row">