From 615222f67abed72ad4bef82845c8cec97ef415b4 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sun, 19 Dec 2021 16:40:23 +0000
Subject: [PATCH] Add margin to table, initial work on manage old data page

---
 .../diagnosis/OldDataMonitor/manage.jelly     | 122 ++++++++++--------
 war/src/main/less/base/typography.less        |  18 +--
 war/src/main/less/modules/app-bar.less        |   8 +-
 war/src/main/less/modules/table.less          |   2 +-
 4 files changed, 77 insertions(+), 73 deletions(-)

diff --git a/core/src/main/resources/hudson/diagnosis/OldDataMonitor/manage.jelly b/core/src/main/resources/hudson/diagnosis/OldDataMonitor/manage.jelly
index 276ecde22964..c9c9179303b5 100644
--- a/core/src/main/resources/hudson/diagnosis/OldDataMonitor/manage.jelly
+++ b/core/src/main/resources/hudson/diagnosis/OldDataMonitor/manage.jelly
@@ -28,42 +28,58 @@ THE SOFTWARE.
   <st:include page="sidepanel.jelly" it="${app}"/>
   <l:main-panel>
     <h1>${%Manage Old Data}</h1>
-    <p>${%blurb.1}</p>
-    <p>${%blurb.2}</p>
-    <table class="sortable pane bigtable width-auto">
-      <tr>
-         <th initialSortDir="down">${%Type}</th>
-         <th>${%Name}</th>
-         <th>${%Version}</th>
-         <th>${%Error}</th>
-      </tr>
-      <j:forEach var="item" items="${it.data.entrySet()}">
-        <j:set var="obj" value="${item.key}"/>
-        <j:choose>
-          <j:when test="${item.value!=''}">
+    <p class="jenkins-description">${%blurb.1}</p>
+    <p class="jenkins-description">${%blurb.2}</p>
+
+    <h2>${%TODO} ${it.data.size()}</h2>
+    <j:choose>
+      <j:when test="${it.data.size() > 0}">
+        <table class="jenkins-table sortable">
+          <thead>
             <tr>
-              <td>${obj.class.name}</td>
-              <!-- fullName is first to avoid calling User.get(String) for User object -->
-              <td>${obj.fullName?:obj.fullDisplayName?:obj.displayName?:obj.name}</td>
-              <td>
-                <j:choose>
-                  <j:when test="${item.value.isOld(150)}">
-                    <b title="${%Very old version}">${item.value}</b>
-                  </j:when>
-                  <j:otherwise>
-                    ${item.value}
-                  </j:otherwise>
-                </j:choose>
-              </td>
-              <td style="white-space:normal">${item.value.extra}</td>
+              <th initialSortDir="down">${%Type}</th>
+              <th>${%Name}</th>
+              <th>${%Version}</th>
+              <th>${%Error}</th>
             </tr>
-          </j:when>
-          <j:otherwise>
-            <j:if test="${item.value.extra!=null}"><j:set var="hasExtra" value="${true}"/></j:if>
-          </j:otherwise>
-        </j:choose>
-      </j:forEach>
-    </table>
+          </thead>
+          <tbody>
+            <j:forEach var="item" items="${it.data.entrySet()}">
+              <j:set var="obj" value="${item.key}"/>
+              <j:choose>
+                <j:when test="${item.value!=''}">
+                  <tr>
+                    <td>${obj.class.name}</td>
+                    <!-- fullName is first to avoid calling User.get(String) for User object -->
+                    <td>${obj.fullName?:obj.fullDisplayName?:obj.displayName?:obj.name}</td>
+                    <td>
+                      <j:choose>
+                        <j:when test="${item.value.isOld(150)}">
+                          <b title="${%Very old version}">${item.value}</b>
+                        </j:when>
+                        <j:otherwise>
+                          ${item.value}
+                        </j:otherwise>
+                      </j:choose>
+                    </td>
+                    <td style="white-space:normal">${item.value.extra}</td>
+                  </tr>
+                </j:when>
+                <j:otherwise>
+                  <j:if test="${item.value.extra!=null}"><j:set var="hasExtra" value="${true}"/></j:if>
+                </j:otherwise>
+              </j:choose>
+            </j:forEach>
+          </tbody>
+        </table>
+      </j:when>
+      <j:otherwise>
+        <p class="jenkins-description">${%No old data was found.}</p>
+      </j:otherwise>
+    </j:choose>
+
+    <h2>${%TODO Version stuff?} ${it.data.size()}</h2>
+    <!--    TODO stuff-->
     <j:set var="vers" value="${it.versionList}"/>
     <j:choose>
       <j:when test="${vers.hasNext()}">
