[APM] Move feedback button outside the react portal in serverless (#1…

…68350) ## Summary Closes #168016 The PR moves the Feedback button outside the Action Portal in Serverless Mode ## Serverless ### Before ![serverless-feedback-before](https://github.com/elastic/kibana/assets/7416358/05569109-7235-474d-a14e-91edd4e69a16) ### After ![serverless-feedback-after](https://github.com/elastic/kibana/assets/7416358/ac990c8c-f496-45c3-9b2c-69863a34f2fe) ## Stateful Both before and After is same ![Stateful](https://github.com/elastic/kibana/assets/7416358/39e21959-dc49-4410-9619-4725643ce8bf)
elastic · Oct 13, 2023 · 3f061a5 · 3f061a5
1 parent c000a25
commit 3f061a5
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 43 deletions.
diff --git a/x-pack/plugins/observability_onboarding/public/application/app.tsx b/x-pack/plugins/observability_onboarding/public/application/app.tsx
@@ -24,7 +24,6 @@ import { Router, Routes, Route } from '@kbn/shared-ux-router';
 import { euiDarkVars, euiLightVars } from '@kbn/ui-theme';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { RouteComponentProps, RouteProps } from 'react-router-dom';
 import { ConfigSchema } from '..';
 import { customLogsRoutes } from '../components/app/custom_logs';
 import { systemLogsRoutes } from '../components/app/system_logs';
@@ -37,16 +36,6 @@ import { baseRoutes, routes } from '../routes';
 import { CustomLogs } from '../routes/templates/custom_logs';
 import { SystemLogs } from '../routes/templates/system_logs';
 
