Adapt Script Console for experimental Manage Jenkins UI

core/src/main/resources/hudson/model/Computer/_script.jelly

@@ -27,10 +27,11 @@ 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">
-  <t:scriptConsole>
-    <pre>println System.getenv("PATH")</pre>
-    <pre>println "uname -a".execute().text</pre>
-    <p>
+  <j:set var="script" value='println System.getenv("PATH")' />
+  <j:set var="script2" value='println "uname -a".execute().text' />
+
+  <t:scriptConsole scripts="${[script, script2]}">
+    <p class="jenkins-section__description">
       ${%This execution happens in the agent JVM.}
     </p>
   </t:scriptConsole>

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

@@ -27,7 +27,12 @@ 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">
-  <t:scriptConsole layout="one-column">
-    <pre>println(Jenkins.instance.pluginManager.plugins)</pre>
-  </t:scriptConsole>
-</j:jelly>
+  <j:new var="managementLink" className="jenkins.management.ConsoleLink" />
+
+  <l:settings-subpage includeBreadcrumb="true" permission="${app.ADMINISTER}"
+                      header="${null}" noDefer="true" managementLink="${managementLink}">
+
+    <t:scriptConsole scripts="${['println(Jenkins.instance.pluginManager.plugins)']}"
+                     layout="none" />
+  </l:settings-subpage>
+</j:jelly>

core/src/main/resources/lib/hudson/scriptConsole.jelly

@@ -26,56 +26,101 @@ THE SOFTWARE.
   Called from doScript() to display the execution result and the form.
 -->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:f="/lib/form">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout"
+         xmlns:f="/lib/form" xmlns:t="/lib/hudson" xmlns:local="local">
   <st:documentation>
     <st:attribute name="layout" use="optional">
-      Specify which layout to be use for the page.
+      Specify which layout to be used for the page.
       See the type in layout for more details.
+      Script console also supports `none`, which removes the traditional layout frame.
       By default, it is `two-column`.
     </st:attribute>
+    <st:attribute name="scripts" use="optional">
+      Displays executable example scripts.
+    </st:attribute>
   </st:documentation>
 
-  <j:set var="layout" value="${attrs.layout != null ? attrs.layout : 'two-column'}" />
-  <l:layout permission="${app.ADMINISTER}" title="${%scriptConsole}" type="${layout}">
-    <j:if test="${layout == 'two-column'}">
-      <st:include page="sidepanel.jelly" />
-    </j:if>
+  <d:taglib uri="local">
+    <d:tag name="contents">
+      <l:app-bar title="${%scriptConsole}">
+        <t:help href="https://www.jenkins.io/redirect/script-console" />
+      </l:app-bar>
 
-    <l:breadcrumb title="${%scriptConsole}"/>
-    <l:main-panel>
-      <h1>${%scriptConsole}</h1>
+      <p class="jenkins-page-description">
+        ${%description}
+      </p>
 
       <j:choose>
         <j:when test="${it.channel != null}">
-          <p>
-            ${%description}
-          </p>
-          <!-- this is where the example goes -->
-          <d:invokeBody />
-          <p>
-            ${%description2}
-          </p>
+          <f:section title="${%Getting started}">
+            <p class="jenkins-section__description">
+              ${%instructions}
+            </p>
+
+            <j:forEach var="script" items="${scripts}">
+              <form action="script" method="post">
+                <div class="jenkins-quote jenkins-quote--monospace jenkins-!-margin-bottom-5">
+                  ${script}
+                  <input type="hidden"
+                         name="script"
+                         value="${script}" />
+                  <button class="jenkins-button jenkins-button--tertiary jenkins-!-build-color"
+                          tooltip="${%Run example}">
+                    <l:icon src="symbol-play" />
+                  </button>
+                </div>
+              </form>
+            </j:forEach>
+
+            <!-- this is where the example goes -->
+            <d:invokeBody />
+          </f:section>
 
