FE: Implement Dynamic Cascading Dropdown UI with Rules-Based Configuration

Technical Scope

Develop the frontend implementation for the dynamic input selection mechanism that enables non-technical users to configure pipeline parameters through an intuitive cascading dropdown system.

Data Structure & Implementation

Implement the frontend components to handle the rules-based dynamic input configuration as defined in the backend API:

{
  "name": "instance_type",
  "type": "STRING",
  "options": [],
  "default": "",
  "required": true,
  "description": null,
  "regex": null,
  "rules": [
    {
      "when": {
        "cloud_provider": "aws",
        "environment": "development"
      },
      "options": ["t3.micro", "t3.small"],
      "default": "t3.micro"
    },
    {
      "when": {},
      "options": [],
      "default": null
    }
  ]
}

Technical Considerations

• Implement reactive updates to child dropdowns when parent values change
• Reset dependent dropdown values when a parent value changes to maintain valid combinations
• Handle visibility of inputs based on available options (hide inputs with empty options)
• Support up to 3 levels of dependency chains
• Ensure proper state management for form validation

Implementation Details

• Create a dependency resolver that determines which inputs are visible based on current selections
• Implement a state manager that tracks the current values of all inputs
• Build a UI component that dynamically updates available options based on the dependency rules
• Ensure proper error handling for invalid combinations

This implementation will directly address customer needs by providing Jenkins Active Choice-like functionality within GitLab's pipeline interface, enabling organizations to consolidate their CI/CD toolchain.