Modernise UI

docs/features/configExport.md

@@ -3,41 +3,41 @@
 The plugin supports exporting existing configurations as YAML.
 This can be achieved with the following options:
 
-* Accessing the `http://[your_jenkins_url]/configuration-as-code/` URL as a Jenkins administrators and pressing `Download Configuration`
+* Accessing the `http://[your_jenkins_url]/configuration-as-code/` URL as a Jenkins administrator, and clicking `Export configuration`
 * Running the following in a Groovy script (not recommended, uses internal APIs):
 
       import io.jenkins.plugins.casc.ConfigurationAsCode
       def stream = new ByteArrayOutputStream()
       ConfigurationAsCode.get().export(stream)
       println stream.toString()
 
-Export feature is **NOT** intended to offer a directly usable jenkins.yaml configuration. 
-It can be used for inspiration writing your own production-ready YAML, but be aware that export can be partial, 
-or fail for some components.
+Export may not offer a directly usable jenkins.yaml configuration.
+It is normally better when you copy the relevant sections you need instead of the entire file.
 
 ## Security notice
 
 Jenkins configuration may include various sensitive information,
 including, but not limited to, credentials, secrets, administrative information about the instance and user personal data.
 The Configuration-as-Code plugin tracks secrets and represents them safely in the exported YAMLs,
 but it cannot prevent secrets from being exported in all cases.
-Ultimately, it is a responsibility of Jenkins administrators to ensure that the generated YAML files
+Ultimately, it is the responsibility of Jenkins administrators to ensure that the generated YAML files
 do not include sensitive information.
 
 See more information about the masking logic below.
 
 ## Data to be exported
 
-Currently the plugin does not have a way to define which data should be exported.
+The plugin does not have a way to define which data should be exported.
 The following data is exported:
 
 * System configuration under the _Manage Jenkins_ link 
   (global configurations, descriptor configurations, etc.)
 * Agent configurations
 * Views
 * Credentials
+* Users - Only if using the security realm "Jenkins’ own user database"
 
-Jobs and users are NOT exported by the plugin.
+The plugin does NOT export Jobs.
 
 ## Secret masking
 

plugin/src/main/resources/io/jenkins/plugins/casc/ConfigurationAsCode/index.jelly

@@ -2,8 +2,20 @@
 <j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:f="/lib/form" xmlns:i="jelly:fmt" xmlns:st="jelly:stapler">
   <l:layout type="one-column" title="${%Configuration as Code}" permissions="${app.MANAGE_AND_SYSTEM_READ}">
   <l:main-panel>
-    <st:adjunct includes="io.jenkins.plugins.casc.assets.index"/>
-    <h1>${%Configuration as Code}</h1>
+    <l:app-bar title="${%Configuration as Code}">
+
+      <f:form method="post" action="reload" name="reload">
+        <l:hasAdministerOrManage>
+          <f:submit icon="symbol-refresh" primary="false" name="reload"
+            value="${%Reload existing configuration}"/>
+        </l:hasAdministerOrManage>
+      </f:form>
+      <f:form method="post" action="viewExport" name="viewExport">
+        <l:hasPermission permission="${app.SYSTEM_READ}">
+          <f:submit primary="false" name="viewExport" value="${%Export configuration}"/>
+        </l:hasPermission>
+      </f:form>
+    </l:app-bar>
 
     <j:choose>
       <j:when test="${empty it.sources}">
@@ -17,41 +29,24 @@
           </j:forEach>
         </ul>
 
-        <p>${%Last time applied :} <i:formatDate value="${it.lastTimeLoaded}" type="both" dateStyle="medium" timeStyle="long"/></p>
+        <p>${%Last time applied:} <i:formatDate value="${it.lastTimeLoaded}" type="both" dateStyle="medium" timeStyle="long"/></p>
 
       </j:otherwise>
     </j:choose>
 
     <l:isAdmin>
       <f:form method="post" action="replace" name="replace">
           <h2>${%Replace configuration source with:}</h2>
