Skip to content

Refactor state management in DAST profiles sidebar

What does this MR do and why?

This MR resolves #362840 (closed)

Created as a follow-up of this review

This MR refactors state transitions in the sidebar.

Actions reduced to only two enabling and exiting editing mode with. Method can be called emitting different events, so it can be re-used.

Sidebar have 3 states

  • empty mode
  • reading mode
  • editing mode

Only one state can be visible at the time, so it is rendered with v-if and v-else-if

Empty state is extracted into separate component in order to clean up code of the sidebar component.

Sidebar functionality is broken down to 3 components

  • Empty state
  • Form for new profiles and editing existing
  • List of profiles

Describe in detail what your merge request does and why.

Screenshots or screen recordings

It is internal refactoring no visible changes in UI.

These are strongly recommended to assist reviewers and reduce the time to merge your change.

How to set up and validate locally

  1. Enable feature flag
   Feature.enable(:dast_ui_redesign)
  1. Go to any project /root/$PROJECT_ID/
  2. Go to /root/$PROJECT_ID/-/on_demand_scans/
  3. Go to new scan form by clicking new scan
  4. You need to create scanner or site profile
  5. Click edit button on profile selector or open side drawer and edit from a card

Numbered steps to set up and validate the change are strongly suggested.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Artur Fedorov

Merge request reports