Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-74241

[multiselect-parameter] Extract inline script block and event handler in de/westemeyer/plugins/multiselect/MultiselectParameterDefinition/index.jelly

      Problems

      == Inline Script Block
      Line: 6
      ----
      <script>
              // bind java variable
              var parameterDefinition${it.uuid} = <st:bind value="${it}"/>;
      
              function fillInValues${it.uuid}(coordinates, selectBoxId) {
                  // get select list with given id
                  var select = document.getElementById(selectBoxId);
      
                  // get item list from java code, invoke anonymous function to fill received values into select list
                  parameterDefinition${it.uuid}.getItemList(coordinates, function(t) {
                      // get response values from "getItemList" call into javascript array
                      var options = t.responseObject();
      
                      // clear select list
                      select.options.length = 0;
      
                      // iterate all options
                      for(var i = 0; i &lt; options.length; i++) {
                          // create new HTML option element as child of select box HTML item
                          var el = document.createElement("option");
      
                          // set option name as visible text
                          el.textContent = options[i];
      
                          // set option index as value
                          el.value = i;
      
                          // append element
                          select.appendChild(el);
                      }
      
                      var functionName = selectBoxId.concat("Changed");
                      if (select.options.length > 0) {
                          window[functionName](select);
                      }
                  });
              }
      
              <j:set var="variableDescriptions" value="${decisionTree.variableDescriptions}"/>
      
              // list of successors, meaning: there is a variable for each of the selectboxes, containing the ID of its successor (box to the right)
              <j:set var="last" value=""/>
              <j:forEach var="variable" items="${variableDescriptions}" indexVar="i">
                  <j:if test="${i gt 0}">
              var ${last} = "${variable.uuid}";
                  </j:if>
                  <j:set var="last" value="${variable.uuid}"/>
      
              </j:forEach>
      
              <j:forEach var="variable" items="${variableDescriptions}" indexVar="i">
              function ${variable.uuid}Changed(select)
              {
                  <j:if test="${i ne (variableDescriptions.size() - 1)}">
                      var coordinatesBuffer = new Array();
                  var e = null;
                      <j:forEach var="listItem" items="${variableDescriptions}" indexVar="j">
                          <j:if test="${j lt (i + 1)}">
                  // check value of list box number ${j}
                  e = document.getElementById("${listItem.uuid}");
                  coordinatesBuffer.push(e.options[e.selectedIndex].value);
                              <j:if test="${j eq i}">
                  fillInValues${it.uuid}(coordinatesBuffer, ${listItem.uuid});
                              </j:if>
                          </j:if>
                      </j:forEach>
                  </j:if>
              }
              </j:forEach>
          </script>
      ----
      
      == Inline Event Handler
      Line: 89
      ----
      <select name="${dropdown.variableName}" onchange="${dropdown.uuid}Changed(this, '${it.name}')"
                                                  id="${dropdown.uuid}" style="display:inline">
      ----
      

      Solutions

      https://www.jenkins.io/doc/developer/security/csp/#inline-javascript-blocks
      https://www.jenkins.io/doc/developer/security/csp/#inline-event-handlers

          [JENKINS-74241] [multiselect-parameter] Extract inline script block and event handler in de/westemeyer/plugins/multiselect/MultiselectParameterDefinition/index.jelly

          Basil Crow created issue -
          Basil Crow made changes -
          Assignee Original: Sebastian Westemeyer [ swesteme ]
          Basil Crow made changes -
          Description Original: h4. Problems

          {noformat}
          == Inline Event Handler
          Line: 89
          ----
          <select name="${dropdown.variableName}" onchange="${dropdown.uuid}Changed(this, '${it.name}')"
                                                      id="${dropdown.uuid}" style="display:inline">
          ----

          == Inline Script Block
          Line: 6
          ----
          <script>
                  // bind java variable
                  var parameterDefinition${it.uuid} = <st:bind value="${it}"/>;

                  function fillInValues${it.uuid}(coordinates, selectBoxId) {
                      // get select list with given id
                      var select = document.getElementById(selectBoxId);

                      // get item list from java code, invoke anonymous function to fill received values into select list
                      parameterDefinition${it.uuid}.getItemList(coordinates, function(t) {
                          // get response values from "getItemList" call into javascript array
                          var options = t.responseObject();

                          // clear select list
                          select.options.length = 0;

                          // iterate all options
                          for(var i = 0; i &lt; options.length; i++) {
                              // create new HTML option element as child of select box HTML item
                              var el = document.createElement("option");

                              // set option name as visible text
                              el.textContent = options[i];

                              // set option index as value
                              el.value = i;

                              // append element
                              select.appendChild(el);
                          }

                          var functionName = selectBoxId.concat("Changed");
                          if (select.options.length > 0) {
                              window[functionName](select);
                          }
                      });
                  }

                  <j:set var="variableDescriptions" value="${decisionTree.variableDescriptions}"/>

                  // list of successors, meaning: there is a variable for each of the selectboxes, containing the ID of its successor (box to the right)
                  <j:set var="last" value=""/>
                  <j:forEach var="variable" items="${variableDescriptions}" indexVar="i">
                      <j:if test="${i gt 0}">
                  var ${last} = "${variable.uuid}";
                      </j:if>
                      <j:set var="last" value="${variable.uuid}"/>

                  </j:forEach>

                  <j:forEach var="variable" items="${variableDescriptions}" indexVar="i">
                  function ${variable.uuid}Changed(select)
                  {
                      <j:if test="${i ne (variableDescriptions.size() - 1)}">
                          var coordinatesBuffer = new Array();
                      var e = null;
                          <j:forEach var="listItem" items="${variableDescriptions}" indexVar="j">
                              <j:if test="${j lt (i + 1)}">
                      // check value of list box number ${j}
                      e = document.getElementById("${listItem.uuid}");
                      coordinatesBuffer.push(e.options[e.selectedIndex].value);
                                  <j:if test="${j eq i}">
                      fillInValues${it.uuid}(coordinatesBuffer, ${listItem.uuid});
                                  </j:if>
                              </j:if>
                          </j:forEach>
                      </j:if>
                  }
                  </j:forEach>
              </script>
          ----

          == Inline Event Handler
          Line: 89
          ----
          <select name="${dropdown.variableName}" onchange="${dropdown.uuid}Changed(this, '${it.name}')"
                                                      id="${dropdown.uuid}" style="display:inline">
          ----

          == Inline Script Block
          Line: 6
          ----
          <script>
                  // bind java variable
                  var parameterDefinition${it.uuid} = <st:bind value="${it}"/>;

                  function fillInValues${it.uuid}(coordinates, selectBoxId) {
                      // get select list with given id
                      var select = document.getElementById(selectBoxId);

                      // get item list from java code, invoke anonymous function to fill received values into select list
                      parameterDefinition${it.uuid}.getItemList(coordinates, function(t) {
                          // get response values from "getItemList" call into javascript array
                          var options = t.responseObject();

                          // clear select list
                          select.options.length = 0;

                          // iterate all options
                          for(var i = 0; i &lt; options.length; i++) {
                              // create new HTML option element as child of select box HTML item
                              var el = document.createElement("option");

                              // set option name as visible text
                              el.textContent = options[i];

                              // set option index as value
                              el.value = i;

                              // append element
                              select.appendChild(el);
                          }

                          var functionName = selectBoxId.concat("Changed");
                          if (select.options.length > 0) {
                              window[functionName](select);
                          }
                      });
                  }

                  <j:set var="variableDescriptions" value="${decisionTree.variableDescriptions}"/>

                  // list of successors, meaning: there is a variable for each of the selectboxes, containing the ID of its successor (box to the right)
                  <j:set var="last" value=""/>
                  <j:forEach var="variable" items="${variableDescriptions}" indexVar="i">
                      <j:if test="${i gt 0}">
                  var ${last} = "${variable.uuid}";
                      </j:if>
                      <j:set var="last" value="${variable.uuid}"/>

                  </j:forEach>

                  <j:forEach var="variable" items="${variableDescriptions}" indexVar="i">
                  function ${variable.uuid}Changed(select)
                  {
                      <j:if test="${i ne (variableDescriptions.size() - 1)}">
                          var coordinatesBuffer = new Array();
                      var e = null;
                          <j:forEach var="listItem" items="${variableDescriptions}" indexVar="j">
                              <j:if test="${j lt (i + 1)}">
                      // check value of list box number ${j}
                      e = document.getElementById("${listItem.uuid}");
                      coordinatesBuffer.push(e.options[e.selectedIndex].value);
                                  <j:if test="${j eq i}">
                      fillInValues${it.uuid}(coordinatesBuffer, ${listItem.uuid});
                                  </j:if>
                              </j:if>
                          </j:forEach>
                      </j:if>
                  }
                  </j:forEach>
              </script>
          ----
          {noformat}

          h4. Solutions

          [https://www.jenkins.io/doc/developer/security/csp/#inline-javascript-blocks]
          [https://www.jenkins.io/doc/developer/security/csp/#inline-event-handlers]
          New: h4. Problems

          {noformat}
          == Inline Script Block
          Line: 6
          ----
          <script>
                  // bind java variable
                  var parameterDefinition${it.uuid} = <st:bind value="${it}"/>;

                  function fillInValues${it.uuid}(coordinates, selectBoxId) {
                      // get select list with given id
                      var select = document.getElementById(selectBoxId);

                      // get item list from java code, invoke anonymous function to fill received values into select list
                      parameterDefinition${it.uuid}.getItemList(coordinates, function(t) {
                          // get response values from "getItemList" call into javascript array
                          var options = t.responseObject();

                          // clear select list
                          select.options.length = 0;

                          // iterate all options
                          for(var i = 0; i &lt; options.length; i++) {
                              // create new HTML option element as child of select box HTML item
                              var el = document.createElement("option");

                              // set option name as visible text
                              el.textContent = options[i];

                              // set option index as value
                              el.value = i;

                              // append element
                              select.appendChild(el);
                          }

                          var functionName = selectBoxId.concat("Changed");
                          if (select.options.length > 0) {
                              window[functionName](select);
                          }
                      });
                  }

                  <j:set var="variableDescriptions" value="${decisionTree.variableDescriptions}"/>

                  // list of successors, meaning: there is a variable for each of the selectboxes, containing the ID of its successor (box to the right)
                  <j:set var="last" value=""/>
                  <j:forEach var="variable" items="${variableDescriptions}" indexVar="i">
                      <j:if test="${i gt 0}">
                  var ${last} = "${variable.uuid}";
                      </j:if>
                      <j:set var="last" value="${variable.uuid}"/>

                  </j:forEach>

                  <j:forEach var="variable" items="${variableDescriptions}" indexVar="i">
                  function ${variable.uuid}Changed(select)
                  {
                      <j:if test="${i ne (variableDescriptions.size() - 1)}">
                          var coordinatesBuffer = new Array();
                      var e = null;
                          <j:forEach var="listItem" items="${variableDescriptions}" indexVar="j">
                              <j:if test="${j lt (i + 1)}">
                      // check value of list box number ${j}
                      e = document.getElementById("${listItem.uuid}");
                      coordinatesBuffer.push(e.options[e.selectedIndex].value);
                                  <j:if test="${j eq i}">
                      fillInValues${it.uuid}(coordinatesBuffer, ${listItem.uuid});
                                  </j:if>
                              </j:if>
                          </j:forEach>
                      </j:if>
                  }
                  </j:forEach>
              </script>
          ----

          == Inline Event Handler
          Line: 89
          ----
          <select name="${dropdown.variableName}" onchange="${dropdown.uuid}Changed(this, '${it.name}')"
                                                      id="${dropdown.uuid}" style="display:inline">
          ----
          {noformat}

          h4. Solutions

          [https://www.jenkins.io/doc/developer/security/csp/#inline-javascript-blocks]
          [https://www.jenkins.io/doc/developer/security/csp/#inline-event-handlers]
          Summary Original: [multiselect-parameter] Extract inline script blocks and event handlers in de/westemeyer/plugins/multiselect/MultiselectParameterDefinition/index.jelly New: [multiselect-parameter] Extract inline script block and event handler in de/westemeyer/plugins/multiselect/MultiselectParameterDefinition/index.jelly
          Sebastian Westemeyer made changes -
          Status Original: Open [ 1 ] New: In Progress [ 3 ]

            Unassigned Unassigned
            basil Basil Crow
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated: