Dialog Components
Modal dialogs, confirmation prompts, and dialog utilities
Modal and dialog components for user interactions.
Prerequisites
- Complete the installation
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
AddSparePartModal
Modal for registering a new spare part. Presents a part-type tab strip and a form for miner model, part model, serial number, MAC address (controllers only), status, location, tags, and a comment. Va…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
isOpen | boolean | ✓ | - | - |
onClose | VoidFunction | ✓ | - | - |
partTypes | SparePartSubTypesModalPartType[] | ✓ | - | - |
defaultPartTypeId | string | undefined | - | - | |
modelOptions | FormSelectOption[] | ✓ | - | - |
isModelOptionsLoading | boolean | undefined | - | - | |
minerModelOptions | FormSelectOption[] | ✓ | - | - |
statusOptions | FormSelectOption[] | ✓ | - | - |
locationOptions | FormSelectOption[] | ✓ | - | - |
isControllerPartTypeSelected | boolean | undefined | - | - | |
onPartTypeChange | (partTypeId: string) => void | ✓ | - | - |
onSubmit | (values: AddSparePartFormValues) => Promise<void | { fieldErrors?: { field: string; message: string; }[] | undefined; }> | ✓ | - | - |
isLoading | boolean | undefined | - | - | |
subTypesPartTypes | SparePartSubTypesModalPartType[] | undefined | - | - | |
subTypesActivePartTypeId | string | undefined | - | - | |
subTypes | string[] | undefined | - | - | |
onSubTypesPartTypeChange | ((id: string) => void) | undefined | - | - | |
onAddSubType | ((name: string) => Promise<void | { error?: string | undefined; }>) | undefined | - | - | |
isSubTypesLoading | boolean | undefined | - | - |
AlertDialogAction
Primary confirmation button inside an <AlertDialog>; clicking dismisses the dialog and runs the action handler.
agent-ready
AlertDialogCancel
Secondary dismiss button inside an <AlertDialog>; closes the dialog without invoking the destructive action.
agent-ready
AlertDialogContent
Modal content surface for an <AlertDialog> — renders the centered panel above the overlay with focus trap.
agent-ready
AlertDialogDescription
Supporting body text inside an <AlertDialog>; conveys the consequences of the action being confirmed.
agent-ready
AlertDialogFooter
Right-aligned action row inside an <AlertDialog> — hosts the cancel and confirm buttons.
agent-ready
AlertDialogHeader
Top section of an <AlertDialog> that groups the title and description above the action row.
agent-ready
AlertDialogOverlay
Full-viewport scrim rendered behind an <AlertDialog> to block interaction with the page.
agent-ready
AlertDialogTitle
Prominent title text inside an <AlertDialog> summarising the action that requires confirmation.
agent-ready
AssignPoolModal
Modal dialog for bulk-assigning a set of selected miners to a pool config. Displays the miner list, a pool selector with metadata (unit/miner counts, last-updated time), an endpoints preview, and an…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
isOpen | boolean | ✓ | - | - |
onClose | () => void | ✓ | - | - |
onSubmit | (values: { pool: PoolSummary; }) => Promise<void> | ✓ | - | - |
miners | Device[] | ✓ | - | - |
poolConfig | PoolConfigEntry[] | ✓ | - | - |
BatchMoveSparePartsModal
Modal for moving multiple spare parts at once. Shows the selected parts in a table and lets the user choose a new location and/or status plus an observation, applied to every part. Receives the parts…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
isOpen | boolean | ✓ | - | - |
onClose | VoidFunction | ✓ | - | - |
spareParts | BatchMoveSparePart[] | ✓ | - | - |
locationOptions | FormSelectOption[] | ✓ | - | - |
statusOptions | FormSelectOption[] | ✓ | - | - |
onSubmit | (values: { location: string | null; status: string | null; observation: string | null; }) => void | Promise<void> | ✓ | - | - |
BulkAddSparePartsModal
Modal for bulk-adding spare parts from a CSV file. Provides a CSV template download, file selection with client-side parsing, and submits the parsed records. Receives the submit handler as a prop; CS…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
isOpen | boolean | ✓ | - | - |
onClose | VoidFunction | ✓ | - | - |
onSubmit | (records: CSVRecord[]) => Promise<void | { error?: string | undefined; }> | ✓ | - | - |
isLoading | boolean | undefined | - | - |
ConfirmDeleteSparePartModal
Confirmation modal for deleting a spare part. Warns that the action is irreversible and surfaces the part code so the user can verify before confirming. Receives the part and confirm handler as props.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
isOpen | boolean | undefined | - | - | |
onClose | VoidFunction | undefined | - | - | |
onConfirm | ((sparePart: ConfirmDeleteSparePartModalSparePart) => void | Promise<void>) | undefined | - | - | |
sparePart | ConfirmDeleteSparePartModalSparePart | undefined | - | - | |
isLoading | boolean | undefined | - | - |
DialogContent
Centered modal surface for a <Dialog> — renders above the overlay with focus trap and Escape-to-close.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
title | string | undefined | - | - | |
description | string | undefined | - | - | |
closeOnClickOutside | boolean | undefined | - | - | |
closeOnEscape | boolean | undefined | - | - | |
bare | boolean | undefined | - | - | |
closable | boolean | undefined | - | - | |
onClose | VoidFunction | undefined | - | - |
DialogDescription
Supporting body copy inside a <Dialog> rendered below the title.
agent-ready
DialogFooter
Action row at the bottom of a <Dialog> — typically primary/secondary buttons.
agent-ready
DialogHeader
Top region of a <Dialog> that groups the title and description.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
bare | boolean | undefined | - | - | |
closable | boolean | undefined | - | - | |
onClose | VoidFunction | undefined | - | - |
DialogOverlay
Full-viewport scrim rendered behind an open <Dialog> to block background interaction.
agent-ready
DialogTitle
Prominent title text at the top of a <Dialog> summarising the modal's purpose.
agent-ready
MovementDetailsModal
Modal showing the details of a historical device movement — the device summary plus the origin → destination transition of location and status. Receives the selected movement as a prop — no internal…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
isOpen | boolean | - | - | |
onClose | () => void | - | - | |
movement | MovementData | - | - |
MoveSparePartModal
Two-step modal for moving a single spare part. Step one shows the part details with its current location and status and lets the user pick a new location, status, and observation; step two previews t…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
isOpen | boolean | undefined | - | - | |
onClose | VoidFunction | undefined | - | - | |
sparePart | MoveSparePartModalSparePart | undefined | - | - | |
requestedValues | { location?: string | undefined; status?: string | undefined; } | undefined | - | - | |
locationOptions | FormSelectOption[] | ✓ | - | - |
statusOptions | FormSelectOption[] | ✓ | - | - |
onSubmit | (values: { location: string; status: string; observation: string; }, sparePart: MoveSparePartModalSparePart) => void | Promise<void> | ✓ | - | - |
SparePartSubTypesModal
Modal for viewing and adding spare part subtypes per part type. Presents a part-type tab strip, a table of existing subtypes for the active type, and an inline add form. Receives the active part type…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
isOpen | boolean | ✓ | - | - |
onClose | VoidFunction | ✓ | - | - |
partTypes | SparePartSubTypesModalPartType[] | ✓ | - | - |
activePartTypeId | string | ✓ | - | - |
onPartTypeChange | (id: string) => void | ✓ | - | - |
subTypes | string[] | ✓ | - | - |
onAddSubType | (name: string) => Promise<void | { error?: string | undefined; }> | ✓ | - | - |
isLoading | boolean | undefined | - | - |