Webhooks Migration to Vue - Follow up

This issue captures the remaining tasks to be completed for the webhooks migration to Vue, initiated in #513631 (closed).

Remaining

(migrate to Vue and new designs)

• Custom webhook template textarea
• SSL verification checkbox
• Advanced options section reorganization #583700

Other tasks

• Prevent saving the form if no triggers are selected #588361
• Migrate breadcrumbs and titles, as below
• Resolve test ambiguity - #583590
• Resolve the migration to work item events #587487
• #513962 [Webhook: Project, group, instance] Section shouldn't be nested within a section.

Design description

cf. #499697 (comment 2199627198)

The original issue #513631 (closed) captured 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.