-          <f:entry title="${%Path or URL}" field="newSource" >
+          <f:entry title="${%Path or URL}" field="newSource" class="jenkins-form-item--small" >
               <f:textbox checkUrl="checkNewSource" checkDependsOn="newSource"/>
           </f:entry>
           <f:block>
             <f:submit name="replace" value="${%Apply new configuration}"/>
           </f:block>
       </f:form>
     </l:isAdmin>
-    <h2>${%Actions}</h2>
 
-    <l:hasAdministerOrManage>
-      <f:form method="post" action="reload" name="reload">
-        <f:submit name="reload" value="${%Reload existing configuration}"/>
-      </f:form>
-    </l:hasAdministerOrManage>
     <l:hasPermission permission="${app.SYSTEM_READ}">
-      <f:form method="post" action="export" name="export">
-        <f:submit name="export" value="${%Download Configuration}"/>
-      </f:form>
-      <f:form method="post" action="viewExport" name="viewExport">
-        <f:submit name="viewExport" value="${%View Configuration}"/>
-      </f:form>
-      <div class="alert alert-warning clear-action-forms">
-        <l:icon class="icon-warning icon-sm"/>
-        ${%exportWarning}
-      </div>
-
       <h2>${%Reference}</h2>
       <dt>
         <dl><a href="reference">${%Documentation}</a></dl>

plugin/src/main/resources/io/jenkins/plugins/casc/ConfigurationAsCode/reference.jelly

@@ -1,37 +1,17 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
-  <st:contentType value="text/html;charset=UTF-8"/>
-  <j:new var="h" className="hudson.Functions"/>
-  <j:invoke on="${h}" method="initPageVariables">
-    <j:arg value="${context}"/>
-  </j:invoke>
-  <html><head>
-  <link href='https://jenkins.io/assets/bower/bootstrap/css/bootstrap.min.css' media='screen' rel='stylesheet'/>
-  <link href='https://jenkins.io/assets/bower/tether/css/tether.min.css' media='screen' rel='stylesheet'/>
-  <link href='https://jenkins.io/css/font-icons.css' media='screen' rel='stylesheet'/>
-  <link href='https://jenkins.io/css/jenkins.css' media='screen' rel='stylesheet'/>
-  <link href='https://jenkins.io/assets/bower/ionicons/css/ionicons.min.css' media='screen' rel='stylesheet'/>
-  <link href='https://jenkins.io/css/footer.css' media='screen' rel='stylesheet'/>
-  <link href='https://jenkins.io/css/font-awesome.min.css' media='screen' rel='stylesheet'/>
-  <link href='${rootURL}/plugin/configuration-as-code/css/reference.css' rel='stylesheet'/>
-  </head>
-
-  <body class='syntax'>
-  <div class='container'>
-  <div class='row body'>
-  <div class='section'>
-  <h2>${%Jenkins Configuration as Code Reference}</h2>
-
-  <div class='sect3'>
-  <j:set var="casc" value="${it}"/>
-  <j:forEach items="${it.configurators}" var="c">
-    <st:include page="documentation.jelly" it="${c}" optional="true"/>
-  </j:forEach>
-  </div>
-  </div>
-  </div>
-  </div>
-  </body>
-  </html>
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:st="jelly:stapler">
+  <l:layout type="one-column" title="${%Reference}" permissions="${app.MANAGE_AND_SYSTEM_READ}">
+    <l:breadcrumb title="${%Reference}"/>
+    <l:main-panel>
+      <link href='${rootURL}/plugin/configuration-as-code/css/reference.css' rel='stylesheet'/>
+      <l:app-bar title="${%Reference}"/>
+      <div class='sect3'>
+        <j:set var="casc" value="${it}"/>
+        <j:forEach items="${it.configurators}" var="c">
+          <st:include page="documentation.jelly" it="${c}" optional="true"/>
+        </j:forEach>
+      </div>
+    </l:main-panel>
+  </l:layout>
 
 </j:jelly>

plugin/src/main/resources/io/jenkins/plugins/casc/ConfigurationAsCode/viewExport.jelly

