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 SettingsDashboard component is 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	Documentation
`SettingsDashboard`	All-in-one settings container	This page
`FeatureFlagsSettings`	Toggle feature flags	Feature flags
`HeaderControlsSettings`	Configure header visibility	Header controls
`ImportExportSettings`	Backup/restore settings	Import/Export
`RBACControlSettings`	User and role management	RBAC control
`AddUserModal`	Modal to add new users	User management
`ManageUserModal`	Modal to edit users	User management
`ChangeConfirmationModal`	Confirmation dialog	User management