Problem/Motivation

Similar to the core request #2253257: Use a modal for entity delete operation links, it would be nice to have a simple configuration option for the confirm (and field entry) form action link type that would open the forms in a modal.

Proposed resolution

Add functionality to allow this behavior to be configurable.

Remaining tasks

User interface changes

API changes

Data model changes

Comments

jhedstrom created an issue. See original summary.

jhedstrom’s picture

Title: Add a modal form option to the confirm form action link type » Add a modal form option to the confirm and field entry form action link types
Issue summary: View changes
jhedstrom’s picture

Status: Active » Needs review
StatusFileSize
new4.97 KB

This works in manual testing. I started adding a test, but realized we should break out the trait conversion in the patch at #2826227: Test to verify flagging events with multiple flags into a separate issue so we can more readily write phpunit-based tests (specifically in this case, JavascriptTestBase tests).

jhedstrom’s picture

Assigned: jhedstrom » Unassigned

Status: Needs review » Needs work

The last submitted patch, 3: 2828201-02.patch, failed testing.

The last submitted patch, 3: 2828201-02.patch, failed testing.

jhedstrom’s picture

Status: Needs work » Needs review
StatusFileSize
new514 bytes
new5.27 KB
joachim’s picture

Status: Needs review » Needs work
+++ b/config/schema/flag.schema.yml
@@ -123,6 +123,9 @@ flag.link_type.plugin.confirm:
+    modal:
+      type: boolean
+      label: 'Use modal dialog'

This should be a new link type plugin, not an extra setting.

jhedstrom’s picture

This should be a new link type plugin, not an extra setting.

Since this would apply to both the confirm form and the field entry forms, there would be 2 new plugins?

joachim’s picture

Hmm good point...

joachim’s picture

I'm reluctant to add 2 more plugins... there would be a lot of code duplication.

Glancing at your patch, it looks like maybe this could be added to both the confirm and field entry plugins as a trait? There would be a 'modal' setting, but it would be on the plugin rather than on the flag.

Do any of the other maintainers and regular contributors have any thoughts on this?

jhedstrom’s picture

StatusFileSize
new5.41 KB
new4.98 KB

This moves the bulk of the logic to a trait.

There would be a 'modal' setting, but it would be on the plugin rather than on the flag.

The modal setting is part of the plugin config rather than the flag.

jhedstrom’s picture

Status: Needs work » Needs review
socketwench’s picture

Status: Needs review » Needs work
Issue tags: +Needs tests

Do any of the other maintainers and regular contributors have any thoughts on this?

I think a trait makes sense in this case.

So far, so good on this patch, but it needs tests.

jhedstrom’s picture

StatusFileSize
new1.54 KB
new3.85 KB

I was waiting on #2828255: Split out the flag create methods into a testing trait to add a test, now that is in, so here's the start of a javascript test.

It is failing locally with a really odd error:

1) Drupal\Tests\flag\FunctionalJavascript\ModalFormTest::testModalOption
Zumba\GastonJS\Exception\BrowserError: There was an error inside the PhantomJS portion of GastonJS.
This is probably a bug, so please report it:

so we'll see how the testbot likes it.

jhedstrom’s picture

StatusFileSize
new3.85 KB
new8.83 KB

Oops, wrong interdiff and patch. Ignore #15, this interdiff is against #12.

jhedstrom’s picture

Status: Needs work » Needs review
StatusFileSize
new1.32 KB
new9.07 KB

