fix(form): Forms with many destinations may overload the browser

js/modules/Forms/DestinationAccordionController.js

@@ -0,0 +1,70 @@
+/**
+ * ---------------------------------------------------------------------
+ *
+ * GLPI - Gestionnaire Libre de Parc Informatique
+ *
+ * http://glpi-project.org
+ *
+ * @copyright 2015-2025 Teclib' and contributors.
+ * @licence   https://www.gnu.org/licenses/gpl-3.0.html
+ *
+ * ---------------------------------------------------------------------
+ *
+ * LICENSE
+ *
+ * This file is part of GLPI.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * ---------------------------------------------------------------------
+ */
+import { GlpiFormDestinationAutoConfigController } from "./DestinationAutoConfigController.js";
+import { GlpiFormDestinationConditionController } from "./DestinationConditionController.js";
+
+export class GlpiFormDestinationAccordionController
+{
+    constructor() {
+        this.#watchForAccordionToggle();
+    }
+
+    triggerWatchers() {
+        new GlpiFormDestinationAutoConfigController();
+        new GlpiFormDestinationConditionController();
+    }
+
+    #watchForAccordionToggle() {
+        const accordionWrapper = document.querySelector('#glpi-destinations-accordion');
+
+        accordionWrapper.addEventListener('show.bs.collapse', async (e) => {
+            const accordionItem = e.target;
+            const accordionItemContent = accordionItem.querySelector('.accordion-body');
+            if (accordionItemContent.innerHTML.trim() !== '') {
+                return;
+            }
+
+            accordionItemContent.innerHTML = '<div class="text-center"><div class="spinner-border text-primary mb-3" role="status"></div></div>';
+
+            const content = await $.ajax({
+                url: `${CFG_GLPI.root_doc}/Form/${accordionItem.dataset.form}/Destinations/${accordionItem.dataset.formDestination}`,
+                method: 'GET',
+            });
+
+            // Note: must use `$().html` to make sure we trigger scripts
+            $(accordionItemContent).html(content);
+
+            // We trigger the watcher
+            this.triggerWatchers();
+        });
+    }
+}

src/Glpi/Controller/Form/Destination/GetDestinationFormController.php

@@ -0,0 +1,70 @@
+<?php
+
+/**
+ * ---------------------------------------------------------------------
+ *
+ * GLPI - Gestionnaire Libre de Parc Informatique
+ *
+ * http://glpi-project.org
+ *
+ * @copyright 2015-2025 Teclib' and contributors.
+ * @licence   https://www.gnu.org/licenses/gpl-3.0.html
+ *
+ * ---------------------------------------------------------------------
+ *
+ * LICENSE
+ *
+ * This file is part of GLPI.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * ---------------------------------------------------------------------
+ */
+
+namespace Glpi\Controller\Form\Destination;
+
+use Glpi\Application\View\TemplateRenderer;
+use Glpi\Controller\AbstractController;
+use Glpi\Exception\Http\AccessDeniedHttpException;
+use Glpi\Exception\Http\BadRequestHttpException;
+use Glpi\Form\Destination\FormDestination;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+final class GetDestinationFormController extends AbstractController
+{
+    #[Route("/Form/{form_id}/Destinations/{destination_id}", name: "glpi_form_destination_get_form", methods: "GET")]
+    public function __invoke(Request $request, int $form_id, int $destination_id): Response
+    {
+        $destination = new FormDestination();
+        $loaded = $destination->getFromDB($destination_id);
+        if (!$loaded) {
+            throw new BadRequestHttpException();
+        }
+
+        // Right check
+        if (!$destination->can($destination_id, READ)) {
+            throw new AccessDeniedHttpException();
+        }
+
+        $twig = TemplateRenderer::getInstance()->render('pages/admin/form/form_destination_form.html.twig', [
+            'destination' => $destination,
+            'form' => $destination->getForm(),
+            'can_update' => FormDestination::canUpdate() && $destination->canUpdateItem(),
+            'concrete_destination' => $destination->getConcreteDestinationItem(),
+        ]);
+        return new Response($twig);
+    }
+}

