Add Cloud details panel

x-pack/plugins/serverless_search/public/application/components/overview/cloud_details.tsx → packages/kbn-search-api-panels/components/cloud_details.tsx

@@ -1,8 +1,9 @@
 /*
  * 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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React, { useState } from 'react';
@@ -20,7 +21,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { OverviewPanel } from '@kbn/search-api-panels';
+import { OverviewPanel } from '..';
 
 export interface CloudDetailsPanelProps {
   cloudId?: string;

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

@@ -11,6 +11,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer, EuiImage, EuiText } fro
 import { i18n } from '@kbn/i18n';
 import { AuthenticatedUser } from '@kbn/security-plugin/common';
 
+export * from './components/cloud_details';
 export * from './components/code_box';
 export * from './components/github_link';
 export * from './components/ingest_data';

x-pack/plugins/enterprise_search/public/applications/shared/getting_started/getting_started.tsx

@@ -23,6 +23,7 @@ import {
   OverviewPanel,
   getLanguageDefinitionCodeSnippet,
   getConsoleRequest,
+  CloudDetailsPanel,
 } from '@kbn/search-api-panels';
 
 import { ApiKey } from '@kbn/security-plugin/common';
@@ -39,7 +40,6 @@ import { curlDefinition } from './languages/curl';
 import { languageDefinitions } from './languages/languages';
 import { AddDataPanelContent } from './panels/add_data_panel_content';
 import { ApiKeyPanelContent } from './panels/api_key_panel_content';
-import { ElasticsearchUrlPanelContent } from './panels/elasticsearch_url_panel_content';
 import { InitializeClientPanelContent } from './panels/initialize_client_panel_content';
 import { GettingStartedPipelinePanel } from './panels/pipeline_panel';
 import { SearchQueryPanelContent } from './panels/search_query_panel_content';
@@ -130,32 +130,7 @@ export const GettingStarted: React.FC<GettingStartedProps> = ({
         overviewPanelProps={{ color: 'plain', hasShadow: false }}
       />
 
-      <OverviewPanel
-        description={i18n.translate(
-          'xpack.enterpriseSearch.content.overview.gettingStarted.cloudId.description',
-          {
-            defaultMessage: "You'll need this to identify your deployment.",
-          }
-        )}
-        leftPanelContent={
-          isPanelLeft ? (
-            <ElasticsearchUrlPanelContent cloudId={codeArgs.cloudId} url={codeArgs.url} />
-          ) : undefined
-        }
-        rightPanelContent={
-          isPanelLeft ? undefined : (
-            <ElasticsearchUrlPanelContent cloudId={codeArgs.cloudId} url={codeArgs.url} />
-          )
-        }
-        links={[]}
-        title={i18n.translate(
-          'xpack.enterpriseSearch.overview.gettingStarted.cloudId.panelTitleElastic',
-          {
-            defaultMessage: 'Copy your Elasticsearch URL',
-          }
-        )}
-        overviewPanelProps={{ color: 'plain', hasShadow: false }}
-      />
+      <CloudDetailsPanel cloudId={codeArgs.cloudId} elasticsearchUrl={codeArgs.url} />
 
       <OverviewPanel
         description={i18n.translate(

x-pack/plugins/enterprise_search/public/applications/shared/getting_started/panels/api_key_panel_content.tsx

@@ -109,10 +109,10 @@ export const ApiKeyPanelContent: React.FC<ApiKeyPanelContent> = ({ apiKeys, open
                       values={{
                         number: (
                           <EuiBadge
-                            color={apiKeys.length > 0 ? 'success' : 'warning'}
+                            color={(apiKeys?.length || 0) > 0 ? 'success' : 'warning'}
                             data-test-subj="api-keys-count-badge"
                           >
-                            {apiKeys.length}
+                            {apiKeys?.length || 0}
                           </EuiBadge>
                         ),
                       }}

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

@@ -36,7 +36,7 @@ import type {
   LanguageDefinitionSnippetArguments,
 } from '@kbn/search-api-panels';
 import { useLocation } from 'react-router-dom';
-import { PipelinePanel } from '@kbn/search-api-panels';
+import { CloudDetailsPanel, PipelinePanel } from '@kbn/search-api-panels';
 import { docLinks } from '../../../common/doc_links';
 import { useKibanaServices } from '../hooks/use_kibana';
 import { useAssetBasePath } from '../hooks/use_asset_base_path';
@@ -53,7 +53,6 @@ import { ApiKeyPanel } from './api_key/api_key';
 import { ConnectorsCallout } from './connectors_callout';
 import { ConnectorIngestionPanel } from './connectors_ingestion';
 import { PipelineButtonOverview } from './pipeline_button_overview';
-import { CloudDetailsPanel } from './overview/cloud_details';
 
 export const ElasticsearchOverview = () => {
   const [selectedLanguage, setSelectedLanguage] = useState<LanguageDefinition>(javaDefinition);

x-pack/plugins/serverless_search/tsconfig.json

@@ -9,7 +9,8 @@
     "public/**/*.ts",
     "public/**/*.tsx",
     "server/**/*.ts",
-    "../../../typings/**/*"
+    "../../../typings/**/*",
+    "../../../packages/kbn-search-api-panels/components/cloud_details.tsx"
   ],
   "exclude": [
     "target/**/*"