[7.17] Add Elasticsearch Serverless Forwarder to integrations UI (#13…

…0085) (#133477)

* Add Elasticsearch Serverless Forwarder to integrations UI (#130085)

(cherry picked from commit 34e51a6)

# Conflicts:
#	test/api_integration/apis/custom_integration/integrations.ts

* fix import CoreSetup

Co-authored-by: Mario Castro <mariocaster@gmail.com>

src/plugins/custom_integrations/common/index.ts

@@ -79,6 +79,7 @@ export const SHIPPER_DISPLAY = {
   sample_data: 'Sample data',
   tests: 'Tests',
   tutorial: 'Tutorials',
+  placeholders: 'Extra Integrations',
 };
 
 /**
@@ -110,6 +111,7 @@ export interface CustomIntegration {
   description: string;
   type: 'ui_link';
   uiInternalPath: string;
+  uiExternalLink?: string;
   isBeta: boolean;
   icons: CustomIntegrationIcon[];
   categories: IntegrationCategory[];

src/plugins/custom_integrations/server/external_integration/index.ts

@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { CoreSetup } from 'kibana/server';
+import { CustomIntegrationRegistry } from '../custom_integration_registry';
+import { CustomIntegrationIcon, IntegrationCategory, PLUGIN_ID } from '../../common';
+
+interface ExternalIntegration {
+  id: string;
+  title: string;
+  icon?: string;
+  euiIconName?: string;
+  description: string;
+  docUrlTemplate: string;
+  categories: IntegrationCategory[];
+}
+
+export const integrations: ExternalIntegration[] = [
+  {
+    id: 'esf',
+    title: i18n.translate('customIntegrations.placeholders.EsfTitle', {
+      defaultMessage: 'AWS Serverless Application Repository',
+    }),
+    icon: 'logo_esf.svg',
+    description: i18n.translate('customIntegrations.placeholders.EsfDescription', {
+      defaultMessage:
+        'Collect logs using AWS Lambda application available in AWS Serverless Application Repository.',
+    }),
+    docUrlTemplate: `https://serverlessrepo.aws.amazon.com/applications/eu-central-1/267093732750/elastic-serverless-forwarder`,
+    categories: ['aws', 'custom'],
+  },
+];
+
+export function registerExternalIntegrations(
+  core: CoreSetup,
+  registry: CustomIntegrationRegistry,
+  branch: string
+) {
+  integrations.forEach((integration: ExternalIntegration) => {
+    const icons: CustomIntegrationIcon[] = [];
+    if (integration.euiIconName) {
+      icons.push({
+        type: 'eui',
+        src: integration.euiIconName,
+      });
+    } else if (integration.icon) {
+      icons.push({
+        type: 'svg',
+        src: core.http.basePath.prepend(
+          `/plugins/${PLUGIN_ID}/assets/placeholders/${integration.icon}`
+        ),
+      });
+    }
+
+    registry.registerCustomIntegration({
+      uiInternalPath: '',
+      id: `placeholder.${integration.id}`,
+      title: integration.title,
+      description: integration.description,
+      type: 'ui_link',
+      shipper: 'placeholders',
+      uiExternalLink: integration.docUrlTemplate,
+      isBeta: false,
+      icons,
+      categories: integration.categories,
+    });
+  });
+}

src/plugins/custom_integrations/server/plugin.test.ts

@@ -28,7 +28,7 @@ describe('CustomIntegrationsPlugin', () => {
       expect(setup).toHaveProperty('getAppendCustomIntegrations');
     });
 
-    test('should register language clients', () => {
+    test('should register custom integrations', () => {
       const setup = new CustomIntegrationsPlugin(initContext).setup(mockCoreSetup);
       expect(setup.getAppendCustomIntegrations()).toEqual([
         {
@@ -40,7 +40,7 @@ describe('CustomIntegrationsPlugin', () => {
           uiInternalPath:
             'https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/branch/introduction.html',
           isBeta: false,
-          icons: [{ type: 'svg' }],
+          icons: [{ type: 'svg', src: undefined }],
           categories: ['elastic_stack', 'custom', 'language_client'],
         },
         {
@@ -52,7 +52,7 @@ describe('CustomIntegrationsPlugin', () => {
           uiInternalPath:
             'https://www.elastic.co/guide/en/elasticsearch/client/ruby-api/branch/ruby_client.html',
           isBeta: false,
-          icons: [{ type: 'svg' }],
+          icons: [{ type: 'svg', src: undefined }],
           categories: ['elastic_stack', 'custom', 'language_client'],
         },
         {
@@ -64,7 +64,7 @@ describe('CustomIntegrationsPlugin', () => {
           uiInternalPath:
             'https://www.elastic.co/guide/en/elasticsearch/client/go-api/branch/overview.html',
           isBeta: false,
-          icons: [{ type: 'svg' }],
+          icons: [{ type: 'svg', src: undefined }],
           categories: ['elastic_stack', 'custom', 'language_client'],
         },
         {
@@ -76,7 +76,7 @@ describe('CustomIntegrationsPlugin', () => {
           uiInternalPath:
             'https://www.elastic.co/guide/en/elasticsearch/client/net-api/branch/index.html',
           isBeta: false,
-          icons: [{ type: 'svg' }],
+          icons: [{ type: 'svg', src: undefined }],
           categories: ['elastic_stack', 'custom', 'language_client'],
         },
         {
@@ -88,7 +88,7 @@ describe('CustomIntegrationsPlugin', () => {
           uiInternalPath:
             'https://www.elastic.co/guide/en/elasticsearch/client/php-api/branch/index.html',
           isBeta: false,
-          icons: [{ type: 'svg' }],
+          icons: [{ type: 'svg', src: undefined }],
           categories: ['elastic_stack', 'custom', 'language_client'],
         },
         {
@@ -100,7 +100,7 @@ describe('CustomIntegrationsPlugin', () => {
           uiInternalPath:
             'https://www.elastic.co/guide/en/elasticsearch/client/perl-api/current/index.html',
           isBeta: false,
-          icons: [{ type: 'svg' }],
+          icons: [{ type: 'svg', src: undefined }],
           categories: ['elastic_stack', 'custom', 'language_client'],
         },
         {
@@ -112,7 +112,7 @@ describe('CustomIntegrationsPlugin', () => {
           uiInternalPath:
             'https://www.elastic.co/guide/en/elasticsearch/client/python-api/branch/index.html',
           isBeta: false,
-          icons: [{ type: 'svg' }],
+          icons: [{ type: 'svg', src: undefined }],
           categories: ['elastic_stack', 'custom', 'language_client'],
         },
         {
@@ -124,7 +124,7 @@ describe('CustomIntegrationsPlugin', () => {
           uiInternalPath:
             'https://www.elastic.co/guide/en/elasticsearch/client/rust-api/current/index.html',
           isBeta: false,
-          icons: [{ type: 'svg' }],
+          icons: [{ type: 'svg', src: undefined }],
           categories: ['elastic_stack', 'custom', 'language_client'],
         },
         {
@@ -136,9 +136,23 @@ describe('CustomIntegrationsPlugin', () => {
           uiInternalPath:
             'https://www.elastic.co/guide/en/elasticsearch/client/java-api-client/branch/index.html',
           isBeta: false,
-          icons: [{ type: 'svg' }],
+          icons: [{ type: 'svg', src: undefined }],
           categories: ['elastic_stack', 'custom', 'language_client'],
         },
+        {
+          id: 'placeholder.esf',
+          title: 'AWS Serverless Application Repository',
+          description:
+            'Collect logs using AWS Lambda application available in AWS Serverless Application Repository.',
+          type: 'ui_link',
+          shipper: 'placeholders',
+          uiInternalPath: '',
+          uiExternalLink:
+            'https://serverlessrepo.aws.amazon.com/applications/eu-central-1/267093732750/elastic-serverless-forwarder',
+          isBeta: false,
+          icons: [{ type: 'svg' }],
+          categories: ['aws', 'custom'],
+        },
       ]);
     });
   });

src/plugins/custom_integrations/server/plugin.ts

@@ -13,6 +13,7 @@ import { CustomIntegration } from '../common';
 import { CustomIntegrationRegistry } from './custom_integration_registry';
 import { defineRoutes } from './routes/define_routes';
 import { registerLanguageClients } from './language_clients';
+import { registerExternalIntegrations } from './external_integration';
 
 export class CustomIntegrationsPlugin
   implements Plugin<CustomIntegrationsPluginSetup, CustomIntegrationsPluginStart>
@@ -37,6 +38,7 @@ export class CustomIntegrationsPlugin
     defineRoutes(router, this.customIngegrationRegistry);
 
     registerLanguageClients(core, this.customIngegrationRegistry, this.branch);
+    registerExternalIntegrations(core, this.customIngegrationRegistry, this.branch);
 
     return {
       registerCustomIntegration: (integration: Omit<CustomIntegration, 'type'>) => {

test/api_integration/apis/custom_integration/integrations.ts

@@ -22,7 +22,7 @@ export default function ({ getService }: FtrProviderContext) {
 
         expect(resp.body).to.be.an('array');
 
-        expect(resp.body.length).to.be(34);
+        expect(resp.body.length).to.be(35);
 
         // Test for sample data card
         expect(resp.body.findIndex((c: { id: string }) => c.id === 'sample_data_all')).to.be.above(

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx

@@ -50,7 +50,7 @@ export const mapToCard = (
   let uiInternalPathUrl;
 
   if (item.type === 'ui_link') {
-    uiInternalPathUrl = getAbsolutePath(item.uiInternalPath);
+    uiInternalPathUrl = item.uiExternalLink || getAbsolutePath(item.uiInternalPath);
   } else {
     let urlVersion = item.version;