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:
    • Guest, Planner, Reporter, Developer, Maintainer, Owner, Admin
  • Default values should match current behavior:
    • Manage: Maintainer+ (to be confirmed in #575453)
    • Run: Developer+ (to be confirmed in #575453)

Technical Implementation

  • Use GitLab UI components and design system
  • Follow existing patterns from Duo settings pages
  • Implement proper prop validation and TypeScript support
  • 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:

Acceptance Criteria

  • Vue component renders permission controls for both "Manage" and "Run" 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 duo_agent_platform_role_permissions

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 - Default permission verification
  • Related: #578552 - Backend API implementation

Duo Agent generated

Edited by Angelo Gulina