@@ -83,31 +99,35 @@ THE SOFTWARE.
         </form>
       </j:when>
       <j:otherwise>
-        ${%No old data was found.}
+        <p class="jenkins-description">${%No old data was found.}</p>
       </j:otherwise>
     </j:choose>
+
     <j:if test="${hasExtra}">
-      <br/>
       <h2>${%Unreadable Data}</h2>
-      <p>${%blurb.6}</p>
-      <table class="sortable pane bigtable width-auto">
-        <tr>
+      <p class="jenkins-description">${%blurb.6}</p>
+      <table class="jenkins-table sortable">
+        <thead>
+          <tr>
             <th initialSortDir="down">${%Type}</th>
             <th>${%Name}</th>
             <th>${%Error}</th>
-        </tr>
-        <j:forEach var="item" items="${it.data.entrySet()}">
-          <j:if test="${item.value.extra!=null and item.value==''}">
-            <j:set var="obj" value="${item.key}"/>
-            <tr>
-              <td>${obj.class.name}</td>
-              <td>${obj.fullName?:obj.fullDisplayName?:obj.displayName?:obj.name}</td>
-              <td style="white-space:normal">${item.value.extra}</td>
-            </tr>
-          </j:if>
-        </j:forEach>
+          </tr>
+        </thead>
+        <tbody>
+          <j:forEach var="item" items="${it.data.entrySet()}">
+            <j:if test="${item.value.extra!=null and item.value==''}">
+              <j:set var="obj" value="${item.key}"/>
+              <tr>
+                <td>${obj.class.name}</td>
+                <td>${obj.fullName?:obj.fullDisplayName?:obj.displayName?:obj.name}</td>
+                <td style="white-space:normal">${item.value.extra}</td>
+              </tr>
+            </j:if>
+          </j:forEach>
+        </tbody>
       </table>
-      <br/>
+
       <form action="discard" method="POST" name="discardUnreadable">
         <f:submit value="${%Discard Unreadable Data}"/>
       </form>
diff --git a/war/src/main/less/base/typography.less b/war/src/main/less/base/typography.less
index e1d0c754babd..c6cea98695d7 100644
--- a/war/src/main/less/base/typography.less
+++ b/war/src/main/less/base/typography.less
@@ -51,24 +51,8 @@ h6,
   line-height: var(--line-height-heading);
   font-weight: bold;
   display: block;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
   margin-top: 0;
-  margin-bottom: 2rem;
+  margin-bottom: var(--section-padding);
 }
 
 h1,
diff --git a/war/src/main/less/modules/app-bar.less b/war/src/main/less/modules/app-bar.less
index 3469d31e25d1..dba61ad8aab5 100644
--- a/war/src/main/less/modules/app-bar.less
+++ b/war/src/main/less/modules/app-bar.less
@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 2rem;
+  margin-bottom: var(--section-padding);
 
   .jenkins-app-bar__content {
     display: flex;
@@ -16,7 +16,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-left: 2rem;
+    margin-left: var(--section-padding);
     min-height: 36px;
 
     .jenkins-search {
@@ -25,8 +25,8 @@
   }
 
   &--border {
-    margin-bottom: 2rem;
-    padding-bottom: 2rem;
+    margin-bottom: var(--section-padding);
+    padding-bottom: var(--section-padding);
     border-bottom: 2px solid var(--panel-border-color);
   }
 
diff --git a/war/src/main/less/modules/table.less b/war/src/main/less/modules/table.less
index ea50d2b716a2..65aff30aa69c 100644
--- a/war/src/main/less/modules/table.less
+++ b/war/src/main/less/modules/table.less
@@ -5,7 +5,7 @@
   border-radius: 6px;
   overflow: hidden;
   box-shadow: 0 0 0 5px var(--table-background);
-  margin: 5px;
+  margin: 5px 5px calc(var(--section-padding) + 5px);
   --table-padding: 0.55rem;
 
   * {