Issue #3067085 by huzooka, lauriii, bnjmnm, tim.plunkett, phenaproxima: Views...

Issue #3067085 by huzooka, lauriii, bnjmnm, tim.plunkett, phenaproxima: Views top dropbutton breaks when editing a view

core/tests/Drupal/FunctionalJavascriptTests/Theme/ClaroViewsUiTest.php

+<?php
+
+namespace Drupal\FunctionalJavascriptTests\Theme;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Runs tests on Views UI using Claro.
+ *
+ * @group claro
+ */
+class ClaroViewsUiTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['views_ui'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'claro';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    // Disable automatic live preview to make the sequence of calls clearer.
+    $this->config('views.settings')->set('ui.always_live_preview', FALSE)->save();
+
+    // Create the test user and log in.
+    $admin_user = $this->drupalCreateUser([
+      'administer views',
+      'access administration pages',
+      'view the administration theme',
+    ]);
+    $this->drupalLogin($admin_user);
+  }
+
+  /**
+   * Tests Views UI display menu tabs CSS classes.
+   *
+   * Ensures that the CSS classes added to display menu tabs are preserved when
+   * Views UI is updated with AJAX.
+   */
+  public function testViewsUiTabsCssClasses() {
+    $this->drupalGet('admin/structure/views/view/who_s_online');
+    $assert_session = $this->assertSession();
+    $assert_session->elementExists('css', '#views-display-menu-tabs.views-tabs.views-tabs--secondary');
+    // Click on the Display name and wait for the Views UI dialog.
+    $assert_session->elementExists('css', '#edit-display-settings-top .views-display-setting a')->click();
+    $this->assertNotNull($this->assertSession()->waitForElement('css', '.js-views-ui-dialog'));
+    // Click the Apply button of the dialog.
+    $assert_session->elementExists('css', '.js-views-ui-dialog .ui-dialog-buttonpane')->findButton('Apply')->press();
+    // Wait for AJAX to finish.
+    $assert_session->assertWaitOnAjaxRequest();
+
+    // Check that the display menu tabs list still has the expected CSS classes.
+    $assert_session->elementExists('css', '#views-display-menu-tabs.views-tabs.views-tabs--secondary');
+  }
+
+  /**
+   * Tests Views UI dropbutton CSS classes.
+   *
+   * Ensures that the CSS classes added to the Views UI extra actions dropbutton
+   * in .views-display-top are preserved when Views UI is refreshed with AJAX.
+   */
+  public function testViewsUiDropButtonCssClasses() {
+    $this->drupalGet('admin/structure/views/view/who_s_online');
+    $assert_session = $this->assertSession();
+    $extra_actions_dropbutton_list = $assert_session->elementExists('css', '#views-display-extra-actions.dropbutton--small');
+    $list_item_selectors = ['li:first-child', 'li:last-child'];
+    // Test list item CSS classes.
+    foreach ($list_item_selectors as $list_item_selector) {
+      $this->assertNotNull($extra_actions_dropbutton_list->find('css', "$list_item_selector.dropbutton__item.dropbutton__item--small"));
+    }
+
+    // Click on the Display name and wait for the Views UI dialog.
+    $assert_session->elementExists('css', '#edit-display-settings-top .views-display-setting a')->click();
+    $this->assertNotNull($this->assertSession()->waitForElement('css', '.js-views-ui-dialog'));
+    // Click the Apply button of the dialog.
+    $assert_session->elementExists('css', '.js-views-ui-dialog .ui-dialog-buttonpane')->findButton('Apply')->press();
+    // Wait for AJAX to finish.
+    $this->assertSession()->assertWaitOnAjaxRequest();
+
+    // Check that the drop button list still has the expected CSS classes.
+    $this->assertTrue($extra_actions_dropbutton_list->hasClass('dropbutton--small'));
+    // Check list item CSS classes.
+    foreach ($list_item_selectors as $list_item_selector) {
+      $this->assertNotNull($extra_actions_dropbutton_list->find('css', "$list_item_selector.dropbutton__item.dropbutton__item--small"));
+    }
+  }
+
+}

core/themes/claro/claro.theme

@@ -521,69 +521,72 @@ function claro_form_media_form_alter(&$form, FormStateInterface $form_state) {
 }
 
 /**
- * Implements hook_form_FORM_ID_alter() for view_edit_form.
+ * Implements hook_views_ui_display_top_alter().
  */
