serverless_search(Overview): footer redesign (#165044)

## Summary

Updated the getting started overview footer, we combined the whats next
and icon buttons into a single panel with different icons and copy.

### Screenshots

![image](cbea1f08-59b3-41df-8a38-3baa4d7f31b7)

x-pack/plugins/serverless_search/public/application/components/overview.scss

@@ -7,37 +7,6 @@
   padding-top: 0;
 }
 
-.serverlessSearchFooterCardsSection {
-  background-color: $euiColorPrimary;
-  padding-top: $euiSizeXL;
-  padding-bottom: $euiSizeXL;
-}
-
-.serverlessSearchFooterCard {
-  &--wrapper {
-    position: relative;
-  }
-
-  &--background {
-    z-index: 1;
-  }
-
-  &--iconWrapper {
-    align-items: center;
-    display: inlineFlex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    justify-content: center;
-    padding: 20px;
-    z-index: 2;
-  }
-}
-
-.serverlessSearchFooter {
-  background-color: $euiColorSuccess;
-  padding-top: $euiSizeXL;
-  padding-bottom: $euiSizeXL;
+.serverlessSearchOverviewFooterSection {
+  background-color: transparentize($euiColorPrimary, .9);
 }

x-pack/plugins/serverless_search/public/application/components/overview.test.tsx

@@ -53,6 +53,6 @@ describe('<Overview />', () => {
   });
   test("what's next?", () => {
     const { getByRole } = render(<Overview />);
-    expect(getByRole('heading', { name: "What's next?" })).toBeDefined();
+    expect(getByRole('heading', { name: 'Do more with your data' })).toBeDefined();
   });
 });

x-pack/plugins/serverless_search/public/application/components/overview.tsx

