Issue #2712505 by StryKaizer: Clean up facet add form

core_search_facets/src/Plugin/facets/facet_source/CoreNodeSearchFacetSource.php

@@ -187,8 +187,8 @@ class CoreNodeSearchFacetSource extends FacetSourcePluginBase implements CoreSea
     $form['field_identifier'] = [
       '#type' => 'select',
       '#options' => $this->getFields(),
-      '#title' => $this->t('Facet field'),
-      '#description' => $this->t('Choose the indexed field.'),
+      '#title' => $this->t('Field'),
+      '#description' => $this->t('The field from the selected facet source which contains the data to build a facet for.'),
       '#required' => TRUE,
       '#default_value' => $this->facet->getFieldIdentifier(),
     ];

core_search_facets/src/Tests/IntegrationTest.php

@@ -207,9 +207,7 @@ class IntegrationTest extends WebTestBase {
     $form_values = [
       'id' => $id,
       'status' => 1,
-      'url_alias' => $id,
       'name' => $name,
-      'weight' => 2,
       'facet_source_id' => 'core_node_search:node_search',
       'facet_source_configs[core_node_search:node_search][field_identifier]' => $type,
     ];
@@ -359,14 +357,12 @@ class IntegrationTest extends WebTestBase {
       'name' => '',
       'id' => $facet_id,
       'status' => 1,
-      'url_alias' => $facet_id,
-      'weight' => 4,
     ];
 
     // Try filling out the form, but without having filled in a name for the
     // facet to test for form errors.
     $this->drupalPostForm($facet_add_page, $form_values, $this->t('Save'));
-    $this->assertText($this->t('Facet name field is required.'));
+    $this->assertText($this->t('Name field is required.'));
     $this->assertText($this->t('Facet source field is required.'));
 
     // Make sure that when filling out the name, the form error disappears.
@@ -380,7 +376,7 @@ class IntegrationTest extends WebTestBase {
 
     // The facet field is still required.
     $this->drupalPostForm(NULL, $form_values, $this->t('Save'));
-    $this->assertText($this->t('Facet field field is required.'));
+    $this->assertText($this->t('Field field is required.'));
 
     // Fill in all fields and make sure the 'field is required' message is no
     // longer shown.

facets.libraries.yml

@@ -6,6 +6,16 @@ drupal.facets.index-active-formatters:
     - core/jquery
     - core/drupal
     - core/jquery.once
+
+drupal.facets.edit-facet:
+  version: VERSION
+  js:
+    js/edit-facet.js: {}
+  dependencies:
+    - core/jquery
+    - core/drupal
+    - core/jquery.once
+
 drupal.facets.admin_css:
   version: VERSION
   css:

js/edit-facet.js

+/**
+ * @file
+ * UX improvements for the facet edit form.
+ */
+
+(function ($) {
+
+  "use strict";
+
+  Drupal.behaviors.facetsEditForm = {
+    attach: function (context, settings) {
+      $('.facet-source-field-wrapper select').change(function () {
+
+        var default_name = $(this).find('option:selected').text();
+        $('#edit-name').val(default_name);
+        setTimeout(function () { $('#edit-name').trigger('change'); }, 100);
+
+      })
+    }
+  };
+
+})(jQuery);

src/Form/FacetDisplayForm.php

@@ -328,6 +328,18 @@ class FacetDisplayForm extends EntityForm {
       '#default_value' => $facet->getShowOnlyOneResult(),
     ];
 
+    $form['facet_settings']['url_alias'] = [
+      '#type' => 'machine_name',
+      '#title' => $this->t('Url alias'),
+      '#default_value' => $facet->getUrlAlias(),
+      '#maxlength' => 50,
+      '#required' => TRUE,
+      '#machine_name' => [
+        'exists' => [\Drupal::service('entity_type.manager')->getStorage('facets_facet'), 'load'],
+        'source' => ['name'],
+      ],
+    ];
+
     $empty_behavior_config = $facet->getEmptyBehavior();
     $form['facet_settings']['empty_behavior'] = [
       '#type' => 'radios',
@@ -368,6 +380,14 @@ class FacetDisplayForm extends EntityForm {
       '#default_value' => $facet->getExclude(),
     ];
 
+    $form['facet_settings']['weight'] = [
+      '#type' => 'number',
+      '#title' => $this->t('Weight'),
+      '#default_value' => $facet->getWeight(),
+      '#maxlength' => 4,
+      '#required' => TRUE,
+    ];
+
     $form['weights'] = array(
       '#type' => 'details',
       '#title' => t('Advanced settings'),
@@ -522,6 +542,8 @@ class FacetDisplayForm extends EntityForm {
     }
 
     $facet->setWidget($form_state->getValue('widget'));
+    $facet->setUrlAlias($form_state->getValue(['facet_settings', 'url_alias']));
+    $facet->setWeight((int) $form_state->getValue(['facet_settings', 'weight']));
     $facet->setWidgetConfigs($form_state->getValue('widget_configs'));
     $facet->setOnlyVisibleWhenFacetSourceIsVisible($form_state->getValue(['facet_settings', 'only_visible_when_facet_source_is_visible']));
     $facet->setShowOnlyOneResult($form_state->getValue(['facet_settings', 'show_only_one_result']));

src/Form/FacetForm.php

@@ -122,6 +122,8 @@ class FacetForm extends EntityForm {
 
     $this->buildEntityForm($form, $form_state, $this->getEntity());
 
+    $form['#attached']['library'][] = 'facets/drupal.facets.edit-facet';
+
     return $form;
   }
 
@@ -143,41 +145,10 @@ class FacetForm extends EntityForm {
       return;
     }
 
-    $form['name'] = [
-      '#type' => 'textfield',
-      '#title' => $this->t('Facet name'),
-      '#description' => $this->t('Enter the displayed name for the facet.'),
-      '#default_value' => $facet->label(),
-      '#required' => TRUE,
-    ];
-
-    $form['id'] = [
-      '#type' => 'machine_name',
-      '#default_value' => $facet->id(),
-      '#maxlength' => 50,
-      '#required' => TRUE,
-      '#machine_name' => [
-        'exists' => [$this->getFacetStorage(), 'load'],
-        'source' => ['name'],
-      ],
-    ];
-
-    $form['url_alias'] = [
-      '#type' => 'machine_name',
-      '#title' => $this->t('The name of the facet for usage in URLs'),
-      '#default_value' => $facet->getUrlAlias(),
-      '#maxlength' => 50,
-      '#required' => TRUE,
-      '#machine_name' => [
-        'exists' => [$this->getFacetStorage(), 'load'],
-        'source' => ['name'],
-      ],
-    ];
-
     $form['facet_source_id'] = [
       '#type' => 'select',
       '#title' => $this->t('Facet source'),
-      '#description' => $this->t('Select the source where this facet can find its fields.'),
+      '#description' => $this->t('The source where this facet can find its fields.'),
       '#options' => $facet_sources,
       '#default_value' => $facet->getFacetSourceId(),
       '#required' => TRUE,
@@ -210,14 +181,25 @@ class FacetForm extends EntityForm {
     ];
     $this->buildFacetSourceConfigForm($form, $form_state);
 
-    $form['weight'] = [
-      '#type' => 'number',
-      '#title' => $this->t('The weight of the facet'),
-      '#default_value' => $facet->getWeight(),
-      '#maxlength' => 4,
+    $form['name'] = [
+      '#type' => 'textfield',
+      '#title' => $this->t('Name'),
+      '#description' => $this->t('The administrative name used for this facet.'),
+      '#default_value' => $facet->label(),
       '#required' => TRUE,
     ];
 
+    $form['id'] = [
+      '#type' => 'machine_name',
+      '#default_value' => $facet->id(),
+      '#maxlength' => 50,
+      '#required' => TRUE,
+      '#machine_name' => [
+        'exists' => [$this->getFacetStorage(), 'load'],
+        'source' => ['name'],
+      ],
+    ];
+
     $form['status'] = [
       '#type' => 'checkbox',
       '#title' => $this->t('Enabled'),
@@ -258,6 +240,7 @@ class FacetForm extends EntityForm {
 
       if ($config_form = $facet_source->buildConfigurationForm([], $form_state)) {
         $form['facet_source_configs'][$facet_source_id]['#type'] = 'container';
+        $form['facet_source_configs'][$facet_source_id]['#attributes'] = ['class' => ['facet-source-field-wrapper']];
         $form['facet_source_configs'][$facet_source_id]['#title'] = $this->t('%plugin settings', ['%plugin' => $facet_source->getPluginDefinition()['label']]);
         $form['facet_source_configs'][$facet_source_id] += $config_form;
       }
@@ -311,14 +294,14 @@ class FacetForm extends EntityForm {
 
       // Set a default widget for new facets.
       $facet->setWidget('links');
+      $facet->setUrlAlias($form_state->getValue('id'));
+      $facet->setWeight(0);
 
       // Set default empty behaviour.
       $facet->setEmptyBehavior(['behavior' => 'none']);
       $facet->setOnlyVisibleWhenFacetSourceIsVisible(TRUE);
     }
 
-    $facet->setWeight((int) $form_state->getValue('weight'));
-
     $facet_source_id = $form_state->getValue('facet_source_id');
     if (!is_null($facet_source_id) && $facet_source_id !== '') {
       /** @var \Drupal\facets\FacetSource\FacetSourcePluginInterface $facet_source */

src/Plugin/facets/facet_source/SearchApiBaseFacetSource.php

@@ -66,8 +66,8 @@ abstract class SearchApiBaseFacetSource extends FacetSourcePluginBase {
     $form['field_identifier'] = [
       '#type' => 'select',
       '#options' => $this->getFields(),
-      '#title' => $this->t('Facet field'),
-      '#description' => $this->t('Choose the indexed field.'),
+      '#title' => $this->t('Field'),
+      '#description' => $this->t('The field from the selected facet source which contains the data to build a facet for.'),
       '#required' => TRUE,
       '#default_value' => $this->facet->getFieldIdentifier(),
     ];

src/Tests/ExampleContentTrait.php

@@ -108,9 +108,7 @@ trait ExampleContentTrait {
     $form_values = [
       'id' => $id,
       'status' => 1,
-      'url_alias' => $id,
       'name' => $name,
-      'weight' => 2,
       'facet_source_id' => 'search_api_views:search_api_test_view:page_1',
       'facet_source_configs[search_api_views:search_api_test_view:page_1][field_identifier]' => $field,
     ];

src/Tests/IntegrationTest.php

@@ -128,9 +128,7 @@ class IntegrationTest extends WebTestBase {
     $form_values = [
       'id' => $facet_id,
       'status' => 1,
-      'url_alias' => $facet_id,
       'name' => $facet_name,
-      'weight' => 2,
       'facet_source_id' => 'search_api_views:search_api_test_view:block_1',
       'facet_source_configs[search_api_views:search_api_test_view:block_1][field_identifier]' => 'type',
     ];
@@ -212,6 +210,7 @@ class IntegrationTest extends WebTestBase {
 
     $facet_add_page = '/admin/config/search/facets/add-facet';
     $facet_edit_page = '/admin/config/search/facets/' . $facet_id . '/edit';
+    $facet_display_page = '/admin/config/search/facets/' . $facet_id . '/display';
 
     $this->drupalGet($facet_add_page);
     $this->assertResponse(200);
@@ -222,14 +221,9 @@ class IntegrationTest extends WebTestBase {
       'status' => 1,
       'facet_source_id' => 'search_api_views:search_api_test_view:page_1',
       'facet_source_configs[search_api_views:search_api_test_view:page_1][field_identifier]' => 'type',
-      'weight' => 4,
     ];
     $this->drupalPostForm(NULL, ['facet_source_id' => 'search_api_views:search_api_test_view:page_1'], $this->t('Configure facet source'));
     $this->drupalPostForm(NULL, $form_values, $this->t('Save'));
-    $this->assertText($this->t('The name of the facet for usage in URLs field is required.'));
-
-    $form_values['url_alias'] = 'test';
-    $this->drupalPostForm(NULL, $form_values, $this->t('Save'));
     $this->assertRaw(t('Facet %name has been created.', ['%name' => $facet_name]));
 
     $this->createFacetBlock($facet_id);
@@ -239,11 +233,11 @@ class IntegrationTest extends WebTestBase {
     $this->assertLink('article');
 
     $this->clickLink('item');
-    $url = Url::fromUserInput('/search-api-test-fulltext', ['query' => ['f[0]' => 'test:item']]);
+    $url = Url::fromUserInput('/search-api-test-fulltext', ['query' => ['f[0]' => 'ab_facet:item']]);
     $this->assertUrl($url);
 
-    $this->drupalGet($facet_edit_page);
-    $this->drupalPostForm(NULL, ['url_alias' => 'llama'], $this->t('Save'));
+    $this->drupalGet($facet_display_page);
+    $this->drupalPostForm(NULL, ['facet_settings[url_alias]' => 'llama'], $this->t('Save'));
 
     $this->drupalGet('search-api-test-fulltext');
     $this->assertLink('item');
@@ -398,7 +392,6 @@ class IntegrationTest extends WebTestBase {
       'name' => 'name 1',
       'id' => 'name 1',
       'status' => 1,
-      'url_alias' => 'name',
     ];
     $this->drupalPostForm(NULL, $form_values, $this->t('Save'));
     $this->assertText($this->t('The machine-readable name must contain only lowercase letters, numbers, and underscores.'));
@@ -407,28 +400,10 @@ class IntegrationTest extends WebTestBase {
       'name' => 'name 1',
       'id' => 'name:&1',
       'status' => 1,
-      'url_alias' => 'name',
     ];
     $this->drupalPostForm(NULL, $form_values, $this->t('Save'));
     $this->assertText($this->t('The machine-readable name must contain only lowercase letters, numbers, and underscores.'));
 
-    $form_values = [
-      'name' => 'name 1',
-      'id' => 'name_1',
-      'status' => 1,
-      'url_alias' => 'name:1',
-    ];
-    $this->drupalPostForm(NULL, $form_values, $this->t('Save'));
-    $this->assertText($this->t('The machine-readable name must contain only lowercase letters, numbers, and underscores.'));
-
-    $form_values = [
-      'name' => 'name 1',
-      'id' => 'name_1',
-      'status' => 1,
-      'url_alias' => 'name_1',
-    ];
-    $this->drupalPostForm(NULL, $form_values, $this->t('Save'));
-    $this->assertNoText($this->t('The machine-readable name must contain only lowercase letters, numbers, and underscores.'));
   }
 
   /**
@@ -650,29 +625,26 @@ class IntegrationTest extends WebTestBase {
       'name' => '',
       'id' => $facet_id,
       'status' => 1,
-      'url_alias' => $facet_id,
     ];
 
     // Try filling out the form, but without having filled in a name for the
     // facet to test for form errors.
     $this->drupalPostForm($facet_add_page, $form_values, $this->t('Save'));
-    $this->assertText($this->t('Facet name field is required.'));
+    $this->assertText($this->t('Name field is required.'));
     $this->assertText($this->t('Facet source field is required.'));
-    $this->assertText($this->t('The weight of the facet field is required.'));
 
     // Make sure that when filling out the name, the form error disappears.
     $form_values['name'] = $facet_name;
-    $form_values['weight'] = 15;
     $this->drupalPostForm(NULL, $form_values, $this->t('Save'));
-    $this->assertNoText($this->t('Facet name field is required.'));
+    $this->assertNoText($this->t('Name field is required.'));
 
     // Configure the facet source by selecting one of the Search API views.
     $this->drupalGet($facet_add_page);
     $this->drupalPostForm(NULL, ['facet_source_id' => 'search_api_views:search_api_test_view:page_1'], $this->t('Configure facet source'));
 
-    // The facet field is still required.
+    // The field is still required.
     $this->drupalPostForm(NULL, $form_values, $this->t('Save'));
-    $this->assertText($this->t('Facet field field is required.'));
+    $this->assertText($this->t('Field field is required.'));
 
     // Fill in all fields and make sure the 'field is required' message is no
     // longer shown.
@@ -705,9 +677,7 @@ class IntegrationTest extends WebTestBase {
     $form_values = [
       'name' => $facet_name,
       'id' => $facet_id,
-      'url_alias' => $facet_id,
       'facet_source_id' => 'search_api_views:search_api_test_view:page_1',
-      'weight' => 7,
     ];
 
     $facet_source_configs['facet_source_configs[search_api_views:search_api_test_view:page_1][field_identifier]'] = $facet_type;

src/Tests/UrlIntegrationTest.php

@@ -54,9 +54,7 @@ class UrlIntegrationTest extends WebTestBase {
     $form_values = [
       'id' => $id,
       'status' => 1,
-      'url_alias' => $id,
       'name' => $name,
-      'weight' => 3,
       'facet_source_id' => 'search_api_views:search_api_test_view:page_1',
       'facet_source_configs[search_api_views:search_api_test_view:page_1][field_identifier]' => 'type',
     ];
@@ -136,7 +134,6 @@ class UrlIntegrationTest extends WebTestBase {
    */
   public function testColonValue() {
     $id = 'water_bear';
-    $url_alias = 'bear';
     $name = 'Water bear';
 
     $facet_add_page = 'admin/config/search/facets/add-facet';
@@ -147,9 +144,7 @@ class UrlIntegrationTest extends WebTestBase {
     $form_values = [
       'id' => $id,
       'status' => 1,
-      'url_alias' => $url_alias,
       'name' => $name,
-      'weight' => 1,
       'facet_source_id' => 'search_api_views:search_api_test_view:page_1',
       'facet_source_configs[search_api_views:search_api_test_view:page_1][field_identifier]' => 'keywords',
     ];
@@ -187,7 +182,7 @@ class UrlIntegrationTest extends WebTestBase {
     $this->assertResponse(200);
 
     // Make sure 'test:colon' is active.
-    $url = Url::fromUserInput('/search-api-test-fulltext', ['query' => ['f[0]' => 'bear:test:colon']]);
+    $url = Url::fromUserInput('/search-api-test-fulltext', ['query' => ['f[0]' => 'water_bear:test:colon']]);
     $this->assertUrl($url);
     $this->assertLink('(-) test:colon');
     $this->assertLink('orange');

src/Tests/WidgetIntegrationTest.php

@@ -51,9 +51,7 @@ class WidgetIntegrationTest extends WebTestBase {
     $form_values = [
       'id' => $id,
       'status' => 1,
-      'url_alias' => $id,
       'name' => $name,
-      'weight' => 13,
       'facet_source_id' => 'search_api_views:search_api_test_view:page_1',
       'facet_source_configs[search_api_views:search_api_test_view:page_1][field_identifier]' => 'type',
     ];
@@ -90,9 +88,7 @@ class WidgetIntegrationTest extends WebTestBase {
     $form_values = [
       'id' => $id,
       'status' => 1,
-      'url_alias' => $id,
       'name' => $name,
-      'weight' => 12,
       'facet_source_id' => 'search_api_views:search_api_test_view:page_1',
       'facet_source_configs[search_api_views:search_api_test_view:page_1][field_identifier]' => 'type',
     ];
@@ -105,9 +101,7 @@ class WidgetIntegrationTest extends WebTestBase {
     $form_values = [
       'id' => $id_2,
       'status' => 1,
-      'url_alias' => $id_2,
       'name' => $name_2,
-      'weight' => 8,
       'facet_source_id' => 'search_api_views:search_api_test_view:page_1',
       'facet_source_configs[search_api_views:search_api_test_view:page_1][field_identifier]' => 'keywords',
     ];
@@ -164,9 +158,7 @@ class WidgetIntegrationTest extends WebTestBase {
     $form_values = [
       'id' => $id,
       'status' => 1,
-      'url_alias' => $id,
       'name' => $name,
-      'weight' => 11,
       'facet_source_id' => 'search_api_views:search_api_test_view:page_1',
       'facet_source_configs[search_api_views:search_api_test_view:page_1][field_identifier]' => 'type',
     ];
@@ -204,9 +196,7 @@ class WidgetIntegrationTest extends WebTestBase {
     $form_values = [
       'id' => $id,
       'status' => 1,
-      'url_alias' => $id,
       'name' => $name,
-      'weight' => 10,
       'facet_source_id' => 'search_api_views:search_api_test_view:page_1',
       'facet_source_configs[search_api_views:search_api_test_view:page_1][field_identifier]' => 'type',
     ];
@@ -249,9 +239,7 @@ class WidgetIntegrationTest extends WebTestBase {
     $form_values = [
       'id' => $id,
       'status' => 1,
-      'url_alias' => $id,
       'name' => $name,
-      'weight' => 9,
       'facet_source_id' => 'search_api_views:search_api_test_view:page_1',
       'facet_source_configs[search_api_views:search_api_test_view:page_1][field_identifier]' => 'type',
     ];