Revamp build history search bar #5692

janfaracik · 2021-08-25T19:59:47Z

Proposed changelog entries

Modernise the "Build History" search bar

Video

Screen.Recording.2021-08-25.at.20.58.33.mov

Submitter checklist

(If applicable) Jira issue is well described
Changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developer, depending on the change). Examples
- Fill-in the Proposed changelog entries section only if there are breaking changes or other changes which may require extra steps from users during the upgrade
Appropriate autotests or explanation to why this change has no tests
For dependency updates: links to external changelogs and, if possible, full diffs

Maintainer checklist

Before the changes are marked as ready-for-merge:

There are at least 2 approvals for the pull request and no outstanding requests for change
Conversations in the pull request are over OR it is explicit that a reviewer does not block the change
Changelog entries in the PR title and/or Proposed changelog entries are correct
Proper changelog labels are set so that the changelog can be generated automatically
If the change needs additional upgrade steps from users, upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the PR title. (example)
If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).

Wadeck

Not manually tested but looks really nice :)

fqueiruga · 2021-09-01T09:07:12Z

war/src/main/webapp/scripts/hudson-behavior.js

@@ -2292,7 +2291,7 @@ function updateBuildHistory(ajaxUrl,nBuild) {
        }

        function loadPage(params, focusOnSearch) {
-            var searchString = pageSearchInput.value;
+            const searchString = pageSearchInput.value;


Cannot use const on the hudson-behavior.js file as it's not processed through webpack. These should be vars

war/src/main/webapp/scripts/hudson-behavior.js

fqueiruga · 2021-09-01T09:11:14Z

Looks good. I do have some comments about some issues that will arise.

I'd also suggest using, if possible, the .setting-input CSS class to the input to provide the basic styles, and only add the needed styles on top. That way it will be updated if forms input ever get revamped.

oleg-nenashev · 2021-09-15T18:30:17Z

@janfaracik Looks like this one is almost ready to go. WDYT about the comments by @fqueiruga ?

janfaracik · 2021-09-16T19:32:03Z

@janfaracik Looks like this one is almost ready to go. WDYT about the comments by @fqueiruga ?

They sound sensible to me 👍 I'll be making some changes, I'll post another comment when it should be good for another look over.

…into separate file

janfaracik · 2021-09-19T15:55:42Z

I've updated the PR based on the reviews - thanks everybody by the way :)

I've added debounce so server calls are limited, there's a short delay after typing before calling the API so it shouldn't swamp the API. I've also added a small animation to indicate that it's loading and I've also a small notice when there are no builds.

Build.history.mov

Reviews are welcome, I've extracted the JS into its own file now which makes things cleaner and easier to maintain - the file could definitely be cleaner though so would be great for people to try out the PR/suggest improvements.

Cheers

timja · 2021-09-19T16:10:59Z

Wow I just tried out the old behaviour and that is not a nice UX, never used this before tbh

timja · 2021-09-19T16:28:46Z

Icon appears to be mis-aligned for me?

Running chrome on mac big sur

timja · 2021-09-19T16:32:08Z

Spacing appears to be off for me too, it doesn't appear like in the video above.

The x button doesn't change the cursor to show it's clickable.

doesn't look the best in dark theme but looks like there's variables there that can be used to tweak that

janfaracik · 2021-09-19T17:45:26Z

Spacing appears to be off for me too, it doesn't appear like in the video above.

The x button doesn't change the cursor to show it's clickable.

doesn't look the best in dark theme but looks like there's variables there that can be used to tweak that

Darn Safari handles padding/line height differently for search inputs :doh: Should be all fixed now :)

The clear button also now changes the cursor on hover.

timja

the focus appears to be quite strong (and different from the rest of the application). Not that I like the focus state in the rest of the application.

I think in this case it looks fine, although if it was rolled out more widely it would probably be too 'much' when there's a number of inputs together, but I could be wrong.

My previous feedback was addressed and this is a lot better than the previous search bar

timja · 2021-09-26T19:15:58Z

conflicts

timja · 2021-09-27T09:00:42Z

@fqueiruga any chance you could take another look?

fqueiruga

I think this is a great PR. I'm still a bit concious about the use of px but that's not a blocker.

Cheers @janfaracik , this is really nice.

timja · 2021-09-27T09:10:04Z

This PR is now ready for merge, after ~24 hours, we will merge it if there's no negative feedback.

Thanks!

dheerajodha · 2021-09-28T07:57:02Z

Suggested Edit:

Modernise the Build History search bar.

timja · 2021-09-29T12:34:19Z

Possibly caused https://issues.jenkins.io/browse/JENKINS-66753

janfaracik · 2021-09-29T20:42:14Z

Possibly caused https://issues.jenkins.io/browse/JENKINS-66753

Investigating this now...

Update: Fix up for review now - #5760

