Issue #2807241 by Stefdewa, jhodgdon, Lendude, droplet, pjbaert, alexpott: Funky code in Views UI to make Add display list doesn't work in non-English languages

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

@@ -386,14 +386,9 @@
         .end()
         .eq(-1)
         .addClass('last');
-      // Remove the 'Add ' prefix from the button labels since they're being
-      // placed in an 'Add' dropdown. @todo This assumes English, but so does
-      // $addDisplayDropdown above. Add support for translation.
       $displayButtons.each(function () {
-        const label = this.value;
+        const $this = $(this);
-        if (label.substr(0, 4) === 'Add ') {
+        this.value = $this.attr('data-drupal-dropdown-label');
-          this.value = label.substr(4);
-        }
       });
       $addDisplayDropdown.appendTo($menu);
 

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

@@ -170,11 +170,8 @@
       var $displayButtons = $menu.nextAll('input.add-display').detach();
       $displayButtons.appendTo($addDisplayDropdown.find('.action-list')).wrap('<li>').parent().eq(0).addClass('first').end().eq(-1).addClass('last');
       $displayButtons.each(function () {
-        var label = this.value;
+        var $this = $(this);
-
+        this.value = $this.attr('data-drupal-dropdown-label');
-        if (label.substr(0, 4) === 'Add ') {
-          this.value = label.substr(4);
-        }
       });
       $addDisplayDropdown.appendTo($menu);
       $menu.find('li.add > a').on('click', function (event) {

core/modules/views_ui/src/ViewEditForm.php

@@ -793,7 +793,10 @@ class ViewEditForm extends ViewFormBase {
         '#value' => $this->t('Add @display', ['@display' => $label]),
         '#limit_validation_errors' => [],
         '#submit' => ['::submitDisplayAdd', '::submitDelayDestination'],
-        '#attributes' => ['class' => ['add-display']],
+        '#attributes' => [
+          'class' => ['add-display'],
+          'data-drupal-dropdown-label' => $label,
+        ],
         // Allow JavaScript to remove the 'Add ' prefix from the button label when
         // placing the button in an "Add" dropdown menu.
         '#process' => array_merge(['views_ui_form_button_was_clicked'], $this->elementInfo->getInfoProperty('submit', '#process', [])),

core/modules/views_ui/tests/src/FunctionalJavascript/DisplayTest.php

@@ -3,10 +3,14 @@
 namespace Drupal\Tests\views_ui\FunctionalJavascript;
 
 use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+use Drupal\language\Entity\ConfigurableLanguage;
+use Drupal\locale\SourceString;
 use Drupal\views\Entity\View;
 use Drupal\views\Tests\ViewTestData;
 use Drupal\Tests\node\Traits\NodeCreationTrait;
 
+// cSpell:ignore Blokk hozzáadása
+
 /**
  * Tests the display UI.
  *
@@ -23,6 +27,8 @@ class DisplayTest extends WebDriverTestBase {
     'block',
     'contextual',
     'node',
+    'language',
+    'locale',
     'views',
     'views_ui',
     'views_test_config',
@@ -152,4 +158,54 @@ class DisplayTest extends WebDriverTestBase {
     $assert_session->pageTextContains('This is text added to the display edit form');
   }
 
+  /**
+   * Test if 'add' translations are filtered from multilingual display options.
+   */
+  public function testAddDisplayBlockTranslation() {
+
+    // Set up an additional language (Hungarian).
+    $langcode = 'hu';
+    ConfigurableLanguage::createFromLangcode($langcode)->save();
+    $config = $this->config('language.negotiation');
+    $config->set('url.prefixes', [$langcode => $langcode])->save();
+    \Drupal::service('kernel')->rebuildContainer();
+    \Drupal::languageManager()->reset();
+
+    // Add Hungarian translations.
+    $this->addTranslation($langcode, 'Block', 'Blokk');
+    $this->addTranslation($langcode, 'Add @display', '@display hozzáadása');
+
+    $this->drupalGet('hu/admin/structure/views/view/test_display');
+    $page = $this->getSession()->getPage();
+
+    $page->find('css', '#views-display-menu-tabs .add')->click();
+
+    // Wait for the animation to complete.
+    $this->assertSession()->assertWaitOnAjaxRequest();
+
+    // Look for the input element, always in second spot.
+    $elements = $page->findAll('css', '.add ul input');
+    $this->assertEquals('Blokk', $elements[1]->getAttribute('value'));
+  }
+
+  /**
+   * Helper function for adding interface text translations.
+   */
+  private function addTranslation($langcode, $source_string, $translation_string) {
+    $storage = \Drupal::service('locale.storage');
+    $string = $storage->findString(['source' => $source_string]);
+    if (is_null($string)) {
+      $string = new SourceString();
+      $string
+        ->setString($source_string)
+        ->setStorage($storage)
+        ->save();
+    }
+    $storage->createTranslation([
+      'lid' => $string->getId(),
+      'language' => $langcode,
+      'translation' => $translation_string,
+    ])->save();
+  }
+
 }