[FORMS-9435]: HTL update for tree-style nesting of vertical tabs

bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/form/FormConstants.java

@@ -91,6 +91,8 @@ private FormConstants() {
 
     public static final String RT_FD_FORM_VERTICAL_TABS_V1 = RT_FD_FORM_PREFIX + "verticaltabs/v1/verticaltabs";
 
+    public static final String RT_FD_FORM_VERTICAL_TABS_V2 = RT_FD_FORM_PREFIX + "verticaltabs/v2/verticaltabs";
+
     /* The resource type prefix for the form container related datasources */
     public final static String RT_FD_FORM_CONTAINER_DATASOURCE_V1 = RT_FD_FORM_PREFIX + "container/v1/datasource";
 

bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/PanelImpl.java

@@ -15,7 +15,9 @@
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 package com.adobe.cq.forms.core.components.internal.models.v1.form;
 
+import java.util.ArrayList;
 import java.util.LinkedHashMap;
+import java.util.List;
 import java.util.Map;
 
 import javax.annotation.Nullable;
@@ -141,4 +143,37 @@ public Map<String, Object> getDorProperties() {
         return customDorProperties;
     }
 
+    @JsonIgnore
+    public boolean isVerticalTab() {
+        // Determine if this panel is a tree-style vertical tab, incase of v3 that also needs to be added here
+        return resource.isResourceType(FormConstants.RT_FD_FORM_VERTICAL_TABS_V2);
+    }
+
+    @JsonIgnore
+    public boolean isParentVerticalTab() {
+        // Determine if the parent panel is a tree-style vertical tab for v2, incase of v3 that also needs to be added here
+        Resource parentResource = resource.getParent();
+        return parentResource != null && parentResource.isResourceType(FormConstants.RT_FD_FORM_VERTICAL_TABS_V2);
+    }
+
+    @JsonIgnore
+    public List<ComponentExporter> getChildrenOfVerticalTab() {
+        List<ComponentExporter> children = new ArrayList<>();
+        collectChildrenOfVerticalTab(this, children);
+        return children;
+    }
+
+    @JsonIgnore
+    private void collectChildrenOfVerticalTab(ComponentExporter container, List<ComponentExporter> children) {
+        if (container instanceof PanelImpl) {
+            PanelImpl panel = (PanelImpl) container;
+            if (panel.isVerticalTab()) {
+                List<? extends ComponentExporter> tabChildren = panel.getItems();
+                for (ComponentExporter child : tabChildren) {
+                    children.add(child);
+                }
+            }
+        }
+    }
+
 }

bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/Panel.java

@@ -36,4 +36,5 @@ public interface Panel extends Container, ContainerConstraint {
     default Boolean isReadOnly() {
         return null;
     }
+
 }

bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/util/AbstractComponentImpl.java

@@ -23,6 +23,7 @@
 import org.apache.commons.lang3.StringUtils;
 import org.apache.sling.api.SlingHttpServletRequest;
 import org.apache.sling.api.resource.Resource;
+import org.apache.sling.api.resource.ValueMap;
 import org.apache.sling.models.annotations.injectorspecific.InjectionStrategy;
 import org.apache.sling.models.annotations.injectorspecific.ScriptVariable;
 import org.apache.sling.models.annotations.injectorspecific.Self;
@@ -43,6 +44,7 @@
 import com.day.cq.wcm.api.Page;
 import com.day.cq.wcm.api.PageManager;
 import com.day.cq.wcm.api.components.ComponentContext;
+import com.fasterxml.jackson.annotation.JsonIgnore;
 
 // this class is copied from WCM, since for forms adapting via slingRequest is optional
 
@@ -221,4 +223,10 @@ protected String translate(@NotNull String propertyName, @Nullable String proper
         return com.adobe.cq.forms.core.components.util.ComponentUtils.translate(propertyValue, propertyName, resource, i18n);
     }
 
+    @JsonIgnore
+    public String getPanelItemTitle() {
+        ValueMap panelProperties = this.resource.getValueMap();
+        return panelProperties.get("jcr:title", StringUtils.EMPTY);
+    }
+
 }

examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/verticaltabs/.content.xml

@@ -3,5 +3,5 @@
   jcr:description="Adaptive Form Vertical Tab Container component, used to group other components and apply a common style or layout."
   jcr:primaryType="cq:Component"
   jcr:title="Adaptive Form Vertical Tabs"
-  sling:resourceSuperType="core/fd/components/form/verticaltabs/v1/verticaltabs"
+  sling:resourceSuperType="core/fd/components/form/verticaltabs/v2/verticaltabs"
   componentGroup="Core Components Examples - Adaptive Form"/>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/.content.xml

@@ -2,5 +2,5 @@
 <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
     jcr:primaryType="cq:ClientLibraryFolder"
     allowProxy="{Boolean}true"
