[Observability Onboarding] Fix small UI issues (elastic#197234)

Closes elastic/observability-dev#4015 🔒 * Makes the footer's top boarder to span across the full page width * Removes the empty header action menu on the main onboarding screen when using the new solution sidenav * Replaces "Give feedback" button on the EDOT collector flow with the feedback buttons used in other flows Other things mentioned in [the issue](elastic/observability-dev#4015) have been resolved already by previous changes. ![CleanShot 2024-10-22 at 15 13 17@2x](https://github.com/user-attachments/assets/383641cf-285e-401f-96e8-578e639d3199) To enable the new solution navigation locally: 1. Add these to `kibana.dev.yml` ``` xpack.spaces.allowSolutionVisibility: true xpack.spaces.experimental.forceSolutionVisibility: true ``` 2. Run Kibana and navigate to Spaces Management 3. Set "Observability" view for the space you're using locally (most likely "Default")
PhilippeOberti · Oct 24, 2024 · 1821093 · 1821093
1 parent f279b39
commit 1821093
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 105 deletions.
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/app.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/app.tsx
@@ -12,7 +12,6 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
-import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
 import { Router } from '@kbn/shared-ux-router';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -54,8 +53,6 @@ export function ObservabilityOnboardingAppRoot({
     context,
   };
 
-  const renderFeedbackLinkAsPortal = !config.serverless.enabled;
-
   core.analytics.reportEvent(OBSERVABILITY_ONBOARDING_TELEMETRY_EVENT.eventType, {
     uses_legacy_onboarding_page: false,
   });
@@ -80,11 +77,10 @@ export function ObservabilityOnboardingAppRoot({
             >
               <Router history={history}>
                 <EuiErrorBoundary>
-                  {renderFeedbackLinkAsPortal && (
-                    <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
-                      <ObservabilityOnboardingHeaderActionMenu />
-                    </HeaderMenuPortal>
-                  )}
+                  <ObservabilityOnboardingHeaderActionMenu
+                    setHeaderActionMenu={setHeaderActionMenu}
+                    theme$={theme$}
+                  />
                   <ObservabilityOnboardingFlow />
                 </EuiErrorBoundary>
               </Router>

diff --git a/...gins/observability_solution/observability_onboarding/public/application/footer/footer.tsx b/...gins/observability_solution/observability_onboarding/public/application/footer/footer.tsx
@@ -109,34 +109,38 @@ export const Footer: FunctionComponent = () => {
   ];
 
   return (
-    <EuiFlexGroup gutterSize="xl" justifyContent="center" alignItems="center">
-      {sections.map((section, index) => (
-        <EuiFlexItem key={index} grow={false}>
-          <EuiAvatar size="l" name="" imageUrl={section.iconUrl} color="subdued" />
-          <EuiSpacer size="m" />
-          <EuiText size="s">
-            <strong>{section.title}</strong>
-          </EuiText>
-          <EuiSpacer size="s" />
-          <EuiText size="xs">
-            <p>{section.description}</p>
-          </EuiText>
-          <EuiSpacer size="s" />
-          <EuiText size="xs">
-            <p>
-              <EuiLink
-                data-test-subj="observabilityOnboardingFooterLearnMoreLink"
-                aria-label={section.linkARIALabel}
-                href={section.link}
-                target="_blank"
-                external
-              >
-                {section.linkLabel}
-              </EuiLink>
-            </p>
-          </EuiText>
-        </EuiFlexItem>
-      ))}
-    </EuiFlexGroup>
+    <>
+      <EuiSpacer size="l" />
+      <EuiFlexGroup gutterSize="xl" justifyContent="center" alignItems="center">
+        {sections.map((section, index) => (
+          <EuiFlexItem key={index} grow={false}>
+            <EuiAvatar size="l" name="" imageUrl={section.iconUrl} color="subdued" />
+            <EuiSpacer size="m" />
+            <EuiText size="s">
+              <strong>{section.title}</strong>
+            </EuiText>
+            <EuiSpacer size="s" />
+            <EuiText size="xs">
+              <p>{section.description}</p>
+            </EuiText>
+            <EuiSpacer size="s" />
+            <EuiText size="xs">
+              <p>
+                <EuiLink
+                  data-test-subj="observabilityOnboardingFooterLearnMoreLink"
+                  aria-label={section.linkARIALabel}
+                  href={section.link}
+                  target="_blank"
+                  external
+                >
+                  {section.linkLabel}
+                </EuiLink>
+              </p>
+            </EuiText>
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+      <EuiSpacer size="xl" />
+    </>
   );
 };
diff --git a/...ins/observability_solution/observability_onboarding/public/application/pages/template.tsx b/...ins/observability_solution/observability_onboarding/public/application/pages/template.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiPageTemplate, EuiPanel, EuiSpacer } from '@elastic/eui';
+import { EuiPageTemplate, EuiSpacer, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import React from 'react';
 import { Footer } from '../footer/footer';
@@ -19,6 +19,8 @@ export const PageTemplate: React.FC<React.PropsWithChildren<TemplateProps>> = ({
   children,
   customHeader,
 }) => {
+  const { euiTheme } = useEuiTheme();
+
   return (
     <EuiPageTemplate
       css={css`
@@ -34,20 +36,10 @@ export const PageTemplate: React.FC<React.PropsWithChildren<TemplateProps>> = ({
         contentProps={{ css: { paddingBlock: 0 } }}
         css={css`
           padding-inline: 0px;
+          border-top: ${euiTheme.border.thin};
         `}
       >
-        <EuiPanel
-          hasBorder
-          css={css`
-            border-radius: 0px;
-            border-left: none;
-            border-bottom: none;
-            border-right: none;
-          `}
-        >
-          <Footer />
-          <EuiSpacer size="xl" />
-        </EuiPanel>
+        <Footer />
       </EuiPageTemplate.Section>
     </EuiPageTemplate>
   );

diff --git a/...solution/observability_onboarding/public/application/quickstart_flows/otel_logs/index.tsx b/...solution/observability_onboarding/public/application/quickstart_flows/otel_logs/index.tsx
@@ -20,7 +20,6 @@ import {
   EuiLink,
   EuiImage,
   EuiCallOut,
-  EuiHorizontalRule,
 } from '@elastic/eui';
 import {
   AllDatasetsLocatorParams,
@@ -34,8 +33,7 @@ import { ObservabilityOnboardingAppServices } from '../../..';
 import { ApiKeyBanner } from '../custom_logs/api_key_banner';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { MultiIntegrationInstallBanner } from './multi_integration_install_banner';
-
-const feedbackUrl = 'https://ela.st/otelcollector';
+import { FeedbackButtons } from '../shared/feedback_buttons';
 
 const HOST_COMMAND = i18n.translate(
   'xpack.observability_onboarding.otelLogsPanel.p.runTheCommandOnYourHostLabel',
@@ -340,37 +338,8 @@ rm ./otel.yml && cp ./otel_samples/platformlogs_hostmetrics.yml ./otel.yml && mk
             },
           ]}
         />
-        <EuiHorizontalRule />
-
-        <EuiFlexGroup responsive={false} direction="row" alignItems="center" gutterSize="s" wrap>
-          <EuiFlexItem grow={false}>
-            <EuiText color="subdued" size="s">
-              {i18n.translate(
-                'xpack.observability_onboarding.otelLogsPanel.feedbackButtons.label',
-                {
-                  defaultMessage: 'Was this helpful or were there any problems?',
-                }
-              )}
-            </EuiText>
-          </EuiFlexItem>
 
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              iconType="editorComment"
-              data-test-subj="observabilityOnboardingOtelLogsPanelGiveFeedbackButton"
-              href={feedbackUrl}
-              color="warning"
-              target="_blank"
-            >
-              {i18n.translate(
-                'xpack.observability_onboarding.otelLogsPanel.feedbackButtons.title',
-                {
-                  defaultMessage: 'Give feedback',
-                }
-              )}
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <FeedbackButtons flow="otel_logs" />
       </EuiFlexGroup>
     </EuiPanel>
   );

diff --git a/...bility_solution/observability_onboarding/public/application/shared/header_action_menu.tsx b/...bility_solution/observability_onboarding/public/application/shared/header_action_menu.tsx
@@ -7,32 +7,47 @@
 
 import { EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { HeaderMenuPortal } from '@kbn/observability-shared-plugin/public';
 import { LOGS_ONBOARDING_FEEDBACK_LINK } from '@kbn/observability-shared-plugin/common';
 import React from 'react';
 import { useLocation } from 'react-router-dom';
+import { type AppMountParameters } from '@kbn/core-application-browser';
+import { type ObservabilityOnboardingAppServices } from '../..';
 
-export function ObservabilityOnboardingHeaderActionMenu() {
+interface Props {
+  setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  theme$: AppMountParameters['theme$'];
+}
+
+export function ObservabilityOnboardingHeaderActionMenu({ setHeaderActionMenu, theme$ }: Props) {
+  const {
+    services: { config },
+  } = useKibana<ObservabilityOnboardingAppServices>();
   const location = useLocation();
   const normalizedPathname = location.pathname.replace(/\/$/, '');
 
   const isRootPage = normalizedPathname === '';
+  const isServerless = config.serverless.enabled;
 
-  if (!isRootPage) {
+  if (!isServerless && !isRootPage) {
     return (
-      <EuiButton
-        data-test-subj="observabilityOnboardingPageGiveFeedback"
-        href={LOGS_ONBOARDING_FEEDBACK_LINK}
-        size="s"
-        target="_blank"
-        color="warning"
-        iconType="editorComment"
-      >
-        {i18n.translate('xpack.observability_onboarding.header.feedback', {
-          defaultMessage: 'Give feedback',
-        })}
-      </EuiButton>
+      <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu} theme$={theme$}>
+        <EuiButton
+          data-test-subj="observabilityOnboardingPageGiveFeedback"
+          href={LOGS_ONBOARDING_FEEDBACK_LINK}
+          size="s"
+          target="_blank"
+          color="warning"
+          iconType="editorComment"
+        >
+          {i18n.translate('xpack.observability_onboarding.header.feedback', {
+            defaultMessage: 'Give feedback',
+          })}
+        </EuiButton>
+      </HeaderMenuPortal>
     );
   }
 
-  return <></>;
+  return null;
 }
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/tsconfig.json b/x-pack/plugins/observability_solution/observability_onboarding/tsconfig.json
@@ -41,7 +41,8 @@
     "@kbn/spaces-plugin",
     "@kbn/deeplinks-analytics",
     "@kbn/custom-integrations-plugin",
-    "@kbn/server-route-repository-utils"
+    "@kbn/server-route-repository-utils",
+    "@kbn/core-application-browser"
   ],
   "exclude": [
     "target/**/*"

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -31964,8 +31964,6 @@
     "xpack.observability_onboarding.otelLogsPanel.documentationLink": "Ouvrir la documentation",
     "xpack.observability_onboarding.otelLogsPanel.exploreLogs": "Ouvrir Logs Explorer",
     "xpack.observability_onboarding.otelLogsPanel.exploreMetrics": "Ouvrir les hôtes",
-    "xpack.observability_onboarding.otelLogsPanel.feedbackButtons.label": "Est-ce que ces informations ont été utiles ou y a-t-il eu des problèmes ?",
-    "xpack.observability_onboarding.otelLogsPanel.feedbackButtons.title": "Donner un retour",
     "xpack.observability_onboarding.otelLogsPanel.historicalDataDescription": "Les nouveaux messages de log sont collectés à partir de la configuration.",
     "xpack.observability_onboarding.otelLogsPanel.historicalDataDescription2": "Le chemin des logs par défaut est /var/log/*. Vous pouvez si nécessaire modifier ce chemin dans le fichier otel.yml.",
     "xpack.observability_onboarding.otelLogsPanel.limitationTitle": "Informations sur la configuration",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -31709,8 +31709,6 @@
     "xpack.observability_onboarding.otelLogsPanel.documentationLink": "ドキュメントを開く",
     "xpack.observability_onboarding.otelLogsPanel.exploreLogs": "ログエクスプローラーを開く",
     "xpack.observability_onboarding.otelLogsPanel.exploreMetrics": "ホストを開く",
-    "xpack.observability_onboarding.otelLogsPanel.feedbackButtons.label": "これは役に立ちましたか、それとも問題がありましたか？",
-    "xpack.observability_onboarding.otelLogsPanel.feedbackButtons.title": "フィードバックを作成する",
     "xpack.observability_onboarding.otelLogsPanel.historicalDataDescription": "今後、新しいログメッセージはセットアップから収集されます。",
     "xpack.observability_onboarding.otelLogsPanel.historicalDataDescription2": "デフォルトのログのパスは/var/log/*です。必要に応じて、otel.ymlファイルでこのパスを変更できます。",
     "xpack.observability_onboarding.otelLogsPanel.limitationTitle": "構成情報",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -31751,8 +31751,6 @@
     "xpack.observability_onboarding.otelLogsPanel.documentationLink": "打开文档",
     "xpack.observability_onboarding.otelLogsPanel.exploreLogs": "打开日志浏览器",
     "xpack.observability_onboarding.otelLogsPanel.exploreMetrics": "打开主机",
-    "xpack.observability_onboarding.otelLogsPanel.feedbackButtons.label": "这是否有用，或是否存在任何问题？",
-    "xpack.observability_onboarding.otelLogsPanel.feedbackButtons.title": "反馈",
     "xpack.observability_onboarding.otelLogsPanel.historicalDataDescription": "将从设置完成后收集新的日志消息。",
     "xpack.observability_onboarding.otelLogsPanel.historicalDataDescription2": "默认日志路径为 /var/log/*。如果需要，可以在 otel.yml 文件中更改此路径。",
     "xpack.observability_onboarding.otelLogsPanel.limitationTitle": "配置信息",