New credentials dialog

[timja]

• Adds a "New credentials" link to Credentials page.
• Improves UX of selecting a credentials type
• Uses dialogs when creating credentials to improve the experience.

credentials.mov

Part of #986

Fixes #939

ATH passed in jenkinsci/acceptance-test-harness#2565

TODO:

• Global domain doesn't seem to work right anymore
• No create button on c:select Add - i.e. adding a credential from a credential chooser dropdown
• c:select needs migrating to wizard, i.e. overflow button needs to give domains in overflow...
• Don't redirect to store after creation of credentials if on root page
• Convert domain add credentials to use wizard
• Do we want to constrain width of domain selector for descriptions?
• Review if WrappedCredentialsStore still needs to exist
• Empty state for main page should have add credentials added
• Fix integration tests
• ATH
• PCT
• Take a video once we're happy with it
• Empty scope
• Review TODO items in code
• Nested folders

Testing done

• Single level folder
• System credentials
• User credentials
• ATH
• Integration tests in this plugin
• Nested folders

nested folder example:

Tested with:

Submitter checklist

• Make sure you are opening from a topic/feature/bugfix branch (right side) and not your main branch!
• Ensure that the pull request title represents the desired changelog entry
• Please describe what you did
• Link to relevant issues in GitHub or Jira
• Link to relevant pull requests, esp. upstream and downstream changes
• Ensure you have provided tests that demonstrate the feature works or the issue is fixed

[jtnord]

X-Wizard-Title?

[janfaracik]

This sets the title of the wizard page - e.g. 'Add Credentials' -> 'Add GitHub App'

[jtnord]

is this valid? did things work (excepting permissions issues and failing hard) before and not now?

[timja]

I can't see any difference. I don't think this works on master either.

I:

• Added a credential to a user store
• Configured a credentials parameter in a freestyle job.
• Clicked build with parameters
• Credential wasn't visible
• Ticked include user
• Credential still not visible

Same behaviour on both versions.

Unless you know any better I would just leave this one.

[jtnord]

That's fine, it was just the TODO changed and I thought I had seen a commit around users.

[timja]

not sure if this is an issue somewhere in Jenkins core or here, but if I click in the dialog (in certain places) it closes it unexpectedly. It also closed it if I click outside the dialog (possibly more expected - but was a surprise to me when there is a specifix close (X) button.

the purple area seems to dismiss in the following:

Happens if you click inside the dialog but not on an actual element. Its because we're reusing a modal dialog type.
@janfaracik ideas on the best fix?

Copy the dialog code fully into here? Or a fix to core to allow an option to disable this?

[timja]

I get an unneeded scrollbar when attempting to add a credential.

Resolved by updating the baseline to 2.528.3

[timja]

NIT: the bottom floating buttons are missing some styling from the normal stick floating button bar on core pages. there is no bluring of the background behind them.

Resolved by updating the baseline

Possibly not possible, but it would be great for the ATH if the bottom button bar was outside of the scroll for the rest of the dialog (similar to the title) so that you did not have to mess with disabling the sticky button with js.

Possibly, not a blocker though.

[timja]

credential type options seem to be completely inaccessible (chrome windows) - I can not tab to them, space and arrows control the page in the background of the dialog. I can tab to the X and the next button, but not the individual credential types

@janfaracik possible to get an insight from you here? I've had a look at the DOM and it looks ok =/

[janfaracik]

not sure if this is an issue somewhere in Jenkins core or here, but if I click in the dialog (in certain places) it closes it unexpectedly. It also closed it if I click outside the dialog (possibly more expected - but was a surprise to me when there is a specifix close (X) button.
the purple area seems to dismiss in the following:

Happens if you click inside the dialog but not on an actual element. Its because we're reusing a modal dialog type. @janfaracik ideas on the best fix?

Copy the dialog code fully into here? Or a fix to core to allow an option to disable this?

I've got this fixed in core - jenkinsci/jenkins#26033

[timja]

@jtnord mind taking another look please?

All should be fixed now, except for the closing of the dialog if you click in certain places.
That requires a core fix (review appreciated) - jenkinsci/jenkins#26033

Short of forking the whole dialog code into credentials plugin we couldn't see a fix there and don't expect it to be a blocker to releasing this.

[timja]

@jtnord possible to re-review this please?

[timja]

Core fix has been merged and released so anyone on 2.550 onwards won't hit those rough edges.

[timja]

I've talked to James out of band, will proceed with merging this.

---

I did an accessibility test on this.

Raised 1 core issue (pre-existing and known but I couldn't find an issue for it)

• Tippy dropdown content not announced in voiceover jenkins#26296

Minor issues:

• Focus could maybe be a bit better, e.g. on transition page to page on the wizard
• not reloading the whole page would be a nicer experience