Create a new OpenModalDialogWithUrl command

Created on 14 December 2023, 6 months ago
Updated 3 April 2024, about 2 months ago

Problem/Motivation

\Drupal\Core\Ajax\RedirectCommand allows redirecting users to a different route after processing form. However, there isn't currently a way to render a different dialog after processing a form. This is needed in some multi-step forms that are using dialogs where the system needs to take the users to a controller or a form behind another route. This is critical in particular when working with forms because form API always depends on the current route match to be up to date to know which route to submit the form.

One existing use-case for this is โœจ Use modals in field creation and field edit flow Needs work .

Steps to reproduce

Proposed resolution

Create a command that replicates the functionality of the \Drupal\Core\Ajax\RedirectCommand but operates within dialogs.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

๐Ÿ“Œ Task
Status

Fixed

Version

10.3 โœจ

Component
Ajaxย  โ†’

Last updated about 1 hour ago

Created by

๐Ÿ‡ฎ๐Ÿ‡ณIndia srishtiiee

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @srishtiiee
  • ๐Ÿ‡ซ๐Ÿ‡ฎFinland lauriii Finland
  • Merge request !5810OpenModalDialogWithUrl command โ†’ (Open) created by srishtiiee
  • Pipeline finished with Success
    6 months ago
    Total: 667s
    #64088
  • Status changed to Needs review 6 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia arisen Goa

    Thanks for the feature suggestion @srishtiiee.

    Review the Merge Request. The changes look good and working a expected.
    Tested the same on a Drupal 11 installation.
    Testing steps:

    • Setup a Drupal 11 site and applied the patch from the MR
    • Created a Custom Ajax form with a button and a custom submit handler.
    • Inside the handler added the code snippet to open a node in a dialog.
      $response = new AjaxResponse();
        $url = Url::fromRoute('entity.node.canonical', ['node' => 1]);
        $command = new OpenModalDialogWithUrl($url->toString(),
        [
          'url' => 'example',
          'width' => 500,
          'title' => 'Title',
          'modal' => TRUE,
        ]);
        $response->addCommand($command);
        return $response;
    • The node gets displayed in a dialog as expected.

    Attaching the screenshots.

    This looks RTBC for me.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    Feels like something that will need a CR

  • Status changed to Needs work 6 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States benjifisher Boston area

    I am adding โœจ Multistep Form Wizard Needs work as a related issue. I have not looked at it closely, but I think that is more specialized than this issue, trying to make it easier to create multi-step entity forms.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia kunal.sachdev

    kunal.sachdev โ†’ made their first commit to this issueโ€™s fork.

  • Pipeline finished with Canceled
    6 months ago
    Total: 73s
    #65707
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia kunal.sachdev

    Updated the already existing CR for this.

  • Status changed to Needs review 6 months ago
  • Pipeline finished with Success
    6 months ago
    Total: 25873s
    #65708
  • Status changed to RTBC 6 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave
    1) Drupal\Tests\Core\Ajax\AjaxCommandsTest::testOpenModalDialogWithUrl
    Error: Class "Drupal\Core\Ajax\OpenModalDialogWithUrl" not found
    /builds/issue/drupal-3408738/core/tests/Drupal/Tests/Core/Ajax/AjaxCommandsTest.php:509
    /builds/issue/drupal-3408738/vendor/phpunit/phpunit/src/Framework/TestResult.php:728
    /builds/issue/drupal-3408738/vendor/phpunit/phpunit/src/Framework/TestSuite.php:684
    /builds/issue/drupal-3408738/vendor/phpunit/phpunit/src/TextUI/TestRunner.php:651
    /builds/issue/drupal-3408738/vendor/phpunit/phpunit/src/TextUI/Command.php:144
    /builds/issue/drupal-3408738/vendor/phpunit/phpunit/src/TextUI/Command.php:97
    ERRORS!
    Tests: 32, Assertions: 37, Errors: 1.
    

    CR reads well.

    Applied the MR and used the snippet in the CR to open a dialog. I used a node add form, as that's something I'm currently working on in my project.

    Reviewing the code and believe this is good

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States tim.plunkett Philadelphia

    +1 to RTBC, the Drupal.ajax vs ajax discussion in the MR can be resolved

  • Status changed to Needs work 5 months ago
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium Wim Leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    There are a bunch of small inconsistencies in the code. Some parameters/decisions should be documented. And most importantly: neither this MR nor the CR document how this relates to the multiple existing dialog-related AJAX commands. "When to use which?" is a critical portion of landing this.

  • First commit to issue fork.
  • Pipeline finished with Success
    5 months ago
    Total: 643s
    #70444
  • Status changed to Needs review 5 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia arisen Goa

    And most importantly: neither this MR nor the CR document how this relates to the multiple existing dialog-related AJAX commands. "When to use which?" is a critical portion of landing this.

    Updated the CR to address this.

  • Status changed to RTBC 5 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    CR appears to have been updated with a usage.

    Not sure where documentation should go though. Assuming here https://www.drupal.org/docs/drupal-apis/ajax-api/core-ajax-callback-comm... โ†’ but imagine the update should be after the code is committed right?

  • Status changed to Needs work 5 months ago
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium Wim Leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    This is still missing crucial documentation, so it can't be RTBC.

    Plus, based on the test coverage I just realized that this appears to be introducing a new potential attack surface ๐Ÿ˜ฐ So tagging as wellโ€ฆ

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia omkar.podey

    omkar.podey โ†’ made their first commit to this issueโ€™s fork.

  • Pipeline finished with Failed
    4 months ago
    Total: 183s
    #88736
  • Pipeline finished with Success
    4 months ago
    #88750
  • Status changed to Needs review 4 months ago
  • Status changed to Needs work 4 months ago
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium Wim Leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ
  • Pipeline finished with Failed
    3 months ago
    Total: 168s
    #100246
  • Status changed to Needs review 3 months ago
  • Pipeline finished with Success
    3 months ago
    Total: 489s
    #100538
  • Status changed to Needs work 3 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia omkar.podey

    Set to needs work for writing a better test.

  • Pipeline finished with Failed
    3 months ago
    Total: 172s
    #103878
  • Pipeline finished with Success
    3 months ago
    Total: 483s
    #104005
  • Pipeline finished with Success
    3 months ago
    Total: 602s
    #104177
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium Wim Leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ
  • Pipeline finished with Success
    3 months ago
    Total: 472s
    #105854
  • Status changed to Needs review 3 months ago
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom catch

    The hardening and test coverage looks good to me.

  • Pipeline finished with Success
    3 months ago
    Total: 484s
    #106100
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    Have posted to #security-discussion in slack so fingers crossed someone can pick up.

  • Pipeline finished with Success
    3 months ago
    Total: 1512s
    #111346
  • Status changed to RTBC 3 months ago
  • ๐Ÿ‡ซ๐Ÿ‡ฎFinland lauriii Finland

    The aspect that required security review has been addressed. I think a regular committer review is sufficient now.

  • Status changed to Needs work 3 months ago
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium Wim Leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    Yes, agreed, the security concerns I raised are now addressed ๐Ÿ‘

    Just a few remarks to ensure A) docs are discoverable by developers, B) this stays aligned/in sync with the other place in core where this pattern is used.

  • Pipeline finished with Success
    3 months ago
    Total: 589s
    #113501
  • Status changed to Needs review 3 months ago
  • Status changed to RTBC 3 months ago
  • ๐Ÿ‡ซ๐Ÿ‡ฎFinland lauriii Finland

    Feedback from @Wim Leers has been addressed ๐Ÿ‘

    • catch โ†’ committed 6068cc4f on 10.3.x
      Issue #3408738 by omkar.podey, srishtiiee, kunal.sachdev, lauriii,...
    • catch โ†’ committed 6fca4655 on 11.x
      Issue #3408738 by omkar.podey, srishtiiee, kunal.sachdev, lauriii,...
  • Status changed to Fixed 3 months ago
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom catch

    One more thought - we could add an extra method on UrlHelper for the local check, combining those two method calls. I was thinking about a trait, but why not just an extra helper method directly on that class.

    Not for here though, so committed/pushed to 11.x and cherry-picked to 10.3.x, thanks!

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

  • ๐Ÿ‡ณ๐Ÿ‡ฟNew Zealand quietone New Zealand

    Follow up added ๐Ÿ“Œ Add an extra method on UrlHelper for a local check Active

Production build 0.69.0 2024