[Logs onboarding] Fixing glitch on steps transition (#166467)

Closes https://github.com/elastic/kibana/issues/166001.

The problem was we were rendering the component twice.
Also took the opportunity to fix some debt in our cypress tests due to
this duplication.

### Before (slowed down)


c7ab3d09-9d47-4dee-94c4-56c681383186

### After (slowed down)


4486d93a-0b7c-454f-add9-8a72b9e00698

### How to test

It's a bit tricky to test it, you would need to perform a recording
where you would need to start a `Stream log files` type of onboarding,
complete the required fields and click on continue.. Then, lower the
speed of the video and check the component is not being rendered twice.

x-pack/plugins/observability_onboarding/e2e/cypress/e2e/logs/custom_logs/configure.cy.ts

@@ -24,7 +24,6 @@ describe('[Logs onboarding] Custom logs - configure step', () => {
     it('Users should be able to continue if logFilePaths is not empty', () => {
       cy.getByTestSubj('obltOnboardingLogFilePath-0')
         .find('input')
-        .first()
         .type('myLogs.log');
       cy.getByTestSubj('obltOnboardingCustomLogsContinue').should(
         'not.be.disabled'
@@ -32,13 +31,13 @@ describe('[Logs onboarding] Custom logs - configure step', () => {
     });
 
     it('Users can add multiple logFilePaths', () => {
-      cy.getByTestSubj('obltOnboardingCustomLogsAddFilePath').first().click();
+      cy.getByTestSubj('obltOnboardingCustomLogsAddFilePath').click();
       cy.getByTestSubj('obltOnboardingLogFilePath-0').should('exist');
       cy.getByTestSubj('obltOnboardingLogFilePath-1').should('exist');
     });
 
     it('Users can delete logFilePaths', () => {
-      cy.getByTestSubj('obltOnboardingCustomLogsAddFilePath').first().click();
+      cy.getByTestSubj('obltOnboardingCustomLogsAddFilePath').click();
       cy.get('*[data-test-subj^="obltOnboardingLogFilePath-"]').should(
         'have.length',
         2
@@ -55,7 +54,6 @@ describe('[Logs onboarding] Custom logs - configure step', () => {
       it('datasetname and integration name are auto generated if it is the first path', () => {
         cy.getByTestSubj('obltOnboardingLogFilePath-0')
           .find('input')
-          .first()
           .type('myLogs.log');
         cy.getByTestSubj('obltOnboardingCustomLogsIntegrationsName').should(
           'have.value',
@@ -68,10 +66,9 @@ describe('[Logs onboarding] Custom logs - configure step', () => {
       });
 
       it('datasetname and integration name are not generated if it is not the first path', () => {
-        cy.getByTestSubj('obltOnboardingCustomLogsAddFilePath').first().click();
+        cy.getByTestSubj('obltOnboardingCustomLogsAddFilePath').click();
         cy.getByTestSubj('obltOnboardingLogFilePath-1')
           .find('input')
-          .first()
           .type('myLogs.log');
         cy.getByTestSubj('obltOnboardingCustomLogsIntegrationsName').should(
           'be.empty'
@@ -90,7 +87,6 @@ describe('[Logs onboarding] Custom logs - configure step', () => {
 
       cy.getByTestSubj('obltOnboardingLogFilePath-0')
         .find('input')
-        .first()
         .type('myLogs.log');
     });
 
@@ -109,7 +105,6 @@ describe('[Logs onboarding] Custom logs - configure step', () => {
 
       cy.getByTestSubj('obltOnboardingLogFilePath-0')
         .find('input')
-        .first()
         .type('myLogs.log');
     });
 
@@ -187,17 +182,15 @@ describe('[Logs onboarding] Custom logs - configure step', () => {
 
       cy.getByTestSubj('obltOnboardingLogFilePath-0')
         .find('input')
-        .first()
         .type('myLogs.log');
     });
 
     it('Users should not be able to continue if they do not specify an integrationName', () => {
       cy.getByTestSubj('obltOnboardingCustomLogsIntegrationsName').clear();
 
-      // https://github.com/elastic/kibana/issues/165778
-      // cy.getByTestSubj('obltOnboardingCustomLogsContinue').should(
-      //  'be.disabled'
-      // );
+      cy.getByTestSubj('obltOnboardingCustomLogsContinue').should(
+        'be.disabled'
+      );
     });
 
     it('value will contain _ instead of special chars', () => {
@@ -227,7 +220,6 @@ describe('[Logs onboarding] Custom logs - configure step', () => {
 
       cy.getByTestSubj('obltOnboardingLogFilePath-0')
         .find('input')
-        .first()
         .type('myLogs.log');
     });
 
@@ -273,7 +265,6 @@ describe('[Logs onboarding] Custom logs - configure step', () => {
 
         cy.getByTestSubj('obltOnboardingLogFilePath-0')
           .find('input')
-          .first()
           .type(`${CUSTOM_INTEGRATION_NAME}.log`);
 
         cy.getByTestSubj('obltOnboardingCustomLogsContinue').click();
@@ -293,7 +284,6 @@ describe('[Logs onboarding] Custom logs - configure step', () => {
 
         cy.getByTestSubj('obltOnboardingLogFilePath-0')
           .find('input')
-          .first()
           .type(`${CUSTOM_INTEGRATION_NAME}.log`);
 
         cy.getByTestSubj('obltOnboardingCustomLogsContinue').click();
@@ -318,7 +308,6 @@ describe('[Logs onboarding] Custom logs - configure step', () => {
       cy.installCustomIntegration(CUSTOM_INTEGRATION_NAME);
       cy.getByTestSubj('obltOnboardingLogFilePath-0')
         .find('input')
-        .first()
         .type(`${CUSTOM_INTEGRATION_NAME}.log`);
       cy.getByTestSubj('obltOnboardingCustomLogsContinue').click();
 
@@ -341,7 +330,6 @@ describe('[Logs onboarding] Custom logs - configure step', () => {
 
         cy.getByTestSubj('obltOnboardingLogFilePath-0')
           .find('input')
-          .first()
           .type(`${CUSTOM_INTEGRATION_NAME}.log`);
         cy.getByTestSubj('obltOnboardingCustomLogsContinue').click();
       });

x-pack/plugins/observability_onboarding/e2e/cypress/e2e/logs/custom_logs/install_elastic_agent.cy.ts

@@ -18,7 +18,6 @@ describe('[Logs onboarding] Custom logs - install elastic agent', () => {
 
     cy.getByTestSubj('obltOnboardingLogFilePath-0')
       .find('input')
-      .first()
       .type('mylogs.log');
 
     cy.getByTestSubj('obltOnboardingCustomLogsContinue').click();
@@ -147,9 +146,7 @@ describe('[Logs onboarding] Custom logs - install elastic agent', () => {
         it('autoDownloadConfig flag is added to installation script', () => {
           cy.getByTestSubj(
             'obltOnboardingInstallElasticAgentAutoDownloadConfig'
-          )
-            .first()
-            .click();
+          ).click();
           cy.getByTestSubj(
             'obltOnboardingInstallElasticAgentAutoDownloadConfigCallout'
           ).should('exist');
@@ -161,9 +158,7 @@ describe('[Logs onboarding] Custom logs - install elastic agent', () => {
         it('Download config button is disabled', () => {
           cy.getByTestSubj(
             'obltOnboardingInstallElasticAgentAutoDownloadConfig'
-          )
-            .first()
-            .click();
+          ).click();
           cy.getByTestSubj(
             'obltOnboardingConfigureElasticAgentStepDownloadConfig'
           ).should('be.disabled');

x-pack/plugins/observability_onboarding/public/components/shared/filmstrip_transition.tsx

@@ -23,7 +23,7 @@ export function FilmstripTransition({
         flexGrow: 1,
         position: 'relative',
         zIndex: 0,
-        transitionTimingFunction: 'ease-out',
+        transitionTimingFunction: 'ease-in-out',
         transition:
           transition !== 'ready' ? `transform ${duration}ms` : undefined,
         transform:

x-pack/plugins/observability_onboarding/public/routes/templates/custom_logs.tsx

@@ -89,18 +89,16 @@ function AnimatedTransitionsWizard({ children }: Props) {
             duration={TRANSITION_DURATION}
             transition={transition}
           >
-            <FilmstripFrame position="left">
-              {
-                // eslint-disable-next-line react/jsx-pascal-case
-                transition === 'back' ? <TransitionComponent.current /> : null
-              }
-            </FilmstripFrame>
-            <FilmstripFrame position="center">{children}</FilmstripFrame>
-            <FilmstripFrame position="right">
-              {
-                // eslint-disable-next-line react/jsx-pascal-case
-                transition === 'next' ? <TransitionComponent.current /> : null
+            <FilmstripFrame
+              position={
+                transition === 'ready'
+                  ? 'center'
+                  : transition === 'back'
+                  ? 'left'
+                  : 'right'
               }
+            >
+              {children}
             </FilmstripFrame>
           </FilmstripTransition>
         </EuiFlexItem>