Simplified integration settings page

Description

As part of simplifying settings we want to improve the usability of the integrations page (current screenshot). Some inspiration: Segment.io, Slack

Proposal

• “Project services” are simply called “Integrations” (#37911 (moved) will rename them everywhere else outside of the “Integrations” page)
• Two lists of integrations using company/product logos: one for active integrations and another to add an integration
  • As integrations are configured, they move from the “Add an integration” list to the “Active integrations” list.
• Webhooks are just another "integration" and shouldn't be treated separately
  • You can have multiple webhooks, and for that, a counter badge is shown next to the “Webhook” list item indicating how many configurations there are
  • Have a separate page for listing webhooks
  • Have a separate page for creating webhooks (the same model we already have for editing webhooks)
  • If there are no Webhooks, the “Webhooks” entry should be in the “Add an integration” list.
  • When in the “Add an integration” list, clicking “Webhooks” should direct the user to the “New webhook” page.
  • When in the “Active integrations” list, clicking “Webhooks” should direct the user to the “Webhooks” list page.

Design

Check the design specs (for implementation notes, spacing, sizes, colors, text copying, and exported assets)

• Hide notes in the top-right corner
• Use the slices menu or select an image layer to save exported assets (svg/png)

Mobile webhooks design should match our design for mobile tables:

Links / references

Documentation blurb

(Write the start of the documentation of this feature here, include:

1. Why should someone use it; what's the underlying problem.
2. What is the solution.
3. How does someone use this

During implementation, this can then be copied and used as a starter for the documentation.)