[Guided onboarding] Add guided onboarding to the home page (#143837)

* [Guided onboarding] Add guided onboarding to the home page

* [Guided onboarding] Fix smaller screen layout

* [Guided onboarding] Disable welcome screen on use case click

* Revert "[Guided onboarding] Disable welcome screen on use case click"

This reverts commit abc347e.

* [Guided onboarding] Update snapshots

* [Guided onboarding] Address CR comments

* [Guided onboarding] Address copy comments

src/plugins/home/public/application/components/add_data/add_data.test.tsx

@@ -40,6 +40,7 @@ describe('AddData', () => {
         addBasePath={addBasePathMock}
         application={applicationStartMock}
         isDarkMode={false}
+        isCloudEnabled={false}
       />
     );
     expect(component).toMatchSnapshot();

src/plugins/home/public/application/components/add_data/add_data.tsx

@@ -29,9 +29,10 @@ interface Props {
   addBasePath: (path: string) => string;
   application: ApplicationStart;
   isDarkMode: boolean;
+  isCloudEnabled: boolean;
 }
 
-export const AddData: FC<Props> = ({ addBasePath, application, isDarkMode }) => {
+export const AddData: FC<Props> = ({ addBasePath, application, isDarkMode, isCloudEnabled }) => {
   const { trackUiMetric } = getServices();
   const canAccessIntegrations = application.capabilities.navLinks.integrations;
   if (canAccessIntegrations) {
@@ -59,26 +60,47 @@ export const AddData: FC<Props> = ({ addBasePath, application, isDarkMode }) =>
               <p>
                 <FormattedMessage
                   id="home.addData.text"
-                  defaultMessage="To start working with your data, use one of our many ingest options. Collect data from an app or service, or upload a file. If you're not ready to use your own data, add a sample data set."
+                  defaultMessage="To start working with your data, use one of our many ingest options. Collect data from an app or service, or upload a file. If you're not ready to use your own data, play with a sample data set."
                 />
               </p>
             </EuiText>
 
             <EuiSpacer />
 
-            <EuiFlexGroup gutterSize="m" responsive={false} wrap>
+            <EuiFlexGroup gutterSize="m">
+              {isCloudEnabled && (
+                <EuiFlexItem grow={false}>
+                  {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+                  <EuiButton
+                    data-test-subj="guidedOnboardingLink"
+                    fill
+                    href={addBasePath('#/getting_started')}
+                    onClick={(event: MouseEvent) => {
+                      trackUiMetric(METRIC_TYPE.CLICK, 'guided_onboarding_link');
+                    }}
+                  >
+                    <FormattedMessage
+                      id="home.addData.guidedOnboardingLinkLabel"
+                      defaultMessage="Launch setup guide"
+                    />
+                  </EuiButton>
+                </EuiFlexItem>
+              )}
               <EuiFlexItem grow={false}>
                 <RedirectAppLinks application={application}>
                   {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
                   <EuiButton
                     data-test-subj="homeAddData"
-                    fill
+                    // on self managed this button is primary
+                    // on Cloud this button is secondary, because there is a "guided onboarding" button
+                    fill={!isCloudEnabled}
                     href={addBasePath('/app/integrations/browse')}
                     iconType="plusInCircle"
                     onClick={(event: MouseEvent) => {
                       trackUiMetric(METRIC_TYPE.CLICK, 'home_tutorial_directory');
                       createAppNavigationHandler('/app/integrations/browse')(event);
                     }}
+                    fullWidth
                   >
                     <FormattedMessage
                       id="home.addData.addDataButtonLabel"

src/plugins/home/public/application/components/home.test.tsx

@@ -14,6 +14,7 @@ import { Home } from './home';
 import { Welcome } from './welcome';
 
 let mockHasIntegrationsPermission = true;
+const mockNavigateToUrl = jest.fn();
 jest.mock('../kibana_services', () => ({
   getServices: () => ({
     getBasePath: () => 'path',
@@ -23,6 +24,7 @@ jest.mock('../kibana_services', () => ({
       setBreadcrumbs: () => {},
     },
     application: {
+      navigateToUrl: mockNavigateToUrl,
       capabilities: {
         navLinks: {
           integrations: mockHasIntegrationsPermission,
@@ -59,6 +61,7 @@ describe('home', () => {
         return `base_path/${url}`;
       },
       hasUserDataView: jest.fn(async () => true),
+      isCloudEnabled: false,
     };
   });
 
@@ -230,6 +233,16 @@ describe('home', () => {
 
       expect(component.find(Welcome).exists()).toBe(false);
     });
+
+    test('should redirect to guided onboarding on Cloud instead of welcome screen', async () => {
+      const isCloudEnabled = true;
+      const hasUserDataView = jest.fn(async () => false);
+
+      const component = await renderHome({ isCloudEnabled, hasUserDataView });
+
+      expect(component.find(Welcome).exists()).toBe(false);
+      expect(mockNavigateToUrl).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('isNewKibanaInstance', () => {

src/plugins/home/public/application/components/home.tsx

@@ -33,6 +33,7 @@ export interface HomeProps {
   localStorage: Storage;
   urlBasePath: string;
   hasUserDataView: () => Promise<boolean>;
+  isCloudEnabled: boolean;
 }
 
 interface State {
@@ -126,7 +127,7 @@ export class Home extends Component<HomeProps, State> {
   }
 
   private renderNormal() {
-    const { addBasePath, solutions } = this.props;
+    const { addBasePath, solutions, isCloudEnabled } = this.props;
     const { application, trackUiMetric } = getServices();
     const isDarkMode = getServices().uiSettings?.get('theme:darkMode') || false;
     const devTools = this.findDirectoryById('console');
@@ -148,7 +149,12 @@ export class Home extends Component<HomeProps, State> {
       >
         <SolutionsSection addBasePath={addBasePath} solutions={solutions} />
 
-        <AddData addBasePath={addBasePath} application={application} isDarkMode={isDarkMode} />
+        <AddData
+          addBasePath={addBasePath}
+          application={application}
+          isDarkMode={isDarkMode}
+          isCloudEnabled={isCloudEnabled}
+        />
 
         <ManageData
           addBasePath={addBasePath}
@@ -182,12 +188,18 @@ export class Home extends Component<HomeProps, State> {
 
   public render() {
     const { isLoading, isWelcomeEnabled, isNewKibanaInstance } = this.state;
+    const { isCloudEnabled } = this.props;
+    const { application } = getServices();
 
     if (isWelcomeEnabled) {
       if (isLoading) {
         return this.renderLoading();
       }
       if (isNewKibanaInstance) {
+        if (isCloudEnabled) {
+          application.navigateToUrl('./home#/getting_started');
+          return;
+        }
         return this.renderWelcome();
       }
     }

src/plugins/home/public/application/components/home_app.js

@@ -79,6 +79,7 @@ export function HomeApp({ directories, solutions }) {
               localStorage={localStorage}
               urlBasePath={getBasePath()}
               hasUserDataView={() => dataViewsService.hasUserDataView()}
+              isCloudEnabled={isCloudEnabled}
             />
           </Route>
           <Redirect to="/" />

src/plugins/home/public/application/components/sample_data/index.tsx

@@ -45,7 +45,7 @@ export function SampleDataCard({ urlBasePath, onDecline, onConfirm }: Props) {
       description={
         <FormattedMessage
           id="home.letsStartDescription"
-          defaultMessage="Add data to your cluster from any source, then analyze and visualize it in real time. Use our solutions to add search anywhere, observe your ecosystem, and protect against security threats."
+          defaultMessage="Add data to your cluster from any source, then analyze and visualize it in real time. Use our solutions to add search anywhere, observe your ecosystem, and defend against security threats."
         />
       }
       footer={