Convert Webhooks settings page to Vue and rearrange

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Collaborate/take over this issue

Dev description

This issue converts the webhooks settings form from HAML to Vue components while implementing UX improvements. The form is used for both project and group webhook configuration. There is no feature flag. Changes are immediately active in prod.

Current status

Completed (Vue components):

• Name field
• Description field
• URL field (with URL variables)
• Secret token field
• Custom headers

Remaining (still in HAML):

• Trigger checkboxes (complex - has nested Vue component that needs extraction)
• Custom webhook template textarea
• SSL verification checkbox
• Advanced options section reorganization

Design description

cf. #499697 (comment 2199627198)

This issue is to capture work for

1. Redesigning Webhooks settings pages for Group and Projects
   • Figma link 🔗
   • Prototype: Group webhooks
   • Prototype: Project webhooks
2. Convert the page from a HAML rails form view to a Vue app

Design changes

1. Breadcrumbs and page titles should be consolidated
   1. On both the group and project webhooks page, the page title as it appears in the breadcrumb should be Webhooks settings (plural and sentence case). Currently these pages have very different titles in the breadcrumb ([Group name] / Group hooks for groups and [Group name] / [Project name] / Webhook Settings [wrong plurality and capitalization] for Project)
   2. The title as it appears on the page should be Webhooks. Currently on a group page, this says Group hooks.
   3. The title is an <h2> semantic element right now, but it should be changed to an <h1>.
2. Information architecture of add/edit webhook form
   1. Rearrange the fields in this order:
      1. Name
      2. Description
      3. URL
      4. Secret token
      5. Trigger checkbox group
      6. A new "Advanced options" section
         1. Use the SettingsBlock component (see storybook at http://localhost:9002/?path=/story/vue-shared-settings-settings-block--default) to contain the "Advanced settings" section
         2. It should contain:
            1. URL masking. This field exists today but has no legend. Be sure to add the legend URL masking
            2. Custom headers
               1. This depends on Enable specifying a semantic element for the CR... (!179072 - merged) • Chad Lavimoniere • 17.9
               2. 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

Note that the design of other aspects of the page, like the layout of existing hooks inside the CRUD component when not editing or adding, or the Recent events section at the bottom of the page when editing an existing webhook are not changed in this scope of work.

Video overview

2025-01-27_14-48-16