From 5fd356a3d76c6e8f33457b712fe62f16537f962e Mon Sep 17 00:00:00 2001
From: Yngrid Coello <yngrid.coello@elastic.co>
Date: Mon, 12 Jun 2023 17:25:27 +0200
Subject: [PATCH] [Logs onboarding] Added give feedback button (#159455)

Relates to https://github.com/elastic/kibana/issues/158843.

This PR adds `Give feedback` button on top of observability onboarding
pages.

<img width="1771" alt="image"
src="https://github.com/elastic/kibana/assets/1313018/88e39ae7-c9dc-4226-bb61-a011c2b2c831">
---
 .../public/application/app.tsx                | 18 +++++++----
 .../app/header_action_menu/index.tsx          | 30 +++++++++++++++++++
 .../observability_onboarding/public/plugin.ts |  2 +-
 3 files changed, 44 insertions(+), 6 deletions(-)
 create mode 100644 x-pack/plugins/observability_onboarding/public/components/app/header_action_menu/index.tsx

diff --git a/x-pack/plugins/observability_onboarding/public/application/app.tsx b/x-pack/plugins/observability_onboarding/public/application/app.tsx
index 13e45999336f8..769039878f18c 100644
--- a/x-pack/plugins/observability_onboarding/public/application/app.tsx
+++ b/x-pack/plugins/observability_onboarding/public/application/app.tsx
@@ -8,8 +8,8 @@
 import { EuiErrorBoundary } from '@elastic/eui';
 import { Theme, ThemeProvider } from '@emotion/react';
 import {
-  APP_WRAPPER_CLASS,
   AppMountParameters,
+  APP_WRAPPER_CLASS,
   CoreStart,
 } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
@@ -19,16 +19,18 @@ import {
   RedirectAppLinks,
   useUiSetting$,
 } from '@kbn/kibana-react-plugin/public';
+import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
 import { Route } from '@kbn/shared-ux-router';
 import { euiDarkVars, euiLightVars } from '@kbn/ui-theme';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {
-  Router,
-  Switch,
   RouteComponentProps,
   RouteProps,
+  Router,
+  Switch,
 } from 'react-router-dom';
+import { ObservabilityOnboardingHeaderActionMenu } from '../components/app/header_action_menu';
 import {
   ObservabilityOnboardingPluginSetupDeps,
   ObservabilityOnboardingPluginStartDeps,
@@ -105,7 +107,7 @@ export function ObservabilityOnboardingAppRoot({
   deps: ObservabilityOnboardingPluginSetupDeps;
   corePlugins: ObservabilityOnboardingPluginStartDeps;
 }) {
-  const { history } = appMountParameters;
+  const { history, setHeaderActionMenu, theme$ } = appMountParameters;
   const i18nCore = core.i18n;
   const plugins = { ...deps };
 
@@ -123,7 +125,7 @@ export function ObservabilityOnboardingAppRoot({
         }}
       >
         <KibanaThemeProvider
-          theme$={appMountParameters.theme$}
+          theme$={theme$}
           modify={{
             breakpoint: {
               xxl: 1600,
@@ -134,6 +136,12 @@ export function ObservabilityOnboardingAppRoot({
           <i18nCore.Context>
             <Router history={history}>
               <EuiErrorBoundary>
+                <HeaderMenuPortal
+                  setHeaderActionMenu={setHeaderActionMenu}
+                  theme$={theme$}
+                >
+                  <ObservabilityOnboardingHeaderActionMenu />
+                </HeaderMenuPortal>
                 <ObservabilityOnboardingApp />
               </EuiErrorBoundary>
             </Router>
diff --git a/x-pack/plugins/observability_onboarding/public/components/app/header_action_menu/index.tsx b/x-pack/plugins/observability_onboarding/public/components/app/header_action_menu/index.tsx
new file mode 100644
index 0000000000000..2ada0ed32b095
--- /dev/null
+++ b/x-pack/plugins/observability_onboarding/public/components/app/header_action_menu/index.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+const OBSERVABILITY_ONBOARDING_FEEDBACK_LINK =
+  'https://ela.st/logs-onboarding-feedback';
+
+export function ObservabilityOnboardingHeaderActionMenu() {
+  return (
+    <EuiButton
+      data-test-subj="observabilityOnboardingPageGiveFeedback"
+      href={OBSERVABILITY_ONBOARDING_FEEDBACK_LINK}
+      size="s"
+      target="_blank"
+      color="warning"
+      iconType="editorComment"
+    >
+      {i18n.translate('xpack.observability_onboarding.header.feedback', {
+        defaultMessage: 'Give feedback',
+      })}
+    </EuiButton>
+  );
+}
diff --git a/x-pack/plugins/observability_onboarding/public/plugin.ts b/x-pack/plugins/observability_onboarding/public/plugin.ts
index 35c22b7548705..c5cccb972c1f8 100644
--- a/x-pack/plugins/observability_onboarding/public/plugin.ts
+++ b/x-pack/plugins/observability_onboarding/public/plugin.ts
@@ -69,7 +69,7 @@ export class ObservabilityOnboardingPlugin
         euiIconType: 'logoObservability',
         category: DEFAULT_APP_CATEGORIES.observability,
         keywords: [],
-        async mount(appMountParameters: AppMountParameters<unknown>) {
+        async mount(appMountParameters: AppMountParameters) {
           // Load application bundle and Get start service
           const [{ renderApp }, [coreStart, corePlugins]] = await Promise.all([
             import('./application/app'),