feat(ui): change RolesPage to functional component

ui/src/admin/containers/influxdb/RolesPage.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import {Component} from 'react'
+import React, {useMemo} from 'react'
 import {connect, ResolveThunks} from 'react-redux'
 import {withSource} from 'src/CheckSources'
 import {Source} from 'src/types'
@@ -8,7 +7,7 @@ import {notify as notifyAction} from 'src/shared/actions/notifications'
 import {
   addRole as addRoleActionCreator,
   editRole as editRoleActionCreator,
-  deleteRole,
+  deleteRole as deleteRoleAction,
   createRoleAsync,
   deleteRoleAsync,
   updateRoleUsersAsync,
@@ -16,11 +15,15 @@ import {
   filterRoles as filterRolesAction,
 } from 'src/admin/actions/influxdb'
 import {notifyRoleNameInvalid} from 'src/shared/copy/notifications'
-import RolesTable from 'src/admin/components/RolesTable'
 import AdminInfluxDBTabbedPage, {
   hasRoleManagement,
   isConnectedToLDAP,
 } from './AdminInfluxDBTabbedPage'
+import FilterBar from 'src/admin/components/FilterBar'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+import EmptyRow from 'src/admin/components/EmptyRow'
+import RoleRow from 'src/admin/components/RoleRow'
+import {useCallback} from 'react'
 
 const isValidRole = (role: UserRole): boolean => {
   const minLen = 3
@@ -35,7 +38,7 @@ const mapStateToProps = ({adminInfluxDB: {users, roles, permissions}}) => ({
 
 const mapDispatchToProps = {
   addRole: addRoleActionCreator,
-  removeRole: deleteRole,
+  removeRole: deleteRoleAction,
   editRole: editRoleActionCreator,
   createRole: createRoleAsync,
   deleteRole: deleteRoleAsync,
@@ -58,84 +61,108 @@ type ReduxDispatchProps = ResolveThunks<typeof mapDispatchToProps>
 
 type Props = OwnProps & ConnectedProps & ReduxDispatchProps
 
-class RolesPage extends Component<Props> {
-  private get allowed(): string[] {
-    const {permissions} = this.props
+const RolesPage = ({
+  source,
+  permissions,
+  users,
+  roles,
+  addRole,
+  filterRoles,
+  editRole,
+  removeRole,
+  deleteRole,
+  updateRoleUsers,
+  updateRolePermissions,
+  createRole,
+  notify,
+}: Props) => {
+  const allPermissions = useMemo(() => {
     const globalPermissions = permissions.find(p => p.scope === 'all')
     return globalPermissions ? globalPermissions.allowed : []
-  }
+  }, [permissions])
+  const handleSaveRole = useCallback(
+    async role => {
+      if (!isValidRole(role)) {
+        notify(notifyRoleNameInvalid())
+        return
+      }
+      if (role.isNew) {
+        createRole(source.links.roles, role)
+      }
+    },
+    [source, createRole]
+  )
+  const isEditing = useMemo(() => roles.some(r => r.isEditing), [roles])
 
-  private handleEditRole = (role, updates) => {
-    this.props.editRole(role, updates)
-  }
-  private handleSaveRole = async role => {
-    const {notify} = this.props
-    if (!isValidRole(role)) {
-      notify(notifyRoleNameInvalid())
-      return
-    }
-    if (role.isNew) {
-      this.props.createRole(this.props.source.links.roles, role)
-    }
-  }
-
-  private handleCancelEditRole = role => {
-    this.props.removeRole(role)
-  }
-
-  private handleDeleteRole = role => {
-    this.props.deleteRole(role)
-  }
-
-  private handleUpdateRoleUsers = (role, users) => {
-    this.props.updateRoleUsers(role, users)
-  }
-
-  private handleUpdateRolePermissions = (role, permissions) => {
-    this.props.updateRolePermissions(role, permissions)
-  }
-
-  public render() {
-    const source = this.props.source
-    if (!hasRoleManagement(source)) {
-      return (
-        <AdminInfluxDBTabbedPage activeTab="roles" source={source}>
-          <div className="container-fluid">
-            Roles management is not available for the currently selected
-            InfluxDB Connection.
-          </div>
-        </AdminInfluxDBTabbedPage>
-      )
-    }
-    if (isConnectedToLDAP(source)) {
-      return (
-        <AdminInfluxDBTabbedPage activeTab="roles" source={source}>
-          <div className="container-fluid">
-            Users are managed via LDAP, roles management is not available.
-          </div>
-        </AdminInfluxDBTabbedPage>
-      )
-    }
-    const {users, roles, addRole, filterRoles} = this.props
+  if (!hasRoleManagement(source)) {
     return (
       <AdminInfluxDBTabbedPage activeTab="roles" source={source}>
-        <RolesTable
-          roles={roles}
-          allUsers={users}
-          permissions={this.allowed}
-          isEditing={roles.some(r => r.isEditing)}
-          onClickCreate={addRole}
-          onEdit={this.handleEditRole}
-          onSave={this.handleSaveRole}
-          onCancel={this.handleCancelEditRole}
-          onDelete={this.handleDeleteRole}
-          onFilter={filterRoles}
-          onUpdateRoleUsers={this.handleUpdateRoleUsers}
-          onUpdateRolePermissions={this.handleUpdateRolePermissions}
-        />
+        <div className="container-fluid">
+          Roles management is not available for the currently selected InfluxDB
+          Connection.
+        </div>
       </AdminInfluxDBTabbedPage>
     )
   }
+  if (isConnectedToLDAP(source)) {
+    return (
+      <AdminInfluxDBTabbedPage activeTab="roles" source={source}>
+        <div className="container-fluid">
+          Users are managed via LDAP, roles management is not available.
+        </div>
+      </AdminInfluxDBTabbedPage>
+    )
+  }
+  return (
+    <AdminInfluxDBTabbedPage activeTab="roles" source={source}>
+      <div className="panel panel-solid influxdb-admin">
+        <FilterBar
+          type="roles"
+          onFilter={filterRoles}
+          isEditing={isEditing}
+          onClickCreate={addRole}
+        />
+        <div className="panel-body">
+          <FancyScrollbar>
+            <table className="table v-center admin-table table-highlight">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th className="admin-table--left-offset">Permissions</th>
+                  <th className="admin-table--left-offset">Users</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {roles.length ? (
+                  roles
+                    .filter(r => !r.hidden)
+                    .map(role => (
+                      <RoleRow
+                        key={role.links.self}
+                        allUsers={users}
+                        allPermissions={allPermissions}
+                        role={role}
+                        onEdit={editRole}
+                        onSave={handleSaveRole}
+                        onCancel={removeRole}
+                        onDelete={deleteRole}
+                        onUpdateRoleUsers={updateRoleUsers}
+                        onUpdateRolePermissions={updateRolePermissions}
+                        isEditing={role.isEditing}
+                        isNew={role.isNew}
+                      />
+                    ))
+                ) : (
+                  <EmptyRow entities="Roles" colSpan={4} />
+                )}
+              </tbody>
+            </table>
+          </FancyScrollbar>
+        </div>
+      </div>
+    </AdminInfluxDBTabbedPage>
+  )
 }
 
 export default withSource(