From 06a00d6b596d839ef084a5489237c6927279b02b Mon Sep 17 00:00:00 2001
From: Yngrid Coello <yngrid.coello@elastic.co>
Date: Tue, 20 Jun 2023 13:23:47 +0200
Subject: [PATCH] [Logs onboarding] design feedback (#159790)

closes https://github.com/elastic/kibana/issues/159655.

- [x] Make sure inputs in configure logs step occupy the whole width
- [x] Fix copy button in apiKey callout, currently is cropped
- [x] Add space bellow action buttons (back and continue)

Apart from the tasks above, we are hiding `Give feedback` button from
plugin root page, since the form is dedicated to logs onboarding.



https://github.com/elastic/kibana/assets/1313018/80872e8a-f239-4584-9b15-7ec8cdd32d5d
---
 .../app/custom_logs/wizard/api_key_banner.tsx |  6 ++-
 .../app/custom_logs/wizard/configure_logs.tsx |  2 +-
 .../app/header_action_menu/index.tsx          | 41 +++++++++++--------
 .../public/components/shared/step_panel.tsx   |  5 ++-
 4 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/api_key_banner.tsx b/x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/api_key_banner.tsx
index f7e73161fa8b3..2254105f979ff 100644
--- a/x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/api_key_banner.tsx
+++ b/x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/api_key_banner.tsx
@@ -94,7 +94,11 @@ export function ApiKeyBanner({
                 iconType="copyClipboard"
                 onClick={copy}
                 color="success"
-                style={{ backgroundColor: 'transparent' }}
+                css={{
+                  '> svg.euiIcon': {
+                    borderRadius: '0 !important',
+                  },
+                }}
                 aria-label={i18n.translate(
                   'xpack.observability_onboarding.apiKeyBanner.field.copyButton',
                   {
diff --git a/x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/configure_logs.tsx b/x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/configure_logs.tsx
index e86710f71c5c8..317b615c7226d 100644
--- a/x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/configure_logs.tsx
+++ b/x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/configure_logs.tsx
@@ -258,7 +258,7 @@ export function ConfigureLogs() {
             direction="column"
             gutterSize="xs"
           >
-            <EuiFlexItem grow={false}>
+            <EuiFlexItem style={{ width: '100%' }}>
               <EuiAccordion
                 id="advancedSettingsAccordion"
                 css={{
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
index 2ada0ed32b095..2cd68d599b48c 100644
--- 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
@@ -8,23 +8,32 @@
 import { EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 
-const OBSERVABILITY_ONBOARDING_FEEDBACK_LINK =
-  'https://ela.st/logs-onboarding-feedback';
+const LOGS_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>
-  );
+  const location = useLocation();
+  const normalizedPathname = location.pathname.replace(/\/$/, '');
+
+  const isRootPage = normalizedPathname === '';
+
+  if (!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>
+    );
+  }
+
+  return <></>;
 }
diff --git a/x-pack/plugins/observability_onboarding/public/components/shared/step_panel.tsx b/x-pack/plugins/observability_onboarding/public/components/shared/step_panel.tsx
index b38eaedb0df8f..f5b53cc6b93eb 100644
--- a/x-pack/plugins/observability_onboarding/public/components/shared/step_panel.tsx
+++ b/x-pack/plugins/observability_onboarding/public/components/shared/step_panel.tsx
@@ -13,6 +13,7 @@ import {
   EuiPanelProps,
   EuiSpacer,
   EuiTitle,
+  useEuiTheme,
 } from '@elastic/eui';
 
 interface StepPanelProps {
@@ -57,8 +58,10 @@ interface StepPanelFooterProps {
 }
 export function StepPanelFooter(props: StepPanelFooterProps) {
   const { items = [], children } = props;
+  const { euiTheme } = useEuiTheme();
+
   return (
-    <EuiFlexItem grow={false}>
+    <EuiFlexItem grow={false} style={{ marginBottom: euiTheme.size.l }}>
       {children}
       {items && (
         <EuiFlexGroup justifyContent="spaceBetween">