Skip to content

Build out secrets index page

Miranda Fluharty requested to merge 424457-secrets-index-page into master

What does this MR do and why?

#⃣ For #424457 (closed), part of &11373

🖌 Design for reference: https://www.figma.com/file/35js99Rv49gso5PiYnQygo/Pipeline-Security-Main-File?type=design&node-id=792-58837

This MR builds out the index page of the secrets manager frontend, it:

  • adds name, labels, lastAccessed, and createdOn properties to each secret in the mock data that we're working with for now
  • modifies the secrets GraphQL queries to return these new properties
  • adds fields to the secrets table component that display the new properties:
    • the secret name (which is a link to the details page for the secret) and labels are now displayed in the first column
    • the date that the secret was last accessed and the date it was created on are shown as the next two columns
    • the last column holds a dropdown with actions to take (which is handled by the secret_actions_cell.vue component)
      • the Edit secret action links to the edit page for the secret
      • the Revoke and Delete actions will be implemented later
  • adds a secrets count badge to the table header
  • adds tests for the new functionality
  • modifies tests to use the same mock data as the UI does

In order to keep the scope reasonable, this MR does not handle the following:

  • sorting or pagination for secrets in the table
  • conditional display of secrets actions (i.e. only display Edit secret in the dropdown if the user has permission to edit that secret)
  • doing anything for the Revoke or Delete actions

MR acceptance checklist

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

Screenshots or screen recordings

Before After
Screenshot_2024-01-24_at_19.32.11 Screenshot_2024-01-26_at_15.58.32

How to set up and validate locally

Check out the branch and enable the feature flag for a root group:

git checkout 424457-secrets-index-page
echo "Feature.enable(:ci_tanukey_ui, Group.find_by_full_path(\"gitlab-org\"))" | gdk rails c
  1. have developer-or-higher access to a root group and enable the feature flag for that group
    • note: make sure this is a root group - enabling the flag for a subgroup will have no effect because we check for the flag on the project.group.root_ancestor/project.root_ancestor
  2. navigate to the secrets page for the root group, i.e.: http://gdk.test:3000/groups/gitlab-org/-/secrets
  3. verify that these fields are displayed: a. secret name (as a link to /secrets/secret_key/details) b. secret labels (as labels below the secret name) c. last accessed date/time d. created date/time e. an actions dropdown (with an Edit secret action that takes you to /secrets/secret_key/edit)

optional: test this for a project in the group:

  1. navigate to the secrets page for some project that belongs to the group, i.e. http://gdk.test:3000/gitlab-org/gitlab-test/-/secrets
  2. repeat step 3. above

to run tests:

yarn install
yarn jest ci/secrets
Edited by Miranda Fluharty

Merge request reports