Settings components

The @mdk/foundation 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 '@mdk/foundation'

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	Array of danger action buttons from `@mdk/core`
`className`	`string`	none	Additional CSS class

Basic usage

import { SettingsDashboard } from '@mdk/foundation'

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',
          onClick: handleReboot,
        },
      ]}
    />
  )
}

Accordion sections

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

Header Controls: toggle visibility of header metrics
RBAC 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