[JENKINS-74052] Extract inline JavaScript from dynamicRepos.jelly

jfrog · Nov 26, 2024 · cfde874 · cfde874
1 parent 171e1bb
commit cfde874
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 21 deletions.
diff --git a/src/main/resources/lib/jfrog/dynamicRepos.jelly b/src/main/resources/lib/jfrog/dynamicRepos.jelly
@@ -58,9 +58,8 @@
                         </j:forEach>
                     </select>
                     <div style="float:right; padding-top: 0.5em">
-                    <input
-                            class="yui-button validate-button" type="button" id="btn_${id}"
-                            onclick="toggleTxtAndSelect('${id}', 'mode_${id}')"/>
+                    <button class="jenkins-button validate-button artifactory-toggle-txt-and-select" type="button" id="btn_${id}"
+                            data-txt-id="${id}"/>
                     </div>
                 </j:when>
                 <j:otherwise>
@@ -71,25 +70,12 @@
                             id="select_${id}" name="keyFromSelect">
                     </select>
                     <div style="float:right; padding-top: 0.5em" >
-                    <input
-                            class="yui-button validate-button" type="button" id="btn_${id}"
-                            value="Different Value"
-                            onclick="toggleTxtAndSelect('${id}', 'mode_${id}')"/>
+                    <button class="jenkins-button validate-button artifactory-toggle-txt-and-select" type="button" id="btn_${id}"
+                            data-txt-id="${id}">Different Value</button>
                     </div>
                 </j:otherwise>
             </j:choose>
         </f:entry>
-        <j:choose>
-            <j:when test="${repositoryConf.dynamicMode}">
-                <script>
-                    initTextAndSelectOnLoad('${id}', '', 'none');
-                </script>
-            </j:when>
-            <j:otherwise>
-                <script>
-                    initTextAndSelectOnLoad('${id}', 'none', '');
-                </script>
-            </j:otherwise>
-        </j:choose>
+        <span class="artifactory-text-select-init-data-holder" data-dynamic-mode="${repositoryConf.dynamicMode}" data-label-id="${id}"/>
     </f:section>
 </j:jelly>
diff --git a/src/main/resources/lib/jfrog/repos/repos.js b/src/main/resources/lib/jfrog/repos/repos.js
@@ -480,9 +480,9 @@ function initTextAndSelectOnLoad(label, txtValue, selectValue) {
         if (button != undefined) {
             if (txtValue === '') {
                 // noinspection SqlNoDataSourceInspection,SqlResolve
-                button.value = "Select from List";
+                button.innerText = "Select from List";
             } else {
-                button.value = "Different Value";
+                button.innerText = "Different Value";
             }
         }
     }
@@ -497,3 +497,24 @@ function initTextAndSelectOnLoad(label, txtValue, selectValue) {
 function getElementByUniqueId(elementId, uniqueId) {
     return document.getElementById(elementId + "-" + uniqueId)
 }
+
+document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll(".artifactory-text-select-init-data-holder").forEach((dataHolder) => {
+        const { labelId } = dataHolder.dataset;
+        const dynamicMode = dataHolder.dataset.dynamicMode === "true";
+
+        if (dynamicMode) {
+            initTextAndSelectOnLoad(labelId, '', 'none');
+        } else {
+            initTextAndSelectOnLoad(labelId, 'none', '');
+        }
+    });
+});
+
+Behaviour.specify("BUTTON.artifactory-toggle-txt-and-select", "dynamicRepos_artifactory-toggle-txt-and-select", 0, (element) => {
+    element.addEventListener("click", (event) => {
+        const { txtId } = event.target.dataset;
+
+        toggleTxtAndSelect(txtId, `mode_${txtId}`);
+    });
+});