From 3f061a5de289ebc1847d9d8726e509118561c750 Mon Sep 17 00:00:00 2001 From: Achyut Jhunjhunwala Date: Fri, 13 Oct 2023 11:38:44 +0200 Subject: [PATCH] [APM] Move feedback button outside the react portal in serverless (#168350) ## Summary Closes https://github.com/elastic/kibana/issues/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) --- .../public/application/app.tsx | 27 ++++------ .../observability_onboarding/public/plugin.ts | 9 ++++ .../public/routes/templates/custom_logs.tsx | 51 +++++++++++++------ .../public/routes/templates/system_logs.tsx | 43 ++++++++++++---- 4 files changed, 87 insertions(+), 43 deletions(-) diff --git a/x-pack/plugins/observability_onboarding/public/application/app.tsx b/x-pack/plugins/observability_onboarding/public/application/app.tsx index 93a62f5f378e3..fc791436e3887 100644 --- 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) => string) | null; - -export interface RouteDefinition< - T extends { [K in keyof T]?: string | undefined } = any -> extends RouteProps { - breadcrumb: BreadcrumbTitle; -} - 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 ( - - - + {renderFeedbackLinkAsPortal && ( + + + + )} diff --git a/x-pack/plugins/observability_onboarding/public/plugin.ts b/x-pack/plugins/observability_onboarding/public/plugin.ts index 05806059b12e3..1a4982eab0859 100644 --- 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 index c2a18238943d2..411eb2b8e79e1 100644 --- 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,6 +9,8 @@ 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 { @@ -16,6 +18,7 @@ import { 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(); const TransitionComponent = useRef(() => null); + const { + services: { config }, + } = useKibana(); + + const isServerless = config.serverless.enabled; + function onChangeStep({ direction, stepTitle, @@ -68,21 +77,33 @@ function AnimatedTransitionsWizard({ children }: Props) { - -

- {title - ? title - : i18n.translate( - 'xpack.observability_onboarding.title.collectCustomLogs', - { - defaultMessage: 'Stream log files to Elastic', - } - )} -

- + + + +

+ {title + ? title + : i18n.translate( + 'xpack.observability_onboarding.title.collectCustomLogs', + { + defaultMessage: 'Stream log files to Elastic', + } + )} +

+ + + {isServerless && ( + + + + )} + (); + + const isServerless = config.serverless.enabled; return ( - -

- {i18n.translate( - 'xpack.observability_onboarding.title.collectSystemLogs', - { defaultMessage: 'Install shipper to collect system logs' } - )} -

- + + + +

+ {i18n.translate( + 'xpack.observability_onboarding.title.collectSystemLogs', + { defaultMessage: 'Install shipper to collect system logs' } + )} +

+ + + {isServerless && ( + + + + )} +