Show an error when API fuzzing configuration fails to load

What does this MR do and why?

The API Fuzzing configuration page crashes when the GraphQL query fails or returns null. The component has multiple issues: no data() declaration for apiFuzzingCiConfiguration, destructures project without a null check, has no error handling, and renders the form immediately when loading ends. When the query fails, data() tries to read scanModes of undefined and every field binding then fails.

The warnings are: Invalid prop: type check failed for prop "apiFuzzingCiConfiguration". Expected Object, got Undefined, Error in data(): ... (reading 'scanModes'), Error in render: ... (reading 'value'), and Property or method "targetUrl" is not defined. In the affected spec, the stubbed profiles YAML response has an empty body, causing the query to fail.

Fix: follow the SAST configuration app pattern. Declare the result in data(), read project?.apiFuzzingCiConfiguration, set hasLoadingError in both result and error handlers, and render a GlAlert with a message instead of the form. Add a new i18n string "Could not load the API fuzzing configuration. Refresh the page to try again."

Changes made:

  • ee/app/assets/javascripts/security_configuration/api_fuzzing/components/app.vue
  • ee/spec/frontend/security_configuration/api_fuzzing/components/app_spec.js
  • locale/gitlab.pot

How to set up and validate locally

  1. Open Admin > Security configuration > API Fuzzing.
  2. The form should load without errors.
  3. Block network access to the API fuzzing profiles URL or mock a query failure.
  4. The form should show an alert instead of crashing.
  5. Check the browser console shows no [Vue warn] line for these warnings.

MR acceptance checklist

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

References

🤖 Generated with Claude Code

Edited by Miguel Rincon

Merge request reports

Loading
Loading