@@ -1,10 +1,22 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:st="jelly:stapler" xmlns:p="/prism">
-  <l:layout type="one-column" title="${%Configuration as Code}">
-    <l:breadcrumb title="${%View}" />
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:st="jelly:stapler" xmlns:p="/prism"
+  xmlns:f="/lib/form">
+  <l:layout type="one-column" title="${%Exported configuration}">
+    <l:breadcrumb title="${%Exported configuration}" />
   <l:main-panel>
     <st:adjunct includes="io.jenkins.plugins.casc.assets.viewExport" />
 
+    <l:app-bar title="${%Exported configuration}">
+      <f:form method="post" action="export" name="export">
+        <f:submit icon="symbol-download" primary="false" name="export" value="${%Download}"/>
+      </f:form>
+    </l:app-bar>
+
+
+    <div class="jenkins-alert jenkins-alert-info">
+      ${%exportWarning}
+    </div>
+
     <p:prism configuration="${it.prismConfiguration}" />
     <pre>
       <code class="language-yaml">${export}</code>

plugin/src/main/resources/io/jenkins/plugins/casc/ConfigurationAsCode/viewExport.properties

@@ -0,0 +1,2 @@
+exportWarning=Export may not offer a directly usable jenkins.yaml configuration. \
+  It is normally better when you copy the relevant sections you need instead of the entire file.

plugin/src/main/webapp/css/reference.css

@@ -8,13 +8,13 @@
 
 .configurator-pointer {
   font-size: 0.5em;
-  color: #454545;
+  color: var(--text-color-secondary);
   font-weight: 100;
 }
 
 .root-configurator-pointer {
   font-size: 0.5em;
-  color: #7f5200;
+  color: var(--orange);
   font-weight: 100;
 }
 
@@ -27,7 +27,7 @@
   display: flex;
   flex-grow: 1;
   margin-left: 25px;
-  border-left: 1px solid #ccc;
+  border-left: var(--jenkins-border);
   line-height: 24px;
 }
 
@@ -70,7 +70,7 @@
 }
 
 .attribute-type {
-  color: #454545;
+  color: var(--text-color-secondary);
 }
 
 .attribute-type__list {

plugin/src/test/java/io/jenkins/plugins/casc/permissions/Action.java

@@ -1,8 +1,7 @@
 package io.jenkins.plugins.casc.permissions;
 
 public enum Action {
-    VIEW_CONFIGURATION("View Configuration"),
-    DOWNLOAD_CONFIGURATION("Download Configuration"),
+    VIEW_CONFIGURATION("Export configuration"),
     APPLY_NEW_CONFIGURATION("Apply new configuration"),
     RELOAD_EXISTING_CONFIGURATION("Reload existing configuration"),
     ;

plugin/src/test/java/io/jenkins/plugins/casc/permissions/PermissionsTest.java

@@ -1,7 +1,6 @@
 package io.jenkins.plugins.casc.permissions;
 
 import static io.jenkins.plugins.casc.permissions.Action.APPLY_NEW_CONFIGURATION;
-import static io.jenkins.plugins.casc.permissions.Action.DOWNLOAD_CONFIGURATION;
 import static io.jenkins.plugins.casc.permissions.Action.RELOAD_EXISTING_CONFIGURATION;
 import static io.jenkins.plugins.casc.permissions.Action.VIEW_CONFIGURATION;
 import static java.lang.String.format;
@@ -62,7 +61,6 @@ void checkPermissionsForSystemReader(JenkinsRule j) throws Exception {
                 SYSTEM_READER,
                 ImmutableMap.<Action, Boolean>builder()
                         .put(VIEW_CONFIGURATION, true)
-                        .put(DOWNLOAD_CONFIGURATION, true)
                         .put(APPLY_NEW_CONFIGURATION, false)
                         .put(RELOAD_EXISTING_CONFIGURATION, false)
                         .build());
@@ -106,7 +104,6 @@ void checkPermissionsForAdmin(JenkinsRule j) throws Exception {
                 ADMIN,
                 ImmutableMap.<Action, Boolean>builder()
                         .put(VIEW_CONFIGURATION, true)
-                        .put(DOWNLOAD_CONFIGURATION, true)
                         .put(APPLY_NEW_CONFIGURATION, true)
                         .put(RELOAD_EXISTING_CONFIGURATION, true)
                         .build());