From 3043bed9623c4b18cd32a18ab47f8a38c5243ba3 Mon Sep 17 00:00:00 2001 From: Joseph McElroy Date: Mon, 25 Sep 2023 21:11:12 +0100 Subject: [PATCH] [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. https://github.com/elastic/kibana/assets/49480/1a450bf6-7477-40a4-a020-a5172b56ef4c https://github.com/elastic/kibana/assets/49480/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). --- .../components/code_box.tsx | 5 +- .../components/github_link.tsx | 2 +- .../components/ingest_data.tsx | 1 + .../components/install_client.tsx | 17 +--- .../components/integrations_panel.tsx | 47 +++++----- .../components/overview_panel.tsx | 23 ++--- .../components/try_in_console_button.tsx | 2 +- packages/kbn-search-api-panels/index.tsx | 89 ++++++++++--------- .../components/api_key/api_key.tsx | 5 +- .../application/components/overview.scss | 4 + .../application/components/overview.tsx | 2 +- 11 files changed, 99 insertions(+), 98 deletions(-) diff --git a/packages/kbn-search-api-panels/components/code_box.tsx b/packages/kbn-search-api-panels/components/code_box.tsx index ca3dd4d8b52c..08fdd4cdf33a 100644 --- a/packages/kbn-search-api-panels/components/code_box.tsx +++ b/packages/kbn-search-api-panels/components/code_box.tsx @@ -87,7 +87,7 @@ export const CodeBox: React.FC = ({ return ( - + = ({ {(copy) => ( - + {i18n.translate('searchApiPanels.welcomeBanner.codeBox.copyButtonLabel', { defaultMessage: 'Copy', })} @@ -127,6 +127,7 @@ export const CodeBox: React.FC = ({ transparentBackground fontSize="m" language={languageType || selectedLanguage.languageStyling || selectedLanguage.id} + overflowHeight={500} > {codeSnippet} diff --git a/packages/kbn-search-api-panels/components/github_link.tsx b/packages/kbn-search-api-panels/components/github_link.tsx index d0b41e21daea..9f5a2ee700c1 100644 --- a/packages/kbn-search-api-panels/components/github_link.tsx +++ b/packages/kbn-search-api-panels/components/github_link.tsx @@ -18,7 +18,7 @@ export const GithubLink: React.FC<{ return ( - + diff --git a/packages/kbn-search-api-panels/components/ingest_data.tsx b/packages/kbn-search-api-panels/components/ingest_data.tsx index d25f7a74d05e..0b0e11b13618 100644 --- a/packages/kbn-search-api-panels/components/ingest_data.tsx +++ b/packages/kbn-search-api-panels/components/ingest_data.tsx @@ -93,6 +93,7 @@ export const IngestData: React.FC = ({ defaultMessage: 'Ingest data', })} > + = ({ /> - - - - {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.', - })} - - ); return ( diff --git a/packages/kbn-search-api-panels/components/integrations_panel.tsx b/packages/kbn-search-api-panels/components/integrations_panel.tsx index 6f612be4dd10..dc4c47247757 100644 --- a/packages/kbn-search-api-panels/components/integrations_panel.tsx +++ b/packages/kbn-search-api-panels/components/integrations_panel.tsx @@ -35,20 +35,19 @@ export const IntegrationsPanel: React.FC = ({ return ( - + - +

{i18n.translate('searchApiPanels.welcomeBanner.ingestData.logstashTitle', { defaultMessage: 'Logstash', })}

- - +

{i18n.translate('searchApiPanels.welcomeBanner.ingestData.logstashDescription', { @@ -57,16 +56,16 @@ export const IntegrationsPanel: React.FC = ({ })}

- - - + + + {LEARN_MORE_LABEL} - + = ({ - + - +

{i18n.translate('searchApiPanels.welcomeBanner.ingestData.beatsTitle', { defaultMessage: 'Beats', })}

- + {i18n.translate('searchApiPanels.welcomeBanner.ingestData.beatsDescription', { defaultMessage: 'Lightweight, single-purpose data shippers for Elasticsearch. Use Beats to send operational data from your servers.', })} - - - + + + {LEARN_MORE_LABEL} - + @@ -119,36 +118,36 @@ export const IntegrationsPanel: React.FC = ({ - - + + - +

{i18n.translate('searchApiPanels.welcomeBanner.ingestData.connectorsTitle', { defaultMessage: 'Connector Client', })}

- + {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.', })} - - - + + + {LEARN_MORE_LABEL} - + = ({ return ( <> - + {leftPanelContent && {leftPanelContent}} - - + +

{title}

 - + {description && {description}} {children} {links && links.length > 0 ? ( @@ -59,11 +59,14 @@ export const OverviewPanel: React.FC = ({ {links.map(({ label, href }, index) => ( - - - {label} - - + + + + {label} + + + + ))} ) : null} diff --git a/packages/kbn-search-api-panels/components/try_in_console_button.tsx b/packages/kbn-search-api-panels/components/try_in_console_button.tsx index 35f6ef5d0018..93012c58a036 100644 --- a/packages/kbn-search-api-panels/components/try_in_console_button.tsx +++ b/packages/kbn-search-api-panels/components/try_in_console_button.tsx @@ -40,7 +40,7 @@ export const TryInConsoleButton = ({ if (!consolePreviewLink) return null; return ( - + = ({ image, showDescription = true, }) => ( - - - {/* Reversing column direction here so screenreaders keep h1 as the first element */} - - - -

- {i18n.translate('searchApiPanels.welcomeBanner.header.title', { - defaultMessage: 'Get started with Elasticsearch', - })} -

- - - {Boolean(user) && ( + <> + + + + {/* Reversing column direction here so screenreaders keep h1 as the first element */} + - -

- {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!', - })} -

+ +

+ {i18n.translate('searchApiPanels.welcomeBanner.header.title', { + defaultMessage: 'Get started with Elasticsearch', + })} +

+ {Boolean(user) && ( + + +

+ {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!', + })} +

+ + + )} + + + {showDescription && ( + + {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.", + })} + )} - - - {showDescription && ( - - {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.", - })} - - )} - - + - - - - + + + + + + ); diff --git a/x-pack/plugins/serverless_search/public/application/components/api_key/api_key.tsx b/x-pack/plugins/serverless_search/public/application/components/api_key/api_key.tsx index 671f1c1ff8cf..5e9758e134b2 100644 --- a/x-pack/plugins/serverless_search/public/application/components/api_key/api_key.tsx +++ b/x-pack/plugins/serverless_search/public/application/components/api_key/api_key.tsx @@ -86,6 +86,7 @@ export const ApiKeyPanel = ({ setClientApiKey }: { setClientApiKey: (value: stri })} + {i18n.translate('xpack.serverlessSearch.apiKey.panel.description', { defaultMessage: @@ -94,8 +95,8 @@ export const ApiKeyPanel = ({ setClientApiKey }: { setClientApiKey: (value: stri - - + + {
{i18n.translate('xpack.serverlessSearch.cloudIdDetails.url.title', { - defaultMessage: 'Cloud URL', + defaultMessage: 'Elasticsearch Endpoint', })}