-    categories="[core.forms.components.verticaltabs.v1.runtime]"
+    categories="[core.forms.components.verticaltabs.v2.runtime]"
     dependencies="[core.wcm.components.commons.site.container,core.forms.components.runtime.base,core.forms.components.container.v2.runtime,core.wcm.components.tabs.v1]"/>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/verticaltabs.html

@@ -13,22 +13,22 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
-  <div data-sly-use.tabs="com.adobe.cq.wcm.core.components.models.Tabs"
-  data-sly-use.panel="com.adobe.cq.forms.core.components.models.form.Panel"
-  data-sly-use.formstructparser="com.adobe.cq.forms.core.components.models.form.FormStructureParser"
-  data-sly-use.renderer="${'verticaltabs.js'}"
-  data-sly-use.label="${renderer.labelPath}"
-  data-sly-use.shortDescription="${renderer.shortDescriptionPath}"
-  data-sly-use.longDescription="${renderer.longDescriptionPath}"
-  data-sly-use.questionMark="${renderer.questionMarkPath}"
-  id="${panel.id}"
-  class="cmp-verticaltabs"
-  data-panelcontainer="${wcmmode.edit && 'verticaltabs'}"
-  data-cmp-is="adaptiveFormVerticalTabs"
-  data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"
-  data-placeholder-text="${wcmmode.edit && 'Please drag Vertical Tabs components here' @ i18n}"
-  data-sly-test.widgetId="${'{0}-{1}' @ format=[panel.id, 'widget']}">
-     <div class="cmp-verticaltabs__label-container">
+<div data-sly-use.tabs="com.adobe.cq.wcm.core.components.models.Tabs"
+     data-sly-use.panel="com.adobe.cq.forms.core.components.models.form.Panel"
+     data-sly-use.formstructparser="com.adobe.cq.forms.core.components.models.form.FormStructureParser"
+     data-sly-use.renderer="${'verticaltabs.js'}"
+     data-sly-use.label="${renderer.labelPath}"
+     data-sly-use.shortDescription="${renderer.shortDescriptionPath}"
+     data-sly-use.longDescription="${renderer.longDescriptionPath}"
+     data-sly-use.questionMark="${renderer.questionMarkPath}"
+     id="${panel.id}"
+     class="cmp-verticaltabs"
+     data-panelcontainer="${wcmmode.edit && 'verticaltabs'}"
+     data-cmp-is="adaptiveFormVerticalTabs"
+     data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"
+     data-placeholder-text="${wcmmode.edit && 'Please drag Vertical Tabs components here' @ i18n}"
+     data-sly-test.widgetId="${'{0}-{1}' @ format=[panel.id, 'widget']}">
+    <div class="cmp-verticaltabs__label-container">
         <div data-sly-call="${label.label @componentId=widgetId, labelValue=panel.label.value, labelVisible=panel.label.visible, bemBlock='cmp-verticaltabs'}" data-sly-unwrap></div>
         <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-verticaltabs'}" data-sly-unwrap></div>
      </div>
@@ -59,11 +59,10 @@
       class="cmp-verticaltabs__tabpanel${item.name == tabs.activeItem ? ' cmp-verticaltabs__tabpanel--active' : ''}"
       data-cmp-hook-adaptiveFormVerticalTabs="tabpanel"></div>
 
-</div>
+    </div>
     <sly data-sly-resource="${resource.path @ resourceType='core/wcm/components/container/v1/container/new', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}"
          data-sly-test="${(wcmmode.edit || wcmmode.preview)}"></sly>
 </div>
 <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
- <sly data-sly-test="${wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.verticaltabs.v1.runtime'}"/>
+    <sly data-sly-test="${wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.verticaltabs.v1.runtime'}"/>
 </sly>
-

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v2/.content.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+    jcr:primaryType="nt:unstructured">
+    <verticaltabs/>
+</jcr:root>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v2/verticaltabs/.content.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright 2024 Adobe
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    cq:icon="article"
+    cq:isContainer="{Boolean}true"
+    jcr:description="Adaptive Form Vertical Tabs Container component, used to group other components and apply a common style or layout."
+    jcr:primaryType="cq:Component"
+    jcr:title="Adaptive Form Vertical Tabs (v2)"
+    sling:resourceSuperType="core/fd/components/form/verticaltabs/v1/verticaltabs"
+    componentGroup=".core-adaptiveform"/>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v2/verticaltabs/README.md

