[WIP] Adding confirmation modal

[arnolanglade]

I added confirmation modal based on bootstrap modal, it is applied on the delete button (defined in the button macro). For now, it miss the translations.

[umpirsky]

👍

[pjedrzejewski]

Nice! I like your approach with macros. Once translations are added - good to merge for me. The JS will be redone probably once we select a js framework. I'd like to raise this discussion on upcoming IRC meeting (more info soon).

[arnolanglade]

@pjedrzejewski : I will add translation tomorrow!

[arnolanglade]

@pjedrzejewski : Added :p

[winzou]

@Arn0d is data-message working at your place? It doesn't at mine, and I can't find any doc on it. Where have you found it?

[arnolanglade]

@winzou : It worked when I tested (I will check again asap). There is not doc for data-message because it is HTML5 attribute. I think you know those attributes, perhaps I don't understand you, no?

[pjedrzejewski]

We need to fix build in another PR, and update the scenario accordingly here too... Every delete action now requires confirmation step.

[winzou]

@Arn0d Sorry I can't find out how the data-message value ends up in modal's body. I must have missed something, what's the method?

[arnolanglade]

@winzou, no problem! look at the method show, line 23 this.setBodyElement(this.getDomConfig('message'));. getDomConfig get the data attribute named data-message which is on your button and put it on the body of the modal.

[arnolanglade]

@pjedrzejewski : I think I can update behat scenarios next week.

[winzou]

@Arn0d and where did you get your bootstrap-modal.js? This is not the original one, which doesn't contain anything for data-toggle="confirmation", there is only data-toggle="modal". That's why it doesn't work at my place.

[arnolanglade]

@winzou : I wrote bootstrap-modal.js, I added data-toggle="confirmation because the confirmation modal is not just a simple modal. I bind a function on element which have data-toggle="confirmation when you click on it. This function use the extension I write it.

Have you a javascript error ?
Is your buttons.html.twig is updated ?

[ghost]

can you rename it to something more specific? i think the default implementation of bootstrap-modal is already named that. If not, then this fantastic modal plugin is https://github.com/jschr/bootstrap-modal

[norberttech]

I think that javascript confirmation is not enough. Actions that are responsible for deleting resources should be accessible through POST request. But this aporeach requires form so this could be done with batch actions (becaues there is no sens to add form to each row).
Scenario for such action could look like the following one

Feature: Delete resource
    In order to remove resources safely
    As a store owner
    I want to be able to select few resources from list and trigger remove action
    After confirming the action selected resources should be removed

    Scenario: Deleting resource from list
        Given I am on the resource list page
         When I select checkbox in first column in first row
          And I press Delete button
         Then I should be redirected to delete confirmation page
          And I should see notice "Are you sure you want to delete 1 resource?"

    Scenario: Deleting few resources from list
        Given I am on the resource list page
        When I select checkbox in first column in first row
          And I select checkbox in first column in third row
          And I press Delete button
         Then I should be redirected to delete confirmation page
          And I should see notice "Are you sure you want to delete 2 resource?"

    Scenario: Confirm delete action
        Given One resource was chosen to being deleted
          And I am on the delete confirmation page
         When I press Ok button
         Then I should be redirected to resource list page
          And Deleted resource should not be visible at list

    Scenario: Decline delete action
        Given One resource was chosen to being deleted
          And I am on the delete confirmation page
         When I press Cancel button
         Then I should be redirected to resource list page
          And Deleted resource should still be visible at list

What do you guys think about it?

[arnolanglade]

@jroberson : Rename? You speack about data-toggle="confirmation? Perhaps, data-toggle="confirmation-modal? You have to choose a javascript framework, my modal plugin will be rewrite with it... Using a another js lib, is it a best way? I don't know!

[ghost]

no i meann't rename bootstrap-modal.js to something else.

[arnolanglade]

@jrobeson : ahhhhh! ok! yep bootstrap-modal-confirmation.js ?

[ghost]

sure.

[pjedrzejewski]

@norzechowicz All delete actions are accessible only via DELETE method. Unfortunately browsers do not always support this method so we use POST forms and use _method = DELETE parameter, which forces Symfony to accept the method. See here.

[norberttech]

@pjedrzejewski right! I should check it first ;P

[arnolanglade]

I have problems with Behat and Selenium. I renamed behat.yml.dist, I updated base_url, I downloaded and ran the selenium jar (version 33). After that, I launch behat, firefox is not opened. My tests failed because the javascript is not executed!

I am on Linux (Ubuntu, the latest), I just openJDK.

What did I do wrong? Thanks

[umpirsky]

I will try to check this when I find some time. Did you try htmlunit?
On 27 Jun 2013 13:29, "Arnaud Langlade" notifications@github.com wrote:

I have problems with Behat and Selenium. I renamed behat.yml.dist, I
updated base_url, I downloaded and ran the selenium jar (version 33).
After that, I launch behat, firefox is not opened. My tests failed because
the javascript is not executed!

I am on Linux (Ubuntu, the latest), I just openJDK.

What did I do wrong? Thanks

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/179#issuecomment-20112325
.

[arnolanglade]

I did not use it... Do not you use selenium?

