Add source badges to scan profile dropdowns

What does this MR do and why?

Add source badges to scan profile dropdowns

Add a badge to every option in the configuration profile dropdowns on
the Select scanners step of the Enable scanners wizard, reading GitLab
when gitlabRecommended is true and Custom when it is not, aligned to the
right edge of the panel.

Swap those dropdowns from GlDisclosureDropdown to GlCollapsibleListbox
and pass panel-match-trigger-width, so the panel opens at the same width
as the field below it and profile names fit on one line.
GlDisclosureDropdown pins its panel to a fixed 248px and offers no prop
to widen it. The listbox is the closer fit anyway: this control picks
one profile rather than firing an action, so it also gains a selected
state and the matching keyboard and ARIA behavior.

Key items by profile id, since a listbox value has to be a primitive,
and carry the profile itself on the item so the badge can read
gitlabRecommended.

Related to #624190
Changelog: added
EE: true

References

Screenshots or screen recordings

Before After
enable-scanners-select-scanners-badges-before enable-scanners-select-scanners-badges-after

How to set up and validate locally

git checkout 624190-add-source-badges-to-scan-profile-dropdowns
  1. have a GitLab Ultimate licence
  2. go to a group where you're a maintainer/owner => Secure => Security configuration
  3. create a custom profile belonging to this group for testing - in graphiql, send this mutation with your root group's id instead of 24:
expand for mutation
mutation {
  securityScanProfileCreate(
    input: {
      namespaceId: "gid://gitlab/Group/24"
      scanType: SECRET_DETECTION
      name: "Custom secret detection profile"
      description: "Secret detection profile, but it does what I want"
      stripDefaults: false
      triggers: [
        {
          triggerType: MERGE_REQUEST_PIPELINE
          configuration: {
            secretDetection: {
              secureAnalyzersPrefix: "registry.gitlab.com/security-products"
              imageSuffix: FIPS
              historicScan: true
              logOptions: "--all --since=2026-01-01"
              excludedPaths: ["spec/fixtures/**", "**/*.min.js"]
              rulesetGitReference: "refs/heads/main"
            }
          }
        }
        {
          triggerType: DEFAULT_BRANCH_PIPELINE
          configuration: { secretDetection: { historicScan: false } }
        }
        { triggerType: GIT_PUSH_EVENT }
      ]
    }
  ) {
    scanProfile {
      id
      name
      description
      scanType
      gitlabRecommended
      triggers
      triggerSettings {
        triggerType
        configuration {
          ... on SecretDetectionConfiguration {
            secureAnalyzersPrefix
            imageSuffix
            historicScan
            logOptions
            excludedPaths
            rulesetGitReference
          }
        }
      }
    }
    errors
  }
}
  1. on the Scanners tab, select Enable scanners
  2. on the Select approach step, choose Advanced setup, then select Start advanced setup
  3. on the Select projects step, pick at least one project, then select Select scanners
  4. on the Select scanners step, tick Secret detection to enable the dropdown
  5. open the Secret detection card's Configuration profile dropdown
  6. check that:
    • every option carries a badge, flush against the right edge of the dropdown item
    • a GitLab-recommended profile should show a GitLab badge
    • the profile name sits on the left and wraps onto a second line when it is too long for one line, rather than being cut off
    • the badge keeps its full width

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.

Related to #624190

Edited by Miranda Fluharty

Merge request reports

Loading
Loading