-function claro_form_view_edit_form_alter(&$form, FormStateInterface $form_state) {
+function claro_views_ui_display_top_alter(&$element) {
   // @todo remove this after https://www.drupal.org/node/3051605 has been
   //   solved.
-  $form['displays']['top']['tabs']['#prefix'] = preg_replace('/(class="(.+\s)?)tabs(\s.+"|")/', '$1views-tabs$3', $form['displays']['top']['tabs']['#prefix']);
-  $form['displays']['top']['tabs']['#prefix'] = preg_replace('/(class="(.+\s)?)secondary(\s.+"|")/', '$1views-tabs--secondary$3', $form['displays']['top']['tabs']['#prefix']);
+  $element['tabs']['#prefix'] = preg_replace('/(class="(.+\s)?)tabs(\s.+"|")/', '$1views-tabs$3', $element['tabs']['#prefix']);
+  $element['tabs']['#prefix'] = preg_replace('/(class="(.+\s)?)secondary(\s.+"|")/', '$1views-tabs--secondary$3', $element['tabs']['#prefix']);
 
-  foreach (Element::children($form['displays']['top']['tabs']) as $tab) {
-    $form['displays']['top']['tabs'][$tab]['#theme'] = 'menu_local_task__views_ui';
+  foreach (Element::children($element['tabs']) as $tab) {
+    $element['tabs'][$tab]['#theme'] = 'menu_local_task__views_ui';
   }
 
-  if (!empty($form['displays'])) {
-    // Change top extra actions to use the small dropbutton variant.
-    // @todo Revisit after https://www.drupal.org/node/3057581 is added.
-    if (!empty($form['displays']['top']['extra_actions'])) {
-      $form['displays']['top']['extra_actions']['#dropbutton_type'] = 'small';
-    }
+  // Change top extra actions to use the small dropbutton variant.
+  // @todo Revisit after https://www.drupal.org/node/3057581 is added.
+  if (!empty($element['extra_actions'])) {
+    $element['extra_actions']['#dropbutton_type'] = 'small';
+  }
+}
 
-    // We process the dropbutton-like element on views edit form's
-    // display settings top section.
-    //
-    // That element should be a regular Dropbutton.
-    //
-    // After that the reported issue is fixed and the element is rendered with
-    // the Dropbutton type, we just have to set it's '#dropbutton_type' to
-    // 'extrasmall'.
-    //
-    // @todo: revisit after https://www.drupal.org/node/3057577 is fixed.
-    $dummy_dropbutton = &$form['displays']['settings']['settings_content']['tab_content']['details']['top']['actions'];
+/**
+ * Implements hook_views_ui_display_tab_alter().
+ */
+function claro_views_ui_display_tab_alter(&$element) {
+  // We process the dropbutton-like element on views edit form's
+  // display settings top section.
+  //
+  // That element should be a regular Dropbutton.
+  //
+  // After that the reported issue is fixed and the element is rendered with
+  // the Dropbutton type, we just have to set it's '#dropbutton_type' to
+  // 'extrasmall'.
+  //
+  // @todo: revisit after https://www.drupal.org/node/3057577 is fixed.
+  $dummy_dropbutton = &$element['details']['top']['actions'];
 
-    if ($dummy_dropbutton) {
-      $child_keys = Element::children($dummy_dropbutton);
-      $prefix_regex = '/(<.*class\s*= *["\']?)([^"\']*)(.*)/i';
-      $child_count = 0;
+  if ($dummy_dropbutton) {
+    $child_keys = Element::children($dummy_dropbutton);
+    $prefix_regex = '/(<.*class\s*= *["\']?)([^"\']*)(.*)/i';
+    $child_count = 0;
 
-      foreach ($child_keys as $key) {
-        if (in_array($key, ['prefix', 'suffix'])) {
-          continue;
-        }
-        $nested_child_keys = Element::children($dummy_dropbutton[$key], TRUE);
+    foreach ($child_keys as $key) {
+      if (in_array($key, ['prefix', 'suffix'])) {
+        continue;
+      }
+      $nested_child_keys = Element::children($dummy_dropbutton[$key], TRUE);
 
-        if (!empty($nested_child_keys)) {
-          foreach ($nested_child_keys as $nested_key) {
-            $child_count++;
-            $prefix = $dummy_dropbutton[$key][$nested_key]['#prefix'];
-            $dummy_dropbutton[$key][$nested_key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item dropbutton__item--extrasmall$3', $prefix);
-          }
-        }
-        else {
+      if (!empty($nested_child_keys)) {
+        foreach ($nested_child_keys as $nested_key) {
           $child_count++;
-          $prefix = $dummy_dropbutton[$key]['#prefix'];
-          $dummy_dropbutton[$key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item dropbutton__item--extrasmall$3', $prefix);
+          $prefix = $dummy_dropbutton[$key][$nested_key]['#prefix'];
+          $dummy_dropbutton[$key][$nested_key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item dropbutton__item--extrasmall$3', $prefix);
         }
       }
-
-      if (!empty($dummy_dropbutton['prefix']) && !empty($dummy_dropbutton['prefix']['#markup'])) {
-        $classes = 'dropbutton--extrasmall ';
-        $classes .= ($child_count > 1) ? 'dropbutton--multiple' : 'dropbutton--single';
-        $prefix = $dummy_dropbutton['prefix']['#markup'];
-        $dummy_dropbutton['prefix']['#markup'] = preg_replace($prefix_regex, '$1$2 ' . $classes . '$3', $prefix);
+      else {
+        $child_count++;
+        $prefix = $dummy_dropbutton[$key]['#prefix'];
+        $dummy_dropbutton[$key]['#prefix'] = preg_replace($prefix_regex, '$1$2 dropbutton__item dropbutton__item--extrasmall$3', $prefix);
       }
     }
+
+    if (!empty($dummy_dropbutton['prefix']) && !empty($dummy_dropbutton['prefix']['#markup'])) {
+      $classes = 'dropbutton--extrasmall ';
+      $classes .= ($child_count > 1) ? 'dropbutton--multiple' : 'dropbutton--single';
+      $prefix = $dummy_dropbutton['prefix']['#markup'];
+      $dummy_dropbutton['prefix']['#markup'] = preg_replace($prefix_regex, '$1$2 ' . $classes . '$3', $prefix);
+    }
   }
 }