[arnolanglade]

In the Behat configuration you can find the following lines :

        tags: "~@javascript"

Behat ignore the JavaScript scenario by default, so I remove them from configuration but my test are still ignored. I don't Know why... Do Travis support JavaScript scenario?

[winzou]

OK it works fine, the bootstrap-modal.js is indeed an extension and not the one taken from twitter :p
This is great improvement.

[arnolanglade]

@winzou : thanks but I need to update behat scenario... Did you already use selenium ?

[winzou]

No I haven't, can't help that much.

[arnolanglade]

@norzechowicz :
Console output :

perso@aRn0D:/var/www/sylius/dev$ java -jar ../../selenium-server-standalone-2.33.0.jar 
juil. 03, 2013 8:20:51 PM org.openqa.grid.selenium.GridLauncher main
INFO: Launching a standalone server
20:20:52.113 INFO - Java: Oracle Corporation 23.7-b01
20:20:52.114 INFO - OS: Linux 3.8.0-25-generic amd64
20:20:52.130 INFO - v2.33.0, with Core v2.33.0. Built from revision 4e90c97
20:20:52.613 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub
20:20:52.614 INFO - Version Jetty/5.1.x
20:20:52.615 INFO - Started HttpContext[/selenium-server/driver,/selenium-server/driver]
20:20:52.615 INFO - Started HttpContext[/selenium-server,/selenium-server]
20:20:52.616 INFO - Started HttpContext[/,/]
20:20:52.643 INFO - Started org.openqa.jetty.jetty.servlet.ServletHandler@4b2d0c2e
20:20:52.643 INFO - Started HttpContext[/wd,/wd]
20:20:52.654 INFO - Started SocketListener on 0.0.0.0:4444
20:20:52.654 INFO - Started org.openqa.jetty.jetty.Server@1935d392

Behat output :

• ignorées : ignored
• échecs : failed

The test :

    /**
     * @Then /^I should open "([^"]*)" modal$/
     */
    public function isOpenedModal($modal)
    {
        $locator = sprintf('#%s', $modal);
        $modalContainer = $this->getSession()->getPage()->find('css', $locator);
        $modalCssClasses = $modalContainer->getAttribute('class');

        $this->assertSession()->elementExists('css', $locator);

        echo $modalCssClasses;
        if (!preg_match('/in/', $modalCssClasses)) {
            throw new \Exception(
                'The modal has not the css class "in"'
            );
        }
    }

[norberttech]

@Arn0d Deleting taxonomy scenario is ignored because there is a failing scenario somewhere before. Try to fix it or mark it with tag @wip and run tests that ignores @wip tags.

$ bin/behat --tags '~@wip'

[arnolanglade]

the test before Deleting taxonomy scenario is green ! There are only 2 tests ...

[arnolanglade]

zone.feature : OK
user.feature : failed but there are problems with fixtures
taxonomie : OK
tax_rate : Failed
tax_category.feature : Failed
shipping_methods.feature : Failed because the previous tests failed (it try to delete something which was not created)
shipping_categories.feature : OK
shipments.feature : OK
product_options.feature : Ok
product_properties.feature : OK
product_prototypes.feature : OK
product_variants.feature : OK
orders.feature : failed
payment_methods.feature : OK
exchange_rates.feature : OK
countries.feature : failed
promotions.feature : OK

@pjedrzejewski : can this PR could be merged? I got trouble because some tests (independent from deletion) does not pass.

[arnolanglade]

I forgot to change some buttons which does not use macro ...

[winzou]

@Arn0d @pjedrzejewski What is the status of this PR?

[arnolanglade]

@winzou : I am waiting for feedback from Pawel!

[pjedrzejewski]

And I validate the "confirmationModalContainer" modal step contains the implementation detail. It should be something like And I click "Yes" from the confirmation modal. We can put the modal id in the step definition, but not the .feature file itself.

[arnolanglade]

Ok Pawel! I will update ASAP!

[arnolanglade]

@pjedrzejewski : is it better? I can not really test them again. I got trouble on my Sylius installation....

[pjedrzejewski]

@Arn0d Could you rebase this PR against master where all features are passing, if no, I can do this soon, just let me know. Thank you! :)

[arnolanglade]

I will try to rebase it before the end of the week (perhaps Thursday). Is it good for you?

[pjedrzejewski]

Travis missed this one hm...

[stloyd]

@pjedrzejewski I have restarted the Travis build, but after today's fail the have really long queues.

[arnolanglade]

@pjedrzejewski @stloyd : Did I make something wrong? Do you know what happen?

[jjanvier]

@pjedrzejewski @stloyd if it's OK, shouldn't this be merged before your redesign ?

[stloyd]

@jjanvier Yes, I think this should be merged before, or included in that PR. @pjedrzejewski What do you think?

[pjedrzejewski]

@stloyd I can't merge it without our js scenarios running on saucelabs, which I'm trying to do nowww.

[Richtermeister]

Anything we can do to help this along? Can't let my customers into the admin area without this feature :)

[stloyd]

@Richtermeister I'm working on fallback to normal confirm page basing on this, if you want to help you can write some features (I will try to push what I have this weekend) =)