Problem/Motivation

With the changes made in #2829676: Change remove button by an "x" @Berdir suggested:

displaying the confirm/cancel (do we even have cancel right now?) as a centered element in the main area, not on the top-right corner like it is now. Probably even as a button type primary, so it is blue and well visible? Or maybe even some kind of client-side dialog/confirmation for faster user interaction?

After discussion we realized that core usually removes the element without a confirm form when a field is multiple.

Which would lead to have a more core-ish UI when deleting a paragraph.

Proposed resolution

Improve the UI when deleting a Paragraphs to declutter the UI and fix tests. This means to remove the confirmation buttons and remove the paragraph straight when clicking the remove button.

Remaining tasks

User interface changes

API changes

Data model changes

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

yongt9412 created an issue. See original summary.

miro_dietiker’s picture

Having deleted as an intermediate state that can be undone is very drupal atypical. Why not simply execute the removal and even completely drop the deleted state?
It's not saved yet. So nothing is lost until a user clicks on save. That's Drupal typical.

drobnjak’s picture

johnchque’s picture

Assigned: Unassigned » johnchque

Great, I gonna work on this.

johnchque’s picture

Now the Paragraph is deleted when clicking the x, no restore/confirm removal option.

Status: Needs review » Needs work

The last submitted patch, 5: improve_confirm-2831409-5.patch, failed testing.

The last submitted patch, 5: improve_confirm-2831409-5.patch, failed testing.

johnchque’s picture

Fixing tests. :)

tduong’s picture

Looks nice :)
But I'm a bit confused about some points:

  1. +++ b/src/Plugin/Field/FieldWidget/InlineParagraphsWidget.php
    @@ -1146,7 +1104,7 @@ class InlineParagraphsWidget extends WidgetBase {
           // If our mode is remove don't save or reference this entity.
    

    This comment should be updated as well (?) Not sure.. check first my last point.

  2. +++ b/src/Tests/ParagraphsAdministrationTest.php
    @@ -374,27 +374,10 @@ class ParagraphsAdministrationTest extends WebTestBase {
         $this->drupalPostForm(NULL, NULL, t('Remove'));
         $this->assertNoField('field_paragraphs[1][subform][field_text][0][value]');
         $this->assertNoRaw('<a href="' . $img2_url . '" type="image/jpeg; length=21">myImage2.jpg</a>');
    

    Below these assertions, shouldn't we check also that this action is not "saved"/"these paragraphs are not actually deleted" if the user doesn't click on "Save an keep published", and then keep the rest of the test (// Delete the node) ?

  3. +++ b/src/Tests/ParagraphsContactTest.php
    @@ -43,6 +43,6 @@ class ParagraphsContactTest extends ParagraphsTestBase {
         $this->drupalPostAjaxForm(NULL, [], 'paragraphs_0_remove');
    

    Why changing the mode name to have 'removed' but keeping the element name like 'paragraphs_'ID'_remove' ?

Also since it is a UI change, some screenshots should be provided, but not sure what is the change exactly ...

johnchque’s picture

Right, let's make it fit better. Also added the requested tests. :) No idea what to take screenshot from.

tduong’s picture

+++ b/src/Tests/ParagraphsAdministrationTest.php
@@ -374,6 +374,10 @@
+    // Assert the paragraph is not deleted unless the user saves the node.

"... unless the user saves the node.", then shouldn't there be also the test lines where the user saves the removed paragraph and check again the Edit page if the paragraph is actually deleted (?)

Otherwise looks alright for me :)

johnchque’s picture

miro_dietiker’s picture

BTW this was discussed already in a previous issue at #2414851: Make remove button remove the paragraph immediately
What confuses me is, that i cant see that issue change anything.

The previous parent issue is not directly related to overhauling the behavior of the remove / delete button.

Status: Needs review » Needs work

The last submitted patch, 12: improve_confirm-2831409-12.patch, failed testing.

The last submitted patch, 12: improve_confirm-2831409-12.patch, failed testing.

johnchque’s picture

Assigned: johnchque » Unassigned
Status: Needs work » Needs review
FileSize
11.4 KB

The issue related didn't fix what is discussed here even the title says so, what it did was to add a "Deleted paragraph: paragraph type" message to the confirmation form. Will focus on bigger issues now.

johnchque’s picture

Title: Improve Confirm Deletion / restore actions for paragraphs » Remove Confirm Deletion / restore actions for paragraphs
Issue summary: View changes

Updated the issue summary and title.

miro_dietiker’s picture

Status: Needs review » Fixed
FileSize
4.28 KB

So Thunder proposed some general UX improvements for their product at #2828095: [META] Roadmap for a better authoring UX
The specific proposal about the remove behavior is not yet visible, but it is aligned with our direction:

They propose a client side confirmation prior to delete submission. The remove button will basically expand and ask for confirmation.
That doesn't involve any ajax and thus our current behavior would even forcing them to override the server side double confirmation to avoid then triple confirmation.

Since i didn't get any negative feedback for this removal thing, committed it is.
One state less, much complexity gone. Party!

(Attaching interdiff of my additional changes prior to commit. Local tests passed. I managed to get rid of some code duplication around the remove button.)

I'm highly open to readd some less stateful client side double confirmation. (With JS test coverage :-) )

pixelmord’s picture

Regarding #19:
I created the meta issue for thunder that is related to this, our initial wireframes are visible in #2833922: Introduce a quick but safe way to remove/delete paragraphs. Thank you for the ground work to make this possible!
We need to see when we get to the point on our roadmap where we can introduce a client side JS solution for a quick confirmation similar to what is shown in the wireframe animation.

miro_dietiker’s picture

Putting it into references. Thx!

pixelmord’s picture

Added a feature request issue to open up discussion and have an issue where a patch and tests can be created:
#2833934: Introduce client side remove, with confirmation? and undo

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Alexandre360’s picture

I installed the latest paragraph 8.x and I still have confirmation message when I try to delete a paragraph, did I miss something ?

Adam Clarey’s picture

This seems to have been reverted in later commits which is a shame because having to confirm removal is really annoying

hmdnawaz’s picture

Here is the patch again for the latest version which was reverted in the latest commits.

baikho’s picture

I'm seeing the same on latest of 8.x-1.x. Can we re-open this issue? It doesn't make sense to me to display this message if the functionality ignores the "confirm removal" option on save of a node or entity.

Berdir’s picture

We will not change the legacy widget. Try the other one where this implemented

Hugo Chhor’s picture

Version: 8.x-1.x-dev » 8.x-1.12

For those who want to easily skip "Confirm deletion / Restore actions" behavior, just implement this HOOK :

/**
 * Implements hook_field_widget_WIDGET_TYPE_form_alter().
 */
function your_module_field_widget_entity_reference_paragraphs_form_alter(&$element, &$form_state, $context)
{
  // Skip "Confirm deletion / Restore actions" behavior for a given paragraph.
  if ($element['#paragraph_type'] == 'your_paragraph_machine_name') {
    $element['top']['links']['remove_button']['#paragraphs_mode'] = 'removed';
  }
}

After the deletion, the data remain in the hidden state until the form is saved by the form submit button.
i.e. : If we refresh the page before saving the form, the data reappear as before.

The solution came to me after reading these Paragraphs files :
-- .../Plugin/Field/FieldWidget/InlineParagraphsWidget.php
-- .../tests/modules/paragraphs_test/paragraphs_test.module

Hope it would help ;-)