Modernise UI #287

timja · 2022-03-05T12:22:55Z

Requires jenkinsci/jenkins#6307

Principles applied:

All pages have a heading
Title matches the heading
All buttons say what they do instead of OK
All buttons on a new line not next to text
All primary buttons are styled appropriately
Switch to core controls where possible otherwise backport changes

TODO:

Get upstream PR merged

Manage Jenkins

Add credential button spacing fixed

Add credential dialog

Global credentials list

New Credentials

Update credentials

Move credentials

Delete credentials

Add Domain

New domain

View domain

Update domain

Delete domain

Credentials parameter

NotMyFault · 2022-03-05T12:56:03Z

Not 100% sure about the whole security section having the same icon

Yeah, I'd preserve the lock for the "Configure Global Security" tab and use the key icon here.
Considering we have a key.svg in core, we could serve the icon from there too, thoughts?

timja · 2022-03-05T13:05:27Z

yeah sure

timja · 2022-03-06T11:49:04Z

Done all I plan to do, merging is blocked until jenkinsci/jenkins#6307 is released.

But I would appreciate reviews and feedback

NotMyFault

The dropdown to add a new credentials domain on the "Store" column solely displays the chevron but not the context menu to perform the operation.
Now we have three icon sources in place, I'm wondering if it would be worth to replace/overwrite the table icons too 🤔
| | |

NotMyFault · 2022-03-06T13:24:57Z

src/main/resources/lib/credentials/select/select.css

 }
