feat: make https repo credentials editable in the UI

[ciiay]

signed-off: @ciiay
fixes: #9108

Note on DCO:

If the DCO action in the integration test fails, one or more of your commits are not signed off. Please click on the Details link next to the DCO action for instructions on how to resolve this.

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• Optional. My organization is added to USERS.md.
• I have signed off all my commits as required by DCO
• I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
• My build is green (troubleshooting builds).

Screenshot:

[codecov]

Codecov Report

Merging #9782 (bfc7c72) into master (f84d828) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #9782   +/-   ##
=======================================
  Coverage   45.92%   45.92%           
=======================================
  Files         229      229           
  Lines       28278    28278           
=======================================
  Hits        12987    12987           
  Misses      13518    13518           
  Partials     1773     1773           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[reginaelyse]

Hi Yi! Just tried this out and it works great but I have one little nit. When the validation error pops up, usually they are on the line below the input. Here it is in the text input itself, making you not able to click on it to get the cursor (see video below). I would suggest making the validation errors like the other text inputs, as seen in the second picture here. Otherwise looks great so far, I'll continue to look into it code-wise! 😄

simplescreenrecorder-.2.mp4

[ciiay]

Hi @reginapizza , thanks for the review. Good catch on that unclickable input field. I actually reused a current <EditablePanel> component and its style. So it's an existing issue for wherever this component is used. I fixed it at my new PR update, it should fix the issue for where else it's used too.

e.g. Not clickable input field before my fix here too

Regarding the location of this error message, if I make it underneath the input field, it will stretch out the entire section which doesn't look good, so I prefer to keep it inside the input as it's an existing style already. How do you think?

*no error message: small and neat section

v.s. with the error message: stretched out section with extra thick bottom margin

[ciiay]

@reginapizza Here's the fix for unclickable input field issue.

[saumeya]

Great PR Yi, left a small comment

[saumeya]

In case where only password is added without the username, there is no validation check and shows success box. That case can also be addressed here.

[ciiay]

Thanks for the review. I see the same thing when I wrote it but I aligned up with the current validation for the creation sliding panel. It only checks one way, so I kept it consistent. Do you think I should update both places or only the updating page?

[saumeya]

Maybe better to update both places for better user experience?

[saumeya]

LGTM

[rbreeze]

LGTM