Webhooks Migration to Vue - Follow up (#588362) · Issues · GitLab.org / GitLab

Webhooks Migration to Vue - Follow up

This issue captures the remaining tasks to be completed for the webhooks migration to Vue, initiated in https://gitlab.com/gitlab-org/gitlab/-/work_items/513631. #### **Remaining** **(migrate to Vue and new designs)** * Custom webhook template textarea * SSL verification checkbox * Advanced options section reorganization https://gitlab.com/gitlab-org/gitlab/-/issues/583700 **Other tasks** * Prevent saving the form if no triggers are selected https://gitlab.com/gitlab-org/gitlab/-/work_items/588361 * Migrate breadcrumbs and titles, as below * Resolve test ambiguity - https://gitlab.com/gitlab-org/gitlab/-/work_items/583590 * Resolve the migration to work item events https://gitlab.com/gitlab-org/gitlab/-/work_items/587487 * https://gitlab.com/gitlab-org/gitlab/-/work_items/513962 \[Webhook: Project, group, instance\] Section shouldn't be nested within a section. ## Design description cf. https://gitlab.com/gitlab-org/gitlab/-/issues/499697#note_2199627198 The original issue https://gitlab.com/gitlab-org/gitlab/-/work_items/513631 captured work for 1. Redesigning Webhooks settings pages for Group and Projects - [Figma link :link:](https://www.figma.com/design/AfIeGfKGRf5WIrV4dinUkc/Webhooks-edit-form?node-id=1-28530&t=98roE2dF4rk2E0YB-1) - [Prototype: Group webhooks](https://www.figma.com/proto/AfIeGfKGRf5WIrV4dinUkc/Webhooks-edit-form?page-id=0%3A1&node-id=1-43333&p=f&viewport=-984%2C-1657%2C0.58&t=AeaZb3bFfapJpsK2-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=1%3A43333) - [Prototype: Project webhooks](https://www.figma.com/proto/AfIeGfKGRf5WIrV4dinUkc/Webhooks-edit-form?page-id=1%3A28485&node-id=1-44746&p=f&viewport=495%2C-851%2C0.43&t=9YR9gH7ptxgoL45R-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=1%3A44746) 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](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 !179072+s 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 https://gitlab.com/gitlab-org/gitlab/-/issues/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.

issue