Add separator to card (#134)

Author: timja

src/main/frontend/pipeline-graph-view/_cards.scss

@@ -29,6 +29,14 @@
     min-height: 400px;
     max-height: 400px;
 
+    hr {
+      background: var(--secondary);
+      border: none;
+      height: 2px;
+      margin: 0.4rem 0 calc(0.4rem + 15px);
+      opacity: 0.2;
+    }
+
     &:hover {
       .pgv-cards__item__title__actions {
         opacity: 1;

src/main/java/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewAction.java

@@ -30,10 +30,15 @@ public RunDetailsCard getRunDetailsCard() {
 
     List<RunDetailsItem> runDetailsItems = new ArrayList<>();
 
+    runDetailsItems.addAll(SCMRunDetailsItems.get(run));
+
+    if (!runDetailsItems.isEmpty()) {
+      runDetailsItems.add(new RunDetailsItem.Builder().separator().build());
+    }
+
     CauseRunDetailsItem.get(run).ifPresent(runDetailsItems::add);
 
     runDetailsItems.addAll(TimingRunDetailsItems.get(run));
-    runDetailsItems.addAll(SCMRunDetailsItems.get(run));
 
     return new RunDetailsCard(runDetailsItems);
   }

src/main/java/io/jenkins/plugins/pipelinegraphview/cards/RunDetailsItem.java

@@ -7,11 +7,13 @@ public class RunDetailsItem {
   private final String icon;
   private final String text;
   private final String href;
+  private final boolean separator;
 
-  private RunDetailsItem(String icon, String text, String href) {
+  RunDetailsItem(String icon, String text, String href, boolean separator) {
     this.icon = icon;
     this.text = text;
     this.href = href;
+    this.separator = separator;
   }
 
   public String getIcon() {
@@ -26,11 +28,16 @@ public String getHref() {
     return href;
   }
 
+  public boolean isSeparator() {
+    return separator;
+  }
+
   public static class Builder {
 
     private String icon;
     private String text;
     private String href;
+    private boolean separator;
 
     public Builder text(String text) {
       this.text = text;
@@ -52,9 +59,16 @@ public Builder href(String href) {
       return this;
     }
 
+    public Builder separator() {
+      this.separator = true;
+      return this;
+    }
+
     public RunDetailsItem build() {
-      requireNonNull(icon);
-      return new RunDetailsItem(icon, text, href);
+      if (!separator) {
+        requireNonNull(icon);
+      }
+      return new RunDetailsItem(icon, text, href, separator);
     }
   }
 }

src/main/resources/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewAction/index.jelly

@@ -35,22 +35,29 @@
         </p:card>
         <p:card title="${it.runDetailsCard.title}">
           <j:forEach var="card" items="${it.runDetailsCard.items}">
-            <p class="app-details__item">
-              <l:icon src="${card.icon}"/>
-              <j:choose>
-                <j:when test="${!empty(card.href)}">
-                  <a
-                      class="app-details__item--link"
-                      href="${card.href}"
-                  >
-                    ${card.text}
-                  </a>
-                </j:when>
-                <j:otherwise>
-                  ${card.text}
-                </j:otherwise>
-              </j:choose>
-            </p>
+            <j:choose>
+              <j:when test="${card.separator}">
+                <hr/>
+              </j:when>
+              <j:otherwise>
+                <p class="app-details__item">
+                  <l:icon src="${card.icon}"/>
+                  <j:choose>
+                    <j:when test="${!empty(card.href)}">
+                      <a
+                          class="app-details__item--link"
+                          href="${card.href}"
+                      >
+                        ${card.text}
+                      </a>
+                    </j:when>
+                    <j:otherwise>
+                      ${card.text}
+                    </j:otherwise>
+                  </j:choose>
+                </p>
+              </j:otherwise>
+            </j:choose>
           </j:forEach>
         </p:card>
       </div>