Add Scout setup for Search Homepage (#246777)

## Summary

Adds the Scout setup for Search Homepage.
Enables new Search Homepage by default


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

## Release Note:
Search Homepage design is updated.

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

Author: 3 people

.buildkite/scout_ci_config.yml

@@ -11,6 +11,7 @@ plugins:
     - observability_onboarding
     - painless_lab
     - profiling
+    - search_homepage
     - security_solution
     - slo
     - spaces

x-pack/solutions/search/plugins/search_homepage/moon.yml

@@ -54,6 +54,7 @@ dependsOn:
   - '@kbn/data-views-plugin'
   - '@kbn/cloud'
   - '@kbn/onechat-plugin'
+  - '@kbn/scout-search'
 tags:
   - plugin
   - prod
@@ -66,6 +67,7 @@ fileGroups:
     - common/**/*
     - public/**/*
     - server/**/*
+    - test/scout/**/*
     - '!target/**/*'
 tasks:
   jest:

x-pack/solutions/search/plugins/search_homepage/public/components/search_homepage/cloud_resources.tsx

@@ -30,9 +30,17 @@ interface ResourceCardProps {
   description: string;
   actionHref: string;
   actionText: string;
+  dataTestSubj: string;
 }
 
-const ResourceCard = ({ title, icon, description, actionHref, actionText }: ResourceCardProps) => {
+const ResourceCard = ({
+  title,
+  icon,
+  description,
+  actionHref,
+  actionText,
+  dataTestSubj,
+}: ResourceCardProps) => {
   const assetBasePath = useAssetBasePath();
   const { euiTheme } = useEuiTheme();
 
@@ -42,6 +50,7 @@ const ResourceCard = ({ title, icon, description, actionHref, actionText }: Reso
       css={css({
         maxWidth: euiTheme.base * 36,
       })}
+      data-test-subj={dataTestSubj}
     >
       <EuiSplitPanel.Inner
         paddingSize="none"
@@ -73,7 +82,7 @@ const ResourceCard = ({ title, icon, description, actionHref, actionText }: Reso
               iconSide="left"
               iconType="sortRight"
               color="text"
-              data-test-subj="searchHomepageSearchHomepageBodyEnableElasticInferenceServiceButton"
+              data-test-subj="searchHomepageSearchCloudResourceCardAction"
               href={actionHref}
               target="_blank"
             >
@@ -114,6 +123,7 @@ export const CloudResources = () => {
         defaultMessage: 'Go to Billing',
       }),
       actionHref: billingUrl,
+      dataTestSubj: 'cloudResourceCard-billing',
     },
     {
       icon: (assetBasePath: string) => `${assetBasePath}/search_analytics.svg`,
@@ -127,7 +137,8 @@ export const CloudResources = () => {
       actionText: i18n.translate('xpack.searchHomepage.cloudResources.autoops.actionText', {
         defaultMessage: 'AutoOps',
       }),
-      actionHref: cloud?.performanceUrl ?? '',
+      actionHref: cloud?.performanceUrl || `https://cloud.elastic.co`,
+      dataTestSubj: 'cloudResourceCard-autoops',
     },
   ];
   const HOSTED_CARDS: ResourceCardProps[] = [
@@ -144,6 +155,7 @@ export const CloudResources = () => {
         defaultMessage: 'Connect this cluster',
       }),
       actionHref: docLinks.cloudConnect,
+      dataTestSubj: 'cloudResourceCard-cloudConnect',
     },
     {
       icon: (assetBasePath: string) => `${assetBasePath}/search_serverless.svg`,
@@ -158,6 +170,7 @@ export const CloudResources = () => {
         defaultMessage: 'Elastic Cloud',
       }),
       actionHref: docLinks.elasticCloud,
+      dataTestSubj: 'cloudResourceCard-serverless',
     },
   ];
 
@@ -184,6 +197,7 @@ export const CloudResources = () => {
                 description={card.description}
                 actionHref={card.actionHref}
                 actionText={card.actionText}
+                dataTestSubj={card.dataTestSubj}
               />
             </EuiFlexItem>
           ))}

x-pack/solutions/search/plugins/search_homepage/public/components/search_homepage/metric_panels.tsx

