Issue #3545179 by fathershawn, nod_, joaopauloc.dev: Refactor ConfigSingleExportForm to use HTMX

  defaults:

    _title: 'Single export'

    _form: '\Drupal\config\Form\ConfigSingleExportForm'

    config_type: NULL

    config_name: NULL

    config_type: ''

    config_name: ''

  requirements:

    _permission: 'export configuration'

use Drupal\Core\Entity\EntityTypeManagerInterface;

use Drupal\Core\Entity\EntityTypeInterface;

use Drupal\Core\Form\FormBase;

use Drupal\Core\Form\FormState;

use Drupal\Core\Form\FormStateInterface;

use Drupal\Core\Htmx\Htmx;

use Drupal\Core\Serialization\Yaml;

use Drupal\Core\StringTranslation\TranslatableMarkup;

use Drupal\Core\Url;

use Symfony\Component\DependencyInjection\ContainerInterface;

/**

  /**

   * {@inheritdoc}

   */

  public function buildForm(array $form, FormStateInterface $form_state, $config_type = NULL, $config_name = NULL) {

    $form['#prefix'] = '<div id="js-config-form-wrapper">';

    $form['#suffix'] = '</div>';

  public function buildForm(array $form, FormStateInterface $form_state, string $config_type = '', string $config_name = '') {

    foreach ($this->entityTypeManager->getDefinitions() as $entity_type => $definition) {

      if ($definition->entityClassImplements(ConfigEntityInterface::class)) {

        $this->definitions[$entity_type] = $definition;

      '#type' => 'select',

      '#options' => $config_types,

      '#default_value' => $config_type,

      '#ajax' => [

        'callback' => '::updateConfigurationType',

        'wrapper' => 'js-config-form-wrapper',

      ],

    ];

    // The config_name element depends on the value of config_type.

    // Select and replace the wrapper element of the <select> tag

    $form_url = Url::fromRoute('config.export_single', ['config_type' => $config_type, 'config_name' => $config_name]);

    (new Htmx())

      ->post($form_url)

      ->select('*:has(>select[name="config_name"])')

      ->target('*:has(>select[name="config_name"])')

      ->swap('outerHTML')

      ->applyTo($form['config_type']);

    $default_type = $form_state->getValue('config_type', $config_type);

    $form['config_name'] = [

      '#title' => $this->t('Configuration name'),

      '#type' => 'select',

      '#options' => $this->findConfiguration($default_type),

      '#empty_option' => $this->t('- Select -'),

      '#default_value' => $config_name,

      '#prefix' => '<div id="edit-config-type-wrapper">',

      '#suffix' => '</div>',

      '#ajax' => [

        'callback' => '::updateExport',

        'wrapper' => 'edit-export-wrapper',

      ],

    ];

    // The export element depends on the value of config_type and config_name.

    // Select and replace the wrapper element of the export textarea.

    (new Htmx())

      ->post($form_url)

      ->select('[data-export-wrapper]')

      ->target('[data-export-wrapper]')

      ->swap('outerHTML')

      ->applyTo($form['config_name']);

    $form['export'] = [

      '#title' => $this->t('Here is your configuration:'),

      '#type' => 'textarea',

      '#rows' => 24,

      '#prefix' => '<div id="edit-export-wrapper">',

      '#suffix' => '</div>',

      '#wrapper_attributes' => [

        'data-export-wrapper' => TRUE,

      ],

    ];

    if ($config_type && $config_name) {

      $fake_form_state = (new FormState())->setValues([

        'config_type' => $config_type,

        'config_name' => $config_name,

      ]);

      $form['export'] = $this->updateExport($form, $fake_form_state);

    $pushUrl = FALSE;

    $trigger = $this->getHtmxTriggerName();

    if ($trigger == 'config_type') {

      $form = $this->updateConfigurationType($form, $form_state);

      // Also update the empty export element "out of band".

      (new Htmx())

        ->swapOob('outerHTML:[data-export-wrapper]')

        ->applyTo($form['export'], '#wrapper_attributes');

      $pushUrl = Url::fromRoute('config.export_single', ['config_type' => $default_type, 'config_name' => '']);

    }

    elseif ($trigger == 'config_name') {

      // A name is selected.

      $default_name = $form_state->getValue('config_name', $config_name);

      $form['export'] = $this->updateExport($form, $default_type, $default_name);

      // Update the url in the browser location bar.

      $pushUrl = Url::fromRoute('config.export_single', ['config_type' => $default_type, 'config_name' => $default_name]);

    }

    elseif ($config_type && $config_name) {

      // We started with values, update the export using those.

      $form['export'] = $this->updateExport($form, $config_type, $config_name);

    }

    if ($pushUrl) {

      (new Htmx())

        ->pushUrlHeader($pushUrl)

        ->applyTo($form);

    }

    return $form;

  }

  /**

   * Handles switching the export textarea.

   */

  public function updateExport($form, FormStateInterface $form_state) {

  public function updateExport($form, string $config_type, string $config_name) {

    // Determine the full config name for the selected config entity.

    if ($form_state->getValue('config_type') !== 'system.simple') {

      $definition = $this->entityTypeManager->getDefinition($form_state->getValue('config_type'));

      $name = $definition->getConfigPrefix() . '.' . $form_state->getValue('config_name');

    // Calling this in the main form build requires accounting for not yet

    // having input.

    if (!empty($config_type) && $config_type !== 'system.simple') {

      $definition = $this->entityTypeManager->getDefinition($config_type);

      $name = $definition->getConfigPrefix() . '.' . $config_name;

    }

    // The config name is used directly for simple configuration.

    else {

      $name = $form_state->getValue('config_name');

      $name = $config_name;

    }

    // Read the raw data for this config name, encode it, and display it.

    $exists = $this->configStorage->exists($name);

   * Handles switching the configuration type selector.

   */

  protected function findConfiguration($config_type) {

    $names = [

      '' => $this->t('- Select -'),

    ];

    $names = [];

    // For a given entity type, load all entities.

    if ($config_type && $config_type !== 'system.simple') {

      $entity_storage = $this->entityTypeManager->getStorage($config_type);