Issue #2409581 by geertvd, balagan: Views UI generates translated HTML class names for handlers / buckets

core/modules/views_ui/config/install/tour.tour.views-ui.yml

@@ -44,7 +44,7 @@ tips:
     body: 'If this view uses fields, they are listed here. You can click on a field to configure it.'
     weight: 5
     attributes:
-      data-class: views-ui-display-tab-bucket.fields
+      data-class: views-ui-display-tab-bucket.field
   views-ui-filter:
     id: views-ui-filter
     plugin: text
@@ -52,7 +52,7 @@ tips:
     body: 'Add filters to limit the results in the output. E.g., to only show content that is <em>published</em>, you would add a filter for <em>Published</em> and select <em>Yes</em>.'
     weight: 6
     attributes:
-      data-class: views-ui-display-tab-bucket.filter-criteria
+      data-class: views-ui-display-tab-bucket.filter
   views-ui-filter-operations:
     id: views-ui-filter-operations
     plugin: text
@@ -60,7 +60,7 @@ tips:
     body: 'Add, rearrange or remove filters.'
     weight: 7
     attributes:
-      data-class: 'views-ui-display-tab-bucket.filter-criteria .dropbutton-widget'
+      data-class: 'views-ui-display-tab-bucket.filter .dropbutton-widget'
   views-ui-sorts:
     id: views-ui-sorts
     plugin: text
@@ -68,7 +68,7 @@ tips:
     body: 'Control the order in which the results are output. Click on an active sort rule to configure it.'
     weight: 8
     attributes:
-      data-class: views-ui-display-tab-bucket.sort-criteria
+      data-class: views-ui-display-tab-bucket.sort
   views-ui-sorts-operations:
     id: views-ui-sorts-operations
     plugin: text
@@ -76,7 +76,7 @@ tips:
     body: 'Add, rearrange or remove sorting rules.'
     weight: 9
     attributes:
-      data-class: 'views-ui-display-tab-bucket.sort-criteria .dropbutton-widget'
+      data-class: 'views-ui-display-tab-bucket.sort .dropbutton-widget'
   views-ui-preview:
     id: views-ui-preview
     plugin: text

core/modules/views_ui/js/views-admin.js

@@ -395,7 +395,7 @@
   Drupal.behaviors.viewsUiPreview = {
     attach: function (context) {
       // Only act on the edit view form.
-      var $contextualFiltersBucket = $(context).find('.views-display-column .views-ui-display-tab-bucket.contextual-filters');
+      var $contextualFiltersBucket = $(context).find('.views-display-column .views-ui-display-tab-bucket.argument');
       if ($contextualFiltersBucket.length === 0) {
         return;
       }

core/modules/views_ui/src/Tests/DisplayTest.php

@@ -121,16 +121,15 @@ class DisplayTest extends UITestBase {
 
     $this->drupalGet('admin/structure/views/view/test_display/edit/display_no_area_test_1');
 
-    // Create a mapping of area type => class.
     $areas = array(
-      'header' => 'header',
-      'footer' => 'footer',
-      'empty' => 'no-results-behavior',
+      'header',
+      'footer',
+      'empty',
     );
 
     // Assert that the expected text is found in each area category.
-    foreach ($areas as $type => $class) {
-      $element = $this->xpath('//div[contains(@class, :class)]/div', array(':class' => $class));
+    foreach ($areas as $type) {
+      $element = $this->xpath('//div[contains(@class, :class)]/div', array(':class' => $type));
       $this->assertEqual((string) $element[0], String::format('The selected display type does not use @type plugins', array('@type' => $type)));
     }
   }

core/modules/views_ui/src/Tests/ViewsUITourTest.php

@@ -8,6 +8,7 @@
 namespace Drupal\views_ui\Tests;
 
 use Drupal\tour\Tests\TourTestBase;
+use Drupal\language\Entity\ConfigurableLanguage;
 
 /**
  * Tests the Views UI tour.
@@ -23,12 +24,19 @@ class ViewsUITourTest extends TourTestBase {
    */
   protected $adminUser;
 
+  /**
+   * String translation storage object.
+   *
+   * @var \Drupal\locale\StringStorageInterface
+   */
+  protected $localeStorage;
+
   /**
    * Modules to enable.
    *
    * @var array
    */
-  public static $modules = array('views_ui', 'tour');
+  public static $modules = array('views_ui', 'tour', 'language', 'locale');
 
   protected function setUp() {
     parent::setUp();
@@ -50,4 +58,59 @@ class ViewsUITourTest extends TourTestBase {
     $this->assertTourTips();
   }
 
+  /**
+   * Tests views_ui tour tip availability in a different language.
+   */
+  public function testViewsUiTourTipsTranslated() {
+    $langcode = 'nl';
+
+    // Add a default locale storage for this test.
+    $this->localeStorage = $this->container->get('locale.storage');
+
+    // Add Dutch language programmatically.
+    ConfigurableLanguage::createFromLangcode($langcode)->save();
+
+    // Handler titles that need translations.
+    $handler_titles = array(
+      'Format',
+      'Fields',
+      'Sort criteria',
+      'Filter criteria',
+    );
+
+    foreach ($handler_titles as $handler_title) {
+      // Create source string.
+      $source = $this->localeStorage->createString(array(
+        'source' => $handler_title
+      ));
+      $source->save();
+      $this->createTranslation($source, $langcode);
+    }
+
+    // Create a basic view that shows all content, with a page and a block
+    // display.
+    $view['label'] = $this->randomMachineName(16);
+    $view['id'] = strtolower($this->randomMachineName(16));
+    $view['page[create]'] = 1;
+    $view['page[path]'] = $this->randomMachineName(16);
+    // Load the page in dutch.
+    $this->drupalPostForm(
+      $langcode . '/admin/structure/views/add',
+      $view,
+      t('Save and edit')
+    );
+    $this->assertTourTips();
+  }
+
+  /**
+   * Creates single translation for source string.
+   */
+  public function createTranslation($source, $langcode) {
+    return $this->localeStorage->createTranslation(array(
+        'lid' => $source->lid,
+        'language' => $langcode,
+        'translation' => $this->randomMachineName(100),
+      ))->save();
+  }
+
 }

core/modules/views_ui/src/ViewEditForm.php

@@ -555,7 +555,7 @@ class ViewEditForm extends ViewFormBase {
         $build['columns'][$column][$id] = $bucket['build'];
         $build['columns'][$column][$id]['#theme_wrappers'][] = 'views_ui_display_tab_bucket';
         $build['columns'][$column][$id]['#title'] = !empty($bucket['title']) ? $bucket['title'] : '';
-        $build['columns'][$column][$id]['#name'] = !empty($bucket['title']) ? $bucket['title'] : $id;
+        $build['columns'][$column][$id]['#name'] = $id;
       }
     }
 
@@ -931,7 +931,8 @@ class ViewEditForm extends ViewFormBase {
     $build['#overridden'] = FALSE;
     $build['#defaulted'] = FALSE;
 
-    $build['#name'] = $build['#title'] = $types[$type]['title'];
+    $build['#name'] = $type;
+    $build['#title'] = $types[$type]['title'];
 
     $rearrange_url = Url::fromRoute('views_ui.form_rearrange', ['js' => 'nojs', 'view' => $view->id(), 'display_id' => $display['id'], 'type' => $type]);
     $class = 'icon compact rearrange';