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"