src/Glpi/Form/Destination/FormDestination.php

@@ -110,12 +110,17 @@ public static function displayTabContentForItem(
             return false;
         }
 
+        $destinations = $item->getDestinations();
+
+        $active = null;
         // Reopen the active accordion item
         if (isset($_SESSION['active_destination'])) {
             $active = $_SESSION['active_destination'];
             unset($_SESSION['active_destination']);
         } else {
-            $active = null;
+            if (count($destinations) === 1) {
+                $active = $destinations[array_key_first($destinations)]->getID();
+            }
         }
 
         $manager = FormDestinationManager::getInstance();
@@ -125,7 +130,7 @@ public static function displayTabContentForItem(
             'icon'                         => self::getIcon(),
             'form'                         => $item,
             'default_destination_object'   => $manager->getDefaultType(),
-            'destinations'                 => $item->getDestinations(),
+            'destinations'                 => $destinations,
             'available_destinations_types' => $manager->getDestinationTypesDropdownValues(),
             'active_destination'           => $active,
             'can_update'                   => self::canUpdate(),

templates/pages/admin/form/form_destination.html.twig

@@ -36,7 +36,6 @@
 {# @var \Glpi\Form\Desination\FormDestination          destinations #}
 {# @var int|null                                       active_destination #}
 {# @var boolean                                        can_update #}
-
 <div class="py-2 px-3">
     <h2 class="d-flex">
         <i class="{{ icon }} me-2"></i>
@@ -86,11 +85,11 @@
     {% else %}
         <section class="accordion mt-4" id="glpi-destinations-accordion" aria-label="{{ __("Form destinations") }}">
             {% for destination in destinations %}
-                {% set is_expanded = active_destination == destination.getID() or destinations|length == 1 %}
+                {% set is_expanded = active_destination == destination.getID() %}
                 {% set concrete_destination = destination.getConcreteDestinationItem() %}
                 {% set rand = random() %}
                 <section
-                    class="accordion-item"
+                    class="accordion-item destination-{{ destination.getID() }}"
                     aria-label="{{ destination.getName() }}"
                 >
                     <div class="accordion-header">
@@ -141,29 +140,18 @@
                         id="glpi-destinations-accordion-collapse-{{ rand }}-{{ loop.index }}"
                         class="accordion-collapse collapse {{ is_expanded ? 'show' : '' }}"
                         data-bs-parent="#glpi-destinations-accordion"
+                        data-form="{{ form.getID() }}"
+                        data-form-destination="{{ destination.getID() }}"
                     >
                         <div class="accordion-body p-0">
-                            <form id="form-destination-{{ destination.getID() }}">
-                                <div class="overflow-x-hidden px-4">
-                                    {{ concrete_destination.renderConfigForm(
-                                        form,
-                                        destination,
-                                        destination.getConfig(),
-                                    )|raw }}
-                                    {% if concrete_destination.useDefaultConfigLayout() and can_update %}
-                                        <div class="mt-3 mb-3">
-                                            {{ include('pages/admin/form/form_destination_actions.html.twig', {
-                                                form: form,
-                                                destination: destination
-                                            }, with_context = false) }}
-                                        </div>
-                                    {% endif %}
-                                </div>
-
-                                {# Hidden values #}
-                                <input type="hidden" name="id" value="{{ destination.getID() }}"/>
-                                <input type="hidden" name="_glpi_csrf_token" value="{{ csrf_token() }}"/>
-                            </form>
+                            {% if is_expanded %}
+                                {{ include('pages/admin/form/form_destination_form.html.twig', {
+                                    destination,
+                                    form,
+                                    can_update,
+                                    concrete_destination,
+                                }) }}
+                            {% endif %}
                         </div>
                     </div>
                 </section>
@@ -173,11 +161,11 @@
 </div>
 
 <script>
-    import("/js/modules/Forms/DestinationAutoConfigController.js").then((m) => {
-        new m.GlpiFormDestinationAutoConfigController();
-    });
+    import("/js/modules/Forms/DestinationAccordionController.js").then(function (module) {
+        const accordionController = new module.GlpiFormDestinationAccordionController();
 
-    import("/js/modules/Forms/DestinationConditionController.js").then((m) => {
-        new m.GlpiFormDestinationConditionController();
-    });
+        {% if active_destination %}
+            accordionController.triggerWatchers();
+        {% endif %}
+    })
 </script>

templates/pages/admin/form/form_destination_form.html.twig

@@ -0,0 +1,60 @@
+{#
+ # ---------------------------------------------------------------------
+ #
+ # GLPI - Gestionnaire Libre de Parc Informatique
+ #
+ # http://glpi-project.org
+ #
+ # @copyright 2015-2025 Teclib' and contributors.
+ # @licence   https://www.gnu.org/licenses/gpl-3.0.html
+ #
+ # ---------------------------------------------------------------------
+ #
+ # LICENSE
+ #
+ # This file is part of GLPI.
+ #
+ # This program is free software: you can redistribute it and/or modify
+ # it under the terms of the GNU General Public License as published by
+ # the Free Software Foundation, either version 3 of the License, or
+ # (at your option) any later version.
+ #
+ # This program is distributed in the hope that it will be useful,
+ # but WITHOUT ANY WARRANTY; without even the implied warranty of
+ # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ # GNU General Public License for more details.
+ #
+ # You should have received a copy of the GNU General Public License
+ # along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ #
+ # ---------------------------------------------------------------------
+ #}
+
+{#
+    REQUIRED:
+        - `destination`: FormDestination
+        - `form`: Form
+        - `can_update`: bool
+        - `concrete_destination`: FormDestinationInterface|null
+#}
+<form id="form-destination-{{ destination.getID() }}">
+    <div class="overflow-x-hidden px-4">
+        {{ concrete_destination.renderConfigForm(
+            form,
+            destination,
+            destination.getConfig(),
+        )|raw }}
+        {% if concrete_destination.useDefaultConfigLayout() and can_update %}
+        <div class="mt-3 mb-3">
+            {{ include('pages/admin/form/form_destination_actions.html.twig', {
+                form: form,
+                destination: destination
+            }, with_context = false) }}
+        </div>
+        {% endif %}
+    </div>
+
+    {# Hidden values #}
+    <input type="hidden" name="id" value="{{ destination.getID() }}"/>
+    <input type="hidden" name="_glpi_csrf_token" value="{{ csrf_token() }}"/>
+</form>

tests/cypress/e2e/form/destination_config_fields/request_type.cy.js

@@ -39,7 +39,7 @@ describe('Request type configuration', () => {
         cy.createFormWithAPI().visitFormTab('Form');
         cy.findByRole('button', {'name': "Add a question"}).click();
         cy.focused().type("My request type question");
-        cy.getDropdownByLabelText('Question type').selectDropdownValue('Request type');
+        cy.findByRole('option', {'name': 'New question'}).changeQuestionType('Request type');
         cy.findByRole('button', {'name': 'Save'}).click();
         cy.checkAndCloseAlert('Item successfully updated');
 

tests/cypress/e2e/form/form_destination.cy.js

@@ -239,7 +239,7 @@ describe('Form destination', () => {
             .click();
 
         cy.findByRole("textbox", {name: "Form destination name"}).should('have.value', 'Original destination');
-        cy.findByRole('region', {name: 'Title configuration'}).awaitTinyMCE().as("original_title_field");
+        cy.findByRole('region', {name: 'Title configuration'}).as("original_title_field");
         cy.get("@original_title_field").should('contain.text', 'Custom title for duplication test');
     });
 });