Use Notice component for views lacking jobs (#9724)

* Use notice for views lacking jobs

* Update _notice.scss

* Rename text to title, use 'invokeBody' rather than description field

core/src/main/resources/hudson/PluginManager/installed.jelly

@@ -71,7 +71,7 @@ THE SOFTWARE.
 
       <j:choose>
         <j:when test="${noPlugins}">
-          <l:notice icon="symbol-plugins" text="${%No plugins installed}" />
+          <l:notice icon="symbol-plugins" title="${%No plugins installed}" />
         </j:when>
         <j:otherwise>
           <table id="plugins" class="jenkins-table sortable">

core/src/main/resources/hudson/PluginManager/updates.jelly

@@ -230,7 +230,7 @@ THE SOFTWARE.
             </table>
           </j:when>
           <j:otherwise>
-            <l:notice icon="symbol-up-to-date" text="${%No updates available}" />
+            <l:notice icon="symbol-up-to-date" title="${%No updates available}" />
           </j:otherwise>
         </j:choose>
         <d:invokeBody/>

core/src/main/resources/hudson/logging/LogRecorder/index.jelly

@@ -67,7 +67,7 @@ THE SOFTWARE.
     </l:app-bar>
 
     <j:if test="${noLogs}">
-      <l:notice text="${%No logs available}" icon="symbol-journal" />
+      <l:notice title="${%No logs available}" icon="symbol-journal" />
     </j:if>
 
     <t:logRecords logRecords="${it.logRecords}"/>

core/src/main/resources/hudson/model/View/noJob.jelly

@@ -23,9 +23,10 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core">
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout">
-    ${%description_1}
+    <l:notice title="${%description_1}" icon="symbol-weather-icon-health-00to19">
         <j:if test="${it.hasPermission(it.CONFIGURE)}">
             ${%description_2}
         </j:if>
+    </l:notice>
 </j:jelly>

core/src/main/resources/jenkins/model/Jenkins/systemInfo.jelly

@@ -53,7 +53,7 @@ THE SOFTWARE.
 
         <j:choose>
           <j:when test="${empty(app.pluginManager.plugins) and empty(app.pluginManager.failedPlugins)}">
-            <l:notice icon="symbol-plugins" text="${%No plugins installed}" />
+            <l:notice icon="symbol-plugins" title="${%No plugins installed}" />
           </j:when>
           <j:otherwise>
             <table class="jenkins-table sortable">

core/src/main/resources/lib/layout/notice.jelly

@@ -23,10 +23,10 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:d="jelly:define">
   <st:documentation>
-    <st:attribute name="text" use="required">
+    <st:attribute name="title" use="required">
-      Sets the text for the notice. HTML isn't supported.
+      Sets the title for the notice. HTML isn't supported.
     </st:attribute>
     <st:attribute name="icon" use="required">
       Sets the icon for the notice. Supports Jenkins Symbols and regular images.
@@ -35,6 +35,9 @@ THE SOFTWARE.
 
   <div class="jenkins-notice">
     <l:icon src="${attrs.icon}" />
-    <div>${attrs.text}</div>
+    <div>${attrs.title}</div>
+    <div class="jenkins-notice__description">
+      <d:invokeBody />
+    </div>
   </div>
 </j:jelly>

war/src/main/scss/components/_notice.scss

@@ -8,11 +8,22 @@
   background: var(--button-background);
   border-radius: 0.66rem;
   font-size: var(--font-size-base);
-  margin-bottom: 30px;
+  margin-bottom: var(--section-padding);
-  font-weight: 500;
+  font-weight: 450;
+  padding: calc(var(--section-padding) * 2);
+  text-align: center;
 
   svg {
     width: 2.5rem;
     height: 2.5rem;
   }
+
+  &__description {
+    color: var(--text-color-secondary);
+    margin-top: -0.375rem;
+
+    &:empty {
+      display: none;
+    }
+  }
 }