From 6313876a1df310ff58b6d7f8396debe9ac476520 Mon Sep 17 00:00:00 2001
From: justin2pin <justin2pin@278450.no-reply.drupal.org>
Date: Tue, 4 Jan 2022 23:16:48 +0000
Subject: [PATCH] Added test coverage for deleting components. Simplified
 z-indexes that were...

---
 css/builder.css                               | 16 ++++------
 layout_paragraphs.module                      |  1 +
 src/Form/DeleteComponentForm.php              | 10 ++++++
 .../src/FunctionalJavascript/BuilderTest.php  | 31 +++++++++++++++++++
 4 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/css/builder.css b/css/builder.css
index 722c40c..e945973 100644
--- a/css/builder.css
+++ b/css/builder.css
@@ -1,6 +1,3 @@
-.lpb-dialog {
-  z-index: 700;
-}
 .lp-builder {
   min-height: 30px;
   position: relative;
@@ -74,13 +71,12 @@
 }
 .lpb-controls__wrapper {
   position: absolute;
-  z-index: 95;
 }
 .lpb-controls {
   cursor: default;
   padding: 5px;
   display: flex;
-  z-index: 10;
+  z-index: 80;
   position: absolute;
   left: 0;
   top: 0;
@@ -91,7 +87,7 @@
 }
 .lpb-controls:hover,
 .lpb-controls:focus-within {
-  z-index: 1010;
+  z-index: 90;
 }
 .lpb-controls.is-layout {
   background-color: #00659B;
@@ -226,7 +222,7 @@
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
-  z-index: 1000;
+  z-index: 80;
   left: 50%;
   transform: translateX(-50%);
   padding: 6px 10px;
@@ -253,7 +249,7 @@
   width: 24px;
   height: 24px;
   left: 50%;
-  z-index: 1000;
+  z-index: 80;
   position: absolute;
   border: 3px solid white;
   cursor: pointer;
@@ -275,7 +271,7 @@
 .lpb-btn:hover,
 .lpb-btn--add:focus-within,
 .lpb-btn:focus-within {
-  z-index: 1010;
+  z-index: 90;
 }
 .js-lpb-component .lpb-btn--add,
 .js-lpb-region .lpb-btn--add {
@@ -391,7 +387,7 @@ a.lpb-enable-button::before {
   text-align: center;
   padding: 10px;
   position: absolute;
-  z-index: 1000;
+  z-index: 90;
   bottom: 100%;
   left: -7px;
   margin-bottom: -2px;
diff --git a/layout_paragraphs.module b/layout_paragraphs.module
index 17d3689..384497a 100644
--- a/layout_paragraphs.module
+++ b/layout_paragraphs.module
@@ -242,6 +242,7 @@ function layout_paragraphs_preprocess_layout_paragraphs_builder_controls(&$varia
         'data-dialog-options' => Json::encode([
           'modal' => TRUE,
           'target' => Dialog::dialogId($layout),
+          'dialogClass' => 'lpb-dialog',
         ]),
       ],
       '#access' => $variables['delete_access'],
diff --git a/src/Form/DeleteComponentForm.php b/src/Form/DeleteComponentForm.php
index 6e0e1da..bd96cac 100644
--- a/src/Form/DeleteComponentForm.php
+++ b/src/Form/DeleteComponentForm.php
@@ -77,6 +77,10 @@ class DeleteComponentForm extends FormBase {
         '#ajax' => [
           'callback' => '::deleteComponent',
         ],
+        '#attributes' => [
+          'class' => ['lpb-btn--confirm-delete'],
+          'data-disable-refocus' => 'true',
+        ],
       ],
       'cancel' => [
         '#type' => 'button',
@@ -84,6 +88,12 @@ class DeleteComponentForm extends FormBase {
         '#ajax' => [
           'callback' => '::closeForm',
         ],
+        '#attributes' => [
+          'class' => [
+            'dialog-cancel',
+            'lpb-btn--cancel',
+          ],
+        ],
       ],
     ];
     return $form;
diff --git a/tests/src/FunctionalJavascript/BuilderTest.php b/tests/src/FunctionalJavascript/BuilderTest.php
index 2ab0ceb..714646b 100644
--- a/tests/src/FunctionalJavascript/BuilderTest.php
+++ b/tests/src/FunctionalJavascript/BuilderTest.php
@@ -61,6 +61,37 @@ class BuilderTest extends BuilderTestBase {
     $this->assertSession()->pageTextContains('Edit section');
   }
 
+  /**
+   * Tests deleting a component.
+   */
+  public function testDeleteComponent() {
+    $this->testAddComponent();
+    $this->drupalGet('node/1/edit');
+    $page = $this->getSession()->getPage();
+    // Press delete on the component in the first region.
+    $button = $page->find('css', '.layout__region--first a.lpb-delete');
+    $button->click();
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $this->assertSession()->pageTextContains('Delete text');
+    // Confirm delete.
+    $button = $page->find('css', 'button.lpb-btn--confirm-delete');
+    $button->click();
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    // Component should no longer be on page.
+    $this->assertSession()->pageTextNotContains('Some arbitrary text');
+    // Add a new component and press delete.
+    $this->addTextComponent('New text component.', '.layout__region--first .lpb-btn--add');
+    $button = $page->find('css', '.layout__region--first a.lpb-delete');
+    $button->click();
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    // Cancel the operation.
+    $button = $page->find('css', 'button.dialog-cancel');
+    $button->click();
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $this->assertSession()->pageTextContains('New text component.');
+    $this->assertSession()->pageTextNotContains('Delete text');
+  }
+
   /**
    * Tests reordering components with the "move up" button.
    */
-- 
GitLab