Settings components

The @tetherto/mdk-foundation-ui package provides pre-built settings UI for common administrative tasks.

Either use:

All-in-one dashboard (SettingsDashboard): renders all settings sections in collapsible accordions.
Individual components: use FeatureFlagsSettings, HeaderControlsSettings, etc. directly for custom layouts.

Settings dashboard

The main container that renders settings sections in accordion panels.

Each section renders if you provide its props, giving you control over the sections you need.

import { SettingsDashboard } from '@tetherto/mdk-foundation-ui'

Props

Prop	Type	Default	Description
`showFeatureFlags`	`boolean`	`false`	Show the feature flags section (requires `featureFlagsProps`)
`headerControlsProps`	`HeaderControlsSettingsProps`	none	Props for header controls section
`rbacControlProps`	`RBACControlSettingsProps`	none	Props for RBAC/user management section
`importExportProps`	`ImportExportSettingsProps`	none	Props for import/export section
`featureFlagsProps`	`FeatureFlagsSettingsProps`	none	Props for feature flags section
`dangerActions`	`ActionButtonProps[]`	none	Entries forwarded to `ActionButton` (`@tetherto/mdk-core-ui`). See advanced usage for danger actions with confirmation.
`className`	`string`	none	Additional CSS class

Basic usage

import { SettingsDashboard } from '@tetherto/mdk-foundation-ui'

function SettingsPage() {
  return (
    <SettingsDashboard
      headerControlsProps={{
        preferences: headerPrefs,
        onToggle: handleToggle,
        onReset: handleReset,
      }}
      rbacControlProps={{
        users,
        roles,
        rolePermissions,
        permissionLabels,
        canWrite: true,
        onCreateUser,
        onUpdateUser,
        onDeleteUser,
      }}
      importExportProps={{
        onExport: handleExport,
        onImport: handleImport,
        onParseFile: parseSettingsFile,
      }}
      dangerActions={[
        {
          label: 'Reboot system',
          variant: 'danger',
          confirmation: {
            title: 'Reboot system',
            description: 'This restarts device workers. Ensure no pending actions remain.',
            onConfirm: handleReboot,
          },
        },
      ]}
    />
  )
}

Advanced usage for danger actions with confirmation

Use dangerActions when you need high-impact controls below the Settings heading and above the accordion sections. Each item follows ActionButton props: at minimum label, variant, and a confirmation object. Set mode: 'dialog' for modal confirmations (for example two side-by-side danger actions).

<SettingsDashboard
  headerControlsProps={/* ... */}
  rbacControlProps={/* ... */}
  importExportProps={/* ... */}
  dangerActions={[
    {
      label: 'Restart orchestration',
      variant: 'danger',
      mode: 'dialog',
      confirmation: {
        title: 'Restart orchestration',
        description: (
          <p>
            Restarts orchestration workers. Ensure maintenance windows are respected.
          </p>
        ),
        onConfirm: () => {
          void restartOrchestration()
        },
      },
    },
    {
      label: 'Disable automation policy',
      variant: 'danger',
      mode: 'dialog',
      confirmation: {
        title: 'Disable automation policy',
        description:
          'Automated mitigations will stop until you re-enable the policy.',
        onConfirm: () => {
          void disableAutomationPolicy()
        },
      },
    },
  ]}
/>

Full ActionButton semantics (confirmation fields, mode, loading, etc.) live under Form components: ActionButton.

Accordion sections

The dashboard renders each settings section inside an Accordion component from @tetherto/mdk-core-ui:

Header Controls: toggle visibility of header metrics
Access control: manage users and role-based permissions
Import / Export: backup and restore configuration
Feature Flags: toggle feature flags (requires showFeatureFlags={true})

Styling

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

.mdk-settings-dashboard__title: main heading
.mdk-settings-dashboard__danger-actions: container for danger action buttons
.mdk-settings-dashboard__accordions: container for accordion sections

Individual components

Use these components directly when you need a custom layout or only one settings section:

Component	Description
`SettingsDashboard`	Main settings container with accordion panels
`FeatureFlagsSettings`	Add, toggle, and delete feature flags
`HeaderControlsSettings`	Manage header visibility preferences
`ImportExportSettings`	Backup and restore settings
`RBACControlSettings`	User management with RBAC
`AddUserModal`	Create new users
`ManageUserModal`	Modal to edit users
`ChangeConfirmationModal`	Confirmation dialog