add repo in right tool panel (#7410)

frontend/src/components/add-repos.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import { gettext } from '../utils/constants';
+
+const propTypes = {
+  className: PropTypes.string,
+  onAddRepo: PropTypes.func.isRequired,
+};
+
+class AddRepos extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isDropdownMenuOpen: false
+    };
+  }
+
+  toggleDropdownMenu = () => {
+    this.setState({
+      isDropdownMenuOpen: !this.state.isDropdownMenuOpen
+    });
+  };
+
+  render() {
+    const { isDropdownMenuOpen } = this.state;
+    const { className = '' } = this.props;
+    return (
+      <Dropdown
+        isOpen={isDropdownMenuOpen}
+        toggle={this.toggleDropdownMenu}
+        className={className}
+      >
+        <DropdownToggle
+          tag="div"
+          data-toggle="dropdown"
+          title={gettext('New Library')}
+          aria-label={gettext('New Library')}
+          aria-expanded={isDropdownMenuOpen}
+        >
+          <span className='cur-view-path-btn px-1'>
+            <span className='sf3-font sf3-font-new'></span>
+            <span className='sf3-font sf3-font-down'></span>
+          </span>
+        </DropdownToggle>
+        <DropdownMenu right={true} className="mt-1">
+          <DropdownItem onClick={this.props.onAddRepo}>
+            <span className='sf3-font sf3-font-new mr-2'></span>
+            <span>{gettext('New Library')}</span>
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+
+}
+
+AddRepos.propTypes = propTypes;
+
+export default AddRepos;

frontend/src/components/view-modes.js

@@ -8,6 +8,7 @@ import { GRID_MODE, LIST_MODE } from './dir-view-mode/constants';
 import '../css/view-modes.css';
 
 const propTypes = {
+  className: PropTypes.string,
   currentViewMode: PropTypes.string.isRequired,
   switchViewMode: PropTypes.func.isRequired
 };
@@ -47,7 +48,7 @@ class ViewModes extends React.Component {
 
   render() {
     const { isDropdownMenuOpen } = this.state;
-    const { currentViewMode } = this.props;
+    const { currentViewMode, className = '' } = this.props;
     const shortcutMain = Utils.isMac() ? '⇧ ⌘' : 'Ctrl + Shift +';
     const options = [
       { 'icon': 'list-view', 'text': gettext('List view'), 'value': LIST_MODE, 'shortcut': `${shortcutMain} 1` },
@@ -58,6 +59,7 @@ class ViewModes extends React.Component {
         isOpen={isDropdownMenuOpen}
         toggle={this.toggleDropdownMenu}
         id="cur-view-change-mode-dropdown"
+        className={className}
       >
         <DropdownToggle
           tag="div"

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

@@ -23,6 +23,7 @@ import SharedRepoListView from '../../components/shared-repo-list-view/shared-re
 import SortOptionsDialog from '../../components/dialog/sort-options';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
 import ViewModes from '../../components/view-modes';
+import AddRepos from '../../components/add-repos';
 import ReposSortMenu from '../../components/sort-menu';
 import { LIST_MODE } from '../../components/dir-view-mode/constants';
 
@@ -456,9 +457,8 @@ class GroupView extends React.Component {
                     )}
                     {Utils.isDesktop() && (
                       <div className="d-flex align-items-center">
-                        <div className="mr-2">
-                          <ViewModes currentViewMode={currentViewMode} switchViewMode={this.switchViewMode} />
-                        </div>
+                        <AddRepos className="mr-2" onAddRepo={this.onCreateRepoToggle} />
+                        <ViewModes currentViewMode={currentViewMode} switchViewMode={this.switchViewMode} className="mr-2" />
                         <ReposSortMenu sortBy={sortBy} sortOrder={sortOrder} onSelectSortOption={this.onSelectSortOption}/>
                       </div>
                     )}

frontend/src/pages/libraries/index.js

@@ -9,6 +9,7 @@ import toaster from '../../components/toast';
 import Loading from '../../components/loading';
 import ViewModes from '../../components/view-modes';
 import ReposSortMenu from '../../components/sort-menu';
+import AddRepos from '../../components/add-repos';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
 import SortOptionsDialog from '../../components/dialog/sort-options';
 import GuideForNewDialog from '../../components/dialog/guide-for-new-dialog';
@@ -407,9 +408,8 @@ class Libraries extends Component {
               <h3 className="sf-heading m-0">{gettext('Files')}</h3>
               {isDesktop &&
               <div className="d-flex align-items-center">
-                <div className="mr-2">
-                  <ViewModes currentViewMode={currentViewMode} switchViewMode={this.switchViewMode} />
-                </div>
+                <AddRepos className="mr-2" onAddRepo={this.toggleCreateRepoDialog} />
+                <ViewModes currentViewMode={currentViewMode} switchViewMode={this.switchViewMode} className="mr-2" />
                 <ReposSortMenu sortBy={sortBy} sortOrder={sortOrder} onSelectSortOption={this.onSelectSortOption} />
               </div>
               }

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

@@ -10,6 +10,7 @@ import Loading from '../../components/loading';
 import EmptyTip from '../../components/empty-tip';
 import ModalPortal from '../../components/modal-portal';
 import ViewModes from '../../components/view-modes';
+import AddRepos from '../../components/add-repos';
 import ReposSortMenu from '../../components/sort-menu';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
 import SortOptionsDialog from '../../components/dialog/sort-options';
@@ -174,9 +175,8 @@ class MyLibraries extends Component {
               </h3>
               {isDesktop ? (
                 <div className="d-flex align-items-center">
-                  <div className="mr-2">
-                    <ViewModes currentViewMode={currentViewMode} switchViewMode={this.switchViewMode} />
-                  </div>
+                  <AddRepos className="mr-2" onAddRepo={this.toggleCreateRepoDialog} />
+                  <ViewModes currentViewMode={currentViewMode} switchViewMode={this.switchViewMode} className="mr-2" />
                   <ReposSortMenu sortBy={sortBy} sortOrder={sortOrder} onSelectSortOption={this.onSelectSortOption} />
                 </div>
               ) : (

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

@@ -142,9 +142,7 @@ class SharedLibraries extends Component {
                 <h3 className="sf-heading m-0">{gettext('Shared with me')}</h3>
                 {Utils.isDesktop() && (
                   <div className="d-flex align-items-center">
-                    <div className="mr-2">
-                      <ViewModes currentViewMode={currentViewMode} switchViewMode={this.switchViewMode} />
-                    </div>
+                    <ViewModes currentViewMode={currentViewMode} switchViewMode={this.switchViewMode} className="mr-2" />
                     <ReposSortMenu sortBy={sortBy} sortOrder={sortOrder} onSelectSortOption={this.onSelectSortOption}/>
                   </div>
                 )}

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

@@ -263,9 +263,7 @@ class SharedWithAll extends React.Component {
               </h3>
               {Utils.isDesktop() && (
                 <div className="d-flex align-items-center">
-                  <div className="mr-2">
-                    <ViewModes currentViewMode={currentViewMode} switchViewMode={this.switchViewMode} />
-                  </div>
+                  <ViewModes currentViewMode={currentViewMode} switchViewMode={this.switchViewMode} className="mr-2" />
                   <ReposSortMenu sortBy={sortBy} sortOrder={sortOrder} onSelectSortOption={this.onSelectSortOption}/>
                 </div>
               )}