Port vertical_tabs_example module to Drupal 8

I'll work on this

Great, thanks!

Be sure and check out the examples module checklist: #2209627: [meta] Module Checklist for Examples

Unassigning for now, please add a patch if there is some initial work done.

Will be working on the issue .

Here's the first patch. I was having a problem in linking the node/add page to content using \Drupal::l() . Please check if i am doing something wrong so that I can go ahead .
Thanks!

Sorry for the wrong patch.

Thanks Mile23 it worked for me after changing node/add to node/add_page .
Will be working on this ahead.

I have ported whole module but only part that is not working is the summary that needs to be updated when checkbox is checked is not showing . Please someone help me over this.
The link to the sandbox port of this module is https://www.drupal.org/sandbox/palashvijay4/2428101
Thanks !!

There is some problem in js file help me over this I am not sure exactly what is wrong but what I think is the change in css of the node/edit page of drupal 8 as compared to drupal 7 .

@Palashvijay4O, I've fixed up and submitted a patch over on your sandbox. See #2434151: JS fixes and switch to details field. I'll attach the patch here as well but it applies against the sandbox.

Switching back to needs review, that fail is expected since patch applies elsewhere. Here are a couple of screenshots. I should have mentioned, I had to switch the admin theme to see this properly, because the Seven theme overrides how vertical tabs work. That is probably an issue that needs further discussion.

I think https://www.drupal.org/sandbox/palashvijay4/2428101 is ready to be commited.

Patch attached against current 8.x-1.x branch.

The same thing happens with D7 version of this module so I guess pretty much that is intentional. And also I think the lesson is about adding vertical tabs to the node edit/add form.

Made changes as suggested. Please review.

Sorry submitted a wrong patch.

First, really sorry about not getting to this sooner.

Second, thanks for sticking with it.

And third, here are a few things:

1. +++ b/vertical_tabs_example/src/Controller/VerticalTabsExampleController.php
   @@ -0,0 +1,34 @@
   +      '#markup' => t('The Vertical Tabs Example shows how a
   +        custom module can add a vertical tab to a node edit form,
   +        and support its summary field with JavaScript. To see the
   +        effects of this module, !content_add and look at the set
   +        of tabs at the bottom. We\'ve added one called \'Example vertical tab.\'',
   +        array('!content_add' => $content_add)
   

   This is incorrect because the settings tabs are beside the content now, instead of below.

2. +++ b/vertical_tabs_example/src/Tests/VerticalTabsExampleTest.php
   @@ -0,0 +1,41 @@
   +  public function testVerticalTabsExampleMenus() {
   

   This test should also look for the menu links from the front page.

   We also need tests for:

   • Whether the tab appears on the node/add page.
   • Whether our new setting gets saved properly.

3. +++ b/vertical_tabs_example/vertical_tabs_example.info.yml
   --- /dev/null
   +++ b/vertical_tabs_example/vertical_tabs_example.libraries.yml
   

   This file should have # comments telling you why you're including these libraries.

4. +++ b/vertical_tabs_example/vertical_tabs_example.module
   --- /dev/null
   +++ b/vertical_tabs_example/vertical_tabs_example.routing.yml
   

   We have routing.yml but not links.menu.yml, so the link never appears on the front page.

As we discussed in IRC there is an issue with the status update JS. Let's be sure and address that after the other items above.

Not a real issue tag.

@Mile23

Are we saving the settings ? I have gone through the code, i couldn't see it. Please correct me if I am wrong. Only JS part is not working with "Seven" theme. Works good with Bartik and others.

@Mile23 Completed tasks mentioned in #27. The summary in "Seven" as Administrator theme, is not supported I guess. Please, correct me, if I am wrong.

Added some more test and corrected placeholder.

+++ b/vertical_tabs_example/vertical_tabs_example.module
@@ -0,0 +1,66 @@
+    '#collapsible' => TRUE,

#collapsible doesn't exist for details.

#collapsed is now #open

The form here needs a lot of work.
While working on #1148950: Applying #states to a vertical tab does not update the vertical tabs menu I created a test module for the issue, feel free to have a look to see how to setup a form with vertical tabs on Drupal 8. Just enable it and go to /vertical_tabs_states_test/form/default.

Thanks @Manuel Garcia, I will work on this further more after look into your code.

Starting working on this again!

Re-rolled it. But as said, this will only work with themes other than "Seven" as administration theme.

I improved the inline comments some, fixed CS errors, made it explicitly require node module.

Still needs:

• Convert the test to BrowserTestBase.
• Ideally, add a JavaScript test to verify that the summary is added to the form, but that can be a follow-up.

Converted test to BTB.

Thanks @navneet0693!

+++ b/vertical_tabs_example/tests/src/Functional/VerticalTabsExampleTest.php
@@ -0,0 +1,52 @@
+    $this->assertNotNull($this->xpath("//details[@id='edit-vertical-tabs-example']"));

Let's use $web_assert->elementExists('css', '#edit-vertical-tabs-example'); instead.

@Manuel Garcia,

Done :-)

Thanks for that @navneet0693 :)

#34 still needs to be addressed. Also see #35

@Manuel Garcia,

Thank you, I will work upon it :-)