[Onboarding] Copy/design updates (#181457)

Closes #181338 Also addresses these issues from [the review doc](https://docs.google.com/document/d/18ZRY-pX1ZIpnA1GKUPyrFAcb3ykkCSZkefu74Whsl84/edit): - [x] Align footer items to the center - [x] Header name: Amazing that works! Users with a shared account. What are they going to see? Not their name? **(Name was removed)** - [x] Gap between cards instead of 24px -> 16px - [x] Get started entry point in sidebar should be renamed to Add data - [x] If a user searches using a View collection card or manually and changes the use case, we should clear the search - [x] Remove stream log files as a quick start Also "fixes" the "Unverified" label in the Kubernetes card. I've just hidden labels on cards altogether as we don't use it for now. I did not went too deep so not sure where the label comes from in the first place, might be related to QA environment. --------- Co-authored-by: Joe Reuter <johannes.reuter@elastic.co>
elastic · Apr 25, 2024 · 8bcf01b · 8bcf01b
1 parent 910a806
commit 8bcf01b
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 58 deletions.
diff --git a/...gins/observability_solution/observability_onboarding/public/application/footer/footer.tsx b/...gins/observability_solution/observability_onboarding/public/application/footer/footer.tsx
@@ -101,7 +101,7 @@ export const Footer: FunctionComponent = () => {
   ];
 
   return (
-    <EuiFlexGroup>
+    <EuiFlexGroup justifyContent="center" gutterSize="xl">
       {sections.map((section, index) => (
         <EuiFlexItem key={index}>
           <EuiAvatar size="l" name="" imageUrl={section.iconUrl} color="subdued" />

diff --git a/...gins/observability_solution/observability_onboarding/public/application/header/header.tsx b/...gins/observability_solution/observability_onboarding/public/application/header/header.tsx
@@ -6,53 +6,13 @@
  */
 import { i18n } from '@kbn/i18n';
 
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import React from 'react';
-import {
-  EuiText,
-  EuiTitle,
-  EuiSpacer,
-  EuiTextColor,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSkeletonTitle,
-} from '@elastic/eui';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
-import useAsync from 'react-use/lib/useAsync';
-import { CoreStart } from '@kbn/core/public';
 
 export const Header = () => {
-  const { services } = useKibana<CoreStart>();
-
-  const currentUser = useAsync(services.security.authc.getCurrentUser);
-
   return (
     <EuiFlexGroup>
       <EuiFlexItem>
-        <EuiSkeletonTitle
-          size="xs"
-          isLoading={currentUser.loading}
-          announceLoadingStatus={false}
-          announceLoadedStatus={false}
-        >
-          {currentUser.value && (
-            <EuiTitle size="xs">
-              <strong>
-                <EuiTextColor color="subdued">
-                  {i18n.translate(
-                    'xpack.observability_onboarding.experimentalOnboardingFlow.h1.hiJohnLabel',
-                    {
-                      defaultMessage: 'Hi {username}!',
-                      values: {
-                        username: currentUser.value.full_name ?? currentUser.value.username,
-                      },
-                    }
-                  )}
-                </EuiTextColor>
-              </strong>
-            </EuiTitle>
-          )}
-        </EuiSkeletonTitle>
-        <EuiSpacer size="m" />
         <EuiTitle size="l">
           <h1>
             {i18n.translate(

diff --git a/...observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx b/...observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
@@ -39,12 +39,13 @@ export const OnboardingFlowForm: FunctionComponent = () => {
       id: 'logs',
       label: i18n.translate(
         'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.collectAndAnalyzeMyLabel',
-        { defaultMessage: 'Collect and analyze my logs' }
+        { defaultMessage: 'Collect and analyze logs' }
       ),
       description: i18n.translate(
         'xpack.observability_onboarding.onboardingFlowForm.detectPatternsAndOutliersLabel',
         {
-          defaultMessage: 'Detect patterns, troubleshoot in real time, gain insights from logs.',
+          defaultMessage:
+            'Detect patterns, gain insights from logs, get alerted when surpassing error thresholds',
         }
       ),
     },
@@ -57,21 +58,22 @@ export const OnboardingFlowForm: FunctionComponent = () => {
       description: i18n.translate(
         'xpack.observability_onboarding.onboardingFlowForm.captureAndAnalyzeDistributedLabel',
         {
-          defaultMessage: 'Collect distributed traces and catch application performance problems.',
+          defaultMessage:
+            'Catch application problems, get alerted on performance issues or SLO breaches, expedite root cause analysis and remediation',
         }
       ),
     },
     {
       id: 'infra',
       label: i18n.translate(
         'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyInfrastructureLabel',
-        { defaultMessage: 'Monitor my infrastructure' }
+        { defaultMessage: 'Monitor infrastructure' }
       ),
       description: i18n.translate(
         'xpack.observability_onboarding.onboardingFlowForm.builtOnPowerfulElasticsearchLabel',
         {
           defaultMessage:
-            'Stream infrastructure metrics and accelerate root cause detection by breaking down silos.',
+            'Check my system’s health, get alerted on performance issues or SLO breaches, expedite root cause analysis and remediation',
         }
       ),
     },
@@ -126,7 +128,7 @@ export const OnboardingFlowForm: FunctionComponent = () => {
         new Promise((r) => setTimeout(r, 10)).then(() =>
           packageListRef.current?.scrollIntoView({
             behavior: 'smooth',
-            block: 'center',
+            block: 'start',
           })
         );
       }
@@ -140,7 +142,7 @@ export const OnboardingFlowForm: FunctionComponent = () => {
   );
 
   return (
-    <EuiPanel hasBorder>
+    <EuiPanel hasBorder paddingSize="xl">
       <TitleWithIcon
         iconType="indexRollupApp"
         title={i18n.translate(
@@ -152,11 +154,12 @@ export const OnboardingFlowForm: FunctionComponent = () => {
         )}
       />
       <EuiSpacer size="m" />
-      <EuiFlexGroup css={customMargin} gutterSize="m" direction="column">
+      <EuiFlexGroup css={{ ...customMargin, maxWidth: '560px' }} gutterSize="l" direction="column">
         {options.map((option) => (
           <EuiFlexItem key={option.id}>
             <EuiCheckableCard
               id={`${radioGroupId}_${option.id}`}
+              data-test-subj={`observabilityOnboardingUseCaseCard-${option.id}`}
               name={radioGroupId}
               label={
                 <>
@@ -168,7 +171,10 @@ export const OnboardingFlowForm: FunctionComponent = () => {
                 </>
               }
               checked={option.id === searchParams.get('category')}
-              onChange={() => setSearchParams({ category: option.id }, { replace: true })}
+              onChange={() => {
+                setIntegrationSearch('');
+                setSearchParams({ category: option.id }, { replace: true });
+              }}
             />
           </EuiFlexItem>
         ))}
@@ -185,7 +191,7 @@ export const OnboardingFlowForm: FunctionComponent = () => {
               }
             )}
           />
-          <EuiSpacer size="m" />
+          <EuiSpacer size="s" />
 
           {Array.isArray(customCards) && (
             <OnboardingFlowPackageList
@@ -230,10 +236,25 @@ interface TitleWithIconProps {
 const TitleWithIcon: FunctionComponent<TitleWithIconProps> = ({ title, iconType }) => (
   <EuiFlexGroup responsive={false} gutterSize="m" alignItems="center">
     <EuiFlexItem grow={false}>
-      <EuiAvatar size="l" name={title} iconType={iconType} color="subdued" />
+      <EuiAvatar
+        size="l"
+        name={title}
+        iconType={iconType}
+        iconSize="l"
+        color="subdued"
+        css={{
+          /**
+           * Nudges the icon a bit to the
+           * right because it's not symmetrical and
+           * look off-center by default. This makes
+           * it visually centered.
+           */
+          padding: '24px 22px 24px 26px',
+        }}
+      />
     </EuiFlexItem>
     <EuiFlexItem>
-      <EuiTitle size="xs">
+      <EuiTitle size="s">
         <strong>{title}</strong>
       </EuiTitle>
     </EuiFlexItem>

diff --git a/...ility_onboarding/public/application/onboarding_flow_form/use_custom_cards_for_category.ts b/...ility_onboarding/public/application/onboarding_flow_form/use_custom_cards_for_category.ts
@@ -141,7 +141,7 @@ export function useCustomCardsForCategory(
           id: 'system-logs',
           type: 'virtual',
           title: 'Stream host system logs',
-          description: 'The quickest path to onboard log data from your own machine or server',
+          description: 'Collect system logs from your machine or server',
           name: 'system-logs-virtual',
           categories: ['observability'],
           icons: [

diff --git a/...bservability_solution/observability_onboarding/public/application/packages_list/index.tsx b/...bservability_solution/observability_onboarding/public/application/packages_list/index.tsx
@@ -62,7 +62,7 @@ const PackageListGridWrapper = ({
 }: WrapperProps) => {
   const customMargin = useCustomMargin();
   const { filteredCards, isLoading } = useAvailablePackages({
-    prereleaseIntegrationsEnabled: false,
+    prereleaseIntegrationsEnabled: true,
   });
 
   const list: IntegrationCardItem[] = useIntegrationCardList(

diff --git a/...observability_solution/observability_onboarding/public/application/packages_list/utils.ts b/...observability_solution/observability_onboarding/public/application/packages_list/utils.ts
@@ -7,11 +7,12 @@
 
 import { IntegrationCardItem } from '@kbn/fleet-plugin/public';
 
-export const QUICKSTART_FLOWS = ['system-logs-virtual', 'custom-logs-virtual'];
+export const QUICKSTART_FLOWS = ['system-logs-virtual'];
 
 export const toCustomCard = (card: IntegrationCardItem) => ({
   ...card,
   isQuickstart: QUICKSTART_FLOWS.includes(card.name),
+  showCardLabels: false,
 });
 
 export const isQuickstart = (cardName: string) => QUICKSTART_FLOWS.includes(cardName);
diff --git a/x-pack/plugins/serverless_observability/public/navigation_tree.ts b/x-pack/plugins/serverless_observability/public/navigation_tree.ts
@@ -216,7 +216,7 @@ export const navigationTree: NavigationTreeDefinition = {
     {
       type: 'navItem',
       title: i18n.translate('xpack.serverlessObservability.nav.getStarted', {
-        defaultMessage: 'Get started',
+        defaultMessage: 'Add data',
       }),
       link: 'observabilityOnboarding',
       icon: 'launch',