Loading
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: trueReferences
- prototype: https://security-coverage-prototype-0b2bbb.gitlab.io/security-inventory-profiles/#/security-configuration/enable-scanners
- issue: [Frontend] Support custom Secret Detection prof... (#624190)
- frontend plan in the epic: gitlab-org#20198 (comment 3745722841)
Screenshots or screen recordings
| Before | After |
|---|---|
![]() |
![]() |
How to set up and validate locally
git checkout 624190-add-source-badges-to-scan-profile-dropdowns- have a GitLab Ultimate licence
- go to a group where you're a maintainer/owner =>
Secure=>Security configuration - 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
}
}- on the
Scannerstab, selectEnable scanners - on the
Select approachstep, chooseAdvanced setup, then selectStart advanced setup - on the
Select projectsstep, pick at least one project, then selectSelect scanners - on the
Select scannersstep, tickSecret detectionto enable the dropdown - open the
Secret detectioncard'sConfiguration profiledropdown - check that:
- every option carries a badge, flush against the right edge of the dropdown item
- a GitLab-recommended profile should show a
GitLabbadge - 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

