From 2a19a045970d65e446e4ce894d769fb27bdfd921 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sun, 18 Feb 2024 17:51:58 +0000
Subject: [PATCH] Rename classes

---
 .../widgets/HistoryWidget/entries.jelly       |  14 +-
 .../hudson/widgets/HistoryWidget/entry.jelly  |  16 +-
 .../hudson/widgets/HistoryWidget/index.jelly  |   2 +-
 .../HistoryPageFilter/ajaxBuildHistory.jelly  |  17 +-
 .../HistoryPageFilter/queue-items.jelly       |  10 +-
 core/src/main/resources/lib/layout/card.jelly |   2 +-
 .../main/js/components/dropdowns/jumplists.js |   2 +-
 war/src/main/scss/components/_buttons.scss    | 151 ------------------
 war/src/main/scss/components/_cards.scss      |   4 +-
 war/src/main/scss/components/_dropdowns.scss  |  12 ++
 war/src/main/scss/pages/_job.scss             | 137 ++++++++++++++++
 11 files changed, 183 insertions(+), 184 deletions(-)

diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/entries.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/entries.jelly
index 292b7b61b8d9..7462269378a4 100644
--- a/core/src/main/resources/hudson/widgets/HistoryWidget/entries.jelly
+++ b/core/src/main/resources/hudson/widgets/HistoryWidget/entries.jelly
@@ -26,17 +26,19 @@ THE SOFTWARE.
   Render build histories. 
 -->
 <?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">
-  <j:set target="${it}" property="nextBuildNumberToFetch" value="${it.nextBuildNumber}"/>
-  <j:invokeStatic className="java.time.LocalDate" method="now" var="now"/>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:i="jelly:fmt">
+  <j:set target="${it}" property="nextBuildNumberToFetch" value="${it.nextBuildNumber}" />
+  <j:invokeStatic className="java.time.LocalDate" method="now" var="now" />
 
   <j:forEach var="pageEntry" items="${it.runs}">
-      <i:formatDate value="${pageEntry.entry.timestamp.time}" var="date" type="date" dateStyle="long" />
-      <i:formatDate value="${pageEntry.entry.timestamp.time}" var="simpleDate" type="date" pattern="YYYY-MM-dd" />
+    <i:formatDate value="${pageEntry.entry.timestamp.time}" var="date" type="date" dateStyle="long" />
+    <i:formatDate value="${pageEntry.entry.timestamp.time}" var="simpleDate" type="date" pattern="YYYY-MM-dd" />
+
     <j:if test="${pastDate != date}">
-      <span class="willow">${simpleDate == now ? "%Today" : date}</span>
+      <span class="app-builds-container__heading">${simpleDate == now ? "%Today" : date}</span>
       <j:set var="pastDate" value="${date}" />
     </j:if>
+
     <st:include page="/hudson/widgets/HistoryWidget/entry.jelly" />
   </j:forEach>
 </j:jelly>
diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
index d502ba8aec1d..5109712b037b 100644
--- a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
+++ b/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
@@ -35,14 +35,14 @@ THE SOFTWARE.
     <i:setTimeZone value="${h.getUserTimeZone()}" />
    </j:if>
 
-  <div class="ethan" page-entry-id="${pageEntry.entryId}" style="view-transition-name: item-${pageEntry.entryId}">
-    <div class="toprow">
-      <a class="toprow__icon"
+  <div class="app-builds-container__item" page-entry-id="${pageEntry.entryId}">
+    <div class="app-builds-container__item__inner">
+      <a class="app-builds-container__item__inner__icon"
          href="${h.getConsoleUrl(build)}"
-         tooltip="${build.iconColor.description} > ${%Console Output}">
+         tooltip="${build.iconColor.description}">
           <l:icon src="symbol-status-${build.iconColor.iconName}" />
       </a>
-      <a href="${link}" class="toprow__link">
+      <a href="${link}" class="app-builds-container__item__inner__link">
         ${build.displayName}
         <span class="timeman" time="${build.timestamp.time.time}">
           <j:set var="linkTitleAttr" value="${null}" />
@@ -55,7 +55,7 @@ THE SOFTWARE.
           </div>
         </span>
       </a>
-      <div class="toprow__controls">
+      <div class="app-builds-container__item__inner__controls">
         <j:if test="${build.building}">
           <j:if test="${build.building}">
             <j:set target="${it.widget}" property="nextBuildNumberToFetch" value="${build.number}"/>
