Skip to content

Commit

Permalink
Merge branch 'new-search-bar-component' into search-overhaul
Browse files Browse the repository at this point in the history
  • Loading branch information
janfaracik committed Aug 9, 2022
2 parents b593d92 + 77e62b8 commit c664816
Show file tree
Hide file tree
Showing 16 changed files with 390 additions and 111 deletions.
8 changes: 4 additions & 4 deletions core/src/main/resources/hudson/PluginManager/advanced.jelly
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@ THE SOFTWARE.
<l:layout title="${%Advanced Settings} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
<j:set var="readOnlyMode" value="${!app.hasPermission(app.ADMINISTER)}"/>

<l:app-bar title="${%Plugin Manager}"/>
<l:app-bar title="${%Advanced settings}"/>

<st:include page="sidepanel.jelly"/>
<l:side-panel>
<local:sidepanel xmlns:local="/hudson/PluginManager" page="advanced" />
</l:side-panel>

<l:main-panel>
<local:tabBar page="advanced" xmlns:local="/hudson/PluginManager"/>

<section class="jenkins-section jenkins-!-margin-bottom-5">
<h2 class="jenkins-section__title">${%HTTP Proxy Configuration}</h2>
<f:form method="post" action="proxyConfigure" name="proxyConfigure">
Expand Down
31 changes: 12 additions & 19 deletions core/src/main/resources/hudson/PluginManager/available.jelly
Original file line number Diff line number Diff line change
Expand Up @@ -28,30 +28,23 @@ THE SOFTWARE.
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:f="/lib/form">
<l:layout title="${%Available Plugins} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
<j:set var="page" value="available"/>

<l:app-bar title="${%Plugin Manager}" />

<st:include page="sidepanel.jelly"/>
<l:side-panel>
<local:sidepanel xmlns:local="/hudson/PluginManager" page="available" />
</l:side-panel>

<l:main-panel>
<div class="jenkins-app-bar jenkins-app-bar--sticky">
<div class="jenkins-app-bar__content">
<l:search-bar clazz="jenkins-search--app-bar"
placeholder="${%Search available plugins}"
id="filter-box"
value="${request.getParameter('filter')}" />
</div>
</div>

<script src="${resURL}/jsbundles/plugin-manager-ui.js" type="text/javascript"/>

<form method="post" action="install">
<local:tabBar page="${page}" xmlns:local="/hudson/PluginManager"/>

<div class="jenkins-form-item jenkins-search">
<input
class="jenkins-search__input"
type="search"
id="filter-box"
value="${request.getParameter('filter')}"
placeholder="${%Search}"/>
<div class="jenkins-search__icon">
<l:icon src="symbol-search"/>
</div>
</div>

<table id="plugins" class="jenkins-table sortable"
data-hasAdmin="${h.hasPermission(app.ADMINISTER)}">
<thead>
Expand Down
29 changes: 12 additions & 17 deletions core/src/main/resources/hudson/PluginManager/installed.jelly
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,20 @@ THE SOFTWARE.
<l:layout title="${%Installed Plugins} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
<j:set var="readOnlyMode" value="${!app.hasPermission(app.ADMINISTER)}"/>

<l:app-bar title="${%Plugin Manager}" />

<st:include page="sidepanel.jelly"/>
<l:side-panel>
<local:sidepanel xmlns:local="/hudson/PluginManager" page="installed" />
</l:side-panel>

<l:main-panel>
<div class="jenkins-app-bar jenkins-app-bar--sticky">
<div class="jenkins-app-bar__content">
<l:search-bar clazz="jenkins-search--app-bar"
placeholder="${%Search installed plugins}"
id="filter-box"
value="${request.getParameter('filter')}" />
</div>
</div>

<st:adjunct includes="hudson.PluginManager._table"/>

<j:if test="${app.updateCenter.isRestartRequiredForCompletion()}">
Expand All @@ -53,20 +62,6 @@ THE SOFTWARE.
data-detached-possible-dependents="${%detached-possible-dependents}"
/>

<local:tabBar page="installed" xmlns:local="/hudson/PluginManager" />

<div class="jenkins-form-item jenkins-search">
<input
class="jenkins-search__input"
type="search"
id="filter-box"
value="${request.getParameter('filter')}"
placeholder="${filtered == 'true' ? '%Search' : '%Filter'}"/>
<div class="jenkins-search__icon">
<l:icon src="symbol-search"/>
</div>
</div>

<table id="plugins" class="jenkins-table sortable">
<j:choose>
<j:when test="${empty(app.pluginManager.plugins) and empty(app.pluginManager.failedPlugins)}">
Expand Down
36 changes: 0 additions & 36 deletions core/src/main/resources/hudson/PluginManager/sidepanel.groovy

This file was deleted.

117 changes: 117 additions & 0 deletions core/src/main/resources/hudson/PluginManager/sidepanel.jelly
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<!--
The MIT License
Copyright (c) 2022, Jenkins contributors
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.
-->

<!--
Sidepanel component for Plugins Manager
-->
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
<st:documentation>
<st:attribute name="page">
Adds the highlighted class to the current page item in the list
</st:attribute>
</st:documentation>

<div id="tasks" class="app-plugin-manager__sidebar">
<div class="jenkins-app-bar">
<div class="jenkins-app-bar__content">
<h1>${%Plugins}</h1>
</div>
</div>