-export type BreadcrumbTitle<
-  T extends { [K in keyof T]?: string | undefined } = {}
-> = string | ((props: RouteComponentProps<T>) => string) | null;
-
-export interface RouteDefinition<
-  T extends { [K in keyof T]?: string | undefined } = any
-> extends RouteProps {
-  breadcrumb: BreadcrumbTitle<T>;
-}
-
 export const onBoardingTitle = i18n.translate(
   'xpack.observability_onboarding.breadcrumbs.onboarding',
   {
@@ -157,6 +146,8 @@ export function ObservabilityOnboardingAppRoot({
   const i18nCore = core.i18n;
   const plugins = { ...deps };
 
+  const renderFeedbackLinkAsPortal = !config.serverless.enabled;
+
   return (
     <RedirectAppLinks
       className={APP_WRAPPER_CLASS}
@@ -183,12 +174,14 @@ export function ObservabilityOnboardingAppRoot({
           <i18nCore.Context>
             <Router history={history}>
               <EuiErrorBoundary>
-                <HeaderMenuPortal
-                  setHeaderActionMenu={setHeaderActionMenu}
-                  theme$={theme$}
-                >
-                  <ObservabilityOnboardingHeaderActionMenu />
-                </HeaderMenuPortal>
+                {renderFeedbackLinkAsPortal && (
+                  <HeaderMenuPortal
+                    setHeaderActionMenu={setHeaderActionMenu}
+                    theme$={theme$}
+                  >
+                    <ObservabilityOnboardingHeaderActionMenu />
+                  </HeaderMenuPortal>
+                )}
                 <ObservabilityOnboardingApp />
               </EuiErrorBoundary>
             </Router>

diff --git a/x-pack/plugins/observability_onboarding/public/plugin.ts b/x-pack/plugins/observability_onboarding/public/plugin.ts
@@ -28,6 +28,7 @@ import type { ObservabilityOnboardingConfig } from '../server';
 import { PLUGIN_ID } from '../common';
 import { ObservabilityOnboardingLocatorDefinition } from './locators/onboarding_locator/locator_definition';
 import { ObservabilityOnboardingPluginLocators } from './locators';
+import { ConfigSchema } from '.';
 
 export type ObservabilityOnboardingPluginSetup = void;
 export type ObservabilityOnboardingPluginStart = void;
@@ -44,6 +45,14 @@ export interface ObservabilityOnboardingPluginStartDeps {
   observability: ObservabilityPublicStart;
 }
 
+export interface ObservabilityOnboardingPluginContextValue {
+  core: CoreStart;
+  plugins: ObservabilityOnboardingPluginSetupDeps;
+  data: DataPublicPluginStart;
+  observability: ObservabilityPublicStart;
+  config: ConfigSchema;
+}
+
 export class ObservabilityOnboardingPlugin
   implements
     Plugin<

diff --git a/x-pack/plugins/observability_onboarding/public/routes/templates/custom_logs.tsx b/x-pack/plugins/observability_onboarding/public/routes/templates/custom_logs.tsx
@@ -9,13 +9,16 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useBreadcrumbs } from '@kbn/observability-shared-plugin/public';
 import React, { ComponentType, useRef, useState } from 'react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { ObservabilityOnboardingPluginContextValue } from '../../plugin';
 import { breadcrumbsApp } from '../../application/app';
 import { Provider as WizardProvider } from '../../components/app/custom_logs';
 import {
   FilmstripFrame,
   FilmstripTransition,
   TransitionState,
 } from '../../components/shared/filmstrip_transition';
+import { ObservabilityOnboardingHeaderActionMenu } from '../../components/app/header_action_menu';
 
 interface Props {
   children: React.ReactNode;
@@ -43,6 +46,12 @@ function AnimatedTransitionsWizard({ children }: Props) {
   const [title, setTitle] = useState<string>();
   const TransitionComponent = useRef<ComponentType>(() => null);
 
+  const {
+    services: { config },
+  } = useKibana<ObservabilityOnboardingPluginContextValue>();
+
+  const isServerless = config.serverless.enabled;
+
   function onChangeStep({
     direction,
     stepTitle,
@@ -68,21 +77,33 @@ function AnimatedTransitionsWizard({ children }: Props) {
       <EuiFlexGroup direction="column" alignItems="center">
         <EuiFlexItem grow={false}>
           <EuiSpacer size="l" />
-          <EuiTitle
-            size="l"
-            data-test-subj="obltOnboardingStreamLogFilePageHeader"
-          >
-            <h1>
-              {title
-                ? title
-                : i18n.translate(
-                    'xpack.observability_onboarding.title.collectCustomLogs',
-                    {
-                      defaultMessage: 'Stream log files to Elastic',
-                    }
-                  )}
-            </h1>
-          </EuiTitle>
+          <EuiFlexGroup direction="row">
+            <EuiFlexItem grow={false}>
+              <EuiTitle
+                size="l"
+                data-test-subj="obltOnboardingStreamLogFilePageHeader"
+              >
+                <h1>
+                  {title
+                    ? title
+                    : i18n.translate(
+                        'xpack.observability_onboarding.title.collectCustomLogs',
+                        {
+                          defaultMessage: 'Stream log files to Elastic',
+                        }
+                      )}
+                </h1>
+              </EuiTitle>
+            </EuiFlexItem>
+            {isServerless && (
+              <EuiFlexItem
+                grow={false}
+                css={{ position: 'absolute', right: 10 }}
+              >
+                <ObservabilityOnboardingHeaderActionMenu />
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
         </EuiFlexItem>
         <EuiFlexItem grow={1} style={{ width: '50%' }}>
           <FilmstripTransition

diff --git a/x-pack/plugins/observability_onboarding/public/routes/templates/system_logs.tsx b/x-pack/plugins/observability_onboarding/public/routes/templates/system_logs.tsx
@@ -9,8 +9,11 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useBreadcrumbs } from '@kbn/observability-shared-plugin/public';
 import React from 'react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { breadcrumbsApp } from '../../application/app';
 import { Provider as WizardProvider } from '../../components/app/system_logs';
+import { ObservabilityOnboardingHeaderActionMenu } from '../../components/app/header_action_menu';
+import { ObservabilityOnboardingPluginContextValue } from '../../plugin';
 
 interface Props {
   children: React.ReactNode;
@@ -28,22 +31,40 @@ export function SystemLogs({ children }: Props) {
     ],
     breadcrumbsApp
   );
+
+  const {
+    services: { config },
+  } = useKibana<ObservabilityOnboardingPluginContextValue>();
+
+  const isServerless = config.serverless.enabled;
   return (
     <WizardProvider>
       <EuiFlexGroup direction="column" alignItems="center">
         <EuiFlexItem grow={false}>
           <EuiSpacer size="l" />
-          <EuiTitle
-            size="l"
-            data-test-subj="obltOnboardingSystemLogsFilePageHeader"
-          >
-            <h1>
-              {i18n.translate(
-                'xpack.observability_onboarding.title.collectSystemLogs',
-                { defaultMessage: 'Install shipper to collect system logs' }
-              )}
-            </h1>
-          </EuiTitle>
+          <EuiFlexGroup direction="row">
+            <EuiFlexItem grow={false}>
+              <EuiTitle
+                size="l"
+                data-test-subj="obltOnboardingSystemLogsFilePageHeader"
+              >
+                <h1>
+                  {i18n.translate(
+                    'xpack.observability_onboarding.title.collectSystemLogs',
+                    { defaultMessage: 'Install shipper to collect system logs' }
+                  )}
+                </h1>
+              </EuiTitle>
+            </EuiFlexItem>
+            {isServerless && (
+              <EuiFlexItem
+                grow={false}
+                css={{ position: 'absolute', right: 10 }}
+              >
+                <ObservabilityOnboardingHeaderActionMenu />
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
         </EuiFlexItem>
         <EuiFlexItem grow={1} style={{ width: '50%' }}>
           <div