janfaracik added 13 commits August 22, 2021 22:11

Redesign search builds field

bcbad74

initial

157d67e

Update icons

2a5aa1a

Update index.jelly

30ec96b

Update style.less

45a4ea4

Update style.less

e861adb

Remove unused things

6aff727

Merge master

33b3628

Fix icons

1270e28

Remove unused icons

0052619

Update IconSet.java

1182069

Update index.jelly

cf5c6ef

Rework search

3e4c5a8

oleg-nenashev added the web-ui The PR includes WebUI changes which may need special expertise label Aug 26, 2021

oleg-nenashev requested review from fqueiruga and uhafner August 26, 2021 09:56

oleg-nenashev added the rfe For changelog: Minor enhancement. use `major-rfe` for changes to be highlighted label Aug 26, 2021

oleg-nenashev self-requested a review August 26, 2021 09:57

Wadeck reviewed Aug 30, 2021

View reviewed changes

fqueiruga suggested changes Sep 1, 2021

View reviewed changes

Update hudson-behavior.js

ad00c3b

Rough but working commit, rip out build history from hudson-behavior …

6cc4db7

…into separate file

janfaracik changed the title ~~Revamp build history search bar~~ draft: Revamp build history search bar Sep 17, 2021

janfaracik added 3 commits September 17, 2021 16:00

Update form.less

3d77b3b

Update side-panel-widgets.less

aad50cf

Update filter-build-history.js

a7758f3

janfaracik changed the title ~~draft: Revamp build history search bar~~ Revamp build history search bar Sep 19, 2021

timja requested a review from fqueiruga September 19, 2021 16:07

Fix styling in Chrome (and also Safari...)

b00ad91

timja approved these changes Sep 20, 2021

View reviewed changes

timja requested a review from a team September 20, 2021 08:28

res0nance added the squash-merge-me Unclean or useless commit history, should be merged only with squash-merge label Sep 20, 2021

timja added the unresolved-merge-conflict There is a merge conflict with the target branch. label Sep 26, 2021

Merge branch 'master' into search-bar

fd743be

timja removed the unresolved-merge-conflict There is a merge conflict with the target branch. label Sep 27, 2021

fqueiruga approved these changes Sep 27, 2021

View reviewed changes

timja added the ready-for-merge The PR is ready to go, and it will be merged soon if there is no negative feedback label Sep 27, 2021

timja merged commit 2116595 into jenkinsci:master Sep 27, 2021

timja mentioned this pull request Sep 28, 2021

Lower 'reasonable' number of icons (fix master build) #5756

Merged

janfaracik deleted the search-bar branch January 5, 2022 15:07

timja mentioned this pull request Sep 6, 2022

Add search bar component #7074

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Revamp build history search bar #5692

Revamp build history search bar #5692

janfaracik commented Aug 25, 2021 •

edited by timja

Loading

Wadeck left a comment

fqueiruga Sep 1, 2021

janfaracik Sep 19, 2021

fqueiruga commented Sep 1, 2021

oleg-nenashev commented Sep 15, 2021

janfaracik commented Sep 16, 2021

janfaracik commented Sep 19, 2021

timja commented Sep 19, 2021

timja commented Sep 19, 2021

timja commented Sep 19, 2021

janfaracik commented Sep 19, 2021

timja left a comment

timja commented Sep 26, 2021

timja commented Sep 27, 2021

fqueiruga left a comment

timja commented Sep 27, 2021

dheerajodha commented Sep 28, 2021

timja commented Sep 29, 2021

janfaracik commented Sep 29, 2021 •

edited

Loading

Revamp build history search bar #5692

Revamp build history search bar #5692

Conversation

janfaracik commented Aug 25, 2021 • edited by timja Loading

Proposed changelog entries

Video

Submitter checklist

Maintainer checklist

Wadeck left a comment

Choose a reason for hiding this comment

fqueiruga Sep 1, 2021

Choose a reason for hiding this comment

janfaracik Sep 19, 2021

Choose a reason for hiding this comment

fqueiruga commented Sep 1, 2021

oleg-nenashev commented Sep 15, 2021

janfaracik commented Sep 16, 2021

janfaracik commented Sep 19, 2021

timja commented Sep 19, 2021

timja commented Sep 19, 2021

timja commented Sep 19, 2021

janfaracik commented Sep 19, 2021

timja left a comment

Choose a reason for hiding this comment

timja commented Sep 26, 2021

timja commented Sep 27, 2021

fqueiruga left a comment

Choose a reason for hiding this comment

timja commented Sep 27, 2021

dheerajodha commented Sep 28, 2021

timja commented Sep 29, 2021

janfaracik commented Sep 29, 2021 • edited Loading

janfaracik commented Aug 25, 2021 •

edited by timja

Loading

janfaracik commented Sep 29, 2021 •

edited

Loading