This test completes properly. I chatted with some folks on IRC, and there may be an issue with modals displaying properly in the test theme, *or* there may be an issue with using assertWaitOnAjaxRequest (if somehow 10 seconds isn't long enough to load the modal). Either way, this demonstrates the issue at hand here, and hopefully we can leave further modal layout testing to core :)

Status: Needs review » Needs work

The last submitted patch, 17: 2828201-17.patch, failed testing.

The last submitted patch, 17: 2828201-17.patch, failed testing.

dawehner’s picture

+++ b/src/Plugin/ActionLink/ModalFormTrait.php
@@ -0,0 +1,48 @@
+      $render['#attributes']['data-dialog-type'] = 'modal';

I wonder whether one should be able to specfify the dialog type: modal, dialog or outside in thingy

jhedstrom’s picture

I added #2831506: Minimal profile disallows modal AJAX tests under JavascriptTestBase for the weird behavior of the tests when using press().

jhedstrom’s picture

Status: Needs work » Needs review
Issue tags: -Needs tests
StatusFileSize
new6.11 KB
new9.29 KB

@dawehner good idea!

This makes the modal type configurable, and also fixes the test failures.

jhedstrom’s picture

We probably won't need the separate trait here if #2834881: Extract out common interface in FieldEntry and ConfirmForm action link plugins goes in, as these 2 plugins will then extend from a common base class.

joachim’s picture

socketwench’s picture

Status: Needs review » Postponed

Postponed until the above issue is in.

jhedstrom’s picture

Status: Postponed » Needs review
StatusFileSize
new7.16 KB

Here's an updated patch now that #2834881: Extract out common interface in FieldEntry and ConfirmForm action link plugins has been committed. It removes the trait, which is no longer needed since there is now a common base class.

socketwench’s picture

Status: Needs review » Reviewed & tested by the community

This looks good to me too.

joachim’s picture

Status: Reviewed & tested by the community » Needs work

Sorry to punt this back at this point... I've not been following this for a while.

  1. +++ b/config/schema/flag.schema.yml
    @@ -137,6 +140,9 @@ flag.link_type.plugin.field_entry:
    +    modal:
    +      type: string
    +      label: 'Use modal dialog'
    

    This makes it sound like it should be a boolean....

  2. +++ b/src/Plugin/ActionLink/FormEntryTypeBase.php
    @@ -62,6 +66,18 @@ abstract class FormEntryTypeBase extends ActionLinkTypeBase implements FormEntry
    +    $form['display']['settings']['link_options_' . $plugin_id]['modal'] = [
    +      '#type' => 'radios',
    +      '#title' => $this->t('Use a modal/dialog'),
    +      '#options' => [
    +        '0' => $this->t('None'),
    +        'dialog' => $this->t('Dialog'),
    +        'modal' => $this->t('Modal'),
    +      ],
    

    ... but it's in fact a range of options.

    Only *one* of which is called 'modal', so calling the overall thing modal is odd.

    Also, what does 'None' mean here? Doesn't it mean the site goes to a separate page load?

jhedstrom’s picture

Perhaps we could use "Form behavior" for the option's label, with the choices of:

  • Open form in a separate page
  • Open form via ajax in a dialog
  • Open form via ajax in a modal dialog
joachim’s picture

Yup, that makes more sense. 'form_behaviour' as the property name seems reasonable too.

jhedstrom’s picture

Status: Needs work » Needs review
StatusFileSize
new3.83 KB
new7.31 KB

I shortened the option labels a bit, but put the details in the element's #description section.

jhedstrom’s picture

StatusFileSize
new2.22 KB
new7.42 KB
martin107’s picture

StatusFileSize
new7.4 KB
new2.08 KB

By way of review.

1) Manual testing/UX - forms contain all the relevant text/information and button, and it functions and gives a good UX, which fits is well with all the has gone before.

My only comment in parsing is that the modal looks a bit old school, but that is the nature of modals - you either love or hate and we are putting that decision in the hands of the site owner. So I am happy ( Perhaps it would look better if the boxes of the model were rounded...but that is very much ore issue. )

2) PHP code look clean, sticks to all the coding standards, no surprises.

3) Testing in comprehensive, seems to completely cover the new functionality cleanly

So +1 from me

What follow is minor nits, found while running the new test through phpcs

 133 | WARNING | [ ] Do not concatenate strings to translatable
     |         |     strings, they should be part of the t() argument
     |         |     and you should use placeholders

I think I saw somebody in irc last week arguing that there should be less translate function calls in testing because unless you are testing specific language functions the default language in testing will always be english.

Anyway if testbot comes back green I would be happy to see this RTBC'ed

jhedstrom’s picture

StatusFileSize
new1.36 KB
new8.76 KB

I realized that since this patch was started, and the link methods were split into 2 different methods (getAsLink and getAsFlagLink), the modal option in this patch stopped working on views links. This gets it working there again too.

Also, in regards to the modal styling mentioned in #33, that's just the core/jquery default, so can easily be customized in a theme.

socketwench’s picture

Status: Needs review » Reviewed & tested by the community

Looks good! Also works in views.

  • socketwench committed 0a3331a on 8.x-4.x authored by jhedstrom
    Issue #2828201 by jhedstrom, martin107: Added a modal form option to the...
socketwench’s picture

Status: Reviewed & tested by the community » Fixed

Thanks everyone! Really appreciate this patch, I hope a lot of people will find it useful.

Status: Fixed » Closed (fixed)

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