Resolve "Typed AWS environment variables for access keys & region"
What does this MR do?
In order to add an autocomplete list and validations for a limited set of AWS keys, this MR:
- Adds a combobox component to the CI/CD variables modal. (Followup issue to abstract to Gitlab UI
▶ gitlab-ui#716 (closed))- Typing matches tokens; dropdown disappears when there is no match
- Up and down arrows navigate the dropdown
- Enter selects keyboard-highlighted item; clicking overrides this
- Esc closes dropdown when it is open, clears field when it is not
- Browser/native dropdown hidden when ours is open, shows when it is not
- Tab selects current entered text and moves to next field
- This behavior based on w3c pattern and this accessible combobox example
- Abstracts the field using this combobox into a sub-element.
- Adds validations to existing validations on the value field.
- Note: There is a bug where the text-area field is not highlighted when it is invalid. (Followup bug report in Gitlab UI
▶ gitlab-ui#715 (closed))
- Note: There is a bug where the text-area field is not highlighted when it is invalid. (Followup bug report in Gitlab UI
- Adds related tests.
Adds documentation in related issue
Should we really be encouraging users to enter their credentials like this?
See #26777 (comment 305798396) for discussion and resolution of this point
Screengifs
Still screens
Test locally
- Be sure to enable
:new_variables_ui
and:ci_key_autocomplete
feature flags on your local environment - Go to
:user/:project/-/settings/ci_cd
- Click
Expand
button forVariables
section - Click
Add Variable
button - Now you got the popup! Woo!
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) >> !29325 (merged). -
Code review guidelines -
Merge request performance guidelines -
Style guides
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers
Security
See #26777 (comment 305798396) for discussion and resolution of security implications
Edited by Thao Yeager