Update DAST Profiles library UI
What does this MR do?
Implements #294229 (closed) - Updating the following designs
Design updates
Table Component (used by both site & scanner profile)
- Add table headers & fix column width
- Truncate long profile names
- Update table rows to highlight on hover & navigate on click
- Move
Edit
andDelete
buttons to dropdown
Site profile page
- Use tertiary buttons for
Validate
andRevoke validation
- Use GlBadges to denote status
Scanner profile page
- Add scan mode column
Screenshots (strongly suggested)
Before | After |
---|---|
Follow-up
How to test
- Enable the feature flag.
echo "Feature.enable(:security_on_demand_scans_site_validation)" | rails c
- Apply the following patch to mock site validations (
pbpaste | git apply
)
diff --git a/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_profiles.vue b/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_profiles.vue
index 8912e42603f..ec0660123d3 100644
--- a/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_profiles.vue
+++ b/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_profiles.vue
@@ -100,7 +100,19 @@ export default {
if (!error) {
const { project } = data;
const profileEdges = project?.[profileType]?.edges ?? [];
- const profiles = profileEdges.map(({ node }) => node);
+ const profiles = profileEdges.map(({ node }, index) => ({
+ ...node,
+ validationStatus:
+ index < 2
+ ? 'PASSED_VALIDATION'
+ : index > 4
+ ? index > 6
+ ? 'INPROGRESS_VALIDATION'
+ : 'PENDING_VALIDATION'
+ : index < 3
+ ? 'NONE'
+ : 'FAILED_VALIDATION',
+ }));
const pageInfo = project?.[profileType].pageInfo;
this.profileTypes[profileType].profiles = profiles;
- Navigate to the DAST Profiles library page in your GDK:
/:namespace/:project/-/security/configuration/dast_profiles
Conformity
Edited by Dheeraj Joshi