feat(octohook): Add Octohook to the integrations directory (#24420)

* feat(octohook): Add Octohook to the integrations directory

* Add comment about fuzzy search

* Add alert rule

src/sentry/static/sentry/app/plugins/components/pluginIcon.tsx

@@ -25,6 +25,7 @@ import lighthouse from 'sentry-images/logos/logo-lighthouse.svg';
 import linear from 'sentry-images/logos/logo-linear.svg';
 import msteams from 'sentry-images/logos/logo-msteams.svg';
 import netlify from 'sentry-images/logos/logo-netlify.svg';
+import octohook from 'sentry-images/logos/logo-octohook.svg';
 import opsgenie from 'sentry-images/logos/logo-opsgenie.svg';
 import pagerduty from 'sentry-images/logos/logo-pagerduty.svg';
 import phabricator from 'sentry-images/logos/logo-phabricator.svg';
@@ -89,6 +90,7 @@ export const ICON_PATHS = {
   linear,
   msteams,
   netlify,
+  octohook,
   opsgenie,
   pagerduty,
   phabricator,

src/sentry/static/sentry/app/views/organizationIntegrations/constants.tsx

@@ -71,6 +71,7 @@ export const POPULARITY_WEIGHT: {
   rocketchat: 8,
   bitbucket_pipelines: 8,
   github_actions: 8,
+  octohook: 8,
 } as const;
 
 export const documentIntegrationList: DocumentIntegration[] = [
@@ -243,6 +244,28 @@ export const documentIntegrationList: DocumentIntegration[] = [
       },
     ],
   },
+  {
+    slug: 'octohook',
+    name: 'Octohook',
+    author: 'Octohook',
+    docUrl: 'https://docs.octohook.com/integrations/sentry.html',
+    description:
+      'Octohook is a platform that lets you visualize, debug and redistribute your webhooks.',
+    features: [
+      {
+        featureGate: 'webhook',
+        description: 'Record, forward or transform Sentry webhooks to other services.',
+      },
+      {
+        featureGate: 'alert-rule',
+        description:
+          'Configure Sentry rules to trigger notifications based on conditions you set, through internal integrations.',
+      },
+    ],
+    resourceLinks: [
+      {title: 'Documentation', url: 'https://docs.octohook.com/integrations/sentry.html'},
+    ],
+  },
 ];
 
 export const documentIntegrations: {

src/sentry/static/sentry/images/logos/logo-octohook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs><style>.a{fill:#8054e7;}</style></defs><path class="a" d="M3.78,39.09,2.47,40.43a.37.37,0,0,1-.24.1H1.42a.35.35,0,0,1-.3-.18c-2.53-4.74-.07-7.82.48-8.42a.32.32,0,0,1,.24-.11h.81a.31.31,0,0,1,.26.14l1.26,1.67a.32.32,0,0,0,.24.13l.8.08v0A38.41,38.41,0,0,1,8.38,23.54l-.71-.3a.39.39,0,0,0-.26,0l-1.2.51a.39.39,0,0,1-.26,0l-1-.4A.34.34,0,0,1,4.7,23a7,7,0,0,1,3.68-6.1.33.33,0,0,1,.38.06l.57.54a.35.35,0,0,1,.1.19l.25,1.47a.39.39,0,0,0,.13.21l.58.45a37.39,37.39,0,0,1,5.7-7.1l-.44-.41a.33.33,0,0,0-.23-.09H14.06a.33.33,0,0,1-.25-.12l-.44-.49a.35.35,0,0,1,0-.38,11.55,11.55,0,0,1,4-4,.33.33,0,0,1,.38,0l.56.44a.38.38,0,0,1,.12.27V9.6a.33.33,0,0,0,.11.25l.42.39A39.79,39.79,0,0,1,25.35,6l-.26-.51a.37.37,0,0,0-.22-.12l-.82-.1a.32.32,0,0,1-.28-.22l-.1-.3a.31.31,0,0,1,0-.28A5.36,5.36,0,0,1,27.9,2a.34.34,0,0,1,.34.2l.26.61a.33.33,0,0,1,0,.29l-.37.7a.33.33,0,0,0,0,.29l.19.44a46.92,46.92,0,0,1,8.17-2.73s1.35-.43,1.5,1.24c.11,1.31-1.75,2.65-1.75,2.65C22.36,17,18.6,27.52,19.5,40.55c.82,12,10.8,21.84,22.84,21.84A21.87,21.87,0,0,0,64.18,40.55c0-12-9.8-22.17-21.84-22.17a28.22,28.22,0,0,0-6.52.71c-4.61,1.17-8.43,5.87-9.93,7.84-1.17,1.54-2.06,1.7-2.06,1.7-1.25.19-.66-2.45-.66-2.45,1-5.84,7.67-13.95,7.67-13.95a47.38,47.38,0,0,1,8.45-7.51,10.1,10.1,0,0,1,6.54-1.67A37.66,37.66,0,1,1,4.69,40.55c0-.5,0-1,0-1.5L4.05,39A.34.34,0,0,0,3.78,39.09Z"/></svg>

tests/js/spec/components/search/sources/apiSource.spec.jsx

@@ -278,8 +278,9 @@ describe('ApiSource', function () {
       ]),
     });
 
+    // The return values here are because of fuzzy search matching.
     // There are no members that match
-    expect(mock.mock.calls[1][0].results).toHaveLength(5);
+    expect(mock.mock.calls[1][0].results).toHaveLength(6);
   });
 
   it('render function is called with correct results when API requests partially succeed', async function () {
@@ -326,8 +327,9 @@ describe('ApiSource', function () {
       ]),
     });
 
+    // The return values here are because of fuzzy search matching.
     // There are no members that match
-    expect(mock.mock.calls[1][0].results).toHaveLength(3);
+    expect(mock.mock.calls[1][0].results).toHaveLength(4);
   });
 
   it('render function is updated as query changes', async function () {
@@ -342,8 +344,9 @@ describe('ApiSource', function () {
     await tick();
     wrapper.update();
 
+    // The return values here are because of fuzzy search matching.
     // There are no members that match
-    expect(mock.mock.calls[1][0].results).toHaveLength(4);
+    expect(mock.mock.calls[1][0].results).toHaveLength(5);
     expect(mock.mock.calls[1][0].results[0].item.model.slug).toBe('foo-org');
 
     mock.mockClear();

tests/js/spec/views/organizationIntegrations/integrationListDirectory.spec.jsx

@@ -47,7 +47,7 @@ describe('IntegrationListDirectory', function () {
     it('shows installed integrations at the top in order of weight', async function () {
       expect(wrapper.find('SearchBar').exists()).toBeTruthy();
       expect(wrapper.find('PanelBody').exists()).toBeTruthy();
-      expect(wrapper.find('IntegrationRow')).toHaveLength(13);
+      expect(wrapper.find('IntegrationRow')).toHaveLength(14);
 
       [
         'bitbucket',
@@ -60,6 +60,7 @@ describe('IntegrationListDirectory', function () {
         'fullstory',
         'github_actions',
         'netlify',
+        'octohook',
         'rocketchat',
         'amazon-sqs',
         'la-croix-monitor',