Update EE GraphQL queries and mutations to include memberRole data
## Context
| | |
|---|---|
| **Phase** | 5 of 6 |
| **Parallel with** | https://gitlab.com/gitlab-org/gitlab/-/work_items/594887+ <br> https://gitlab.com/gitlab-org/gitlab/-/work_items/594888+ <br> https://gitlab.com/gitlab-org/gitlab/-/work_items/594890+ |
| **Blocked by** | https://gitlab.com/gitlab-org/gitlab/-/work_items/594883+ <br> https://gitlab.com/gitlab-org/gitlab/-/work_items/594884+ <br> https://gitlab.com/gitlab-org/gitlab/-/work_items/594885+ <br> https://gitlab.com/gitlab-org/gitlab/-/work_items/594886+ |
| **Unblocks** | https://gitlab.com/gitlab-org/gitlab/-/work_items/594891+ |
## Summary
Update the EE GraphQL query and mutation files used by the branch rules UI to request and handle `memberRole` data in access levels.
## Background
The branch rules UI uses two EE-specific GraphQL documents:
1. `ee/app/assets/javascripts/projects/settings/branch_rules/queries/branch_rules_details.query.graphql` — fetches branch rules data including access levels
2. `ee/app/assets/javascripts/projects/settings/branch_rules/mutations/edit_branch_rule.mutation.graphql` — the `branchRuleUpdate` mutation
Both need to be updated to include `memberRole` in the access level fields so the UI can display and edit custom role access levels.
The Vue component(s) consuming these queries also need to handle the new `memberRole` data for display purposes.
## Relevant files
- `ee/app/assets/javascripts/projects/settings/branch_rules/queries/branch_rules_details.query.graphql`
- `ee/app/assets/javascripts/projects/settings/branch_rules/mutations/edit_branch_rule.mutation.graphql`
- Vue components in `ee/app/assets/javascripts/projects/settings/branch_rules/` that use these queries
## Changes required
### `branch_rules_details.query.graphql`
Add `memberRole` to the access level nodes in `mergeAccessLevels` and `pushAccessLevels`:
```graphql
mergeAccessLevels {
edges {
node {
accessLevel
accessLevelDescription
memberRole {
id
name
}
group { id name avatarUrl webUrl }
user { id name username avatarUrl webUrl }
}
}
}
pushAccessLevels {
edges {
node {
accessLevel
accessLevelDescription
memberRole {
id
name
}
group { id name avatarUrl webUrl }
user { id name username avatarUrl webUrl }
deployKey { id title user { name } }
}
}
}
```
### `edit_branch_rule.mutation.graphql`
Add `memberRole { id }` to the response fields, and ensure the mutation input can carry `memberRoleId`:
```graphql
mutation editBrachRuleEE($input: BranchRuleUpdateInput!) {
branchRuleUpdate(input: $input) {
errors
branchRule {
id
name
branchProtection {
# ...existing fields
mergeAccessLevels {
nodes {
accessLevel
accessLevelDescription
memberRole { id }
user { id }
group { id }
}
}
pushAccessLevels {
nodes {
accessLevel
accessLevelDescription
memberRole { id }
user { id }
group { id }
deployKey { id }
}
}
}
}
}
}
```
### Vue component updates
Find the Vue component(s) that process the query response to build the `preselectedItems` array passed to `access_dropdown.vue`. Update them to include custom role items:
```javascript
// When mapping access level nodes to preselected items:
if (node.memberRole) {
return {
type: LEVEL_TYPES.MEMBER_ROLE,
member_role_id: parseInt(node.memberRole.id, 10),
name: node.memberRole.name,
// ...other needed fields
};
}
```
Similarly, when building the mutation input from the `selection` payload, map `member_role_id` entries to `{ memberRoleId: "gid://gitlab/MemberRole/N" }` GlobalID format.
## Testing
- Jest: query correctly requests `memberRole` fields
- Jest: mutation input correctly formats `memberRoleId` as GlobalID
- Jest: component maps `memberRole` response data to `MEMBER_ROLE` preselected item type
- Jest: component correctly sends `memberRoleId` in mutation variables when a custom role is in the selection
## Dependencies
- Issue 9 (GraphQL type — `memberRole` field must exist on the server schema)
- Issue 10 (GraphQL input — `memberRoleId` argument must be accepted by the mutation)
- Issues 13 & 14 (frontend dropdown — custom role selection must be possible)
## Labels
issue