Language client getting started dedicated

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

@@ -0,0 +1,142 @@
+/*
+ * 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 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';
+import {
+  EuiCheckableCard,
+  EuiCodeBlock,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiThemeProvider,
+  EuiTitle,
+  EuiBadge,
+  EuiPanelProps,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { OverviewPanel } from '..';
+import { ELASTICSEARCH_URL_PLACEHOLDER } from '../constants';
+
+export interface CloudDetailsPanelProps {
+  cloudId?: string;
+  elasticsearchUrl?: string;
+  isPanelLeft?: boolean;
+  overviewPanelProps?: Partial<EuiPanelProps>;
+}
+
+enum CloudDetail {
+  ElasticsearchEndpoint = 'es_url',
+  CloudId = 'cloud_id',
+}
+
+export const CloudDetailsPanel = ({
+  cloudId,
+  elasticsearchUrl = ELASTICSEARCH_URL_PLACEHOLDER,
+  isPanelLeft = true,
+  overviewPanelProps,
+}: CloudDetailsPanelProps) => {
+  const [selectedDetail, setSelectedCloudDetail] = useState<CloudDetail>(
+    CloudDetail.ElasticsearchEndpoint
+  );
+  const panelContent = (
+    <EuiThemeProvider colorMode="dark">
+      <EuiPanel paddingSize="xs">
+        <EuiCodeBlock isCopyable fontSize="m" className="serverlessSearchCloudDetailsCopyPanel">
+          {selectedDetail === CloudDetail.CloudId && cloudId}
+          {selectedDetail === CloudDetail.ElasticsearchEndpoint && elasticsearchUrl}
+        </EuiCodeBlock>
+      </EuiPanel>
+    </EuiThemeProvider>
+  );
+  return (
+    <OverviewPanel
+      description={i18n.translate('searchApiPanels.cloudIdDetails.description', {
+        defaultMessage: 'Get ready to ingest and query your data by choosing a connection option:',
+      })}
+      leftPanelContent={isPanelLeft ? panelContent : undefined}
+      rightPanelContent={isPanelLeft ? undefined : panelContent}
+      links={[]}
+      title={i18n.translate('searchApiPanels.cloudIdDetails.title', {
+        defaultMessage: 'Copy your connection details',
+      })}
+      overviewPanelProps={overviewPanelProps}
+    >
+      <EuiSpacer size="l" />
+      <EuiCheckableCard
+        id={CloudDetail.ElasticsearchEndpoint}
+        name={CloudDetail.ElasticsearchEndpoint}
+        label={
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem>
+              <EuiTitle size="xxs">
+                <h5>
+                  <FormattedMessage
+                    id="searchApiPanels.cloudIdDetails.elasticsearchEndpoint.title"
+                    defaultMessage="Elasticsearch endpoint"
+                  />
+                </h5>
+              </EuiTitle>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <span>
+                <EuiBadge color="success">
+                  <FormattedMessage
+                    id="searchApiPanels.cloudIdDetails.elasticsearchEndpoint.recommendedBadge"
+                    defaultMessage="Recommended"
+                  />
+                </EuiBadge>
+              </span>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        }
+        checked={selectedDetail === CloudDetail.ElasticsearchEndpoint}
+        onChange={() => setSelectedCloudDetail(CloudDetail.ElasticsearchEndpoint)}
+      >
+        <EuiText size="s">
+          <p>
+            <FormattedMessage
+              id="searchApiPanels.cloudIdDetails.elasticsearchEndpoint.description"
+              defaultMessage="The most common method for establishing an Elasticsearch connection."
+            />
+          </p>
+        </EuiText>
+      </EuiCheckableCard>
+      <EuiSpacer />
+      {Boolean(cloudId) && (
+        <EuiCheckableCard
+          id={CloudDetail.CloudId}
+          name={CloudDetail.CloudId}
+          label={
+            <EuiTitle size="xxs">
+              <h5>
+                <FormattedMessage
+                  id="searchApiPanels.cloudIdDetails.cloudId.title"
+                  defaultMessage="Cloud ID"
+                />
+              </h5>
+            </EuiTitle>
+          }
+          checked={selectedDetail === CloudDetail.CloudId}
+          onChange={() => setSelectedCloudDetail(CloudDetail.CloudId)}
+        >
+          <EuiText size="s">
+            <p>
+              <FormattedMessage
+                id="searchApiPanels.cloudIdDetails.cloudId.description"
+                defaultMessage="Specific client libraries and connectors can use this unique identifier specific to Elastic Cloud."
+              />
+            </p>
+          </EuiText>
+        </EuiCheckableCard>
+      )}
+    </OverviewPanel>
+  );
+};

x-pack/plugins/serverless_search/public/application/components/pipeline_panel.tsx → packages/kbn-search-api-panels/components/pipeline_panel.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 from 'react';
@@ -19,36 +20,39 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { useAssetBasePath } from '../hooks/use_asset_base_path';
-
-export const PipelinePanel: React.FC = () => {
-  const assetBasePath = useAssetBasePath();
+interface PipelinePanelProps {
+  clusterImage: string;
+  cutImage: string;
+  reporterImage: string;
+}
 
+export const PipelinePanel: React.FC<PipelinePanelProps> = ({
+  clusterImage,
+  cutImage,
+  reporterImage,
+}) => {
   return (
     <EuiThemeProvider colorMode="dark">
       <EuiPanel paddingSize="xl">
         <EuiFlexGroup direction="column" gutterSize="xl">
           <EuiFlexItem>
             <EuiFlexGroup alignItems="flexStart" justifyContent="flexStart">
               <EuiFlexItem grow={false}>
-                <EuiImage alt="cluster" src={`${assetBasePath}/cluster.svg`} />
+                <EuiImage alt="" src={clusterImage} />
               </EuiFlexItem>
               <EuiFlexItem>
                 <EuiTitle size="s">
                   <h3>
-                    {i18n.translate(
-                      'xpack.serverlessSearch.pipeline.overview.dataEnrichment.title',
-                      {
-                        defaultMessage: 'Enrich Data',
-                      }
-                    )}
+                    {i18n.translate('searchApiPanels.pipeline.overview.dataEnrichment.title', {
+                      defaultMessage: 'Enrich Data',
+                    })}
                   </h3>
                 </EuiTitle>
                 <EuiSpacer size="s" />
                 <EuiText size="s">
                   <p>
                     {i18n.translate(
-                      'xpack.serverlessSearch.pipeline.overview.dataEnrichment.description',
+                      'searchApiPanels.pipeline.overview.dataEnrichment.description',
                       {
                         defaultMessage:
                           'Add information from external sources or apply transformations to your documents for more contextual, insightful search.',
@@ -62,57 +66,44 @@ export const PipelinePanel: React.FC = () => {
           <EuiFlexItem>
             <EuiFlexGroup alignItems="flexStart" justifyContent="flexStart">
               <EuiFlexItem grow={false}>
-                <EuiImage alt="cut" src={`${assetBasePath}/cut.svg`} />
+                <EuiImage alt="" src={cutImage} />
               </EuiFlexItem>
               <EuiFlexItem>
                 <EuiTitle size="s">
                   <h3>
-                    {i18n.translate(
-                      'xpack.serverlessSearch.pipeline.overview.extAndStandard.title',
-                      {
-                        defaultMessage: 'Extract and standardize',
-                      }
-                    )}
+                    {i18n.translate('searchApiPanels.pipeline.overview.extAndStandard.title', {
+                      defaultMessage: 'Extract and standardize',
+                    })}
                   </h3>
                 </EuiTitle>
                 <EuiSpacer size="s" />
                 <EuiText size="s">
-                  {i18n.translate(
-                    'xpack.serverlessSearch.pipeline.overview.extAndStandard.description',
-                    {
-                      defaultMessage:
-                        'Parse information from your documents to ensure they conform to a standardized format.',
-                    }
-                  )}
+                  {i18n.translate('searchApiPanels.pipeline.overview.extAndStandard.description', {
+                    defaultMessage:
+                      'Parse information from your documents to ensure they conform to a standardized format.',
+                  })}
                 </EuiText>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiFlexGroup alignItems="flexStart" justifyContent="flexStart">
               <EuiFlexItem grow={false}>
-                <EuiImage alt="reporter" src={`${assetBasePath}/reporter.svg`} />
+                <EuiImage alt="" src={reporterImage} />
               </EuiFlexItem>
               <EuiFlexItem>
                 <EuiTitle size="s">
                   <h3>
-                    {i18n.translate(
-                      'xpack.serverlessSearch.pipeline.overview.anonymization.title',
-                      {
-                        defaultMessage: 'Anonymize data',
-                      }
-                    )}
+                    {i18n.translate('searchApiPanels.pipeline.overview.anonymization.title', {
+                      defaultMessage: 'Anonymize data',
+                    })}
                   </h3>
                 </EuiTitle>
                 <EuiSpacer size="s" />
                 <EuiText size="s">
-                  {i18n.translate(
-                    'xpack.serverlessSearch.pipeline.overview.anonymization.description',
-                    {
-                      defaultMessage:
-                        'Remove sensitive information from documents before indexing.',
-                    }
-                  )}
+                  {i18n.translate('searchApiPanels.pipeline.overview.anonymization.description', {
+                    defaultMessage: 'Remove sensitive information from documents before indexing.',
+                  })}
                 </EuiText>
               </EuiFlexItem>
             </EuiFlexGroup>

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

@@ -11,12 +11,14 @@ 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';
 export * from './components/ingestions_panel';
 export * from './components/language_client_panel';
 export * from './components/overview_panel';
+export * from './components/pipeline_panel';
 export * from './components/select_client';
 export * from './components/try_in_console_button';
 export * from './components/install_client';