[Cloud] ES endpoint discovery

.github/CODEOWNERS

@@ -67,6 +67,7 @@ packages/kbn-ci-stats-performance-metrics @elastic/kibana-operations
 packages/kbn-ci-stats-reporter @elastic/kibana-operations
 packages/kbn-ci-stats-shipper-cli @elastic/kibana-operations
 packages/kbn-cli-dev-mode @elastic/kibana-operations
+packages/cloud @elastic/kibana-core
 x-pack/plugins/cloud_integrations/cloud_chat @elastic/kibana-core
 x-pack/plugins/cloud_integrations/cloud_chat_provider @elastic/kibana-core
 x-pack/plugins/cloud_integrations/cloud_data_migration @elastic/platform-onboarding

.i18nrc.json

@@ -15,6 +15,7 @@
     "customIntegrations": "src/plugins/custom_integrations",
     "customIntegrationsPackage": "packages/kbn-custom-integrations",
     "dashboard": "src/plugins/dashboard",
+    "cloud": "packages/cloud",
     "domDragDrop": "packages/kbn-dom-drag-drop",
     "controls": "src/plugins/controls",
     "data": "src/plugins/data",

docs/setup/connect-to-elasticsearch.asciidoc

@@ -54,8 +54,9 @@ Details for each programming language library that Elastic provides are in the
 https://www.elastic.co/guide/en/elasticsearch/client/index.html[{es} Client documentation].
 
 If you are running {kib} on our hosted {es} Service,
-click *View deployment details* on the *Integrations* view
+click *Endpoints* on the *Integrations* view
 to verify your {es} endpoint and Cloud ID, and create API keys for integration.
+Alternatively, the *Endpoints* are also accessible through the top bar help menu.
 
 [float]
 === Add sample data

package.json

@@ -173,6 +173,7 @@
     "@kbn/chart-expressions-common": "link:src/plugins/chart_expressions/common",
     "@kbn/chart-icons": "link:packages/kbn-chart-icons",
     "@kbn/charts-plugin": "link:src/plugins/charts",
+    "@kbn/cloud": "link:packages/cloud",
     "@kbn/cloud-chat-plugin": "link:x-pack/plugins/cloud_integrations/cloud_chat",
     "@kbn/cloud-chat-provider-plugin": "link:x-pack/plugins/cloud_integrations/cloud_chat_provider",
     "@kbn/cloud-data-migration-plugin": "link:x-pack/plugins/cloud_integrations/cloud_data_migration",

packages/cloud/README.md

@@ -0,0 +1,3 @@
+# @kbn/cloud
+
+Empty package generated by @kbn/generate

packages/cloud/deployment_details/deployment_details.tsx

