Create DAP Permission Settings Component

Summary

Build the main UI component for DAP (Duo Agent Platform) role-based permission controls that allows administrators to configure which roles can perform "Manage" and "Run" actions.

Background

As part of the DAP role-based permissions epic (#19742 (closed)), we need to create the core frontend component that will be integrated into GitLab Duo settings pages to provide granular permission controls.

Requirements

Component Features

• Create Vue component for DAP permission settings
• Implement dropdown/select controls for two permission types:
  • Manage permission (Create, Duplicate, Edit, Delete, Show)
  • Run permission (Execute agents and flows)
• Support role selection from available roles:
  • Developer, Maintainer, Owner, Admin (SM)
• Default values should match current behavior:
  • Manage: Maintainer+
  • Execute: Guest+
  • Execute Async: Developer+
  • Enable on projects: Maintainer+

Technical Implementation

• Use GitLab UI components and design system
• Follow existing patterns from Duo settings pages
• Implement proper prop validation
• Add proper data binding and event handling
• Include loading states and disabled states

Validation & UX

• Client-side validation for role selections
• Ensure "Manage" permission is limited to appropriate roles (Maintainer+)
• Add helpful labels and descriptions for each permission type
• Show visual feedback for changes from default values
• Handle edge cases and invalid configurations

Design Reference

Follow the design proposal from the epic:

• Figma design: https://www.figma.com/board/hOiNqnzdqAOiBhn7oYPM64/%F0%9F%9A%A7--19119-Permissions---Governance?node-id=184-1512&p=f&t=KakpITZaU9xk3IYP-0

Group settings

• We could place the new form in the group settings before the Save changes button.
• URL: http://gdk.test:8080/groups/foo/-/settings/gitlab_duo/configuration
• GITLAB_SIMULATE_SAAS=1

Before	After

Instance settings

• We could place the new form in the instance settings before the Save changes button.
• URL: http://gdk.test:8080/admin/gitlab_duo/configuration
• GITLAB_SIMULATE_SAAS=0

Before	After

Acceptance Criteria

• Vue component renders permission controls for both "Manage" and "Execute" actions
• Role dropdowns show all available GitLab roles
• Component validates that Manage permission requires Maintainer+ roles
• Default values match current DAP permission behavior
• Component follows GitLab UI design system and accessibility standards
• Unit tests cover component functionality and validation
• Component can be imported and used in Duo settings pages

Technical Notes

• Component should be framework-agnostic enough to work in both instance-level and group-level contexts
• Consider using existing permission-related components as reference.
• Ensure component works with feature flag dap_customized_

Related Issues

• Parent Epic: #19742 (closed) - [Frontend] Role-based permissions controls DAP
• Parent Epic: #19601 - Implement role-based access permissions for DAP
• Depends on: #575453 (closed) - Default permission verification
• Related: #578552 (closed) - Backend API implementation

Duo Agent generated