## Summary Complete the webhooks settings form migration to Vue by converting the "Advanced options" section from HAML to Vue components. ## Scope This issue covers migrating the following fields to Vue within a new "Advanced options" section: 1. **URL masking** - This field exists today but has no legend. Add the legend "URL masking" 2. **Custom headers** - Nested CRUD component (depends on !179072 which is merged) - Specify that the container tag should be `div` for this nested CRUD component to avoid nesting a semantic `<section>` within a `<section>` (this also resolves #513962) 3. **Custom webhook template textarea** 4. **SSL verification checkbox** 5. **Handle any docs updates** * Eg. Go through https://docs.gitlab.com/api/get_started/get_started_extending/#step-2-set-up-webhooks carefully ## Implementation Details - Use the `SettingsBlock` component to contain the "Advanced settings" section - Reference: [http://localhost:9002/?path=/story/vue-shared-settings-settings-block--default](http://localhost:9002/?path=/story/vue-shared-settings-settings-block--default) - Maintain the field order as specified above - Ensure proper semantic HTML structure (no nested sections) ## Out of Scope - Layout of existing hooks inside the CRUD component when not editing or adding - Recent events section at the bottom of the page when editing an existing webhook - Breadcrumbs and page titles consolidation (covered separately) - Trigger checkboxes migration (covered in #578783) ## Related Issues - Parent epic: #513631 - Convert Webhooks settings page to Vue and rearrange - Related: #513962 - Section shouldn't be nested within a section - Depends on: !179072 (merged) - Enable specifying a semantic element for CRUD components ## Acceptance Criteria - [ ] Advanced options section is rendered using SettingsBlock component - [ ] All four fields (URL masking, Custom headers, Custom webhook template, SSL verification) are migrated to Vue - [ ] URL masking field has proper legend - [ ] Custom headers CRUD component uses `div` container tag - [ ] Tests are updated to reflect the new Vue structure - [ ] No nested `<section>` elements in the DOM - [ ] Docs are up to date