@@ -73,13 +73,13 @@ THE SOFTWARE.
             <st:include it="${badge}" page="badge.jelly" />
           </j:forEach>
         </j:if>
-        <div class="letterman asda-link" data-href="${link}">
+        <div class="jenkins-card__reveal jenkins-jumplist-link" data-href="${link}">
           <l:icon src="symbol-menu" />
         </div>
       </div>
     </div>
     <j:if test="${!empty build.truncatedDescription}">
-      <div class="ethan__description">
+      <div class="app-builds-container__item__description">
         <j:out value="${app.markupFormatter.translate(build.truncatedDescription)}"/>
       </div>
     </j:if>
diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly
index 7e6b33222869..585d9a2a7704 100644
--- a/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly
+++ b/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly
@@ -27,7 +27,7 @@ THE SOFTWARE.
   <j:set var="page" value="${it.historyPageFilter}" />
 
   <j:set var="controls">
-    <l:overflowButton icon="symbol-menu" clazz="letterman">
+    <l:overflowButton icon="symbol-menu" clazz="jenkins-card__reveal">
       <dd:item icon="symbol-rss"
                text="Atom feed ${%for all}"
                href="${it.baseUrl}/rssAll" />
diff --git a/core/src/main/resources/jenkins/widgets/HistoryPageFilter/ajaxBuildHistory.jelly b/core/src/main/resources/jenkins/widgets/HistoryPageFilter/ajaxBuildHistory.jelly
index 2649606af054..8e1e5d31d414 100644
--- a/core/src/main/resources/jenkins/widgets/HistoryPageFilter/ajaxBuildHistory.jelly
+++ b/core/src/main/resources/jenkins/widgets/HistoryPageFilter/ajaxBuildHistory.jelly
@@ -22,17 +22,16 @@ 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:l="/lib/layout">
   <l:ajax>
-    <j:choose>
-      <j:when test="${it.size() > 0}">
-	<div class="itemsss" page-entry-newest="${it.newestOnPage}" page-entry-oldest="${it.oldestOnPage}" page-has-up="${it.hasUpPage}" page-has-down="${it.hasDownPage}">
-	  <st:include page="entries.jelly" />
-	</div>
-      </j:when>
-    </j:choose>
+    <j:if test="${it.size() > 0}">
+      <div page-entry-newest="${it.newestOnPage}"
+           page-entry-oldest="${it.oldestOnPage}"
+           page-has-up="${it.hasUpPage}"
+           page-has-down="${it.hasDownPage}">
+        <st:include page="entries.jelly" />
+      </div>
+    </j:if>
   </l:ajax>
 </j:jelly>
diff --git a/core/src/main/resources/jenkins/widgets/HistoryPageFilter/queue-items.jelly b/core/src/main/resources/jenkins/widgets/HistoryPageFilter/queue-items.jelly
index 27f0e2f36337..2ea34d7d94f9 100644
--- a/core/src/main/resources/jenkins/widgets/HistoryPageFilter/queue-items.jelly
+++ b/core/src/main/resources/jenkins/widgets/HistoryPageFilter/queue-items.jelly
@@ -37,22 +37,22 @@ THE SOFTWARE.
             <j:set var="id" value="${h.generateId()}"/>
 
             <div class="ethan ethan--notinteractable" page-entry-id="${pageEntry.entryId}">
-                <div class="toprow">
-                    <div class="toprow__icon">
+                <div class="app-builds-container__item__inner">
+                    <div class="app-builds-container__item__inner__icon">
                         <l:icon src="symbol-status-nobuilt"/>
                     </div>
-                    <div class="toprow__link">
+                    <div class="app-builds-container__item__inner__link">
                         <!-- Don't use math unless needed, in case nextBuildNumber is not numeric -->
                         #${queuedItems.size() == 1 ? it.widget.owner.nextBuildNumber : it.widget.owner.nextBuildNumber+queuedItems.size()-i-1}
                     </div>
                     <j:if test="${build.building}">
-                        <div class="toprow__controls">
+                        <div class="app-builds-container__item__inner__controls">
                             <j:if test="${item.hasCancelPermission()}">
                                 <l:stopButton href="${rootURL}/queue/cancelItem?id=${item.id}" alt="${%cancel this build}"/>
                             </j:if>
                         </div>
                     </j:if>
