[Serverless Search] Serverless Getting Started UI Polish (#167118)

Fixes a long list of julian's UI bugs. Tested on both stateful and
serverless. See videos on visual fixes.


1a450bf6-7477-40a4-a020-a5172b56ef4c


92b40ecd-d888-4fd6-af91-045e81a1843f

Things to note:
- I had to adjust the asset path here as locally on main the images were
broken (the header for example).

packages/kbn-search-api-panels/components/code_box.tsx

@@ -87,7 +87,7 @@ export const CodeBox: React.FC<CodeBoxProps> = ({
   return (
     <EuiThemeProvider colorMode="dark">
       <EuiPanel paddingSize="xs" className="codeBoxPanel" data-test-subj="codeBlockControlsPanel">
-        <EuiFlexGroup alignItems="center">
+        <EuiFlexGroup alignItems="center" responsive={false} gutterSize="s">
           <EuiFlexItem>
             <EuiThemeProvider colorMode="light">
               <EuiPopover
@@ -104,7 +104,7 @@ export const CodeBox: React.FC<CodeBoxProps> = ({
           <EuiFlexItem grow={false}>
             <EuiCopy textToCopy={codeSnippet}>
               {(copy) => (
-                <EuiButtonEmpty color="text" iconType="copy" size="s" onClick={copy}>
+                <EuiButtonEmpty color="text" iconType="copyClipboard" size="s" onClick={copy}>
                   {i18n.translate('searchApiPanels.welcomeBanner.codeBox.copyButtonLabel', {
                     defaultMessage: 'Copy',
                   })}
@@ -127,6 +127,7 @@ export const CodeBox: React.FC<CodeBoxProps> = ({
           transparentBackground
           fontSize="m"
           language={languageType || selectedLanguage.languageStyling || selectedLanguage.id}
+          overflowHeight={500}
         >
           {codeSnippet}
         </EuiCodeBlock>

packages/kbn-search-api-panels/components/github_link.tsx

@@ -18,7 +18,7 @@ export const GithubLink: React.FC<{
   return (
     <EuiFlexGroup alignItems="center" gutterSize="xs" justifyContent="flexEnd">
       <EuiFlexItem grow={false}>
-        <EuiIcon size="s" type={`${assetBasePath}github.svg`} />
+        <EuiIcon size="s" type={`${assetBasePath}/github.svg`} />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiText size="s">

packages/kbn-search-api-panels/components/ingest_data.tsx

@@ -93,6 +93,7 @@ export const IngestData: React.FC<IngestDataProps> = ({
         defaultMessage: 'Ingest data',
       })}
     >
+      <EuiSpacer size="l" />
       <EuiFormFieldset
         legend={{
           children: i18n.translate('searchApiPanels.welcomeBanner.ingestData.ingestLegendLabel', {

packages/kbn-search-api-panels/components/install_client.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-import { EuiSpacer, EuiCallOut, EuiText, EuiPanelProps } from '@elastic/eui';
+import { EuiSpacer, EuiPanelProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { ApplicationStart } from '@kbn/core-application-browser';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
@@ -73,21 +73,6 @@ export const InstallClientPanel: React.FC<InstallClientProps> = ({
       />
       <EuiSpacer />
       <Link language={language} assetBasePath={assetBasePath} />
-      <EuiSpacer />
-      <EuiCallOut
-        iconType="iInCircle"
-        title={i18n.translate('searchApiPanels.welcomeBanner.apiCallOut.title', {
-          defaultMessage: 'Call the API with Console',
-        })}
-        color="primary"
-      >
-        <EuiText size="s">
-          {i18n.translate('searchApiPanels.welcomeBanner.apiCallout.content', {
-            defaultMessage:
-              'Console enables you to call Elasticsearch and Kibana REST APIs directly, without needing to install a language client.',
-          })}
-        </EuiText>
-      </EuiCallOut>
     </>
   );
   return (

packages/kbn-search-api-panels/components/integrations_panel.tsx

@@ -35,20 +35,19 @@ export const IntegrationsPanel: React.FC<IntegrationsPanelProps> = ({
   return (
     <EuiThemeProvider colorMode="dark">
       <EuiPanel paddingSize="xl">
-        <EuiFlexGroup alignItems="center" justifyContent="flexStart">
+        <EuiFlexGroup alignItems="flexStart" justifyContent="flexStart">
           <EuiFlexItem grow={false}>
             <EuiIcon type="logoLogstash" size="xxl" />
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiTitle size="l">
+            <EuiTitle size="s">
               <h3>
                 {i18n.translate('searchApiPanels.welcomeBanner.ingestData.logstashTitle', {
                   defaultMessage: 'Logstash',
                 })}
               </h3>
             </EuiTitle>
-
-            <EuiSpacer size="xs" />
+            <EuiSpacer size="s" />
             <EuiText size="s">
               <p>
                 {i18n.translate('searchApiPanels.welcomeBanner.ingestData.logstashDescription', {
@@ -57,16 +56,16 @@ export const IntegrationsPanel: React.FC<IntegrationsPanelProps> = ({
                 })}
               </p>
             </EuiText>
-            <EuiSpacer size="s" />
-            <EuiFlexGroup justifyContent="flexStart">
-              <EuiFlexItem>
+            <EuiSpacer size="m" />
+            <EuiFlexGroup justifyContent="flexStart" gutterSize="l">
+              <EuiFlexItem grow={false}>
                 <EuiText size="s">
                   <EuiLink href={docLinks.logstash} target="_blank">
                     {LEARN_MORE_LABEL}
                   </EuiLink>
                 </EuiText>
               </EuiFlexItem>
-              <EuiFlexItem>
+              <EuiFlexItem grow={false}>
                 <GithubLink
                   href="https://github.com/elastic/logstash"
                   label={i18n.translate('searchApiPanels.welcomeBanner.ingestData.logstashLink', {
@@ -79,39 +78,39 @@ export const IntegrationsPanel: React.FC<IntegrationsPanelProps> = ({
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="xl" />
-        <EuiFlexGroup alignItems="center" justifyContent="flexStart">
+        <EuiFlexGroup alignItems="flexStart" justifyContent="flexStart">
           <EuiFlexItem grow={false}>
             <EuiIcon type="logoBeats" size="xxl" />
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiTitle size="l">
+            <EuiTitle size="s">
               <h3>
                 {i18n.translate('searchApiPanels.welcomeBanner.ingestData.beatsTitle', {
                   defaultMessage: 'Beats',
                 })}
               </h3>
             </EuiTitle>
-            <EuiSpacer size="xs" />
+            <EuiSpacer size="s" />
             <EuiText size="s">
               {i18n.translate('searchApiPanels.welcomeBanner.ingestData.beatsDescription', {
                 defaultMessage:
                   'Lightweight, single-purpose data shippers for Elasticsearch. Use Beats to send operational data from your servers.',
               })}
             </EuiText>
-            <EuiSpacer size="s" />
-            <EuiFlexGroup justifyContent="flexStart">
-              <EuiFlexItem>
+            <EuiSpacer size="m" />
+            <EuiFlexGroup justifyContent="flexStart" gutterSize="l">
+              <EuiFlexItem grow={false}>
                 <EuiText size="s">
                   <EuiLink href={docLinks.beats} target="_blank">
                     {LEARN_MORE_LABEL}
                   </EuiLink>
                 </EuiText>
               </EuiFlexItem>
-              <EuiFlexItem>
+              <EuiFlexItem grow={false}>
                 <GithubLink
                   href="https://github.com/elastic/beats"
                   label={i18n.translate('searchApiPanels.welcomeBanner.ingestData.beatsLink', {
-                    defaultMessage: 'beats',
+                    defaultMessage: 'Beats',
                   })}
                   assetBasePath={assetBasePath}
                 />
@@ -119,36 +118,36 @@ export const IntegrationsPanel: React.FC<IntegrationsPanelProps> = ({
             </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiSpacer size="l" />
-        <EuiFlexGroup alignItems="center" justifyContent="flexStart">
+        <EuiSpacer size="xl" />
+        <EuiFlexGroup alignItems="flexStart" justifyContent="flexStart">
           <EuiFlexItem grow={false}>
             <EuiIcon type="logoEnterpriseSearch" size="xxl" />
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiTitle size="l">
+            <EuiTitle size="s">
               <h3>
                 {i18n.translate('searchApiPanels.welcomeBanner.ingestData.connectorsTitle', {
                   defaultMessage: 'Connector Client',
                 })}
               </h3>
             </EuiTitle>
-            <EuiSpacer size="xs" />
+            <EuiSpacer size="s" />
             <EuiText size="s">
               {i18n.translate('searchApiPanels.welcomeBanner.ingestData.connectorsDescription', {
                 defaultMessage:
                   'Specialized integrations for syncing data from third-party sources to Elasticsearch. Use Elastic Connectors to sync content from a range of databases and object stores.',
               })}
             </EuiText>
-            <EuiSpacer size="s" />
-            <EuiFlexGroup justifyContent="flexStart">
-              <EuiFlexItem>
+            <EuiSpacer size="m" />
+            <EuiFlexGroup justifyContent="flexStart" gutterSize="l">
+              <EuiFlexItem grow={false}>
                 <EuiText size="s">
                   <EuiLink href={docLinks.connectors} target="_blank">
                     {LEARN_MORE_LABEL}
                   </EuiLink>
                 </EuiText>
               </EuiFlexItem>
-              <EuiFlexItem>
+              <EuiFlexItem grow={false}>
                 <GithubLink
                   href="https://github.com/elastic/connectors-python"
                   label={i18n.translate(

packages/kbn-search-api-panels/components/overview_panel.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import {
   EuiFlexGroup,
@@ -41,14 +41,14 @@ export const OverviewPanel: React.FC<OverviewPanelProps> = ({
   return (
     <>
       <EuiSpacer size="xxl" />
-      <EuiFlexGroup alignItems="center">
+      <EuiFlexGroup alignItems="flexStart" gutterSize="xl">
         {leftPanelContent && <EuiFlexItem grow={6}>{leftPanelContent}</EuiFlexItem>}
         <EuiFlexItem grow={4}>
-          <EuiPanel color="subdued" {...overviewPanelProps}>
-            <EuiTitle>
+          <EuiPanel paddingSize="none" color="subdued" {...overviewPanelProps}>
+            <EuiTitle size="s">
               <h2>{title}</h2>
             </EuiTitle>
-            <EuiSpacer />
+            <EuiSpacer size="m" />
             {description && <EuiText>{description}</EuiText>}
             {children}
             {links && links.length > 0 ? (
@@ -59,11 +59,14 @@ export const OverviewPanel: React.FC<OverviewPanelProps> = ({
                 </EuiTitle>
                 <EuiSpacer size="s" />
                 {links.map(({ label, href }, index) => (
-                  <EuiText size="s" key={`overviewPanel.link.${index}`}>
-                    <EuiLink key={index} href={href} target="_blank">
-                      {label}
-                    </EuiLink>
-                  </EuiText>
+                  <Fragment key={`overviewPanel.link.${index}`}>
+                    <EuiText size="s">
+                      <EuiLink key={index} href={href} target="_blank">
+                        {label}
+                      </EuiLink>
+                    </EuiText>
+                    <EuiSpacer size="xs" />
+                  </Fragment>
                 ))}
               </>
             ) : null}

packages/kbn-search-api-panels/components/try_in_console_button.tsx

@@ -40,7 +40,7 @@ export const TryInConsoleButton = ({
   if (!consolePreviewLink) return null;
 
   return (
-    <EuiButtonEmpty href={consolePreviewLink} iconType="popout" target="_blank">
+    <EuiButtonEmpty href={consolePreviewLink} iconType="popout" target="_blank" size="s">
       <FormattedMessage
         id="searchApiPanels.welcomeBanner.tryInConsoleButton"
         defaultMessage="Try in console"

packages/kbn-search-api-panels/index.tsx

@@ -37,50 +37,57 @@ export const WelcomeBanner: React.FC<WelcomeBannerProps> = ({
   image,
   showDescription = true,
 }) => (
-  <EuiFlexGroup justifyContent="spaceBetween">
-    <EuiFlexItem grow={false}>
-      {/* Reversing column direction here so screenreaders keep h1 as the first element */}
-      <EuiFlexGroup justifyContent="flexStart" direction="columnReverse" gutterSize="s">
-        <EuiFlexItem grow={false}>
-          <EuiTitle className="serverlessSearchHeaderTitle" size="s">
-            <h1>
-              {i18n.translate('searchApiPanels.welcomeBanner.header.title', {
-                defaultMessage: 'Get started with Elasticsearch',
-              })}
-            </h1>
-          </EuiTitle>
-        </EuiFlexItem>
-        {Boolean(user) && (
+  <>
+    <EuiSpacer size="xxl" />
+    <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+      <EuiFlexItem grow={2}>
+        {/* Reversing column direction here so screenreaders keep h1 as the first element */}
+        <EuiFlexGroup justifyContent="flexStart" direction="columnReverse" gutterSize="s">
           <EuiFlexItem grow={false}>
-            <EuiTitle size="xxxs">
-              <h2>
-                {user
-                  ? i18n.translate('searchApiPanels.welcomeBanner.header.greeting.customTitle', {
-                      defaultMessage: 'Hi {name}!',
-                      values: { name: user.full_name || user.username },
-                    })
-                  : i18n.translate('searchApiPanels.welcomeBanner.header.greeting.defaultTitle', {
-                      defaultMessage: 'Hi!',
-                    })}
-              </h2>
+            <EuiTitle size="l">
+              <h1>
+                {i18n.translate('searchApiPanels.welcomeBanner.header.title', {
+                  defaultMessage: 'Get started with Elasticsearch',
+                })}
+              </h1>
             </EuiTitle>
           </EuiFlexItem>
+          {Boolean(user) && (
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="xxs">
+                <h4>
+                  {user
+                    ? i18n.translate('searchApiPanels.welcomeBanner.header.greeting.customTitle', {
+                        defaultMessage: 'Hi {name}!',
+                        values: { name: user.full_name || user.username },
+                      })
+                    : i18n.translate('searchApiPanels.welcomeBanner.header.greeting.defaultTitle', {
+                        defaultMessage: 'Hi!',
+                      })}
+                </h4>
+              </EuiTitle>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+        <EuiSpacer />
+        {showDescription && (
+          <EuiText>
+            {i18n.translate('searchApiPanels.welcomeBanner.header.description', {
+              defaultMessage:
+                "Set up your programming language client, ingest some data, and you'll be ready to start searching within minutes.",
+            })}
+          </EuiText>
         )}
-      </EuiFlexGroup>
-      <EuiSpacer />
-      {showDescription && (
-        <EuiText>
-          {i18n.translate('searchApiPanels.welcomeBanner.header.description', {
-            defaultMessage:
-              "Set up your programming language client, ingest some data, and you'll be ready to start searching within minutes.",
-          })}
-        </EuiText>
-      )}
-      <EuiSpacer size="xxl" />
-    </EuiFlexItem>
+      </EuiFlexItem>
 
-    <EuiFlexItem grow={false}>
-      <EuiImage alt="" src={image ? image : `${assetBasePath}serverless_header.png`} size="554px" />
-    </EuiFlexItem>
-  </EuiFlexGroup>
+      <EuiFlexItem grow={1}>
+        <EuiImage
+          alt=""
+          src={image ? image : `${assetBasePath}/serverless_header.png`}
+          size="original"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    <EuiSpacer size="xxl" />
+  </>
 );

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

@@ -86,6 +86,7 @@ export const ApiKeyPanel = ({ setClientApiKey }: { setClientApiKey: (value: stri
               })}
             </h3>
           </EuiTitle>
+          <EuiSpacer size="s" />
           <EuiText size="s">
             {i18n.translate('xpack.serverlessSearch.apiKey.panel.description', {
               defaultMessage:
@@ -94,8 +95,8 @@ export const ApiKeyPanel = ({ setClientApiKey }: { setClientApiKey: (value: stri
           </EuiText>
           <EuiSpacer size="l" />
           <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-            <EuiFlexItem>
-              <EuiFlexGroup>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup gutterSize="m">
                 <EuiFlexItem>
                   <span>
                     <EuiButton

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

@@ -10,3 +10,7 @@
 .serverlessSearchOverviewFooterSection {
   background-color: transparentize($euiColorPrimary, .9);
 }
+
+.serverlessSearchCloudDetailsCopyPanel {
+  word-break: break-all;
+}

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

@@ -153,7 +153,7 @@ export const ElasticsearchOverview = () => {
                 <EuiTitle size="xxxs">
                   <h6>
                     {i18n.translate('xpack.serverlessSearch.cloudIdDetails.url.title', {
-                      defaultMessage: 'Cloud URL',
+                      defaultMessage: 'Elasticsearch Endpoint',
                     })}
                   </h6>
                 </EuiTitle>