@@ -0,0 +1,132 @@
+/*
+ * 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 from 'react';
+
+import {
+  EuiForm,
+  EuiFormRow,
+  EuiFieldText,
+  EuiCopy,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiButtonEmpty,
+  EuiSpacer,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useDeploymentDetails } from './services';
+
+export const DeploymentDetails = ({ closeModal }: { closeModal?: () => void }) => {
+  const { cloudId, elasticsearchUrl, managementUrl, learnMoreUrl, navigateToUrl } =
+    useDeploymentDetails();
+  const isInsideModal = !!closeModal;
+
+  if (!cloudId) {
+    return null;
+  }
+
+  return (
+    <>
+      <EuiForm component="div">
+        {/* Elastic endpoint */}
+        {elasticsearchUrl && (
+          <EuiFormRow
+            label={i18n.translate('cloud.deploymentDetails.elasticEndpointLabel', {
+              defaultMessage: 'Elastic endpoint',
+            })}
+            fullWidth
+          >
+            <EuiFlexGroup gutterSize="s">
+              <EuiFlexItem>
+                <EuiFieldText
+                  value={elasticsearchUrl}
+                  fullWidth
+                  disabled
+                  data-test-subj="deploymentDetailsEsEndpoint"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiCopy textToCopy={elasticsearchUrl}>
+                  {(copy) => (
+                    <EuiButtonIcon
+                      onClick={copy}
+                      iconType="copyClipboard"
+                      display="base"
+                      size="m"
+                    />
+                  )}
+                </EuiCopy>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFormRow>
+        )}
+
+        {/* Cloud ID */}
+        <EuiFormRow
+          label={i18n.translate('cloud.deploymentDetails.cloudIDLabel', {
+            defaultMessage: 'Cloud ID',
+          })}
+          fullWidth
+        >
+          <EuiFlexGroup gutterSize="s">
+            <EuiFlexItem>
+              <EuiFieldText
+                value={cloudId}
+                fullWidth
+                disabled
+                data-test-subj="deploymentDetailsCloudID"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiCopy textToCopy={cloudId}>
+                {(copy) => (
+                  <EuiButtonIcon onClick={copy} iconType="copyClipboard" display="base" size="m" />
+                )}
+              </EuiCopy>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFormRow>
+
+        <EuiSpacer size="m" />
+
+        {managementUrl && (
+          <EuiFlexGroup gutterSize="m" justifyContent="spaceBetween" alignItems="center">
+            <EuiFlexItem grow={false}>
+              {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+              <EuiButtonEmpty
+                href={managementUrl}
+                onClick={(e: any) => {
+                  e.preventDefault();
+                  navigateToUrl(managementUrl);
+                  if (closeModal) {
+                    closeModal();
+                  }
+                }}
+                flush="left"
+              >
+                {i18n.translate('cloud.deploymentDetails.createManageApiKeysButtonLabel', {
+                  defaultMessage: 'Create and manage API keys',
+                })}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            {!isInsideModal && (
+              <EuiFlexItem grow={false}>
+                <EuiLink external href={learnMoreUrl} target="_blank">
+                  {i18n.translate('cloud.deploymentDetails.learnMoreButtonLabel', {
+                    defaultMessage: 'Learn more',
+                  })}
+                </EuiLink>
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        )}
+      </EuiForm>
+    </>
+  );
+};

packages/cloud/deployment_details/deployment_details_modal.tsx

@@ -0,0 +1,69 @@
+/*
+ * 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, { type FC } from 'react';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+} from '@elastic/eui';
+import { useDeploymentDetails } from './services';
+import { DeploymentDetails } from './deployment_details';
+
+interface Props {
+  closeModal: () => void;
+}
+
+export const DeploymentDetailsModal: FC<Props> = ({ closeModal }) => {
+  const { learnMoreUrl } = useDeploymentDetails();
+
+  return (
+    <EuiModal
+      onClose={() => {
+        closeModal();
+      }}
+      style={{ width: 600 }}
+      data-test-subj="deploymentDetailsModal"
+    >
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>
+          {i18n.translate('cloud.deploymentDetails.helpMenuLinks.endpoints', {
+            defaultMessage: 'Endpoints',
+          })}
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+      <EuiModalBody>
+        <DeploymentDetails closeModal={closeModal} />
+      </EuiModalBody>
+      <EuiModalFooter>
+        <EuiFlexGroup alignItems="baseline" justifyContent="flexEnd">
+          <EuiFlexItem grow={false}>
+            <EuiLink external href={learnMoreUrl} target="_blank">
+              {i18n.translate('cloud.deploymentDetails.modal.learnMoreButtonLabel', {
+                defaultMessage: 'Learn more',
+              })}
+            </EuiLink>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton onClick={closeModal} fill>
+              {i18n.translate('cloud.deploymentDetails.modal.closeButtonLabel', {
+                defaultMessage: 'Close',
+              })}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};

packages/cloud/deployment_details/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+export { DeploymentDetailsKibanaProvider, DeploymentDetailsProvider } from './services';
+export { DeploymentDetails } from './deployment_details';
+export { DeploymentDetailsModal } from './deployment_details_modal';

packages/cloud/deployment_details/services.tsx

@@ -0,0 +1,120 @@
+/*
+ * 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, { FC, useContext } from 'react';
+
+export interface Services {
+  cloudId?: string;
+  elasticsearchUrl?: string;
+  managementUrl?: string;
+  learnMoreUrl: string;
+  navigateToUrl(url: string): Promise<void>;
+}
+
+const DeploymentDetailsContext = React.createContext<Services | null>(null);
+
+/**
+ * Abstract external service Provider.
+ */
+export const DeploymentDetailsProvider: FC<Services> = ({ children, ...services }) => {
+  return (
+    <DeploymentDetailsContext.Provider value={services}>
+      {children}
+    </DeploymentDetailsContext.Provider>
+  );
+};
+
+/**
+ * Kibana-specific service types.
+ */
+export interface DeploymentDetailsKibanaDependencies {
+  /** CoreStart contract */
+  core: {
+    application: {
+      navigateToUrl(url: string): Promise<void>;
+    };
+  };
+  /** SharePluginStart contract */
+  share: {
+    url: {
+      locators: {
+        get(
+          id: string
+        ): undefined | { useUrl: (params: { sectionId: string; appId: string }) => string };
+      };
+    };
+  };
+  /** CloudSetup contract */
+  cloud: {
+    isCloudEnabled: boolean;
+    cloudId?: string;
+    elasticsearchUrl?: string;
+  };
+  /** DocLinksStart contract */
+  docLinks: {
+    links: {
+      fleet: {
+        apiKeysLearnMore: string;
+      };
+    };
+  };
+}
+
+/**
+ * Kibana-specific Provider that maps to known dependency types.
+ */
+export const DeploymentDetailsKibanaProvider: FC<DeploymentDetailsKibanaDependencies> = ({
+  children,
+  ...services
+}) => {
+  const {
+    core: {
+      application: { navigateToUrl },
+    },
+    cloud: { isCloudEnabled, cloudId, elasticsearchUrl },
+    share: {
+      url: { locators },
+    },
+    docLinks: {
+      links: {
+        fleet: { apiKeysLearnMore },
+      },
+    },
+  } = services;
+
+  const managementUrl = locators
+    .get('MANAGEMENT_APP_LOCATOR')
+    ?.useUrl({ sectionId: 'security', appId: 'api_keys' });
+
+  return (
+    <DeploymentDetailsProvider
+      cloudId={isCloudEnabled ? cloudId : undefined}
+      elasticsearchUrl={elasticsearchUrl}
+      managementUrl={managementUrl}
+      learnMoreUrl={apiKeysLearnMore}
+      navigateToUrl={navigateToUrl}
+    >
+      {children}
+    </DeploymentDetailsProvider>
+  );
+};
+
+/**
+ * React hook for accessing pre-wired services.
+ */
+export function useDeploymentDetails() {
+  const context = useContext(DeploymentDetailsContext);
+
+  if (!context) {
+    throw new Error(
+      'DeploymentDetailsContext is missing. Ensure your component or React root is wrapped with <DeploymentDetailsProvider /> or <DeploymentDetailsKibanaProvider />.'
+    );
+  }
+
+  return context;
+}

packages/cloud/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+export function foo() {
+  return 'hello world';
+}