Observability Onboarding: Show otel tile on integrations page (#189163)

Similar to how APM is shown as an integration as well, show the new
OTel-based flow on the integrations page so people find it from there as
well:

<img width="991" alt="Screenshot 2024-07-25 at 11 32 46"
src="https://github.com/user-attachments/assets/4d806ed1-4b01-4ac8-985c-0e59708fa4c6">

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

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(55);
+        expect(resp.body.length).to.be(56);
 
         // Test for sample data card
         expect(resp.body.findIndex((c: { id: string }) => c.id === 'sample_data_all')).to.be.above(

x-pack/plugins/observability_solution/observability_onboarding/kibana.jsonc

@@ -20,7 +20,8 @@
       "discover",
       "share",
       "fleet",
-      "security"
+      "security",
+      "customIntegrations",
     ],
     "optionalPlugins": [
       "cloud",

x-pack/plugins/observability_solution/observability_onboarding/server/plugin.ts

@@ -13,6 +13,7 @@ import type {
   PluginInitializerContext,
 } from '@kbn/core/server';
 import { mapValues } from 'lodash';
+import { i18n } from '@kbn/i18n';
 import { getObservabilityOnboardingServerRouteRepository } from './routes';
 import { registerRoutes } from './routes/register_routes';
 import { ObservabilityOnboardingRouteHandlerResources } from './routes/types';
@@ -83,6 +84,27 @@ export class ObservabilityOnboardingPlugin
       },
     });
 
+    plugins.customIntegrations.registerCustomIntegration({
+      id: 'otel',
+      title: i18n.translate('xpack.observability_onboarding.otelTile.title', {
+        defaultMessage: 'OpenTelemetry',
+      }),
+      categories: ['observability'],
+      uiInternalPath: '/app/observabilityOnboarding/otel-logs',
+      description: i18n.translate('xpack.observability_onboarding.otelTile.description', {
+        defaultMessage:
+          'Collect logs and host metrics using the Elastic distribution of the OpenTelemetry Collector',
+      }),
+      icons: [
+        {
+          type: 'svg',
+          src: core.http.staticAssets.getPluginAssetHref('opentelemetry.svg') ?? '',
+        },
+      ],
+      shipper: 'tutorial',
+      isBeta: true,
+    });
+
     return {};
   }
 

x-pack/plugins/observability_solution/observability_onboarding/server/types.ts

@@ -15,6 +15,10 @@ import { FleetSetupContract, FleetStartContract } from '@kbn/fleet-plugin/server
 import { SecurityPluginSetup, SecurityPluginStart } from '@kbn/security-plugin/server';
 import { ObservabilityPluginSetup } from '@kbn/observability-plugin/server';
 import { UsageCollectionSetup } from '@kbn/usage-collection-plugin/server';
+import {
+  CustomIntegrationsPluginSetup,
+  CustomIntegrationsPluginStart,
+} from '@kbn/custom-integrations-plugin/server';
 
 export interface ObservabilityOnboardingPluginSetupDependencies {
   data: DataPluginSetup;
@@ -23,6 +27,7 @@ export interface ObservabilityOnboardingPluginSetupDependencies {
   usageCollection: UsageCollectionSetup;
   fleet: FleetSetupContract;
   security: SecurityPluginSetup;
+  customIntegrations: CustomIntegrationsPluginSetup;
 }
 
 export interface ObservabilityOnboardingPluginStartDependencies {
@@ -32,6 +37,7 @@ export interface ObservabilityOnboardingPluginStartDependencies {
   usageCollection: undefined;
   fleet: FleetStartContract;
   security: SecurityPluginStart;
+  customIntegrations: CustomIntegrationsPluginStart;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface

x-pack/plugins/observability_solution/observability_onboarding/tsconfig.json

@@ -42,7 +42,8 @@
     "@kbn/utility-types",
     "@kbn/spaces-plugin",
     "@kbn/ebt",
-    "@kbn/deeplinks-analytics"
+    "@kbn/deeplinks-analytics",
+    "@kbn/custom-integrations-plugin"
   ],
   "exclude": [
     "target/**/*"