Improve UI to select level of system messages (#183)

* Improve UI to select level of system messages

* simplify radio generation

src/main/java/io/jenkins/plugins/customizable_header/SystemMessage.java

@@ -174,7 +174,17 @@ public String getMinDate() {
   }
 
   public enum SystemMessageColor {
-    info, warning, danger, success;
+    info("Informational"), warning("Warning"), danger("Error"), success("Success");
+    private String text;
+
+    SystemMessageColor(String text) {
+      this.text = text;
+    }
+
+    public String getText() {
+      return text;
+    }
+
   }
 
 }

src/main/resources/io/jenkins/plugins/customizable_header/CustomHeaderConfiguration/config.jelly

@@ -2,7 +2,7 @@
 <j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form">
   <f:section title="${%Customizable Header}">
     <f:optionalBlock field="enabled" title="${%Enable}" inline="true">
-      <f:entry title="${%System Messages}">
+      <f:entry title="${%System Messages}" help="/plugin/customizable-header/help-systemMessage.html">
         <f:repeatableProperty field="systemMessages" add="${%Add System Message}" header="${%Message}">
           <f:repeatableDeleteButton/>
         </f:repeatableProperty>

src/main/resources/io/jenkins/plugins/customizable_header/HeaderRootAction/theme.jelly

@@ -120,6 +120,11 @@
   </j:if>
 }
 
+.ch-sm-label {
+  padding: 5px 10px;
+  margin-right: 20px;
+}
+
 a.custom-header__link:hover {
   text-decoration: none;
 }

src/main/resources/io/jenkins/plugins/customizable_header/SystemMessage/config.jelly

@@ -6,13 +6,19 @@
   <f:entry field="dismissible" title="${%Dismissible}">
     <f:checkbox default="true"/>
   </f:entry>
-  <f:entry field="level" title="${%Background of System Message}">
-    <f:enum>${it.toString()}</f:enum>
+  <f:entry title="${%Background of System Message}">
+    <div class="jenkins-radio">
+      <j:forEach var="it" items="${descriptor.getPropertyType(instance,'level').getEnumConstants()}">
+        <input type="radio" name="level" value="${it}" class="jenkins-radio__input"
+               checked="${(instance == null and it == 'info') || instance.level == it ? 'true' : null}" id="ch-sm-${it}"/>
+        <label for="ch-sm-${it}" class="jenkins-radio__label"><span class="jenkins-alert jenkins-alert-${it} ch-sm-label">${it.text}</span></label>
+      </j:forEach>
+    </div>
   </f:entry>
   <f:entry field="expireDate" title="${%Expiration Time}">
     <div class="custom-header__system-message--expireDate" data-now="${descriptor.minDate}">
       <f:textbox checkDependsOn="" data-input=""/>
-      <button class="jenkins-button" type="button" data-toggle="" tooltip="Open datetime picker">
+      <button class="jenkins-button" type="button" data-toggle="" tooltip="Open calendar">
         <l:icon src="symbol-calendar-outline plugin-ionicons-api"/>
       </button>
     </div>

src/main/resources/io/jenkins/plugins/customizable_header/CustomHeaderConfiguration/help-systemMessage.html → src/main/webapp/help-systemMessage.html

@@ -1,4 +1,4 @@
 <div>
-  Show a message with a selectable background below the header but above the breadcrumb, e.g. to announce a coming maintenance or ongoing incidents.
-  The message can contain html, e.g. to add a link.
+  Show a message with a selectable background below the header but above the breadcrumb, e.g. to announce a coming maintenance or ongoing incidents.<br/>
+  Optionally these messages can be made expiring on a given date and can be dismissed on a per-user basis.
 </div>