-          <form action="script" method="post">
-            <textarea id="script" name="script" class="script">${request2.getParameter('script')}</textarea>
-            <div align="right">
-              <f:submit  value="${%Run}"/>
-            </div>
-          </form>
-          <st:adjunct includes="org.kohsuke.stapler.codemirror.mode.groovy.groovy"/>
-          <st:adjunct includes="org.kohsuke.stapler.codemirror.theme.default"/>
-          <j:if test="${output!=null}">
-            <h2>
-              ${%Result}
-              <l:copyButton message="${%successfullyCopied}" tooltip="${%clickToCopy}" text="${output}"/>
-            </h2>
-            <pre><st:out value="${output}"/></pre>
-          </j:if>
+          <f:section title="${%Console}">
+            <form action="script" method="post">
+              <textarea id="script" name="script" class="script">${request2.getParameter('script')}</textarea>
+              <div align="right">
+                <f:submit  value="${%Run}"/>
+              </div>
+            </form>
+            <st:adjunct includes="org.kohsuke.stapler.codemirror.mode.groovy.groovy"/>
+            <st:adjunct includes="org.kohsuke.stapler.codemirror.theme.default"/>
+            <j:if test="${output!=null}">
+              <h2>
+                ${%Result}
+                <l:copyButton text="${output}"/>
+              </h2>
+              <pre><st:out value="${output}"/></pre>
+            </j:if>
+          </f:section>
         </j:when>
         <j:otherwise>
           ${%impossibleOffline}
         </j:otherwise>
       </j:choose>
-    </l:main-panel>
-  </l:layout>
+    </d:tag>
+  </d:taglib>
+
+  <j:choose>
+    <j:when test="${attrs.layout == 'none'}">
+      <local:contents>
+        <d:invokeBody />
+      </local:contents>
+    </j:when>
+    <j:otherwise>
+      <j:set var="layout" value="${attrs.layout != null ? attrs.layout : 'two-column'}" />
+      <l:layout permission="${app.ADMINISTER}" title="${%scriptConsole}" type="${layout}">
+        <j:if test="${layout == 'two-column'}">
+          <st:include page="sidepanel.jelly" />
+        </j:if>
+
+        <l:breadcrumb title="${%scriptConsole}"/>
+        <l:main-panel>
+          <local:contents>
+            <d:invokeBody />
+          </local:contents>
+        </l:main-panel>
+      </l:layout>
+    </j:otherwise>
+  </j:choose>
 </j:jelly>

core/src/main/resources/lib/hudson/scriptConsole.properties

@@ -22,13 +22,9 @@
 
 description=\
   Type in an arbitrary <a href="https://www.groovy-lang.org">Groovy script</a> and \
-  execute it on the server. Useful for trouble-shooting and diagnostics. \
-  Use the ‘println’ command to see the output (if you use <code>System.out</code>, \
-  it will go to the server’s stdout, which is harder to see.) Example:
+  execute it on the server. Useful for trouble-shooting and diagnostics.
 
-description2=\
-  All the classes from all the plugins are visible. <code>jenkins.*</code>, <code>jenkins.model.*</code>, <code>hudson.*</code>, and <code>hudson.model.*</code> are pre-imported.
-clickToCopy=Click to copy
-successfullyCopied=Copied to clipboard
+instructions=\
+  Use the ‘println’ command to see the output (if you use System.out, it will go to the server’s stdout, which is harder to see). All the classes from all the plugins are visible. <code>jenkins.*</code>, <code>jenkins.model.*</code>, <code>hudson.*</code>, and <code>hudson.model.*</code> are pre-imported.
 impossibleOffline=It is not possible to run scripts when agent is offline.
 scriptConsole=Script Console

src/main/scss/form/_layout.scss

@@ -81,7 +81,7 @@
   padding: 0 1rem;
   gap: 1.5rem;
 
-  .jenkins-copy-button {
+  .jenkins-button {
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;
     margin-right: -0.75rem;