-                    <div class="toprow__badges">
+                    <div class="app-builds-container__item__inner__badges">
                         <j:if test="${!item.params.isEmpty()}">
                             <div tooltip="Build Parameters: ${item.params}">
                                 <l:icon class="icon-notepad icon-sm"/>
diff --git a/core/src/main/resources/lib/layout/card.jelly b/core/src/main/resources/lib/layout/card.jelly
index 56686a52c484..6930e10d0a6d 100644
--- a/core/src/main/resources/lib/layout/card.jelly
+++ b/core/src/main/resources/lib/layout/card.jelly
@@ -41,7 +41,7 @@ THE SOFTWARE.
             <div class="jenkins-card__controls">
                 <j:out value="${controls}"/>
                 <j:if test="${attrs.expandable != null}">
-                    <a href="${attrs.expandable}" class="letterman" tooltip="Expand">
+                    <a href="${attrs.expandable}" class="jenkins-card__reveal" tooltip="Expand">
                         <l:icon src="symbol-expand" />
                     </a>
                 </j:if>
diff --git a/war/src/main/js/components/dropdowns/jumplists.js b/war/src/main/js/components/dropdowns/jumplists.js
index 0be5c20fd547..f831f452bafe 100644
--- a/war/src/main/js/components/dropdowns/jumplists.js
+++ b/war/src/main/js/components/dropdowns/jumplists.js
@@ -31,7 +31,7 @@ function generateJumplistAccessors() {
  */
 function generateDropdowns() {
   behaviorShim.specify(
-    "li.children, .asda-link, #menuSelector, .jenkins-menu-dropdown-chevron",
+    "li.children, .jenkins-jumplist-link, #menuSelector, .jenkins-menu-dropdown-chevron",
     "-dropdown-",
     1000,
     (element) =>
diff --git a/war/src/main/scss/components/_buttons.scss b/war/src/main/scss/components/_buttons.scss
index c157745d90a4..6ebbe21336fc 100644
--- a/war/src/main/scss/components/_buttons.scss
+++ b/war/src/main/scss/components/_buttons.scss
@@ -306,157 +306,6 @@ $jenkins-split-button-border-radius: 0.2rem;
   font-weight: 550;
 }
 
-#buildHistoryPage {
-  margin: 10px 0 10px 10px;
-
-  .jenkins-search {
-    margin-inline: -0.25rem;
-    margin-bottom: 5px;
-  }
-}
-
-.ethan {
-  @include mixins.item();
-
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0 -0.5rem;
-  font-size: 0.8125rem !important;
-
-  .toprow {
-    display: flex;
-    align-items: center;
-    padding-right: 0.5rem;
-
-    &__icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 0.25rem 0 0.5rem;
-
-      svg {
-        width: 1.25rem;
-        height: 1.25rem;
-      }
-    }
-
-    &__link {
-      display: flex;
-      align-items: center;
-      color: var(--text-color);
-      gap: 0.5rem;
-      text-decoration: none;
-      font-weight: 450;
-      flex-grow: 1;
-      padding: 0.4rem 0 0.4rem 0.25rem;
-
-      .timeman {
-        color: var(--text-color-secondary);
-      }
-    }
-
-    &__controls {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0.5rem;
-    }
-
-    &__badges {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0.5rem;
-    }
-  }
-
-  &--notinteractable {
-    cursor: default;
-
-    &::before, &::after {
-      display: none;
-    }
-
-    .ethan__description {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.itemsss {
-  display: flex;
-  flex-direction: column;
-}
-
-.willow {
-  display: flex;
-  font-size: 0.75rem;
-  color: var(--text-color-secondary);
-  margin-top: 10px;
-  font-weight: 450;
-  margin-bottom: 4px;
-}
-
-.ethan__description {
-  position: relative;
-  color: var(--text-color-secondary);
-  padding-left: 36px;
-  margin-top: -2px;
-  margin-bottom: 4px;
-
-  &::before {
-    content: "";
-    position: absolute;
-    left: 17px;
-    top: 2px;
-    bottom: 2px;
-    width: 2px;
-    background: var(--text-color-secondary);
-    border-radius: 10px;
-    opacity: 0.3;
-  }
-}
-
-.asda-link {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  svg {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-}
-
-.app-builds-container {
-  transition: opacity var(--standard-transition);
-
-  &__items {
-    margin-bottom: -0.5rem;
-  }
-
-  &__placeholder {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    padding: 3rem;
-    animation: timeonthefloor var(--standard-transition);
-
-    @keyframes timeonthefloor {
-      from {
-        opacity: 0;
-      }
-    }
-  }
-
-  &--loading {
-    opacity: 0.3;
-  }
-}
-
 .stop-button-link {
   --item-background--hover: color-mix(in sRGB, var(--red) 20%, transparent);
   --item-background--active: color-mix(in sRGB, var(--red) 25%, transparent);
diff --git a/war/src/main/scss/components/_cards.scss b/war/src/main/scss/components/_cards.scss
index 7219203f1f7d..e68db21f0524 100644
--- a/war/src/main/scss/components/_cards.scss
+++ b/war/src/main/scss/components/_cards.scss
@@ -27,7 +27,7 @@ $card-padding: 1rem;
   }
 
   &:hover {
-    .letterman {
+    .jenkins-card__reveal {
       color: var(--text-color) !important;
     }
   }
@@ -53,7 +53,7 @@ $card-padding: 1rem;
     pointer-events: none;
   }
 
-  .letterman {
+  .jenkins-card__reveal {
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/war/src/main/scss/components/_dropdowns.scss b/war/src/main/scss/components/_dropdowns.scss
index f9f9bff57151..7b728b239d54 100644
--- a/war/src/main/scss/components/_dropdowns.scss
+++ b/war/src/main/scss/components/_dropdowns.scss
@@ -264,3 +264,15 @@ $dropdown-padding: 0.4rem;
     border-radius: 50%;
   }
 }
+
+.jenkins-jumplist-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
diff --git a/war/src/main/scss/pages/_job.scss b/war/src/main/scss/pages/_job.scss
index 6ddae2bffe48..a6ef8ad43c2b 100644
--- a/war/src/main/scss/pages/_job.scss
+++ b/war/src/main/scss/pages/_job.scss
@@ -1,6 +1,143 @@
+@use "../abstracts/mixins";
+
 .build-caption-progress-container {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
 }
+
+#buildHistoryPage {
+  margin: 10px 0 10px 10px;
+
+  .jenkins-search {
+    margin-inline: -0.25rem;
+    margin-bottom: 5px;
+  }
+}
+
+.app-builds-container {
+  transition: opacity var(--standard-transition);
+
+  &__items {
+    margin-bottom: -0.5rem;
+  }
+
+  &__placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 3rem;
+    animation: fade-in-builds-placeholder var(--standard-transition);
+
+    @keyframes fade-in-builds-placeholder {
+      from {
+        opacity: 0;
+      }
+    }
+  }
+
+  &__heading {
+    display: flex;
+    font-size: 0.75rem;
+    color: var(--text-color-secondary);
+    margin-top: 10px;
+    font-weight: 450;
+    margin-bottom: 4px;
+  }
+
+  &--loading {
+    opacity: 0.4;
+    filter: blur(0.5px);
+  }
+}
+
+.app-builds-container__item {
+  @include mixins.item();
+
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0 -0.5rem;
+  font-size: 0.8125rem !important;
+
+  .app-builds-container__item__inner {
+    display: flex;
+    align-items: center;
+    padding-right: 0.5rem;
+
+    &__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 0.25rem 0 0.5rem;
+
+      svg {
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    }
+
+    &__link {
+      display: flex;
+      align-items: center;
+      color: var(--text-color);
+      gap: 0.5rem;
+      text-decoration: none;
+      font-weight: 450;
+      flex-grow: 1;
+      padding: 0.4rem 0 0.4rem 0.25rem;
+
+      .timeman {
+        color: var(--text-color-secondary);
+      }
+    }
+
+    &__controls {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+    }
+
+    &__badges {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+    }
+  }
+
+  &--notinteractable {
+    cursor: default;
+
+    &::before, &::after {
+      display: none;
+    }
+
+    .app-builds-container__item__description {
+      margin-bottom: 0;
+    }
+  }
+
+  &__description {
+    position: relative;
+    color: var(--text-color-secondary);
+    padding-left: 36px;
+    margin-top: -2px;
+    margin-bottom: 4px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 17px;
+      top: 2px;
+      bottom: 2px;
+      width: 2px;
+      background: var(--text-color-secondary);
+      border-radius: 10px;
+      opacity: 0.3;
+    }
+  }
+}