From ee1461ea796b96c408b42fc43df19b8f75d55945 Mon Sep 17 00:00:00 2001
From: Benjamin Franzke <ben@bnf.dev>
Date: Fri, 25 Aug 2023 05:53:25 +0200
Subject: [PATCH] [BUGFIX] Hide form validators label when no one is available

With the deprecation removal of regular expressions
based EXT:form validators in #101070, the set of available
validators for the form element type URL became empty.
(See EXT:form/Configuration/Yaml/FormElements/Url.yaml)

Instead of only removing the select element from the DOM,
the entire form-group is now removed, in order to also hide
the corresponding <label> tag, as such a stray label tag
isn't helpful for an enduser and is therefore actually even
invalid HTML (as the reference to an input element is missing).

Resolves: #101749
Related: #101070
Releases: main, 12.4, 11.5
Change-Id: Ib0d34e94e2c3ba109133dac64374f04f7c91329b
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/80734
Tested-by: core-ci <typo3@b13.com>
Tested-by: Benjamin Franzke <ben@bnf.dev>
Reviewed-by: Benjamin Franzke <ben@bnf.dev>
---
 .../FormEditor/Inspector/FinishersEditor.html |  3 ++-
 .../Inspector/ValidatorsEditor.html           |  3 ++-
 .../Backend/FormEditor/InspectorComponent.js  | 20 ++++++++++++++++---
 3 files changed, 21 insertions(+), 5 deletions(-)
diff --git a/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/FinishersEditor.html b/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/FinishersEditor.html
index a69e728af99a..e4ae98f53267 100644
--- a/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/FinishersEditor.html
+++ b/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/FinishersEditor.html
@@ -1,6 +1,6 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="form-editor">
-    <div class="t3-form-control-group form-group">
+    <div class="t3-form-control-group form-group" data-template-property="select-group">
         <label data-random-id data-random-id-attribute="for" data-random-id-number="1">
             <span data-template-property="label"></span>
         </label>
@@ -8,6 +8,7 @@
             <select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-select"></select>
         </div>
     </div>
+    <div class="t3-form-control-group form-group fw-bold" style="margin-bottom: 2.25em" data-template-property="label-no-select"></div>
 </div>
 <div id="t3-form-inspector-finishers" class="t3-form-collection-container" data-identifier="inspectorFinishers">
 </div>
diff --git a/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/ValidatorsEditor.html b/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/ValidatorsEditor.html
index 09c3f21633ca..b484e0033ef8 100644
--- a/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/ValidatorsEditor.html
+++ b/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/ValidatorsEditor.html
@@ -1,6 +1,6 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="form-editor">
-    <div class="t3-form-control-group form-group">
+    <div class="t3-form-control-group form-group" data-template-property="select-group">
         <label data-random-id data-random-id-attribute="for" data-random-id-number="1">
             <span data-template-property="label"></span>
         </label>
@@ -8,6 +8,7 @@
             <select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-select"></select>
         </div>
     </div>
+    <div class="t3-form-control-group form-group fw-bold" style="margin-bottom: 2.25em" data-template-property="label-no-select"></div>
 </div>
 <div id="t3-form-inspector-validators" class="t3-form-collection-container" data-identifier="inspectorValidators">
 </div>
diff --git a/typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/InspectorComponent.js b/typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/InspectorComponent.js
index dedfe40b230c..db9c08533283 100644
--- a/typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/InspectorComponent.js
+++ b/typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/InspectorComponent.js
@@ -1009,7 +1009,7 @@ define(['jquery',
      */
     function renderCollectionElementSelectionEditor(collectionName, editorConfiguration, editorHtml) {
       var alreadySelectedCollectionElements, selectElement, collectionContainer,
-        removeSelectElement;
+        removeSelectElement, hasAlreadySelectedCollectionElements;
       assert(
         getUtility().isNonEmptyString(collectionName),
         'Invalid configuration "collectionName"',
@@ -1049,7 +1049,12 @@ define(['jquery',
       getHelper().getTemplatePropertyDomElement('label', editorHtml).text(editorConfiguration['label']);
       selectElement = getHelper().getTemplatePropertyDomElement('selectOptions', editorHtml);
 
-      if (!getUtility().isUndefinedOrNull(alreadySelectedCollectionElements)) {
+      hasAlreadySelectedCollectionElements = (
+        !getUtility().isUndefinedOrNull(alreadySelectedCollectionElements) &&
+        alreadySelectedCollectionElements.length > 0
+      );
+
+      if (hasAlreadySelectedCollectionElements) {
         for (var i = 0, len = alreadySelectedCollectionElements.length; i < len; ++i) {
           getPublisherSubscriber().publish('view/inspector/collectionElement/existing/selected', [
             alreadySelectedCollectionElements[i]['identifier'],
@@ -1081,9 +1086,18 @@ define(['jquery',
       }
 
       if (removeSelectElement) {
-        selectElement.off().empty().remove();
+        getHelper().getTemplatePropertyDomElement('select-group', editorHtml).off().empty().remove();
+        var labelNoSelect = getHelper().getTemplatePropertyDomElement('label-no-select', editorHtml);
+        if (hasAlreadySelectedCollectionElements) {
+          labelNoSelect.text(editorConfiguration.label);
+        } else {
+          labelNoSelect.remove();
+        }
+        return;
       }
 
+      getHelper().getTemplatePropertyDomElement('label-no-select', editorHtml).remove();
+
       selectElement.on('change', function() {
         if ($(this).val() !== '') {
           var value = $(this).val();
