Add the Organization Access overview page with mock data

Tim Rizzirequested to merge
629701-organization-access-overview-mock into master

What does this MR do and why?

Adds the Organization Access overview page at /o/:organization_path/-/access. It uses mock data only.

The controller and HAML mount point came in !259770 (merged), behind the organization_access_ui wip flag. This MR adds the Vue app that renders in that mount point.

The page shows a table of resources. Each row has three columns:

  • Resource: an icon and a bold label.
  • Members: "N members". It links to the resource's members page when the resource has one. A second line breaks the count down by role, like "1 Admin · 2 Managers · 1 Contributor · 1 Viewer".
  • Managers: up to 3 members with the Artifact Manager role (ARTIFACT_MANAGER), each linked.

Stacked MR: this MR is stacked on !259772 (merged). That MR adds the Artifact Registry access sub-page and its artifactRegistryAccessOrganizationPath JS helper. Merge !259772 (merged) first. This MR targets its branch.

Mock data through Apollo: the page reads two @client fields shaped like the real API, answered by local resolvers in graphql/mock_resolvers.js:

  • artifactRegistryRoleAssignmentCounts for the counts (added in !259794 (closed)).
  • artifactRegistryRoleAssignments(roles: [ARTIFACT_MANAGER], first: 3) for the managers.

Next step: #632260 removes the @client directive and the resolvers, and passes the registry namespace ID.

What changed

  • Page entrypoint: ee/app/assets/javascripts/pages/organizations/access/index/index.js, plus vue3_migration.yml to match other organization pages.
  • App setup: ee/app/assets/javascripts/organizations/access/{index.js, constants.js, mock_data.js}. index.js creates the Apollo client with the mock resolvers.
  • GraphQL: graphql/queries/get_resource_access_summary.query.graphql and graphql/mock_resolvers.js.
  • Components: organization_access_app.vue (PageHeading and table) and resources_table.vue (GlTableLite with stacked="md").
  • Tests: 19 Jest specs cover the app, the resources table, the mock resolvers, and init. They pass on Vue 2 and Vue 3. ESLint is clean. locale/gitlab.pot is regenerated.
Why the roles differ from the issue

The issue lists the roles ADMIN, OWNER, CONTRIBUTOR, and VIEWER.

This MR uses the backend's 4 Artifact Registry role values instead: ARTIFACT_ADMIN, ARTIFACT_MANAGER, ARTIFACT_CONTRIBUTOR, and ARTIFACT_VIEWER. Phase 4 can then pass API data through with no remapping.

ARTIFACT_MANAGER is labelled "Artifact Manager". The Managers column lists holders of that role. We use "Manager", not "Owner", so it is not confused with the GitLab Owner role.

References

Screenshots or screen recordings

Overview page in GDK, with mock data:

Organization Access overview page

How to set up and validate locally

  1. Check out this branch. It includes !259772 (merged).
  2. 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
  3. Sign in as an organization owner.
  4. Visit /o/<org-path>/-/access.
  5. Check the table shows the Resource, Members, and Managers columns.
  6. Click a "N members" link and a manager link.
  7. Narrow the window below md. The table stacks.

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