@@ -6,17 +6,14 @@
  */
 
 import {
-  EuiButton,
+  EuiAvatar,
+  EuiButtonEmpty,
   EuiCard,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiImage,
-  EuiLink,
   EuiPageTemplate,
-  EuiSpacer,
+  EuiPanel,
   EuiText,
-  EuiTextColor,
-  EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
@@ -52,7 +49,6 @@ export const ElasticsearchOverview = () => {
     useState<LanguageDefinition>(javascriptDefinition);
   const [clientApiKey, setClientApiKey] = useState<string>(API_KEY_PLACEHOLDER);
   const { application, cloud, http, userProfile, share } = useKibanaServices();
-  const { navigateToApp } = application;
 
   const elasticsearchURL = useMemo(() => {
     return cloud?.elasticsearchUrl ?? ELASTICSEARCH_URL_PLACEHOLDER;
@@ -63,7 +59,7 @@ export const ElasticsearchOverview = () => {
     apiKey: clientApiKey,
   };
 
-  const { data } = useQuery({
+  const { data: _data } = useQuery({
     queryKey: ['fetchConnectors'],
     queryFn: () =>
       http.fetch<{ connectors: Connector[] }>('/internal/serverless_search/connectors'),
@@ -241,203 +237,149 @@ export const ElasticsearchOverview = () => {
           })}
         />
       </EuiPageTemplate.Section>
-      <EuiPageTemplate.Section alignment="top" className="serverlessSearchFooterCardsSection">
-        <EuiFlexGroup justifyContent="center" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="l">
-              <h1>
-                <EuiTextColor color="ghost">
-                  {i18n.translate('xpack.serverlessSearch.footer.title', {
-                    defaultMessage: "What's next?",
-                  })}
-                </EuiTextColor>
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer />
-        <EuiFlexGroup gutterSize="xl">
-          <EuiFlexItem>
-            <EuiCard
-              paddingSize="xl"
-              textAlign="left"
-              title={i18n.translate('xpack.serverlessSearch.footer.discoverCard.title', {
-                defaultMessage: 'Explore and visualize your data in Discover',
-              })}
-              description={i18n.translate(
-                'xpack.serverlessSearch.footer.discoverCard.description',
-                {
-                  defaultMessage:
-                    'With Discover, you can quickly search and filter your data, get information about the structure of the fields, and display your findings in a visualization.',
-                }
-              )}
-              footer={
-                <EuiFlexGroup>
-                  <EuiFlexItem>
-                    <EuiButton color="primary" onClick={() => navigateToApp('discover')}>
-                      {i18n.translate('xpack.serverlessSearch.footer.discoverCard.buttonText', {
-                        defaultMessage: 'Explore data in Discover',
-                      })}
-                    </EuiButton>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              }
-              image={
-                <FooterCardImage
-                  iconSrc={`${assetBasePath}discover_icon.png`}
-                  backgroundSrc={`${assetBasePath}discover_bg.png`}
-                />
-              }
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiCard
-              paddingSize="xl"
-              textAlign="left"
-              title={i18n.translate('xpack.serverlessSearch.footer.pipelinesCard.title', {
-                defaultMessage: 'Transform your data using pipelines',
-              })}
-              description={i18n.translate(
-                'xpack.serverlessSearch.footer.pipelinesCard.description',
-                {
-                  defaultMessage:
-                    'Preprocess data before indexing into Elasticsearch. Remove fields, extract values from text, or enrich your data with machine learning models like ELSER.',
-                }
-              )}
-              footer={
-                <EuiFlexGroup>
-                  <EuiFlexItem>
-                    <EuiButton
-                      color="primary"
-                      onClick={() =>
-                        navigateToApp('management', { path: '/ingest/ingest_pipelines' })
-                      }
-                    >
-                      {i18n.translate('xpack.serverlessSearch.footer.pipelinesCard.buttonText', {
-                        defaultMessage: 'Configure your ingest pipelines',
-                      })}
-                    </EuiButton>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              }
-              image={
-                <FooterCardImage
-                  iconSrc={`${assetBasePath}transform_icon.png`}
-                  backgroundSrc={`${assetBasePath}transform_bg.png`}
-                />
-              }
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiCard
-              paddingSize="xl"
-              textAlign="left"
-              title={i18n.translate('xpack.serverlessSearch.footer.searchUI.title', {
-                defaultMessage: 'Build a user interface with Search UI',
-              })}
-              description={i18n.translate('xpack.serverlessSearch.footer.searchUI.description', {
-                defaultMessage:
-                  'Search UI is a free and open source JavaScript library maintained by Elastic for the fast development of modern, engaging search experiences.',
-              })}
-              footer={
-                <EuiFlexGroup>
-                  <EuiFlexItem>
-                    <EuiButton color="primary">
-                      {i18n.translate('xpack.serverlessSearch.footer.searchUI.buttonText', {
-                        defaultMessage: 'Build with Search UI',
-                      })}
-                    </EuiButton>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              }
-              image={
-                <FooterCardImage
-                  iconSrc={`${assetBasePath}searchui_icon.png`}
-                  backgroundSrc={`${assetBasePath}searchui_bg.png`}
-                />
-              }
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPageTemplate.Section>
-      <EuiPageTemplate.Section alignment="top" className="serverlessSearchFooter">
-        <EuiFlexGroup gutterSize="l">
-          {cloud.usersAndRolesUrl && (
-            <EuiFlexItem>
-              <FooterIcon
-                href={cloud.usersAndRolesUrl}
-                imgSrc={`${assetBasePath}invite_users_icon.png`}
-                title={i18n.translate('xpack.serverlessSearch.footer.inviteUsers.title', {
-                  defaultMessage: 'Invite more users',
-                })}
-              />
-            </EuiFlexItem>
-          )}
-          {cloud.billingUrl && (
-            <EuiFlexItem>
-              <FooterIcon
-                href={cloud.billingUrl}
-                imgSrc={`${assetBasePath}billing_icon.png`}
-                title={i18n.translate('xpack.serverlessSearch.footer.billing.title', {
-                  defaultMessage: 'Billing and usage',
-                })}
-              />
-            </EuiFlexItem>
-          )}
-          <EuiFlexItem>
-            <FooterIcon
-              href="https://www.elastic.co/community/"
-              imgSrc={`${assetBasePath}community_icon.png`}
-              title={i18n.translate('xpack.serverlessSearch.footer.community.title', {
-                defaultMessage: 'Join the community',
-              })}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <FooterIcon
-              href={docLinks.kibanaFeedback}
-              imgSrc={`${assetBasePath}feedback_icon.png`}
-              title={i18n.translate('xpack.serverlessSearch.footer.feedback.title', {
-                defaultMessage: 'Give feedback',
-              })}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+      <EuiPageTemplate.Section alignment="top" className="serverlessSearchOverviewFooterSection">
+        <OverviewPanel
+          title={i18n.translate('xpack.serverlessSearch.overview.footer.title', {
+            defaultMessage: 'Do more with your data',
+          })}
+          description={i18n.translate('xpack.serverlessSearch.overview.footer.description', {
+            defaultMessage:
+              "Your Elasticsearch endpoint is set up and you've made some basic queries. Now you're ready to dive deeper into more advanced tools and use cases.",
+          })}
+          leftPanelContent={<OverviewFooter />}
+          links={[]}
+          overviewPanelProps={{ color: 'transparent', hasShadow: false }}
+        />
       </EuiPageTemplate.Section>
     </EuiPageTemplate>
   );
 };
 
-const FooterCardImage = ({
-  iconSrc,
-  backgroundSrc,
-}: {
-  iconSrc: string;
-  backgroundSrc: string;
-}) => (
-  <div className="serverlessSearchFooterCard--wrapper">
-    <img src={backgroundSrc} alt="" className="serverlessSearchFooterCard--Background" />
-    <EuiImage
-      size={250}
-      src={iconSrc}
-      alt=""
-      wrapperProps={{ className: 'serverlessSearchFooterCard--iconWrapper' }}
-      style={{ width: 'auto', height: '100%', inlineSize: 'auto' }}
-    />
-  </div>
-);
+const OverviewFooter = () => {
+  const {
+    application: { navigateToApp },
+    cloud,
+  } = useKibanaServices();
 
-const FooterIcon = ({ href, imgSrc, title }: { href: string; imgSrc: string; title: string }) => (
-  <EuiLink href={href} target="_blank" external={false}>
-    <EuiFlexGroup direction="column" alignItems="center">
-      <EuiFlexItem>
-        <EuiImage size={120} src={imgSrc} alt="" />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiText color="ghost">
-          <h5>{title}</h5>
-        </EuiText>
-      </EuiFlexItem>
+  return (
+    <EuiFlexGroup gutterSize="xl" direction="column">
+      <EuiFlexGroup gutterSize="m" direction="column">
+        <EuiFlexItem>
+          <EuiCard
+            layout="horizontal"
+            icon={
+              <EuiAvatar
+                size="xl"
+                color="subdued"
+                type="space"
+                iconType="discoverApp"
+                iconSize="original"
+                name="discover"
+              />
+            }
+            titleSize="xs"
+            title={i18n.translate('xpack.serverlessSearch.overview.footer.discover.title', {
+              defaultMessage: 'Discover',
+            })}
+            description={i18n.translate(
+              'xpack.serverlessSearch.overview.footer.discover.description',
+              {
+                defaultMessage:
+                  'Search and filter your data, learn how your fields are structured, and create visualizations.',
+              }
+            )}
+            onClick={() => navigateToApp('discover')}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiCard
+            layout="horizontal"
+            icon={
+              <EuiAvatar
+                size="xl"
+                color="subdued"
+                type="space"
+                iconType="pipelineApp"
+                iconSize="original"
+                name="pipelines"
+              />
+            }
+            titleSize="xs"
+            title={i18n.translate('xpack.serverlessSearch.overview.footer.pipelines.title', {
+              defaultMessage: 'Pipelines',
+            })}
+            description={i18n.translate(
+              'xpack.serverlessSearch.overview.footer.pipelines.description',
+              {
+                defaultMessage:
+                  'Transform your data before indexing. Remove or rename fields, run custom scripts, and much more.',
+              }
+            )}
+            onClick={() => navigateToApp('management', { path: '/ingest/ingest_pipelines' })}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiCard
+            layout="horizontal"
+            icon={
+              <EuiAvatar
+                size="xl"
+                color="subdued"
+                type="space"
+                iconType="notebookApp"
+                iconSize="original"
+                name="documentation"
+              />
+            }
+            titleSize="xs"
+            title={i18n.translate('xpack.serverlessSearch.overview.footer.documentation.title', {
+              defaultMessage: 'Documentation',
+            })}
+            description={i18n.translate(
+              'xpack.serverlessSearch.overview.footer.documentation.description',
+              {
+                defaultMessage: 'Learn more with our references, how-to guides, and tutorials.',
+              }
+            )}
+            href={docLinks.gettingStartedSearch}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiFlexGroup gutterSize="m" alignItems="center">
+        {cloud.usersAndRolesUrl && (
+          <FooterButtonContainer>
+            <EuiButtonEmpty iconType="users" href={cloud.usersAndRolesUrl}>
+              {i18n.translate('xpack.serverlessSearch.overview.footer.links.inviteUsers', {
+                defaultMessage: 'Invite more users',
+              })}
+            </EuiButtonEmpty>
+          </FooterButtonContainer>
+        )}
+        <FooterButtonContainer>
+          <EuiButtonEmpty iconType="heart" href="https://www.elastic.co/community/">
+            {i18n.translate('xpack.serverlessSearch.overview.footer.links.community', {
+              defaultMessage: 'Join our community',
+            })}
+          </EuiButtonEmpty>
+        </FooterButtonContainer>
+        <FooterButtonContainer>
+          <EuiButtonEmpty iconType="faceHappy" href={docLinks.kibanaFeedback}>
+            {i18n.translate('xpack.serverlessSearch.overview.footer.links.feedback', {
+              defaultMessage: 'Give feedback',
+            })}
+          </EuiButtonEmpty>
+        </FooterButtonContainer>
+      </EuiFlexGroup>
     </EuiFlexGroup>
-  </EuiLink>
+  );
+};
+
+const FooterButtonContainer: React.FC = ({ children }) => (
+  <EuiFlexItem>
+    <EuiPanel hasShadow={false} paddingSize="none">
+      <EuiFlexGroup>
+        <EuiFlexItem>{children}</EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  </EuiFlexItem>
 );

x-pack/plugins/translations/translations/fr-FR.json

@@ -34673,20 +34673,6 @@
     "xpack.serverlessSearch.configureClient.title": "Configurer votre client",
     "xpack.serverlessSearch.disabled": "Désactivé",
     "xpack.serverlessSearch.enabled": "Activé",
-    "xpack.serverlessSearch.footer.billing.title": "Facturation et utilisation",
-    "xpack.serverlessSearch.footer.community.title": "Rejoindre la communauté",
-    "xpack.serverlessSearch.footer.discoverCard.buttonText": "Explorer les données dans Discover",
-    "xpack.serverlessSearch.footer.discoverCard.description": "Avec Discover, vous pouvez rapidement rechercher et filtrer vos données, obtenir des informations sur la structure des champs et afficher vos résultats dans une visualisation.",
-    "xpack.serverlessSearch.footer.discoverCard.title": "Explorer et visualiser vos données dans Discover",
-    "xpack.serverlessSearch.footer.feedback.title": "Donner un retour",
-    "xpack.serverlessSearch.footer.inviteUsers.title": "Inviter d'autres utilisateurs",
-    "xpack.serverlessSearch.footer.pipelinesCard.buttonText": "Configurer vos pipelines d’ingestion",
-    "xpack.serverlessSearch.footer.pipelinesCard.description": "Prétraiter vos données avant leur indexation dans Elasticsearch. Supprimez des champs, extrayez des valeurs de textes ou enrichissez vos données avec des modèles de Machine Learning comme ELSER.",
-    "xpack.serverlessSearch.footer.pipelinesCard.title": "Transformer vos données à l’aide de pipelines",
-    "xpack.serverlessSearch.footer.searchUI.buttonText": "Créer avec Search UI",
-    "xpack.serverlessSearch.footer.searchUI.description": "L’interface utilisateur Search est une bibliothèque JavaScript libre et gratuite maintenue par Elastic pour un développement rapide d’expériences de recherche modernes et attrayantes.",
-    "xpack.serverlessSearch.footer.searchUI.title": "Créer une interface utilisateur avec Search UI",
-    "xpack.serverlessSearch.footer.title": "Et ensuite ?",
     "xpack.serverlessSearch.header.title": "Lancez-vous avec Elasticsearch",
     "xpack.serverlessSearch.invalidJsonError": "JSON non valide",
     "xpack.serverlessSearch.languages.cURL": "cURL",

x-pack/plugins/translations/translations/ja-JP.json

@@ -34672,20 +34672,6 @@
     "xpack.serverlessSearch.configureClient.title": "クライアントを構成",
     "xpack.serverlessSearch.disabled": "無効",
     "xpack.serverlessSearch.enabled": "有効",
-    "xpack.serverlessSearch.footer.billing.title": "請求と使用状況",
-    "xpack.serverlessSearch.footer.community.title": "コミュニティに参加",
-    "xpack.serverlessSearch.footer.discoverCard.buttonText": "Discoverでデータを探索",
-    "xpack.serverlessSearch.footer.discoverCard.description": "Discoverを使えば、データをすばやく検索してフィルタリングし、フィールドの構造に関する情報を取得し、調査結果を可視化して表示できます。",
-    "xpack.serverlessSearch.footer.discoverCard.title": "Discoverでデータを探索して可視化",
-    "xpack.serverlessSearch.footer.feedback.title": "フィードバックを作成する",
-    "xpack.serverlessSearch.footer.inviteUsers.title": "その他のユーザーを招待",
-    "xpack.serverlessSearch.footer.pipelinesCard.buttonText": "インジェストパイプラインを構成",
-    "xpack.serverlessSearch.footer.pipelinesCard.description": "Elasticsearchでインデックス化する前にデータを前処理します。ELSERなどの機械学習モデルを使用して、フィールドを削除したり、テキストから値を抽出したり、データを強化したりします。",
-    "xpack.serverlessSearch.footer.pipelinesCard.title": "パイプラインを使用してデータを変換",
-    "xpack.serverlessSearch.footer.searchUI.buttonText": "Search UIで構築",
-    "xpack.serverlessSearch.footer.searchUI.description": "Search UIはElasticが管理している無料のオープンソースJavaScriptライブラリで、モダンで魅力的な検索エクスペリエンスをすばやく開発できます。",
-    "xpack.serverlessSearch.footer.searchUI.title": "Search UIでユーザーインターフェースを構築",
-    "xpack.serverlessSearch.footer.title": "次のステップ",
     "xpack.serverlessSearch.header.title": "Elasticsearchをはじめよう",
     "xpack.serverlessSearch.invalidJsonError": "無効なJSON",
     "xpack.serverlessSearch.languages.cURL": "cURL",

x-pack/plugins/translations/translations/zh-CN.json

@@ -34668,20 +34668,6 @@
     "xpack.serverlessSearch.configureClient.title": "配置客户端",
     "xpack.serverlessSearch.disabled": "已禁用",
     "xpack.serverlessSearch.enabled": "已启用",
-    "xpack.serverlessSearch.footer.billing.title": "帐单和使用情况",
-    "xpack.serverlessSearch.footer.community.title": "加入社区",
-    "xpack.serverlessSearch.footer.discoverCard.buttonText": "在 Discover 中浏览数据",
-    "xpack.serverlessSearch.footer.discoverCard.description": "使用 Discover，您可以快速搜索和筛选数据，获取有关字段结构的信息，并在可视化中显示结果。",
-    "xpack.serverlessSearch.footer.discoverCard.title": "在 Discover 中浏览您的数据并进行可视化",
-    "xpack.serverlessSearch.footer.feedback.title": "反馈",
-    "xpack.serverlessSearch.footer.inviteUsers.title": "邀请更多用户",
-    "xpack.serverlessSearch.footer.pipelinesCard.buttonText": "配置采集管道",
-    "xpack.serverlessSearch.footer.pipelinesCard.description": "先预处理数据，然后索引到 Elasticsearch。移除字段，从文本中提取值，或使用 ELSER 等 Machine Learning 模型扩充您的数据。",
-    "xpack.serverlessSearch.footer.pipelinesCard.title": "使用管道转换数据",
-    "xpack.serverlessSearch.footer.searchUI.buttonText": "通过搜索 UI 构建",
-    "xpack.serverlessSearch.footer.searchUI.description": "搜索 UI 是一个由 Elastic 维护的免费开源 JavaScript 库，用于快速打造现代、富于吸引力的搜索体验。",
-    "xpack.serverlessSearch.footer.searchUI.title": "通过搜索 UI 构建用户界面",
-    "xpack.serverlessSearch.footer.title": "后续操作",
     "xpack.serverlessSearch.header.title": "Elasticsearch 入门",
     "xpack.serverlessSearch.invalidJsonError": "JSON 无效",
     "xpack.serverlessSearch.languages.cURL": "cURL",