RBAC control settings

The RBACControlSettings component provides user management with role-based access control. It manages:

Access control (canWrite): if false, hides edit/delete actions.
User data (users): array of users to display.
Role configuration (roles, rolePermissions, permissionLabels): define available roles and permissions.
Callbacks (onCreateUser, onUpdateUser, onDeleteUser): handle CRUD operations.
State (isLoading): loading indicator.
Styling (className): optional CSS class.

Import

import { RBACControlSettings } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`canWrite`	`boolean`	none	Required: If `false`, hides edit/delete actions
`users`	`SettingsUser[]`	none	Required: Array of users to display
`roles`	`RoleOption[]`	none	Required: Available roles for assignment
`rolePermissions`	`Record<string, Record<string, PermLevel>>`	none	Required: Permissions matrix by role
`permissionLabels`	`Record<string, string>`	none	Required: Human-readable permission names
`onCreateUser`	`function`	none	Required: Create user callback
`onUpdateUser`	`function`	none	Required: Update user callback
`onDeleteUser`	`function`	none	Required: Delete user callback
`isLoading`	`boolean`	`false`	Loading state
`className`	`string`	none	Additional CSS class

Data structure

import type {
  SettingsUser,
  RoleOption,
  PermLevel,
} from '@mdk/foundation'

type SettingsUser = {
  id: string
  name?: string
  email: string
  role: string
  lastActive?: string
  last_login?: string
}

type RoleOption = {
  value: string
  label: string
}

type PermLevel = 'r' | 'rw' | false  // read, read-write, none

type CreateUserData = {
  name: string
  email: string
  role: string
}

type UpdateUserData = CreateUserData & { id: string }

Callbacks

`onCreateUser`

Called when end user submits the add user form. Receives CreateUserData:

const handleCreateUser = async (data: CreateUserData) => {
  const newUser = await api.createUser(data)
  setUsers(prev => [...prev, newUser])
}

`onUpdateUser`

Called when end user saves changes in the manage modal. Receives UpdateUserData:

const handleUpdateUser = async (data: UpdateUserData) => {
  await api.updateUser(data)
  setUsers(prev => prev.map(u => u.id === data.id ? { ...u, ...data } : u))
}

`onDeleteUser`

Called after end user confirms deletion. Receives the user ID:

const handleDeleteUser = async (userId: string) => {
  await api.deleteUser(userId)
  setUsers(prev => prev.filter(u => u.id !== userId))
}

Basic usage

import { RBACControlSettings } from '@mdk/foundation'

function UserManagementSection() {
  const [users, setUsers] = useState<SettingsUser[]>([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    api.getUsers().then(data => {
      setUsers(data)
      setIsLoading(false)
    })
  }, [])

  const handleCreateUser = async (data) => {
    const newUser = await api.createUser(data)
    setUsers(prev => [...prev, newUser])
  }

  const handleUpdateUser = async (data) => {
    await api.updateUser(data)
    setUsers(prev =>
      prev.map(u => u.id === data.id ? { ...u, ...data } : u)
    )
  }

  const handleDeleteUser = async (userId) => {
    await api.deleteUser(userId)
    setUsers(prev => prev.filter(u => u.id !== userId))
  }

  return (
    <RBACControlSettings
      canWrite={true}
      users={users}
      roles={[
        { value: 'admin', label: 'Admin' },
        { value: 'operator', label: 'Operator' },
        { value: 'viewer', label: 'Viewer' },
      ]}
      rolePermissions={{
        admin: { miners: 'rw', settings: 'rw', users: 'rw' },
        operator: { miners: 'rw', settings: 'r', users: false },
        viewer: { miners: 'r', settings: 'r', users: false },
      }}
      permissionLabels={{
        miners: 'Miner Management',
        settings: 'Settings',
        users: 'User Management',
      }}
      isLoading={isLoading}
      onCreateUser={handleCreateUser}
      onUpdateUser={handleUpdateUser}
      onDeleteUser={handleDeleteUser}
    />
  )
}

Features

User table

Displays users in a table with columns:

User: name with tooltip
Email: email address with tooltip
Assigned Roles: role badge with color coding
Last Active: formatted timestamp
Manage: opens edit modal
Delete: deletes with confirmation

Search

Filter users by name, email, or role using the search input.

Role badges

Roles are displayed as colored badges. Colors are determined by getRoleBadgeColors() from the foundation constants.

Integrated modals

The component includes three modal dialogs:

AddUserModal: create new users
ManageUserModal: edit user details and view permissions
ChangeConfirmationModal: confirm destructive actions

Permission check

When canWrite is false:

Add User button is hidden
Manage and Delete buttons are hidden
User list is read-only

<RBACControlSettings
  canWrite={false}  // Read-only mode
  // ...other props
/>

Styling

The component uses the .mdk-settings-rbac CSS class. Key selectors:

.mdk-settings-rbac__description: header text
.mdk-settings-rbac__actions-row: search and add button row
.mdk-settings-rbac__table: user table container
.mdk-settings-rbac__role-badge: role badge styling
.mdk-settings-rbac__manage-btn: manage button
.mdk-settings-rbac__delete-btn: delete button

RBAC control settings

On this page