Merge pull request #974 from influxdata/feature/934-ew-admin-oss-role-hide

Remove roles on OSS and refactor tabs

ui/src/admin/components/AdminTabs.js

@@ -1,28 +1,10 @@
-import React, {Component, PropTypes} from 'react'
+import React, {PropTypes} from 'react'
 import {Tab, Tabs, TabPanel, TabPanels, TabList} from 'src/shared/components/Tabs';
 import UsersTable from 'src/admin/components/UsersTable'
 import RolesTable from 'src/admin/components/RolesTable'
 import QueriesPage from 'src/admin/containers/QueriesPage'
 
-const TABS = ['Users', 'Roles', 'Queries'];
-
-class AdminTabs extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      activeTab: TABS[0],
-    }
-
-    this.handleActivateTab = this.handleActivateTab.bind(this)
-  }
-
-  handleActivateTab(activeIndex) {
-    this.setState({activeTab: TABS[activeIndex]})
-  }
-
-  render() {
-    const {
+const AdminTabs = ({
   users,
   roles,
   source,
@@ -30,38 +12,48 @@ class AdminTabs extends Component {
   onDeleteUser,
   onFilterRoles,
   onFilterUsers,
-    } = this.props
+}) => {
+  const hasRoles = !!source.links.roles
 
-    return (
-      <Tabs onSelect={this.handleActivateTab}>
-        <TabList>
-          <Tab>{TABS[0]}</Tab>
-          <Tab>{TABS[1]}</Tab>
-          <Tab>{TABS[2]}</Tab>
-        </TabList>
-        <TabPanels>
-          <TabPanel>
-            <UsersTable
+  let tabs = [
+    {
+      type: 'Users',
+      component: (<UsersTable
         users={users}
+        hasRoles={hasRoles}
         onDelete={onDeleteUser}
         onFilter={onFilterUsers}
-            />
-          </TabPanel>
-          <TabPanel>
-            <RolesTable
-              roles={roles}
-              onDelete={onDeleteRole}
-              onFilter={onFilterRoles}
-            />
-          </TabPanel>
-          <TabPanel>
-            <QueriesPage source={source} />
-          </TabPanel>
+      />),
+    },
+    {
+      type: 'Roles',
+      component: (<RolesTable roles={roles} onDelete={onDeleteRole} onFilter={onFilterRoles} />),
+    },
+    {
+      type: 'Queries',
+      component: (<QueriesPage source={source} />),
+    },
+  ]
+
+  if (!hasRoles) {
+    tabs = tabs.filter(t => t.type !== 'Roles')
+  }
+
+  return (
+    <Tabs>
+      <TabList>
+        {
+          tabs.map((t, i) => (<Tab key={tabs[i].type}>{tabs[i].type}</Tab>))
+        }
+      </TabList>
+      <TabPanels>
+        {
+          tabs.map((t, i) => (<TabPanel key={tabs[i].type}>{t.component}</TabPanel>))
+        }
       </TabPanels>
     </Tabs>
   )
 }
-}
 
 const {
   arrayOf,

ui/src/admin/components/FilterBar.js

@@ -17,6 +17,10 @@ class FilterBar extends Component {
     )
   }
 
+  componentWillUnmount() {
+    this.props.onFilter('')
+  }
+
   render() {
     return (
       <div className="panel-heading u-flex u-ai-center u-jc-space-between">

ui/src/admin/components/UsersTable.js

@@ -3,7 +3,7 @@ import UserRow from 'src/admin/components/UserRow'
 import EmptyRow from 'src/admin/components/EmptyRow'
 import FilterBar from 'src/admin/components/FilterBar'
 
-const UsersTable = ({users, onDelete, onFilter}) => (
+const UsersTable = ({users, hasRoles, onDelete, onFilter}) => (
   <div className="panel panel-info">
     <FilterBar name="Users" onFilter={onFilter} />
     <div className="panel-body">
@@ -11,7 +11,7 @@ const UsersTable = ({users, onDelete, onFilter}) => (
         <thead>
           <tr>
             <th>User</th>
-            <th>Roles</th>
+            {hasRoles && <th>Roles</th>}
             <th>Permissions</th>
             <th></th>
           </tr>
@@ -31,6 +31,7 @@ const UsersTable = ({users, onDelete, onFilter}) => (
 
 const {
   arrayOf,
+  bool,
   func,
   shape,
   string,
@@ -47,6 +48,7 @@ UsersTable.propTypes = {
       scope: string.isRequired,
     })),
   })),
+  hasRoles: bool.isRequired,
   onDelete: func.isRequired,
   onFilter: func,
 }