adopt recent UI changes for the same flow

Signed-off-by: Eric <[email protected]>

public/components/getting_started/components/getting_started_collectData.tsx

@@ -21,6 +21,7 @@ import {
   EuiButton,
   EuiIcon,
   EuiCard,
+  EuiSelectableOption,
 } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 
@@ -44,6 +45,7 @@ import { getWorkspaceIdFromUrl } from '../../../../../../src/core/public/utils';
 const cardOne = 'Logs';
 const cardTwo = 'Metrics';
 const cardThree = 'Traces';
+const OTEL_LOGS_OPTION = { label: 'Open Telemetry', value: 'otelLogs' };
 
 interface CollectAndShipDataProps {
   isOpen: boolean;
@@ -69,6 +71,9 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
   const [workflows, setWorkflows] = useState<any[]>([]);
   const [collectorOptions, setCollectorOptions] = useState<CollectorOption[]>([]);
   const [patternsContent, setPatternsContent] = useState<any[]>([]);
+  const [selectedIntegration, setSelectedIntegration] = useState<
+    Array<EuiSelectableOption<CollectorOption>>
+  >([OTEL_LOGS_OPTION]);
 
   const technologyJsonMap: Record<string, any> = {
     otelLogs: otelJsonLogs,
@@ -129,6 +134,7 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
       return;
     }
 
+    setSelectedIntegration(newOption);
     setSpecificMethod(selectedOptionValue);
     setSelectedWorkflow('');
     setGettingStarted(null);
@@ -138,7 +144,7 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
   // Auto-select first collector if nothing is selected and a collection method is set
   useEffect(() => {
     if (collectorOptions.length > 0 && !specificMethod && collectionMethod) {
-      handleSpecificMethodChange([{ value: collectorOptions[0].value }]);
+      handleSpecificMethodChange([{ ...OTEL_LOGS_OPTION }]);
     }
   }, [collectorOptions, specificMethod, collectionMethod]);
 
@@ -151,7 +157,7 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
 
     if (value === cardOne) {
       setCollectorOptions([
-        { label: 'Open Telemetry', value: 'otelLogs' },
+        { ...OTEL_LOGS_OPTION },
         { label: 'Nginx', value: 'nginx' },
         { label: 'Java', value: 'java' },
         { label: 'Python', value: 'python' },
@@ -354,7 +360,7 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
             technologyJsonMap[specificMethod]?.['getting-started']?.schema ||
               technologyJsonMap[specificMethod]?.schema ||
               [],
-            collectorOptions
+            selectedIntegration
           );
         }}
         fill

public/components/getting_started/components/utils.tsx

@@ -44,33 +44,29 @@ export const UploadAssets = async (
   mdsId: string,
   mdsLabel: string,
   schema: ICollectorSchema[],
-  collectorOptions: Array<EuiSelectableOption<CollectorOption>>
+  selectedIntegration: Array<EuiSelectableOption<CollectorOption>>
 ) => {
   const { setToast } = useToast();
   const http = coreRefs.http;
 
-  let selectedIntegration: string | undefined;
-  const checkedCollector = collectorOptions.find((collector) => {
-    return !!collector.checked;
-  });
-
-  if (checkedCollector !== undefined) {
-    if (checkedCollector.value === 'otel') {
-      selectedIntegration = 'otel-services';
-    } else if (checkedCollector.value === 'nginx') {
-      selectedIntegration = checkedCollector.value;
+  let curIntegration: string | undefined;
+  if (selectedIntegration !== undefined) {
+    if (/^otel[A-Za-z]+$/i.test(selectedIntegration[0].value)) {
+      curIntegration = 'otel-services';
+    } else if (selectedIntegration[0].value === 'nginx') {
+      curIntegration = selectedIntegration[0].value;
     }
   }
 
   try {
     // Auto-generate index templates based on the selected integration
     let templates: ICollectorIndexTemplate[] = [];
-    if (selectedIntegration !== undefined) {
+    if (curIntegration !== undefined) {
       const indexTemplateMappings = await http!.get(
-        `/api/integrations/repository/${selectedIntegration}/schema`
+        `/api/integrations/repository/${curIntegration}/schema`
       );
       templates = schema.reduce((acc: ICollectorIndexTemplate[], sh) => {
-        const templateMapping = indexTemplateMappings?.data?.mappings?.[sh.type];
+        const templateMapping = indexTemplateMappings?.data?.mappings?.[sh.type.toLowerCase()];
         if (!!templateMapping) {
           acc.push({
             name: sh.content.match(/[^/]+$/)?.[0] || '',