Build out secrets index page

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

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

changed milestone to %16.9

added Category:Secrets Management Deliverable devopsverify frontend grouppipeline security needs weight secrets storage sectionci typefeature workflowready for development + 1 deleted label

assigned to @mfluharty

added 1 commit

• b9517de5 - Draft

Compare with previous version

marked this merge request as draft

changed title from Draft: Draft to Draft: Secrets index page

changed the description

	2 Warnings
⚠	a9895dd3: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
⚠	This merge request contains lines with testid selectors. Please ensure e2e:package-and-test job is run.

	1 Message
📖	CHANGELOG missing: If this merge request needs a changelog entry, add the Changelog trailer to the commit message you want to add to the changelog. If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.

testid selectors

The following changed lines in this MR contain testid selectors:

ee/app/assets/javascripts/ci/secrets/components/secrets_table/secret_actions_cell.vue

+          data-testid="secret-details-link"

ee/app/assets/javascripts/ci/secrets/components/secrets_table/secrets_table.vue

-          data-testid="new-secret-button"
+            <span class="gl-new-card-count" data-testid="secrets-count">{{ secretsCount }}</span>
+          <gl-button size="small" :to="$options.NEW_ROUTE_NAME" data-testid="new-secret-button">
-          <router-link data-testid="secret-details-link" :to="getDetailsRoute(key)">
+            data-testid="secret-details-link"
+          <time-ago :time="lastAccessed" data-testid="secret-last-accessed" />
+            data-testid="secret-created-at"

If the e2e:package-and-test job in the qa stage has run automatically, please ensure the tests are passing. If the job has not run, please start the trigger-omnibus-and-follow-up-e2e job in the qa stage and ensure the tests in follow-up-e2e:package-and-test-ee pipeline are passing.

For the list of known failures please refer to the latest pipeline triage issue.

If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.

Reviewer roulette

Category	Reviewer	Maintainer
frontend	@rhardarson (UTC+1, 1 hour ahead of author)	@xanf (UTC+2, 2 hours ahead of author)
~"Verify"	Reviewer review is optional for ~"Verify"	@mrincon (UTC+1, 1 hour ahead of author)

Please check reviewer's status!

• Reviewer is available!
• Reviewer is unavailable!

Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.

If needed, you can retry the 🔁 danger-review job that generated this comment.

Generated by 🚫 Danger

added 809 commits

• b9517de5...0efc6da3 - 807 commits from branch master
• ae8ddb7b - Scaffold secrets index page
• b9041f9e - Split secret actions cell into its own component

Compare with previous version

changed the description

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 860f1410 and e4b6e0c7

✨ Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	4.22 MB	4.22 MB	-	0.0 %
mainChunk	3.22 MB	3.22 MB	-	0.0 %

😨 Significant Growth: 2

Expand

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
pages.groups.secrets	312.24 KB	442.08 KB	+129.84 KB	41.6 %
pages.projects.secrets	340.36 KB	470.19 KB	+129.84 KB	38.1 %

---

Your MR has at least one entrypoint growing significantly (more > 1 KB or 2%). If you write new or extend existing features, this is expected and there is nothing to worry about.

Please consider pinging someone from the FE Foundations (@leipert, @markrian, @pgascouvaillancourt, @sdejonge or @thutterer) for review, if you are unsure about the size increase.

Note: We do not have exact data for 860f1410. So we have used data from: 8159d190.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.

Please look at the full report for more details

---

Read more about how this report works.

Generated by 🚫 Danger

E2E Test Result Summary

allure-report-publisher generated test report!

e2e-test-on-gdk: ✅ test report for e4b6e0c7

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Verify      | 31     | 0      | 0       | 0     | 31    | ✅     |
| Plan        | 4      | 0      | 0       | 0     | 4     | ✅     |
| Govern      | 3      | 0      | 0       | 0     | 3     | ✅     |
| Package     | 0      | 0      | 1       | 0     | 1     | ➖     |
| Create      | 8      | 0      | 3       | 0     | 11    | ✅     |
| Data Stores | 2      | 0      | 0       | 0     | 2     | ✅     |
| Monitor     | 4      | 0      | 0       | 0     | 4     | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 52     | 0      | 4       | 0     | 56    | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+

e2e-review-qa: ✅ test report for 77786bf6

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Govern      | 3      | 0      | 0       | 0     | 3     | ✅     |
| Monitor     | 4      | 0      | 0       | 0     | 4     | ✅     |
| Create      | 8      | 0      | 3       | 0     | 11    | ✅     |
| Plan        | 3      | 0      | 1       | 0     | 4     | ✅     |
| Package     | 0      | 0      | 1       | 0     | 1     | ➖     |
| Data Stores | 2      | 0      | 0       | 0     | 2     | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 20     | 0      | 5       | 0     | 25    | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+

e2e-package-and-test: ✅ test report for e4b6e0c7

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Verify      | 150    | 0      | 27      | 6     | 177   | ✅     |
| Create      | 148    | 0      | 24      | 4     | 172   | ✅     |
| Monitor     | 8      | 0      | 0       | 0     | 8     | ✅     |
| Plan        | 8      | 0      | 0       | 0     | 8     | ✅     |
| Govern      | 6      | 0      | 0       | 0     | 6     | ✅     |
| Package     | 0      | 0      | 2       | 0     | 2     | ➖     |
| Data Stores | 4      | 0      | 0       | 0     | 4     | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 324    | 0      | 53      | 10    | 377   | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+

added 171 commits

• b9041f9e...05e76336 - 169 commits from branch master
• 7245d144 - Scaffold secrets index page
• 1470b3f2 - Split secret actions cell into its own component

Compare with previous version

added 1 commit

• 65c33234 - Edit secret should go to the edit page

Compare with previous version

marked this merge request as ready

changed title from Secrets index page to Build out secrets index page

added feature flagexists label

changed the description

@mgandres Could you do the initial/verify review for this please? 🙇🏻