Add live validation and immutability hint to secret name field

Connor Flemingrequested to merge
623923-secret-name-live-validation into master

What does this MR do and why?

Adds a label description to the secret Name field making it clear the name can't be changed once the secret is created, and validates the name as you type instead of waiting for the server to reject it.

  • New label description under "Name": "Secret name cannot be changed after form submission." This replaces the old "should be unique within this project/group…" help text under the input.
  • Live validation on the name, shown under the input:
    • Empty after the field has been touched: "This field is required."
    • More than 255 characters: "Name must be 255 characters or fewer."
    • Anything outside [a-zA-Z0-9_]: "Name can only contain letters, digits, and '_'."
  • Submit is blocked while the name is invalid.
  • SECRET_NAME_REGEX and SECRET_NAME_MAX_LENGTH in ee/app/assets/javascripts/ci/secrets/constants.js mirror SECRET_NAME_FORMAT and the length limit in ee/app/models/secrets_management/base_secret.rb, so the client and server agree.
  • Edit mode is unchanged: the Name field still isn't shown.
  • Docs updated to list the name rules and that it can't be changed.

References

Screenshots or screen recordings

Project form on GDK at 1280px. The group form is identical apart from the page text.

Before After
before after

Validation as you type:

Input Result
Invalid characters (my-secret name&) format error
256 characters length error
Typed, then cleared required

Typing an invalid name, selecting Add secret (nothing is submitted; the name error is the only error on the form), then fixing it:

live validation

Notes for reviewers

  • The "should be unique within this project/group" hint has been removed, as in the design.
  • I've added a trailing period to the label description ("Secret name cannot be changed after form submission."). The Figma copy doesn't have one.
  • Both of these need UX sign-off from @sayobittencourt.

How to set up and validate locally

  1. Make sure you have an Ultimate license and OpenBao running in your GDK (see doc/howto/openbao.md in the GDK repo).
  2. Enable the feature flags in a Rails console: 
    Feature.enable(:secrets_manager)
Feature.enable(:group_secrets_manager)
Feature.enable(:secrets_manager_instance_enrollment)
  3. Enroll the instance in Admin > Settings > General > GitLab Secrets Manager (/admin/application_settings/general#js-secrets-manager-instance-enrollment-settings).
  4. As a group Owner, enable Secrets Manager for a group and a project in it, then wait for provisioning to finish.
  5. Go to /<group>/<project>/-/secrets/new:
    1. Check the description "Secret name cannot be changed after form submission." sits under the Name label, above the input.
    2. Type my-secret name&. The format error appears straight away, without leaving the field.
    3. Paste 256 characters. The length error appears. 255 characters is accepted.
    4. Type MY_SECRET_1. No error.
    5. Clear the field. "This field is required." appears.
  6. Fill in every other field (value, description, environment, branch), then enter an invalid name and select Add secret. Nothing is submitted. Fix the name and submit, and the secret is created.
  7. Repeat on the group form at /groups/<group>/-/secrets/new.
  8. Open an existing secret's edit page (/-/secrets/<name>/edit) and check the Name field isn't there.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports