Add the Organization Access Artifact Registry members page

What does this MR do and why?

Adds the Artifact Registry access page at /o/:organization_path/-/access/artifact-registry. It uses mock data only, served through Apollo @client fields shaped like the real artifactRegistryRoleAssignments and artifactRegistryRoleAssignmentCounts. Real data comes in #629711, which removes the directive and the shared mock resolvers.

Page: heading "Artifact Registry" with no description. Stat cards: Admins, Managers, and Total members.

  • "Filter list" on Admins sets the Role filter to Artifact Admin.
  • "Filter list" on Managers sets the Role filter to Artifact Manager (ARTIFACT_MANAGER).
  • The counts come from artifactRegistryRoleAssignmentCounts, so they stay right past the first page of members.

Search: GlFilteredSearch with terms as tokens.

  • Free text matches name or username.
  • A Role token. Its options are Artifact Admin, Artifact Manager, Artifact Contributor, and Artifact Viewer.
  • Filtering is client side over the first 100 assignments. Server-side role filtering and paging come with real data in #629711.
  • Clearing resets the list.

Members table: GlTableLite with stacked="md". Columns are Member (avatar, name, @username), Role, and Access granted (date). There is no Actions column. States: loading, empty ("Grant access to members"), and no matches ("No results found"). Overview page: both pages read the same mock assignments, so they show matching numbers: 5 members (1 Admin, 2 Managers, 1 Contributor, 1 Viewer). Mock profiles link to #, not to real accounts.

Files

  • resource_access_app.vue is generic. Nothing in it is AR-specific. It reads RESOURCES[resourceKey].
  • member_stats.vue and members_table.vue.
  • Page entrypoint pages/organizations/access/artifact_registry/index.js and vue3_migration.yml.
  • initOrganizationAccessArtifactRegistry() in organizations/access/index.js.
  • graphql/queries/get_resource_members.query.graphql, plus adminRole, MAX_MEMBERS, and TOKEN_TYPE_ROLE in constants.js.

Tests: 53 Jest specs across 7 suites pass on Vue 2 and Vue 3. ESLint is clean. locale/gitlab.pot is regenerated.

Merge order: this MR is stacked. Merge !259772 (merged), then !262575 (merged), then this one. This MR targets the branch of !262575 (merged).

Deviations from the issue
  • Roles: the page uses the backend's 4 role values (ARTIFACT_ADMIN, MANAGER, CONTRIBUTOR, VIEWER). Role labels carry the Artifact prefix, as in the mockup: Artifact Admin, Artifact Manager, Artifact Contributor, and Artifact Viewer. ARTIFACT_MANAGER is "Artifact Manager", not "Owner", so it is not confused with the GitLab Owner role.
  • Stats shape: member_stats takes stats as { title, value, filter? }. filter is a ready search token. One event drives both filters.
  • Filter list: it replaces the current search.

References

Screenshots or screen recordings

Artifact Registry members page in GDK, with mock data:

Artifact Registry members page

How to set up and validate locally

  1. In the Rails console, enable the feature flag.
    Feature.enable(:organization_access_ui)
    Feature.enable(:org_stage_la_100) # organization pages return 404 without it
  2. Check out this branch.
  3. As an organization owner, visit /o/<org-path>/-/access.
  4. Click "5 members" to reach the Artifact Registry page.
  5. Try the search, both filters, both "Filter list" buttons, and clear.
  6. Narrow the window to see the stacked table.

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.

🤖 Generated with Claude Code

Edited by Tim Rizzi

Merge request reports

Loading
Loading