Refresh the interface of Jenkins CLI

core/src/main/resources/hudson/cli/CLIAction/command.jelly

@@ -24,16 +24,15 @@ THE SOFTWARE.
 
 <?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">
-  <l:layout permission="${app.READ}">
-    <st:include page="sidepanel.jelly" it="${app}"/>
+  <l:layout title="${command.name}" permission="${app.READ}" type="one-column">
     <l:breadcrumb title="${command.name}" />
     <l:main-panel>
       <h1>
         Command ${command.name}
       </h1>
       <j:set var="commandArgs" value="${command.name}${command.singleLineSummary}"/>
       <st:include page="example.jelly"/>
-      <pre>
+      <pre class="jenkins-!-margin-top-3">
         <j:out value="${h.escape(command.longDescription)}"/>
         <j:set var="usage" value="${command.usage}"/>
         <j:if test="${!empty usage}"><br/>${command.usage}</j:if>

core/src/main/resources/hudson/cli/CLIAction/example.jelly

@@ -24,6 +24,10 @@ THE SOFTWARE.
 
 <?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">
-  <pre id="example">java -jar <a href="${rootURL}/jnlpJars/jenkins-cli.jar">jenkins-cli.jar</a> -s ${h.inferHudsonURL(request)} <j:if test="${!it.webSocketSupported}">-http </j:if>${commandArgs}</pre>
+  <j:set var="content">java -jar jenkins-cli.jar -s ${h.inferHudsonURL(request)} <j:if test="${!it.webSocketSupported}">-http </j:if>${commandArgs}</j:set>
+  <div class="jenkins-quote jenkins-quote--monospace" id="example">
+    ${content}
+    <l:copyButton text="${content}" iconOnly="true" />
+  </div>
 </j:jelly>
 

core/src/main/resources/hudson/cli/CLIAction/index.jelly

@@ -24,36 +24,61 @@ THE SOFTWARE.
 
 <?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">
-  <l:layout permission="${app.READ}">
-    <st:include page="sidepanel.jelly" it="${app}"/>
+  <j:new var="managementLink" className="jenkins.management.CliLink" />
+
+  <l:layout title="${managementLink.displayName}" permission="${app.READ}" type="one-column">
     <!-- no need for additional breadcrumb here as we're on an index page already including breadcrumb -->
+
     <l:main-panel>
-      <l:app-bar title="${%Jenkins CLI}" />
-      <p class="jenkins-description">
-        ${%blurb(rootURL)}
-      </p>
-      <j:set var="commandArgs" value="help"/>
-      <st:include page="example.jelly"/>
-
-      <h2>${%Available Commands}</h2>
-      <table class="jenkins-table sortable">
-        <thead>
-          <tr>
-            <th initialSortDir="down">${%Name}</th>
-            <th>${%Description}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <j:forEach items="${h.getCLICommands()}" var="command">
+      <l:app-bar title="${managementLink.displayName}">
+        <t:help href="https://www.jenkins.io/redirect/cli" />
+      </l:app-bar>
+
+      <div class="jenkins-page-description">
+        ${%description}
+      </div>
+
+      <f:section title="${%Getting started}">
+        <ol class="jenkins-instructions">
+          <li>
+            <div class="jenkins-instructions__label">
+              ${%instruction1}
+            </div>
+            <a class="jenkins-button jenkins-button--primary" href="${rootURL}/jnlpJars/jenkins-cli.jar">
+              <l:icon src="symbol-download" />
+              jenkins-cli.jar
+            </a>
+          </li>
+          <li>
+            <p class="jenkins-instructions__label">
+              ${%instruction2}
+            </p>
+            <j:set var="commandArgs" value="help"/>
+            <st:include page="example.jelly"/>
+          </li>
+        </ol>
+      </f:section>
+
+      <f:section title="${%Available Commands}">
+        <table class="jenkins-table sortable">
+          <thead>
             <tr>
-              <td>
-                <a href="command/${command.name}" class="jenkins-table__link">${command.name}</a>
-              </td>
-              <td>${command.shortDescription}</td>
+              <th initialSortDir="down">${%Name}</th>
+              <th>${%Description}</th>
             </tr>
-          </j:forEach>
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            <j:forEach items="${h.getCLICommands()}" var="command">
+              <tr>
+                <td>
+                  <a href="command/${command.name}" class="jenkins-table__link">${command.name}</a>
+                </td>
+                <td>${command.shortDescription}</td>
+              </tr>
+            </j:forEach>
+          </tbody>
+        </table>
+      </f:section>
     </l:main-panel>
   </l:layout>
 </j:jelly>

core/src/main/resources/hudson/cli/CLIAction/index.properties

@@ -1,4 +1,4 @@
-Jenkins\ CLI=Jenkins CLI
-blurb=You can access various features in Jenkins through a command-line tool. See \
-  <a href="https://www.jenkins.io/redirect/cli">the documentation</a> for more details of this feature. \
-  To get started, download <a href="{0}/jnlpJars/jenkins-cli.jar">jenkins-cli.jar</a>, and run it as follows:
+description=You can access various features in Jenkins through a command-line tool. This can be convenient for scripting\
+  \ of routine tasks, bulk updates, troubleshooting, and more.
+instruction1=Download the Jenkins CLI:
+instruction2=Run it as follows