@@ -0,0 +1,90 @@
+<!--
+Copyright 2024 Adobe
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+Vertical Tabs (v2)
+====
+Adaptive Form Tabs component written in HTL.
+
+## Features
+
+* Allows addition of tab items of varying resource type.
+* Allowed components can be configured through policy configuration.
+* Ability to force a single panel to be displayed.
+* First tab is selected by default.
+* Allows replacing this component with other component (as mentioned below).
+
+### Use Object
+The Vertical Tabs component uses the `com.adobe.cq.forms.core.components.models.form.Panel` Sling model as its Use-object.
+
+### Edit Dialog Properties
+The following properties are written to JCR for this Panel Container component and are expected to be available as `Resource` properties:
+The following properties are written to JCR for this Accordion component and are expected to be available as `Resource` properties:
+
+1. `./jcr:title` - defines the label to use for this panel
+2. `./name` - defines the name of the panel, which will be submitted with the form data
+3. `./bindref` - defines the data binding, and how data will be sent
+4. `./visible` - defines initial state of panel visibility
+5. `./enabled` - defines initial state of panel if its enabled or not
+6. `./tooltip` - defines tooltip on panel title
+7. `./description` - defines a help message that can be rendered in the field as a hint for the user
+
+## BEM Description
+```
+BLOCK cmp-verticaltabs
+    ELEMENT cmp-verticaltabs__tablist
+    ELEMENT cmp-verticaltabs__label
+    ELEMENT cmp-verticaltabs__label-container
+    ELEMENT cmp-verticaltabs__tab
+        MOD cmp-verticaltabs__tab--active
+    ELEMENT cmp-verticaltabs__title
+    ELEMENT cmp-verticaltabs__icon
+    ELEMENT cmp-verticaltabs__label
+    ELEMENT cmp-verticaltabs__shortdescription
+    ELEMENT cmp-verticaltabs__longdescription
+    ELEMENT cmp-verticaltabs__questionmark
+```
+
+### Note
+By placing the class names `cmp-verticaltabs__label` and `cmp-verticaltabs__questionmark` within the `cmp-verticaltabs__label-container` class, you create a logical grouping of the label and question mark elements. This approach simplifies the process of maintaining a consistent styling for both elements.
+
+## Client Libraries
+The component provides a `core.forms.components.verticaltabs.v1.runtime` client library category that contains a JavaScript
+component. It should be added to a relevant site client library using the `embed` property.
+
+## JavaScript Data Attribute Bindings
+
+The following attributes must be added for the initialization of the horizontal-tabs component in the form view:
+1. `data-cmp-is="adaptiveFormVerticalTabs"`
+2. `data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"`
+
+### Enabling Editing Functionality
+The following property is required in the proxy component to enable full editing functionality for the Panel Container:
+
+1. `./cq:isContainer` - set to `{Boolean}true`, marks the Panel Container as a container component
+
+## Replace feature:
+We support replace feature that allows replacing accordion component to any of the below components:
+
+* Accordion
+* Panel
+* Wizard Layout
+* Tabs on top
+
+## Information
+* **Vendor**: Adobe
+* **Version**: v1
+* **Compatibility**: Cloud
+* **Status**: production-ready
+

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v2/verticaltabs/_cq_editConfig.xml

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright 2024 Adobe
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
+<jcr:root xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="cq:EditConfig"
+    cq:actions="[edit,-,copymove,delete,-,insert,-]"
+    cq:dialogMode="floating"
+    cq:layout="editbar"
+    cq:disableTargeting="{Boolean}true">
+    <cq:listeners
+    jcr:primaryType="cq:EditListenersConfig"
+    afterchilddelete="CQ.CoreComponents.panelcontainer.v1.AFTER_CHILD_DELETE"
+    afterchildinsert="CQ.CoreComponents.panelcontainer.v1.AFTER_CHILD_INSERT"
+    afterchildmove="CQ.CoreComponents.panelcontainer.v1.AFTER_CHILD_MOVE"/>
+    <cq:actionConfigs jcr:primaryType="nt:unstructured">
+        <editexpression
+            jcr:primaryType="nt:unstructured"
+            handler="CQ.FormsCoreComponents.editorhooks.openRuleEditor"
+            order="after CONFIGURE"
+            icon="bidRule"
+            text="Edit Rules"/>
+        <replace
+                jcr:primaryType="nt:unstructured"
+                handler="CQ.FormsCoreComponents.editorhooks.replace"
+                text="Replace"/>
+        <qualifiedName
+                jcr:primaryType="nt:unstructured"
+                handler="CQ.FormsCoreComponents.editorhooks.viewQualifiedName"
+                icon="viewSOMExpression"
+                text="View Qualified Name"/>
+    </cq:actionConfigs>
+</jcr:root>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v2/verticaltabs/_cq_template.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
+    jcr:primaryType="nt:unstructured"
+    jcr:title="Vertical Tabs"
+    fieldType="panel"/>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v2/verticaltabs/clientlibs/.content.xml

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:Folder"/>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v2/verticaltabs/clientlibs/editorhook/.content.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+      jcr:primaryType="cq:ClientLibraryFolder"
+      allowProxy="{Boolean}true"
+          categories="[core.forms.components.verticaltabs.v1.editor.hook,cq.authoring.editor.hook]"
+          dependencies="[core.wcm.components.commons.editor.panelcontainer.v1,cq.authoring.editor.core]"/>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v2/verticaltabs/clientlibs/editorhook/js.txt

@@ -0,0 +1,19 @@
+###############################################################################
+# Copyright 2024 Adobe
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+###############################################################################
+
+#base=js
+
+verticaltabseditorhook.js