ManageUserModal

Modal for editing an existing user's role, status, or team membership.

import { ManageUserModal } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`open`	Required	`boolean`	—	—
`onClose`	Required	`VoidFunction`	—	—
`user`	Required	`SettingsUser`	—	—
`roles`	Required	`RoleOption[]`	—	—
`rolePermissions`	Required	`Record<string, Record<string, PermLevel>>`	—	—
`permissionLabels`	Required	`Record<string, string>`	—	—
`onSubmit`	Required	`(data: { id: string; name: string; email: string; role: string; }) => Promise<void>`	—	—
`isSubmitting`	Optional	`boolean \| undefined`	—	—

Usage

Modal for editing an existing user's name, email, and role. Shows a role-permission matrix for context.

Example

import { useState } from 'react'import { ManageUserModal } from '@tetherto/mdk-react-devkit'const mockRoles = [  { value: 'admin', label: 'Admin' },  { value: 'operator', label: 'Operator' },]const mockUser = { id: '1', name: 'Alice', email: 'alice@example.com', role: 'admin' }export const ManageUserModalExample = () => {  const [open, setOpen] = useState(false)  return (    <div className="mdk-example-row">      <button onClick={() => setOpen(true)}>Manage User</button>      <ManageUserModal        open={open}        onClose={() => setOpen(false)}        user={mockUser as never}        roles={mockRoles}        rolePermissions={{          admin: { read: 'full' as never },          operator: { read: 'limited' as never },        }}        permissionLabels={{ read: 'Read Access' }}        onSubmit={async () => setOpen(false)}      />    </div>  )}