Skip to content

Resolve "Typed AWS environment variables for access keys & region"

Sarah Groff Hennigh-Palermo requested to merge 26777-add-aws-autocomplete into master

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))
  • Adds related tests.

Adds documentation in related issue !29325 (merged).

Should we really be encouraging users to enter their credentials like this?

See #26777 (comment 305798396) for discussion and resolution of this point

Screengifs

modal-interaction

modal-interaction-2

Still screens

dropdown open item selected (arrow down)
Screen_Shot_2020-04-08_at_7.18.08_PM Screen_Shot_2020-04-08_at_7.18.16_PM
valid input (validated) invalid input (value error)
Screen_Shot_2020-04-08_at_7.18.59_PM Screen_Shot_2020-04-08_at_7.19.05_PM
invalid input (mask error) invalid input (both errors)
Screen_Shot_2020-04-08_at_7.19.44_PM Screen_Shot_2020-04-08_at_7.19.14_PM
valid input (no validation function) native dropdown without input
Screen_Shot_2020-04-08_at_7.19.48_PM Screen_Shot_2020-04-08_at_7.20.42_PM

Test locally

  1. Be sure to enable :new_variables_ui and :ci_key_autocomplete feature flags on your local environment
  2. Go to :user/:project/-/settings/ci_cd
  3. Click Expand button for Variables section
  4. Click Add Variable button
  5. Now you got the popup! Woo!

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

See #26777 (comment 305798396) for discussion and resolution of security implications

Edited by Thao Yeager

Merge request reports