@@ -40,6 +40,7 @@ export interface ComplexMetricPanel {
   metricDescription: string;
   metricTitle: string;
   type: MetricPanelType;
+  dataTestSubj: string;
   onPanelClick?: ({
     share,
     application,
@@ -49,7 +50,7 @@ export interface ComplexMetricPanel {
   }) => void;
 }
 
-const METRIC_PANEL_ITEMS: Array<ComplexMetricPanel> = [
+export const METRIC_PANEL_ITEMS: Array<ComplexMetricPanel> = [
   {
     getImageUrl: (assetBasePath: string) => `${assetBasePath}/search_lake.svg`,
     metricDescription: i18n.translate('xpack.searchHomepage.metricPanels.empty.discover.desc', {
@@ -64,6 +65,7 @@ const METRIC_PANEL_ITEMS: Array<ComplexMetricPanel> = [
     onPanelClick: ({ application }) => {
       application.navigateToApp('discover');
     },
+    dataTestSubj: 'searchHomepageNavLinks-discover',
   },
   {
     getImageUrl: (assetBasePath: string) => `${assetBasePath}/search_data_vis.svg`,
@@ -79,6 +81,7 @@ const METRIC_PANEL_ITEMS: Array<ComplexMetricPanel> = [
     onPanelClick: ({ application }) => {
       application.navigateToApp('dashboards');
     },
+    dataTestSubj: 'searchHomepageNavLinks-dashboards',
   },
   {
     getImageUrl: (assetBasePath: string) => `${assetBasePath}/search_agents.svg`,
@@ -94,6 +97,7 @@ const METRIC_PANEL_ITEMS: Array<ComplexMetricPanel> = [
     onPanelClick: ({ application }) => {
       application.navigateToApp('agent_builder');
     },
+    dataTestSubj: 'searchHomepageNavLinks-agentBuilder',
   },
 
   {
@@ -109,6 +113,7 @@ const METRIC_PANEL_ITEMS: Array<ComplexMetricPanel> = [
     onPanelClick: ({ application }) => {
       application.navigateToApp('workflows');
     },
+    dataTestSubj: 'searchHomepageNavLinks-workflows',
   },
   {
     type: 'machineLearning',
@@ -125,8 +130,11 @@ const METRIC_PANEL_ITEMS: Array<ComplexMetricPanel> = [
       defaultMessage: 'Machine Learning',
     }),
     onPanelClick: ({ application }) => {
-      application.navigateToApp('ml');
+      application.navigateToApp('ml', {
+        path: 'overview',
+      });
     },
+    dataTestSubj: 'searchHomepageNavLinks-machineLearning',
   },
   {
     type: 'dataManagement',
@@ -147,6 +155,7 @@ const METRIC_PANEL_ITEMS: Array<ComplexMetricPanel> = [
         path: 'data/index_management',
       });
     },
+    dataTestSubj: 'searchHomepageNavLinks-dataManagement',
   },
 ];
 
@@ -161,11 +170,12 @@ const MetricPanelEmpty = ({ panel }: MetricPanelEmptyProps) => {
   const assetBasePath = useAssetBasePath();
   const { euiTheme } = useEuiTheme();
 
-  const { getImageUrl, metricTitle, metricDescription, onPanelClick } = panel;
+  const { getImageUrl, metricTitle, metricDescription, onPanelClick, dataTestSubj } = panel;
   return (
     <EuiSplitPanel.Outer
       hasBorder
       onClick={() => onPanelClick && onPanelClick({ share, application })}
+      data-test-subj={dataTestSubj}
     >
       <EuiSplitPanel.Inner
         grow
@@ -223,7 +233,7 @@ export const MetricPanels = () => {
     : METRIC_PANEL_ITEMS.filter((p) => p.type !== 'workflows');
 
   return (
-    <EuiFlexGrid gutterSize="l" columns={3}>
+    <EuiFlexGrid gutterSize="l" columns={3} data-test-subj="searchHomepageNavLinksTabGrid">
       {panels.map((panel, index) => (
         <EuiFlexItem key={panel.type + '-' + index}>
           <MetricPanelEmpty panel={panel} />

x-pack/solutions/search/plugins/search_homepage/public/components/search_homepage/search_homepage.tsx

@@ -70,7 +70,12 @@ export const SearchHomepagePage = () => {
       <KibanaPageTemplate.Section restrictWidth={true} grow={false}>
         <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
           <EuiFlexItem>
-            <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
+            <EuiFlexGroup
+              responsive={false}
+              alignItems="center"
+              gutterSize="s"
+              data-test-subj="searchHomepageHeaderLeftsideGroup"
+            >
               <EuiFlexItem grow={false}>
                 <EuiTitle size="m">
                   <h3>

x-pack/solutions/search/plugins/search_homepage/public/components/search_homepage/search_homepage_body.tsx

@@ -8,8 +8,9 @@
 import React from 'react';
 
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
-import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer, useEuiTheme } from '@elastic/eui';
 
+import { css } from '@emotion/react';
 import { MetricPanels } from './metric_panels';
 import { CloudResources } from './cloud_resources';
 import { BodyLinks } from './body_links';
@@ -18,18 +19,25 @@ import { useKibana } from '../../hooks/use_kibana';
 import { GettingStartedBanner } from './getting_started_banner';
 
 export const SearchHomepageBody = () => {
+  const { euiTheme } = useEuiTheme();
   const {
     services: { cloud },
   } = useKibana();
-  const { isAdmin } = useAuthenticatedUser();
+  const { isAdmin, isBillingAdmin } = useAuthenticatedUser();
   return (
-    <KibanaPageTemplate.Section alignment="top" restrictWidth={true} grow paddingSize="none">
+    <KibanaPageTemplate.Section
+      alignment="top"
+      restrictWidth={true}
+      grow
+      paddingSize="none"
+      css={css({ padding: `0 ${euiTheme.size.l}` })}
+    >
       <EuiFlexGroup gutterSize="l" direction="column">
         <EuiFlexItem>
           <EuiSpacer size="l" />
           <MetricPanels />
         </EuiFlexItem>
-        {cloud?.isServerlessEnabled && !isAdmin ? null : (
+        {cloud?.isServerlessEnabled && (!isAdmin || !isBillingAdmin) ? null : (
           <EuiFlexItem>
             <EuiSpacer size="l" />
             <CloudResources />

x-pack/solutions/search/plugins/search_homepage/public/router.tsx

@@ -18,7 +18,7 @@ export const HomepageRouter = () => {
     services: { settings },
   } = useKibana();
 
-  const isNewDesignEnabled = settings?.client.get<boolean>(SEARCH_HOMEPAGE_V2_UI_FLAG, false);
+  const isNewDesignEnabled = settings?.client.get<boolean>(SEARCH_HOMEPAGE_V2_UI_FLAG, true);
 
   return (
     <Routes>

x-pack/solutions/search/plugins/search_homepage/test/scout/README.md

@@ -0,0 +1,23 @@
+## How to run tests
+
+First start the servers:
+
+```bash
+// ESS
+node scripts/scout.js start-server --stateful
+
+// Serverless
+node scripts/scout.js start-server --serverless=es
+```
+
+Then you can run the parallel tests in another terminal:
+
+```bash
+// ESS
+npx playwright test --config x-pack/solutions/search/plugins/search_homepage/test/scout/ui/playwright.config.ts --project=local --grep @ess
+
+// Serverless
+npx playwright test --project local --config x-pack/solutions/search/plugins/search_homepage/test/scout/ui/playwright.config.ts --grep @svlSearch
+```
+
+Test results are available in `x-pack/solutions/search/plugins/search_homepage/test/scout/ui/output`

x-pack/solutions/search/plugins/search_homepage/test/scout/ui/fixtures/index.ts

@@ -0,0 +1,43 @@
+/*
+ * 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 type {
+  BrowserAuthFixture,
+  KibanaUrl,
+  PageObjects,
+  ScoutTestFixtures,
+  ScoutWorkerFixtures,
+} from '@kbn/scout-search';
+import { test as base, createLazyPageObject } from '@kbn/scout-search';
+import { Homepage } from './page_objects/homepage';
+
+export interface ExtendedScoutTestFixtures extends ScoutTestFixtures {
+  pageObjects: PageObjects & {
+    homepage: Homepage;
+  };
+  browserAuth: BrowserAuthFixture;
+}
+
+export const test = base.extend<ExtendedScoutTestFixtures, ScoutWorkerFixtures>({
+  pageObjects: async (
+    {
+      pageObjects,
+      page,
+    }: {
+      pageObjects: ExtendedScoutTestFixtures['pageObjects'];
+      page: ExtendedScoutTestFixtures['page'];
+      kbnUrl: KibanaUrl;
+    },
+    use: (pageObjects: ExtendedScoutTestFixtures['pageObjects']) => Promise<void>
+  ) => {
+    const extendedPageObjects = {
+      ...pageObjects,
+      homepage: createLazyPageObject(Homepage, page),
+    };
+    await use(extendedPageObjects);
+  },
+});