Remove YUI (#38)

jenkinsci · Oct 9, 2024 · de250cd · de250cd
1 parent b2bd564
commit de250cd
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 120 deletions.
diff --git a/src/main/java/hudson/plugins/sectioned_view/FolderViewSection.java b/src/main/java/hudson/plugins/sectioned_view/FolderViewSection.java
@@ -59,6 +59,16 @@ public FolderViewSection(String name, Width width, Positioning alignment, int vi
         this.setRegexFilter(regexFilter);
     }
 
+    public boolean isChecked(Folder folder, ItemGroup itemGroup) {
+        Collection<TopLevelItem> selectedItems = getItems(itemGroup);
+        for (TopLevelItem item: selectedItems) {
+            if (folder == item) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     public List<List<Node>> getColumnsWithContent(ItemGroup<? extends TopLevelItem> itemGroup, int baseFolderLevel) {
         List<List<Node>> columns = new ArrayList<List<Node>>();
         for (int i = 0; i < viewColumns; i++) {
@@ -220,26 +230,9 @@ public FormValidation doCheckFolderLevels(@QueryParameter String value) {
             return FormValidation.error("Levels must be a number greater than 0");
         }
 
-        public boolean isFolder(TopLevelItem item) {
-            return item instanceof Folder;
-        }
-
-        public int baseFolderLevel(SectionedView sectionedView) {
-            return calculateBaseFolderLevel(sectionedView);
-        }
-
-        public List<Folder> getAvailableFolders(ItemGroup itemGroup, SectionedView sectionedView) {
-            Collection<Item> items = itemGroup.getItems();
-            List<Folder> folders = new ArrayList<Folder>();
-            int baseFolderLevel = baseFolderLevel(sectionedView);
-            for (Item item : items) {
-                if (item instanceof Folder) {
-                    if (folderLevel(item.getFullName()) == (0 + baseFolderLevel)) {
-                        folders.add((Folder)item);
-                    }
-                }
-            }
-            return folders;
+        public Collection<Item> getAllFolders(ItemGroup<Item> itemGroup) {
+            Collection<Item> items = itemGroup.getItems(item -> item instanceof Folder);
+            return items;
         }
     }
 

diff --git a/src/main/java/hudson/plugins/sectioned_view/ViewListingSection.java b/src/main/java/hudson/plugins/sectioned_view/ViewListingSection.java
@@ -32,6 +32,8 @@
 import hudson.model.View;
 import hudson.model.ViewGroup;
 import hudson.util.FormValidation;
+import java.util.logging.Level;
+import java.util.logging.Logger;
 import net.sf.json.JSONObject;
 
 import org.apache.commons.lang.StringUtils;
@@ -60,18 +62,8 @@ public List<String> getViews() {
         return views;
     }
 
-    /**
-     * Used for generating the config UI.
-     */
-    public String getViewsString() {
-        if (views == null || views.isEmpty()) return "";
-
-        char delim = ',';
-        // Build string connected with delimiter, quoting as needed
-        StringBuilder buf = new StringBuilder();
-        for (String value : views)
-            buf.append(delim).append(value);
-        return buf.substring(1);
+    public boolean isChecked(String viewName) {
+        return views.contains(viewName);
     }
 
     public void setColumns(int columns) {

diff --git a/src/main/resources/hudson/model/View/index.jelly b/src/main/resources/hudson/model/View/index.jelly
@@ -51,10 +51,8 @@ THE SOFTWARE.
         </l:main-panel>
         <l:header>
             <!-- for screen resolution detection -->
-            <l:yui module="cookie" />
-            <script>
-                YAHOO.util.Cookie.set("screenResolution", screen.width+"x"+screen.height);
-            </script>
+          <script id="screenResolution-script" data-use-secure-cookie="${request.secure}"/>
+          <st:adjunct includes="hudson.model.View.screen-resolution"/>
         </l:header>
     </l:layout>
 </st:compress>
diff --git a/src/main/resources/hudson/plugins/sectioned_view/FolderViewSection/config.jelly b/src/main/resources/hudson/plugins/sectioned_view/FolderViewSection/config.jelly
@@ -22,20 +22,30 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt" xmlns:local="local">
-
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:sv="/lib/sectioned_view" xmlns:f="/lib/form"  xmlns:local="local" xmlns:l="/lib/layout">
+  <st:adjunct includes="hudson.plugins.sectioned_view.sectioned-view-config"/>
     <d:taglib uri="local">
-        <d:tag name="add-children">
-            <j:forEach var="item" items="${items}">
-                <j:if test="${descriptor.isFolder(item)}">
-                    <j:set var="itemName" value="${prefix == ''?'':prefix+'$'}${item.name}"/>
-                    <j:set var="name" value="sections.${descriptor.escapeJobName(h.getRelativeNameFrom(item, it.ownerItemGroup, false))}"/>
-                    items['${itemName}'] = new YAHOO.widget.HTMLNode('&lt;input type="checkbox" name="${name}" '+has("${itemName}")+'/&gt;&lt;label class="attach-previous"&gt;${h.jsStringEscape(item.name)}&lt;/label&gt;', ${parentNode}, false);
-                    <j:if test="${item.items != null}">
-                        <local:add-children parentNode="items['${itemName}']" items="${item.items}" prefix="${itemName}"/>
-                    </j:if>
+        <d:tag name="tree-view">
+          <j:forEach var="item" items="${items}">
+              <div class="sectioned-view-tree__container">
+                <j:set var="name" value="sections.${descriptor.escapeJobName(h.getRelativeNameFrom(item, it.ownerItemGroup, false))}"/>
+                <j:set var="subItems" value="${descriptor.getAllFolders(item)}"/>
+                <div class="sectioned-view-tree__row">
+                  <f:checkbox name="${name}" title="${item.name}" checked="${instance.isChecked(item, it.ownerItemGroup)}"/>
+                  <j:if test="${subItems.size() gt 0}">
+                    <button type="button" class="jenkins-button sectioned-view-tree__button" data-hidden="true">
+                      <l:icon src="symbol-chevron-down" class="icon-sm"/>
+                    </button>
+                  </j:if>
+                </div>
+
+                <j:if test="${subItems.size() gt 0}">
+                  <div class="jenkins-!-margin-left-3 sectioned-view-tree jenkins-hidden" data-hidden="true">
+                    <local:tree-view items="${subItems}"/>
+                  </div>
                 </j:if>
-            </j:forEach>
+              </div>
+          </j:forEach>
         </d:tag>
     </d:taglib>
 
@@ -44,40 +54,9 @@ THE SOFTWARE.
             <f:textbox name="sections.name" value="${instance.name}"/>
         </f:entry>
         <f:entry title="Folders">
-            <div class="yahooTree folders-tree" style="border: 1px solid #ccc; height: 20em; overflow:auto;" values="${instance.getSelectedFoldersString(it.ownerItemGroup)}"/>
-            <script>
-                hudsonRules["DIV.folders-tree"] = function(e) {
-                    var tree = new YAHOO.widget.TreeView(e);
-                    var rootNode = tree.getRoot();
-
-                    var values = (e.getAttribute("values") || "").split(",");
-
-                    function has(v) {
-                        return values.includes(v) ? 'checked="true" ' : "";
-                    }
-                    var items = {};
-
-                    <local:add-children parentNode="rootNode" items="${descriptor.getAvailableFolders(it.ownerItemGroup, it)}" prefix=""/>
-
-                    tree.draw();
-                    <!--
-                      force the rendering of HTML, so that input fields are there
-                      even when the form is submitted without this tree expanded.
-                    -->
-                    tree.expandAll();
-                    tree.collapseAll();
-
-                    <!--
-                      cancel the event.
-
-                      from http://yuilibrary.com/forum/viewtopic.php?f=89&t=8209&p=26239&hilit=HTMLNode#p26239
-                      "To prevent toggling and allow the link to work, add a listener to the clickEvent on that tree and simply return false"
-                    -->
-                    tree.subscribe("clickEvent", function(node) {
-                        return false;
-                    });
-                };
-            </script>
+          <div class="jenkins-input sectioned-view-tree">
+            <local:tree-view items="${descriptor.getAllFolders(it.ownerItemGroup)}"/>
+          </div>
         </f:entry>
         <f:advanced>
             <f:entry field="alignment" title="${%Align}">

diff --git a/src/main/resources/hudson/plugins/sectioned_view/ViewListingSection/config.jelly b/src/main/resources/hudson/plugins/sectioned_view/ViewListingSection/config.jelly
@@ -24,54 +24,39 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt" xmlns:local="local">
   <d:taglib uri="local">
-    <d:tag name="add-children">
+    <d:tag name="tree-view">
       <j:forEach var="view" items="${views}">
-        <j:set var="viewName" value="${prefix == ''?'':prefix+'$'}${view.viewName}"/>
-        views['${viewName}'] = new YAHOO.widget.HTMLNode('&lt;input type="checkbox" name="views" json="${viewName}" '+has("${viewName}")+'/&gt;&lt;label class="attach-previous"&gt;${h.jsStringEscape(view.viewName)}&lt;/label&gt;', ${parentView}, false);
-        <j:if test="${view.views != null}">
-          <local:add-children parentView="views['${viewName}']" views="${view.views}" prefix="${viewName}"/>
-        </j:if>
+        <div class="sectioned-view-tree__container">
+          <j:set var="viewName" value="${prefix == ''?'':prefix+'$'}${view.viewName}"/>
+          <j:set var="subViews" value="${view.views}"/>
+          <div class="sectioned-view-tree__row">
+            <f:checkbox name="views" title="${view.viewName}" checked="${instance.isChecked(viewName)}" json="${viewName}"/>
+            <j:if test="${subViews.size() gt 0}">
+              <button type="button" class="jenkins-button sectioned-view-tree__button" data-hidden="true">
+                <l:icon src="symbol-chevron-down" class="icon-sm"/>
+              </button>
+            </j:if>
+          </div>
+
+          <j:if test="${subViews.size() gt 0}">
+            <div class="jenkins-!-margin-left-3 sectioned-view-tree jenkins-hidden" data-hidden="true">
+              <local:tree-view views="${view.views}" prefix="${viewName}"/>
+            </div>
+          </j:if>
+        </div>
       </j:forEach>
     </d:tag>
+
   </d:taglib>
 
   <f:nested>
     <f:entry title="Name">
       <f:textbox name="sections.name" value="${instance.name}"/>
     </f:entry>
     <f:entry title="${%Views}" field="views">
-      <div class="yahooTree views-tree" style="border: 1px solid gray; height: 10em; overflow:auto;" values="${instance.viewsString}" />
-      <script>
-        hudsonRules["DIV.views-tree"] = function(e) {
-          var tree = new YAHOO.widget.TreeView(e);
-          var root = tree.getRoot();
-
-          var values = (e.getAttribute("values") || "").split(",");
-          function has(v) {
-            return values.includes(v) ? 'checked="checked" ' : "";
-          }
-          var views = {};
-          <local:add-children parentView="root" views="${it.owner.views}" prefix=""/>
-
-          tree.draw();
-          <!--
-            force the rendering of HTML, so that input fields are there
-            even when the form is submitted without this tree expanded.
-          -->
-          tree.expandAll();
-          tree.collapseAll();
-
-          <!--
-            cancel the event.
-
-            from http://yuilibrary.com/forum/viewtopic.php?f=89&t=8209&p=26239&hilit=HTMLNode#p26239
-            "To prevent toggling and allow the link to work, add a listener to the clickEvent on that tree and simply return false"
-          -->
-          tree.subscribe("clickEvent", function(node) {
-              return false;
-          });
-        };
-      </script>
+      <div class="jenkins-input sectioned-view-tree">
+        <local:tree-view views="${it.owner.views}" prefix=""/>
+      </div>
     </f:entry>
     <f:advanced>
       <f:entry field="alignment" title="${%Align}">

diff --git a/src/main/resources/hudson/plugins/sectioned_view/sectioned-view-config.css b/src/main/resources/hudson/plugins/sectioned_view/sectioned-view-config.css
@@ -0,0 +1,23 @@
+.sectioned-view-tree, .sectioned-view-tree__container {
+  display: flex;
+  gap: 5px;
+  flex-direction: column;
+  max-height: 400px;
+  overflow: auto;
+}
+
+.sectioned-view-tree__button {
+  min-height: 20px;
+  height: 20px;
+  padding: 0.5rem 0.3rem
+}
+
+.sectioned-view-tree__row {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.sectioned-view-tree__button[data-hidden=false] {
+  rotate: 180deg;
+}
diff --git a/src/main/resources/hudson/plugins/sectioned_view/sectioned-view-config.js b/src/main/resources/hudson/plugins/sectioned_view/sectioned-view-config.js
@@ -0,0 +1,16 @@
+Behaviour.specify(".sectioned-view-tree__button", "sectioned-view__button", 0, function(btn) {
+  btn.addEventListener("click", function(evt) {
+    const container = btn.closest(".sectioned-view-tree__container");
+    if (container) {
+      const labelList = container.querySelector(".sectioned-view-tree");
+      if (labelList) {
+        labelList.classList.toggle("jenkins-hidden");
+        if (btn.dataset.hidden === "true") {
+          btn.dataset.hidden = "false";
+        } else {
+          btn.dataset.hidden = "true";
+        }
+      }
+    }
+  });
+});