# EditableSettingsList

A wrapper component that sets up a `react-final-form` Form instance specifically configured for managing a list of settings. It utilizes `react-final-form-arrays`'s `<FieldArray>` component, rendering the list using the `EditableSettingsListFieldArray` component.

This component simplifies rendering an editable settings list by encapsulating the necessary `react-final-form` setup, including array mutators and form configuration. It expects initial values under a specific structure and passes relevant props down to `EditableSettingsListFieldArray` for rendering and handling individual setting saves.

## Basic Usage

Import the component and provide it with initial values (structured correctly) and a save handler.

```jsx
const MyAppSettingsWrapper = () => {
  // Initial settings data must be under the 'settings' key
  const settingsInitialData = {
    settings: [
      { key: 'siteUrl', settingType: 'Refdata' },
      { key: 'adminPass', settingType: 'Password' },
      { key: 'featureFlagX', value: 'This is a string value', settingType: 'String' },
      // ... other settings with potentially different structures/types
      // handled by the underlying SettingField component
    ]
  };

  // This handler receives the individual setting object when saving a single row.
  // It's also technically wired to the form's onSubmit, though the component
  // doesn't provide an explicit form submit button.
  const handleSave = (settingData) => {
    console.log('Saving setting:', settingData);
    // Implement logic to persist the changed setting (e.g., API call)
    // It's recommended to return a Promise for react-final-form integration.
    // Example: return updateSettingApi(settingData);
    return Promise.resolve();
  };

  // Example: Check user permissions
  const userCanEditSettings = true;

  return (
    <div>
      <h2>Application Settings</h2>
      <EditableSettingsList
        allowEdit={userCanEditSettings}
        initialValues={settingsInitialData}
        intlKey="appSettings" // Optional: for label generation
        intlNS="settings"    // Optional: for label generation
        onSave={handleSave}
        // Optional: Pass contextual data if needed by SettingField
        // data={{ refdatavalues: [...] }}
        // Optional: Override specific labels
        // labelOverrides={{ adminEmail: 'Administrator Email Address' }}
      />
    </div>
  );
};
```

**Note:**
* This component depends on `react-final-form`, `react-final-form-arrays`, `final-form-arrays`, and the `EditableSettingsListFieldArray` component.
* The `initialValues` prop **must** be an object containing a key named `settings`, and the value of `settings` must be the array of setting objects you want to manage.
* The `onSave` function provided serves primarily as the callback for *individual* setting saves triggered within `EditableSettingsListFieldArray`. It receives the specific setting object being saved in that context.

## Props

| Name             | Type                           | Description                                                                                                                                                                                                                                                                                   | default     | required |
|------------------|--------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|----------|
| `allowEdit`      | `boolean`                      | A global flag passed down to control whether editing is enabled for all settings in the list.                                                                                                                                                                                                 | `true`      | ✕        |
| `data`           | `object`                       | Arbitrary data to be passed down through `EditableSettingsListFieldArray` to the underlying `SettingField` component(s). Often used for context like reference data values (e.g., `{ refdatavalues: [...] }`).                                                                                | `undefined` | ✕        |
| `initialValues`  | `object`                       | An object containing the initial values for the form. It **must** include a key named `settings` whose value is the array of setting objects.                                                                                                                                                 | `undefined` | ✓        |
| `intlKey`        | `string`                       | A base key passed down for generating internationalization keys/labels within `EditableSettingsListFieldArray` and `SettingField`.                                                                                                                                                            | `undefined` | ✕        |
| `intlNS`         | `string`                       | An internationalization namespace passed down for resolving labels within `EditableSettingsListFieldArray` and `SettingField`.                                                                                                                                                                | `undefined` | ✕        |
| `label`          | `string` \| `node` \| `object` | A label for the entire settings list/section. Passed to `<FieldArray>`, but its rendering depends on downstream components/customization.                                                                                                                                                     | `undefined` | ✕        |
| `labelOverrides` | `object`                       | An object passed down to `EditableSettingsListFieldArray` to allow overriding default labels for specific settings. Keys should match setting identifiers (e.g., `setting.key`), values are the custom labels.                                                                                | `{}`        | ✕        |
| `onSave`         | `func`                         | Callback function triggered primarily when an *individual* setting's save action is invoked within `EditableSettingsListFieldArray`. Receives the setting object being saved. Also connected to the internal `<Form>`'s `onSubmit`. Should handle persistence and ideally return a `Promise`. | `undefined` | ✓        |
| `render`         | `func`                         | A render prop passed down to `EditableSettingsListFieldArray` to allow full customization of how *each* setting row is rendered. See `EditableSettingsListFieldArray` documentation for details.                                                                                              | `undefined` | ✕        |