diff --git a/frontend/src/pages/org-admin/index.js b/frontend/src/pages/org-admin/index.js index 95a23026e5..fd3c2bd980 100644 --- a/frontend/src/pages/org-admin/index.js +++ b/frontend/src/pages/org-admin/index.js @@ -4,7 +4,6 @@ import ReactDOM from 'react-dom'; import { Router } from '@reach/router'; import { siteRoot } from '../../utils/constants'; import SidePanel from './side-panel'; -import MainPanel from './main-panel'; import OrgUsers from './org-users'; import OrgUsersList from './org-users-list'; import OrgAdminList from './org-admin-list'; @@ -59,7 +58,7 @@ class Org extends React.Component { tabItemClick = (param) => { this.setState({currentTab: param}); - } + } toggleAddOrgUser = () => { this.setState({isShowAddOrgUserDialog: !this.state.isShowAddOrgUserDialog}); @@ -89,39 +88,48 @@ class Org extends React.Component { let { isSidePanelClosed, currentTab, isShowAddOrgUserDialog, isShowAddOrgAdminDialog, isInviteUserDialogOpen } = this.state; return (
- - + tabItemClick={this.tabItemClick} + /> +
- + - - + + - - - - + + + + - +
); } diff --git a/frontend/src/pages/org-admin/main-panel-topbar.js b/frontend/src/pages/org-admin/main-panel-topbar.js new file mode 100644 index 0000000000..de960e99d5 --- /dev/null +++ b/frontend/src/pages/org-admin/main-panel-topbar.js @@ -0,0 +1,70 @@ +import React, { Component, Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { gettext, invitationLink } from '../../utils/constants'; +import Account from '../../components/common/account'; + +const propTypes = { + currentTab: PropTypes.string, + toggleAddOrgUser: PropTypes.func, + toggleAddOrgAdmin: PropTypes.func, + toggleInviteUserDialog: PropTypes.func, + toggleAddDepartDialog: PropTypes.func, + toggleAddMemberDialog: PropTypes.func, + toggleAddRepoDialog: PropTypes.func, +}; + +class MainPanelTopbar extends Component { + + render() { + const topBtn = 'btn btn-secondary operation-item'; + const groupID = this.props.groupID; + return ( +
+
+ +
+ {this.props.currentTab === 'users' && + + + {invitationLink && + + } + + } + {this.props.currentTab === 'admins' && + + } + {this.props.currentTab === 'departmentadmin' && + + {!groupID && + } + {groupID && + } + {groupID && + } + {groupID && + } + + } +
+
+
+ +
+
+ ); + } +} + +MainPanelTopbar.propTypes = propTypes; + +export default MainPanelTopbar; diff --git a/frontend/src/pages/org-admin/main-panel.js b/frontend/src/pages/org-admin/main-panel.js deleted file mode 100644 index e020582255..0000000000 --- a/frontend/src/pages/org-admin/main-panel.js +++ /dev/null @@ -1,76 +0,0 @@ -import React, { Component, Fragment } from 'react'; -import PropTypes from 'prop-types'; -import { gettext, invitationLink } from '../../utils/constants'; -import Account from '../../components/common/account'; - -const groupID = window.org.pageOptions.groupID; -const propTypes = { - currentTab: PropTypes.string.isRequired, - children: PropTypes.object.isRequired, - toggleAddOrgUser: PropTypes.func.isRequired, - toggleAddOrgAdmin: PropTypes.func.isRequired, - toggleInviteUserDialog: PropTypes.func.isRequired -}; - -class MainPanel extends Component { - - toggleAddOrgUser = () => { - this.props.toggleAddOrgUser(); - } - - toggleAddOrgAdmin = () => { - this.props.toggleAddOrgAdmin(); - } - - render() { - const topBtn = 'btn btn-secondary operation-item'; - return ( -
-
-
- -
- {this.props.currentTab === 'users' && ( - - - {invitationLink && - - } - - )} - {this.props.currentTab === 'admins' && - - } - {this.props.currentTab === 'departmentadmin' && - - {!groupID && } - {groupID && } - {groupID && } - {groupID && } - - } -
-
-
- -
-
- {this.props.children} -
- ); - } -} - -MainPanel.propTypes = propTypes; - -export default MainPanel;