+
+.help-content::before {


What is that used for? Can't we rely on jenkins-help-button or l:helpIcon from core?

It’s used when you add a credential parameter to a job.

credentials plugins has created a ‘simple help’ that can have inline text. Can maybe refactor it to use core in some way, this is just fixing it up to look right.

timja · 2022-03-06T14:22:52Z

Sure can try that what are the symbols for each ?

NotMyFault · 2022-03-06T14:50:19Z

Sure can try that what are the symbols for each ?

Ribbon for certificate.svg (overwriting in core), symbol-jenkins for system-scope.svg, symbol-key for credential.svg (overwriting in core) and I added symbol-id-card for the user pass one.

If you don't mind, you can simply apply my patches I used to test it with https://gist.github.com/NotMyFault/daeaeda507eb1c62dacc3bcfbbeb58c0

timja · 2022-03-06T20:01:51Z

Looks good on the view credentials table:

Bit weird on the domain page because of the blue:

NotMyFault · 2022-03-06T20:04:06Z

I guess the blue comes from core? Spots like dropdowns still use it, e.g.

timja · 2022-03-06T20:09:51Z

Looks like because it's a link for some reason =/

pom.xml

timja · 2022-03-06T20:30:46Z

.../com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/newCredentials.jelly

@@ -63,13 +64,13 @@
                  </f:dropdownListBlock>
                </j:forEach>
              </f:dropdownList>
-              <!--f:dropdownDescriptorSelector field="credentials" title="${%Kind}" lazy="it"/-->
+              <!--<f:dropdownDescriptorSelector field="credentials" title="${%Kind}" descriptors="${descriptors}"/> -->


After making these changes I think it works but didn't want to do it in the same PR

src/main/java/com/cloudbees/plugins/credentials/CredentialsStoreAction.java

timja · 2022-03-10T08:45:28Z

I've left out changes to the context menu for two reasons:

I wasn't able to figure out how to apply a symbol to it short of setting the iconXml field which requires me to load a symbol in the code here which requires calling a restricted API (I disabled access restrictor and verified that works)
Translations don't seem to apply to it, I tried using an Icon that has a translation but the context menu code path doesn't seem to go through that (I wasn't able to track down how it's actually built but I didn't spend too long tracing it).

FYI @janfaracik if you have any ideas but probably not critical for the initial PR

src/main/java/com/cloudbees/plugins/credentials/CredentialsStoreAction.java

…reAction.java

pom.xml

NotMyFault

Looks amazing 🎉

jglick · 2022-03-26T16:49:20Z

@timja is this & #283 tested and ready to release?

timja · 2022-03-26T17:10:47Z

This one is tested and ready for release.

I think #283 is fine, although it was fixed in core so the change isn't absolutely required, but I think there was something wrong with the SVG which @NotMyFault fixed so might be good to still ship it.

jglick

Seems OK though I do not follow details. @timja go ahead and merge if you like; seems you have permissions.

pom.xml

timja · 2022-03-26T17:32:17Z

Seems OK though I do not follow details. @timja go ahead and merge if you like; seems you have permissions.

I'm not a maintainer here, org owner gives me the green tick though.

timja · 2022-03-26T17:54:44Z

Builds green now @jglick

daniel-beck · 2022-06-20T14:01:06Z

May have caused JENKINS-68791

basil · 2022-10-04T16:46:56Z

src/main/java/com/cloudbees/plugins/credentials/CredentialsProvider.java

@@ -1075,7 +1075,7 @@ public String getDisplayName() {
     */
    @Override
    public String getIconClassName() {
-        return "icon-credentials-credentials";
+        return "symbol-key";


I think the wallet icon would have been a better choice for the reasons explained in JENKINS-69775.

Modernise icons

e6aa5e7

timja mentioned this pull request Mar 5, 2022

Replace Tango icons with Jenkins Symbols jenkinsci/jenkins#6307

Merged

11 tasks

Minor improvements

6dee9b8

More improvements

94b7997

This comment was marked as outdated.

Sign in to view

Improvements

632098d

timja changed the title ~~Modernise icons~~ Modernise UI Mar 6, 2022

timja added 2 commits March 6, 2022 11:19

New checkboxes and help icon fixes

959ee2d

Fix icons

061faf5

timja added the enhancement label Mar 6, 2022

timja mentioned this pull request Mar 6, 2022

Use new table style #251

Merged

6 tasks

timja requested a review from a team March 6, 2022 11:48

timja requested review from janfaracik, uhafner and daniel-beck March 6, 2022 11:49

NotMyFault reviewed Mar 6, 2022

View reviewed changes

Apply patch

6098001

timja added 2 commits March 6, 2022 20:20

Fix test and scaling of icon

cf6d85e

No reason for first column to be a link

d22c5cc

timja commented Mar 6, 2022

View reviewed changes

pom.xml Outdated Show resolved Hide resolved

timja commented Mar 6, 2022

View reviewed changes

src/main/java/com/cloudbees/plugins/credentials/CredentialsStoreAction.java Outdated Show resolved Hide resolved

Revert context menu for now

fecf0c4

timja commented Mar 12, 2022

View reviewed changes

src/main/java/com/cloudbees/plugins/credentials/CredentialsStoreAction.java Outdated Show resolved Hide resolved

Update src/main/java/com/cloudbees/plugins/credentials/CredentialsSto…

4844443

…reAction.java

timja mentioned this pull request Mar 19, 2022

Credentials icon is too big on the side pane (wrong class ?) jenkinsci/material-theme-plugin#12

Closed

Update pom.xml

2fdff51

timja marked this pull request as ready for review March 23, 2022 18:30

Merge branch 'master' into modern-icons

01afa6a

timja commented Mar 25, 2022

View reviewed changes

pom.xml Show resolved Hide resolved

timja requested a review from a team March 25, 2022 16:07

NotMyFault approved these changes Mar 25, 2022

View reviewed changes

jglick mentioned this pull request Mar 26, 2022

Improve UI with modernise form in core #255

Closed

timja mentioned this pull request Mar 26, 2022

Update icon SVG #283

Merged

jglick approved these changes Mar 26, 2022

View reviewed changes

pom.xml Show resolved Hide resolved

Update pom.xml

b1ac9f7

jglick merged commit b4e24ac into jenkinsci:master Mar 26, 2022

timja deleted the modern-icons branch March 26, 2022 17:56

jglick mentioned this pull request Mar 28, 2022

Update credentials jenkinsci/bom#970

Merged

Vlatombe mentioned this pull request Mar 29, 2022

Fix credentials and weekly changes jenkinsci/acceptance-test-harness#753

Merged

6 tasks

jglick mentioned this pull request May 26, 2022

[JENKINS-68616] Enable field validation checks #316

Merged

6 tasks

basil reviewed Oct 4, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modernise UI #287

Modernise UI #287

timja commented Mar 5, 2022 •

edited

Loading

NotMyFault commented Mar 5, 2022

timja commented Mar 5, 2022

This comment was marked as outdated.

timja commented Mar 6, 2022

NotMyFault left a comment

NotMyFault Mar 6, 2022

timja Mar 6, 2022

timja commented Mar 6, 2022

NotMyFault commented Mar 6, 2022

timja commented Mar 6, 2022 •

edited

Loading

NotMyFault commented Mar 6, 2022

timja commented Mar 6, 2022

timja Mar 6, 2022

timja commented Mar 10, 2022

NotMyFault left a comment

jglick commented Mar 26, 2022

timja commented Mar 26, 2022

jglick left a comment

timja commented Mar 26, 2022

timja commented Mar 26, 2022

daniel-beck commented Jun 20, 2022

basil Oct 4, 2022

		}

		.help-content::before {

Modernise UI #287

Modernise UI #287

Conversation

timja commented Mar 5, 2022 • edited Loading

NotMyFault commented Mar 5, 2022

timja commented Mar 5, 2022

This comment was marked as outdated.

timja commented Mar 6, 2022

NotMyFault left a comment

Choose a reason for hiding this comment

NotMyFault Mar 6, 2022

Choose a reason for hiding this comment

timja Mar 6, 2022

Choose a reason for hiding this comment

timja commented Mar 6, 2022

NotMyFault commented Mar 6, 2022

timja commented Mar 6, 2022 • edited Loading

NotMyFault commented Mar 6, 2022

timja commented Mar 6, 2022

timja Mar 6, 2022

Choose a reason for hiding this comment

timja commented Mar 10, 2022

NotMyFault left a comment

Choose a reason for hiding this comment

jglick commented Mar 26, 2022

timja commented Mar 26, 2022

jglick left a comment

Choose a reason for hiding this comment

timja commented Mar 26, 2022

timja commented Mar 26, 2022

daniel-beck commented Jun 20, 2022

basil Oct 4, 2022

Choose a reason for hiding this comment

timja commented Mar 5, 2022 •

edited

Loading

timja commented Mar 6, 2022 •

edited

Loading