Frontend: Create and update group secrets

Why are we doing this work

This is for integrating the mutations for creating and updating group secrets. We will reuse the secrets form for project secrets manager, but with a few modifications to make it applicable for group secrets.

This issue also includes UX changes for the form.

Before we can start the work for group secrets, however, we need to do a bit of refactoring in the code to allow for the current secrets manager code to manage both project and group secrets.

Implementation table

header	header
backend	#577342
frontend	👈 You are here!

Implementation plan

Refactor

The refactor will touch a lot of files, so I'll break this up into several MRs:

MR	Description
!219061 (merged)	Create a context config that will house the project and group GraphQL queries and mutations. For this step, we will refactor the code to use the config only for GraphQL queries (fetch secrets list, secret details, secrets needing rotation, secrets manager status, group and project environments for the dropdown in the secrets form).
!221837 (merged)	Use the context config for GraphQL mutations (create/update/delete secrets)

Group secrets

After the refactor is done, we can then start on the following work.

MR	Description
!218147 (merged), more to be added	Update the UX with suggested changes
!222232	Add group mutations for creating and updating secrets (when available)

The UX changes are as follows. We will be reusing the same Vue component for the project secrets form, but with the following changes for groups:

• Instead of selecting the branch scope, users can tick a checkbox that allows group secrets to only be used in protected branches or not, similar to the Protected Branches field from the CI/CD Variable drawer (see #479575 (comment 2803879558))

  

• We will also remove the expiration field for both project and group secret form. This will be implemented post-GA instead. See #577464 (comment 2827044787). This is implemented in !218147 (merged)

• From #581963: Remove disabled button behavior from "Add secret"/main CTA and check the form for errors when the user clicks the button before actual data submission. Additionally:

  • Use field-level validation for required form fields.
  • If there are field errors, display the error messages below each form field following pajamas patterns so that users can resolve them and submit the form.

Verification steps

1. Upload a Premium license (or above).
2. Set up openbao and enable the secrets manager on your gdk.
3. Enable the secrets_manager_group feature flag.
4. Go to your project/group settings (Settings > General) and expand Visibility, project features, permissions or Permissions and group features and enable the group secrets manager.
5. Go to /path-to-group/-/secrets to create and update your secrets.