<div class="task">
<span class="task-link-wrapper">
<a href="./" class="task-link ${page == 'updates' ? 'task-link--active' : ''}">
<div class="task-icon-link">
<l:icon src="symbol-download" />
</div>
<span class="task-icon-text">
${%Updates}
</span>
<j:if test="${app.updateCenter.updates.size() != 0}">
<span class="task-icon-badge">
${app.updateCenter.updates.size()}
</span>
</j:if>
</a>
</span>
</div>

<div class="task">
<span class="task-link-wrapper">
<a href="./available" class="task-link ${page == 'available' ? 'task-link--active' : ''}">
<div class="task-icon-link">
<l:icon src="symbol-shopping-bag" />
</div>
<span class="task-icon-text">
${%Available plugins}
</span>
</a>
</span>
</div>

<div class="task">
<span class="task-link-wrapper">
<a href="./installed" class="task-link ${page == 'installed' ? 'task-link--active' : ''}">
<div class="task-icon-link">
<l:icon src="symbol-plugins" />
</div>
<span class="task-icon-text">
${%Installed plugins}
</span>
</a>
</span>
</div>

<div class="task">
<span class="task-link-wrapper">
<a href="./advanced" class="task-link ${page == 'advanced' ? 'task-link--active' : ''}">
<div class="task-icon-link">
<l:icon src="symbol-settings" />
</div>
<span class="task-icon-text">
${%Advanced settings}
</span>
</a>
</span>
</div>

<j:if test="${!app.updateCenter.jobs.isEmpty()}">
<hr />

<div class="task">
<span class="task-link-wrapper">
<a href="../updateCenter" class="task-link">
<div class="task-icon-link">
<l:icon src="symbol-list" />
</div>
<span class="task-icon-text">
${%Update Center}
</span>
</a>
</span>
</div>
</j:if>
</div>
</j:jelly>
27 changes: 12 additions & 15 deletions core/src/main/resources/hudson/PluginManager/table.jelly
Original file line number Diff line number Diff line change
Expand Up @@ -37,27 +37,24 @@ THE SOFTWARE.
</st:attribute>
</st:documentation>
<l:layout title="${%Update Center} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
<l:app-bar title="${%Plugin Manager}" />
<l:side-panel>
<local:sidepanel xmlns:local="/hudson/PluginManager" page="updates" />
</l:side-panel>

<st:include page="sidepanel.jelly"/>
<l:main-panel>
<div class="jenkins-app-bar jenkins-app-bar--sticky">
<div class="jenkins-app-bar__content">
<l:search-bar clazz="jenkins-search--app-bar"
placeholder="${%Search plugin updates}"
id="filter-box"
value="${request.getParameter('filter')}" />
</div>
</div>

<st:adjunct includes="hudson.PluginManager._table"/>

<form method="post" action="install">
<j:set var="isUpdates" value="${attrs.page=='updates'}"/>
<local:tabBar xmlns:local="/hudson/PluginManager" page="${attrs.page}"/>

<div class="jenkins-form-item jenkins-search">
<input
class="jenkins-search__input"
type="search"
id="filter-box"
value="${request.getParameter('filter')}"
placeholder="${filtered == 'true' ? '%Search' : '%Filter'}"/>
<div class="jenkins-search__icon">
<l:icon src="symbol-search"/>
</div>
</div>

<j:set var="cache" value="${it.createCache()}"/>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -79,12 +79,7 @@ THE SOFTWARE.
<l:pane width="3" title="${h.runScript(paneTitle)}" footer="${h.runScript(paneFooter)}" id="buildHistory" class="jenkins-pane stripped">
<tr class="build-search-row">
<td>
<div class="jenkins-search">
<input type="search" placeholder="${%find}" class="jenkins-search__input" />
<div class="jenkins-search__icon">
<l:icon src="symbol-search" />
</div>
</div>
<l:search-bar placeholder="${%find}" />
<div id="no-builds" class="jenkins-pane__information" style="${page.runs.isEmpty() and page.queueItems.isEmpty() ? '' : 'display: none;'}">
${%No builds}
</div>
Expand Down
53 changes: 53 additions & 0 deletions core/src/main/resources/lib/layout/search-bar.jelly
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!--
The MIT License
Copyright (c) 2022 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:st="jelly:stapler" xmlns:l="/lib/layout">
<st:documentation>
<st:attribute name="value" />
<st:attribute name="placeholder" />
<st:attribute name="id" />
<st:attribute name="autofocus" />
<st:attribute name="clazz" />
</st:documentation>

<div class="jenkins-search ${attrs.clazz}">
<div class="jenkins-search__icon">
<l:icon src="symbol-search" />
</div>
<input value="${attrs.value}"
id="${attrs.id}"
class="jenkins-search__input"
placeholder="${attrs.placeholder ?: '%Search'}"
type="search"
autofocus="${attrs.autofocus}"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false" />
<div class="jenkins-search__shortcut" tooltip="Press / on your keyboard to focus">
<l:icon src="symbol-search-shortcut" />
</div>
</div>
</j:jelly>
10 changes: 10 additions & 0 deletions war/src/main/js/keyboard-shortcuts.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,16 @@ window.addEventListener("load", () => {
// Returning false stops the event and prevents default browser events
return false
})

const pageSearchBar = document.querySelectorAll(".jenkins-search__input")
if (pageSearchBar.length === 1) {
hotkeys(translateModifierKeysForUsersPlatform("/"), () => {
pageSearchBar[0].focus()

// Returning false stops the event and prevents default browser events
return false
})
}
})

/**
Expand Down
Loading

0 comments on commit c664816

Please sign in to comment.