Refine User page (#10807)

Co-authored-by: Kris Stern <krisstern@outlook.com>
2025-08-03 10:19:38 +01:00 · 2025-08-03 10:19:38 +01:00 · 1bffb0b827
parent f036fa8e03
commit 1bffb0b827
12 changed files with 81 additions and 45 deletions
--- a/core/src/main/resources/hudson/model/User/app-bar.jelly
+++ b/core/src/main/resources/hudson/model/User/app-bar.jelly
@ -0,0 +1,27 @@
+<!--
+The MIT License
+
+Copyright (c) 2025 Jan Faracik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+-->
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout">
+  <l:app-bar title="${it.fullName}" icon="${h.getUserAvatar(it, '96x96')}" />
+</j:jelly>
--- a/core/src/main/resources/hudson/model/User/builds.jelly
+++ b/core/src/main/resources/hudson/model/User/builds.jelly
@ -27,9 +27,7 @@ THE SOFTWARE.
    <st:include page="sidepanel.jelly" />
    <l:breadcrumb title="${%Builds}" />
    <l:main-panel>
-      <h1>
-        ${%title(it)}
-      </h1>
+      <l:app-bar title="${%Builds}" />

      <t:buildListTable builds="${it.builds}"/>
    </l:main-panel>
--- a/core/src/main/resources/hudson/model/User/index.jelly
+++ b/core/src/main/resources/hudson/model/User/index.jelly
@ -28,12 +28,7 @@ THE SOFTWARE.
    <!-- no need for additional breadcrumb here as we're on an index page already including breadcrumb -->
    <l:main-panel>
      <div class="jenkins-app-bar">
-        <div class="jenkins-app-bar__content jenkins-build-caption">
-          <l:icon src="${h.getUserAvatar(it, '96x96')}" class="jenkins-avatar" />
-          <h1>
-            ${it.fullName}
-          </h1>
-        </div>
+        <div class="jenkins-app-bar__content" />
        <div class="jenkins-app-bar__controls">
          <t:editDescriptionButton permission="${app.ADMINISTER}"/>
        </div>
--- a/core/src/main/resources/hudson/model/User/sidepanel.jelly
+++ b/core/src/main/resources/hudson/model/User/sidepanel.jelly
@ -30,8 +30,10 @@ THE SOFTWARE.
 <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:header />
  <l:side-panel>
+    <st:include page="app-bar.jelly" />
+
    <l:tasks>
-      <l:task contextMenu="false" href="${rootURL}/${it.url}/" icon="symbol-person-circle" title="${%Status}"/>
+      <l:task contextMenu="false" href="${rootURL}/${it.url}/" icon="symbol-person" title="${%Profile}"/>
      <l:task href="${rootURL}/${it.url}/builds" icon="symbol-build-history" title="${%Builds}"/>
      <t:actions actions="${it.propertyActions}"/>
      <t:actions actions="${it.transientActions}"/>
--- a/core/src/main/resources/hudson/model/View/sidepanel.jelly
+++ b/core/src/main/resources/hudson/model/View/sidepanel.jelly
@ -35,6 +35,9 @@ THE SOFTWARE.
    <link rel="alternate" title="Jenkins:${it.viewName} (failed builds) (RSS 2.0)" href="${rootURL}/${it.url}rssFailed?flavor=rss20" type="application/rss+xml" />
  </l:header>
  <l:side-panel>
+    <!-- Display the user's name for their views -->
+    <st:include page="app-bar.jelly" it="${it.owner.user}" optional="true" />
+
    <l:tasks>
      <st:include page="tasks-top.jelly" it="${it.owner}" optional="true" />

--- a/core/src/main/resources/hudson/model/userproperty/UserPropertyCategoryAccountAction/index.jelly
+++ b/core/src/main/resources/hudson/model/userproperty/UserPropertyCategoryAccountAction/index.jelly
@ -30,16 +30,14 @@ THE SOFTWARE.
    <l:layout permission="${app.ADMINISTER}" title="${%title}">
        <st:include page="sidepanel.jelly" it="${it.targetUser}" />
        <l:main-panel>
-            <f:form method="post" action="configSubmit" name="config" class="jenkins-form">
-                <h1>
-                    ${%title}
-                </h1>
+            <l:app-bar title="${%title}" />

+            <f:form method="post" action="configSubmit" name="config" class="jenkins-form">
                <j:set var="thisAction" value="${it}" />
                <j:set var="it" value="${thisAction.targetUser}" />
                <j:set var="instance" value="${it}"/>

-                <f:section>
+                <f:section title="${%General}">
                    <f:entry title="${%Full name}" description="${%Full name.Description}">
                        <f:textbox field="fullName" />
                    </f:entry>
--- a/core/src/main/resources/hudson/model/userproperty/UserPropertyCategoryAppearanceAction/index.jelly
+++ b/core/src/main/resources/hudson/model/userproperty/UserPropertyCategoryAppearanceAction/index.jelly
@ -30,11 +30,9 @@ THE SOFTWARE.
    <l:layout permission="${app.ADMINISTER}" title="${%title}">
        <st:include page="sidepanel.jelly" it="${it.targetUser}" />
        <l:main-panel>
+            <l:app-bar title="${%title}" />
+
            <f:form method="post" action="configSubmit" name="config" class="jenkins-form">
-                <h1>
-                    ${%title}
-                </h1>
-    
                <j:set var="instance" value="${it}"/>
                <j:set var="descriptors" value="${it.myCategoryDescriptors}" />
                <j:set var="instances" value="${it.targetUser.properties}" />
--- a/core/src/main/resources/hudson/model/userproperty/UserPropertyCategoryExperimentalAction/index.jelly
+++ b/core/src/main/resources/hudson/model/userproperty/UserPropertyCategoryExperimentalAction/index.jelly
@ -30,11 +30,9 @@ THE SOFTWARE.
    <l:layout permission="${app.ADMINISTER}" title="${%title}">
        <st:include page="sidepanel.jelly" it="${it.targetUser}" />
        <l:main-panel>
+            <l:app-bar title="${%title}" />
+
            <f:form method="post" action="configSubmit" name="config">
-                <h1>
-                    ${%title}
-                </h1>
-    
                <j:set var="instance" value="${it}"/>
                <j:set var="descriptors" value="${it.myCategoryDescriptors}" />
                <j:set var="instances" value="${it.targetUser.properties}" />
--- a/core/src/main/resources/hudson/model/userproperty/UserPropertyCategoryPreferencesAction/index.jelly
+++ b/core/src/main/resources/hudson/model/userproperty/UserPropertyCategoryPreferencesAction/index.jelly
@ -30,11 +30,9 @@ THE SOFTWARE.
    <l:layout permission="${app.ADMINISTER}" title="${%title}">
        <st:include page="sidepanel.jelly" it="${it.targetUser}" />
        <l:main-panel>
-            <f:form method="post" action="configSubmit" name="config">
-                <h1>
-                    ${%title}
-                </h1>
+            <l:app-bar title="${%title}" />

+            <f:form method="post" action="configSubmit" name="config">
                <j:set var="instance" value="${it}"/>
                <j:set var="descriptors" value="${it.myCategoryDescriptors}" />
                <j:set var="instances" value="${it.targetUser.properties}" />
--- a/core/src/main/resources/hudson/model/userproperty/UserPropertyCategorySecurityAction/index.jelly
+++ b/core/src/main/resources/hudson/model/userproperty/UserPropertyCategorySecurityAction/index.jelly
@ -30,11 +30,9 @@ THE SOFTWARE.
    <l:layout permission="${app.ADMINISTER}" title="${%title}">
        <st:include page="sidepanel.jelly" it="${it.targetUser}" />
        <l:main-panel>
-            <f:form method="post" action="configSubmit" name="config">
-                <h1>
-                    ${%title}
-                </h1>
+            <l:app-bar title="${%title}" />

+            <f:form method="post" action="configSubmit" name="config">
                <j:set var="instance" value="${it}"/>
                <j:set var="descriptors" value="${it.myCategoryDescriptors}" />
                <j:set var="instances" value="${it.targetUser.properties}" />
--- a/core/src/main/resources/lib/layout/app-bar.jelly
+++ b/core/src/main/resources/lib/layout/app-bar.jelly
@ -23,7 +23,7 @@ THE SOFTWARE.
 -->

 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:x="jelly:xml">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:x="jelly:xml" xmlns:l="/lib/layout">
  <st:documentation>
    <st:attribute name="title" use="required">
      The title for the application bar
@ -34,12 +34,19 @@ THE SOFTWARE.
    <st:attribute name="subtitle">
      The subtitle for the application bar
    </st:attribute>
+    <st:attribute name="icon" since="TODO">
+      Optional icon for the application bar
+    </st:attribute>
    Generates a row containing the page title and an optional set of controls
  </st:documentation>

  <j:if test="${mode=='main-panel' or mode=='side-panel'}">
-    <div class="jenkins-app-bar">
+    <div class="jenkins-app-bar ${attrs.icon != null ? 'jenkins-app-bar--with-icon' :''}">
      <div class="jenkins-app-bar__content">
+        <j:if test="${attrs.icon != null}">
+          <l:icon src="${attrs.icon}" class="jenkins-avatar" />
+        </j:if>
+
        <x:element name="${headingLevel ?: 'h1'}">
          ${title}
          <j:if test="${attrs.subtitle != null}">
--- a/src/main/scss/components/_app-bar.scss
+++ b/src/main/scss/components/_app-bar.scss
@ -18,6 +18,22 @@
    flex-direction: column;
    min-height: 2.25rem;
    flex-grow: 1;
+    max-width: 1200px;
+    text-overflow: ellipsis;
+
+    // Jobs have their SVGs nested inside of a link
+    & > a > svg,
+    & > svg {
+      width: 2rem !important;
+      height: 2rem !important;
+      margin-left: -0.1875rem;
+    }
+
+    & > img {
+      width: 2.375rem;
+      height: 2.375rem;
+      margin-left: -0.375rem;
+    }
  }

  .jenkins-app-bar__controls {
@ -77,6 +93,16 @@
    }
  }

+  // This would ideally use :has instead but HTMLUnit doesn't support it
+  &--with-icon {
+    .jenkins-app-bar__content {
+      align-items: center;
+      justify-content: start;
+      flex-direction: row;
+      gap: 0.875rem;
+    }
+  }
+
  h1,
  h2 {
    margin: 0;
@ -97,18 +123,6 @@
  gap: 0.875rem;
  max-width: 1200px;
  text-overflow: ellipsis;
-
-  svg {
-    width: 2rem !important;
-    height: 2rem !important;
-    margin-left: -0.1875rem;
-  }
-
-  img {
-    width: 2.375rem;
-    height: 2.375rem;
-    margin-left: -0.375rem;
-  }
 }

 $bottom-app-bar-padding: 0.875rem;