[8.16] [Search][Connectors] Disable Elastic managed option when running Kibana locally (#201950) (#202589)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[Search][Connectors] Disable Elastic managed option when running
Kibana locally (#201950)](https://github.com/elastic/kibana/pull/201950)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"José Luis
González","email":"joseluisgj@gmail.com"},"sourceCommit":{"committedDate":"2024-12-02T21:37:01Z","message":"[Search][Connectors]
Disable Elastic managed option when running Kibana locally
(#201950)\n\n## Summary\r\n\r\nThis PR disables the _Elastic managed_
option when creating a connector\r\nwhile running Kibana locally. We
also inform and encourage users to get\r\na Cloud trial taking them
to\r\nhttps://cloud.elastic.co/registration?onboarding_token=connectors
If the\r\nuser finish up the registration process he will en up in
the\r\n`/app/enterprise_search/content/connectors` in product
connectors\r\nsection.\r\n\r\n![CleanShot 2024-12-02 at 22
33\r\n07](https://github.com/user-attachments/assets/f95181c5-1d9f-447c-8c30-ac251a60b6c1)\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"b5273734317b6278b015851b396d0b4c4edcc571","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Search","backport:version","v8.17.0","v8.18.0","v8.16.2"],"title":"[Search][Connectors]
Disable Elastic managed option when running Kibana
locally","number":201950,"url":"https://github.com/elastic/kibana/pull/201950","mergeCommit":{"message":"[Search][Connectors]
Disable Elastic managed option when running Kibana locally
(#201950)\n\n## Summary\r\n\r\nThis PR disables the _Elastic managed_
option when creating a connector\r\nwhile running Kibana locally. We
also inform and encourage users to get\r\na Cloud trial taking them
to\r\nhttps://cloud.elastic.co/registration?onboarding_token=connectors
If the\r\nuser finish up the registration process he will en up in
the\r\n`/app/enterprise_search/content/connectors` in product
connectors\r\nsection.\r\n\r\n![CleanShot 2024-12-02 at 22
33\r\n07](https://github.com/user-attachments/assets/f95181c5-1d9f-447c-8c30-ac251a60b6c1)\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"b5273734317b6278b015851b396d0b4c4edcc571"}},"sourceBranch":"main","suggestedTargetBranches":["8.17","8.x","8.16"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/201950","number":201950,"mergeCommit":{"message":"[Search][Connectors]
Disable Elastic managed option when running Kibana locally
(#201950)\n\n## Summary\r\n\r\nThis PR disables the _Elastic managed_
option when creating a connector\r\nwhile running Kibana locally. We
also inform and encourage users to get\r\na Cloud trial taking them
to\r\nhttps://cloud.elastic.co/registration?onboarding_token=connectors
If the\r\nuser finish up the registration process he will en up in
the\r\n`/app/enterprise_search/content/connectors` in product
connectors\r\nsection.\r\n\r\n![CleanShot 2024-12-02 at 22
33\r\n07](https://github.com/user-attachments/assets/f95181c5-1d9f-447c-8c30-ac251a60b6c1)\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"b5273734317b6278b015851b396d0b4c4edcc571"}},{"branch":"8.17","label":"v8.17.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.16","label":"v8.16.2","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: José Luis González <joseluisgj@gmail.com>

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/connector_description_popover.tsx

@@ -6,7 +6,10 @@
  */
 import React, { useState } from 'react';
 
+import { css } from '@emotion/react';
+
 import {
+  EuiButton,
   EuiButtonIcon,
   EuiCallOut,
   EuiFlexGroup,
@@ -83,13 +86,15 @@ const connectorClientPopoverPanels = [
 ];
 
 export interface ConnectorDescriptionPopoverProps {
-  isDisabled: boolean;
   isNative: boolean;
+  isRunningLocally?: boolean;
+  showIsOnlySelfManaged: boolean;
 }
 
 export const ConnectorDescriptionPopover: React.FC<ConnectorDescriptionPopoverProps> = ({
   isNative,
-  isDisabled,
+  isRunningLocally,
+  showIsOnlySelfManaged,
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const panels = isNative ? nativePopoverPanels : connectorClientPopoverPanels;
@@ -111,55 +116,115 @@ export const ConnectorDescriptionPopover: React.FC<ConnectorDescriptionPopoverPr
         setIsPopoverOpen(false);
       }}
     >
-      <EuiPanel hasBorder={false} hasShadow={false}>
+      <EuiPanel
-        {isDisabled && (
+        css={css`
-          <EuiFlexGroup>
+          max-width: 700px;
-            <EuiFlexItem>
+        `}
-              <EuiCallOut
+        hasBorder={false}
-                title={i18n.translate(
+        hasShadow={false}
-                  'xpack.enterpriseSearch.createConnector.connectorDescriptionBadge.notAvailableTitle',
+      >
-                  {
+        {(showIsOnlySelfManaged || isRunningLocally) && (
-                    defaultMessage:
+          <>
-                      'This connector is not available as an Elastic-managed Connector',
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <EuiCallOut
+                  title={
+                    showIsOnlySelfManaged
+                      ? i18n.translate(
+                          'xpack.enterpriseSearch.createConnector.connectorDescriptionBadge.isOnlySelfManagedAvailableTitle',
+                          {
+                            defaultMessage:
+                              'This connector is not available as an Elastic-managed Connector',
+                          }
+                        )
+                      : i18n.translate(
+                          'xpack.enterpriseSearch.createConnector.connectorDescriptionBadge.isRunningLocallyTitle',
+                          {
+                            defaultMessage:
+                              'Elastic managed connectors are only available in Elastic Cloud',
+                          }
+                        )
                   }
-                )}
+                  size="s"
-                size="s"
+                  iconType="warning"
-                iconType="warning"
+                  color="warning"
-                color="warning"
+                />
-              />
+              </EuiFlexItem>
-            </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer size="m" />
+          </>
+        )}
+
+        {!isRunningLocally && (
+          <EuiFlexGroup>
+            {panels.map((panel) => {
+              return (
+                <EuiFlexItem grow={false} key={panel.id}>
+                  <EuiFlexGroup
+                    direction="column"
+                    alignItems="center"
+                    gutterSize="s"
+                    style={{ maxWidth: 200 }}
+                  >
+                    <EuiFlexItem grow={false}>
+                      <EuiFlexGroup responsive={false} gutterSize="s">
+                        {panel.icons.map((icon, index) => (
+                          <EuiFlexItem grow={false} key={index}>
+                            {icon}
+                          </EuiFlexItem>
+                        ))}
+                      </EuiFlexGroup>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiText size="s" grow={false} textAlign="center">
+                        <p>{panel.description}</p>
+                      </EuiText>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+              );
+            })}
           </EuiFlexGroup>
         )}
-        <EuiSpacer size="m" />
+        {isRunningLocally && (
-        <EuiFlexGroup>
+          <>
-          {panels.map((panel) => {
+            <EuiSpacer size="m" />
-            return (
+            <EuiFlexGroup direction="column" justifyContent="center">
-              <EuiFlexItem grow={false} key={panel.id}>
+              <EuiFlexItem grow>
-                <EuiFlexGroup
+                <EuiText textAlign="center">
-                  direction="column"
+                  <h3>
-                  alignItems="center"
+                    {i18n.translate(
-                  gutterSize="s"
+                      'xpack.enterpriseSearch.createConnector.connectorDescriptionBadge.learnMore',
-                  style={{ maxWidth: 200 }}
+                      { defaultMessage: 'Explore Elastic Cloud with your 14-day free trial' }
-                >
+                    )}
-                  <EuiFlexItem grow={false}>
+                  </h3>
-                    <EuiFlexGroup responsive={false} gutterSize="s">
+                </EuiText>
-                      {panel.icons.map((icon, index) => (
-                        <EuiFlexItem grow={false} key={index}>
-                          {icon}
-                        </EuiFlexItem>
-                      ))}
-                    </EuiFlexGroup>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EuiText size="s" grow={false} textAlign="center">
-                      <p>{panel.description}</p>
-                    </EuiText>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
               </EuiFlexItem>
-            );
+              <EuiFlexItem grow>
-          })}
+                <EuiText size="s" textAlign="center" color="subdued">
-        </EuiFlexGroup>
+                  {i18n.translate(
+                    'xpack.enterpriseSearch.createConnector.connectorDescriptionBadge.learnMore',
+                    {
+                      defaultMessage:
+                        'Take advantage of Elastic managed connectors and generative AI capabilities to address search challenges across your organization in real time, at scale.',
+                    }
+                  )}
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  data-test-subj="enterpriseSearchConnectorStartFreeTrialButton"
+                  href="https://cloud.elastic.co/registration?onboarding_token=connectors"
+                  target="_blank"
+                >
+                  {i18n.translate('xpack.enterpriseSearch.createConnector.startTrialButtonLabel', {
+                    defaultMessage: 'Start free trial',
+                  })}
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </>
+        )}
       </EuiPanel>
     </EuiPopover>
   );

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/create_connector.tsx

@@ -65,9 +65,14 @@ export const CreateConnector: React.FC = () => {
   const { setCurrentStep } = useActions(NewConnectorLogic);
   const stepStates = generateStepState(currentStep);
 
+  const { config } = useValues(KibanaLogic);
+  const isRunningLocally = (config.host ?? '').includes('localhost');
+
   useEffect(() => {
-    // TODO: separate this to ability and preference
+    if (
-    if (selectedConnector && !selectedConnector.isNative && selfManagePreference === 'native') {
+      (selectedConnector && !selectedConnector.isNative && selfManagePreference === 'native') ||
+      isRunningLocally
+    ) {
       setSelfManagePreference('selfManaged');
     }
   }, [selectedConnector]);
@@ -141,6 +146,7 @@ export const CreateConnector: React.FC = () => {
           setSelfManagePreference(preference);
         }}
         error={errorToText(error)}
+        isRunningLocally={isRunningLocally}
       />
     ),
   };

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/start_step.tsx

@@ -41,6 +41,7 @@ import { SelfManagePreference } from './create_connector';
 
 interface StartStepProps {
   error?: string | React.ReactNode;
+  isRunningLocally: boolean;
   onSelfManagePreferenceChange(preference: SelfManagePreference): void;
   selfManagePreference: SelfManagePreference;
   setCurrentStep: Function;
@@ -49,6 +50,7 @@ interface StartStepProps {
 
 export const StartStep: React.FC<StartStepProps> = ({
   title,
+  isRunningLocally,
   selfManagePreference,
   setCurrentStep,
   onSelfManagePreferenceChange,
@@ -208,14 +210,15 @@ export const StartStep: React.FC<StartStepProps> = ({
                     { defaultMessage: 'Elastic managed' }
                   )}
                   checked={selfManagePreference === 'native'}
-                  disabled={selectedConnector?.isNative === false}
+                  disabled={selectedConnector?.isNative === false || isRunningLocally}
                   onChange={() => onSelfManagePreferenceChange('native')}
                   name="setUp"
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <ConnectorDescriptionPopover
-                  isDisabled={selectedConnector?.isNative === false}
+                  showIsOnlySelfManaged={selectedConnector?.isNative === false}
+                  isRunningLocally={isRunningLocally}
                   isNative
                 />
               </EuiFlexItem>
@@ -233,7 +236,7 @@ export const StartStep: React.FC<StartStepProps> = ({
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <ConnectorDescriptionPopover isDisabled={false} isNative={false} />
+                <ConnectorDescriptionPopover showIsOnlySelfManaged={false} isNative={false} />
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiPanel>

x-pack/plugins/translations/translations/fr-FR.json

@@ -18433,7 +18433,6 @@
     "xpack.enterpriseSearch.createConnector.configurationStep.configurationLabel": "Configuration",
     "xpack.enterpriseSearch.createConnector.configurationStep.h4.finishUpLabel": "Terminer",
     "xpack.enterpriseSearch.createConnector.configurationStep.p.description": "Vous pouvez synchroniser manuellement vos données, planifier une synchronisation récurrente ou gérer vos domaines.",
-    "xpack.enterpriseSearch.createConnector.connectorDescriptionBadge.notAvailableTitle": "Ce connecteur n'est pas disponible en tant que connecteur géré par Elastic",
     "xpack.enterpriseSearch.createConnector.connectorDocsLinkLabel": "référence du connecteur",
     "xpack.enterpriseSearch.createConnector.DeploymentStep.Configuration.description": "Maintenant, configurez votre robot Elastic et synchronisez les données.",
     "xpack.enterpriseSearch.createConnector.DeploymentStep.Configuration.title": "Configuration",

x-pack/plugins/translations/translations/ja-JP.json

@@ -18407,7 +18407,6 @@
     "xpack.enterpriseSearch.createConnector.configurationStep.configurationLabel": "構成",
     "xpack.enterpriseSearch.createConnector.configurationStep.h4.finishUpLabel": "終了",
     "xpack.enterpriseSearch.createConnector.configurationStep.p.description": "データを手動で同期したり、繰り返し同期をスケジュールしたり、ドメインを管理したりできます。",
-    "xpack.enterpriseSearch.createConnector.connectorDescriptionBadge.notAvailableTitle": "このコネクターは、Elasticマネージドコネクターとして利用できません。",
     "xpack.enterpriseSearch.createConnector.connectorDocsLinkLabel": "コネクター参照",
     "xpack.enterpriseSearch.createConnector.DeploymentStep.Configuration.description": "次に、Elasticクローラーを構成し、データを同期します。",
     "xpack.enterpriseSearch.createConnector.DeploymentStep.Configuration.title": "構成",

x-pack/plugins/translations/translations/zh-CN.json

@@ -18450,7 +18450,6 @@
     "xpack.enterpriseSearch.createConnector.configurationStep.configurationLabel": "配置",
     "xpack.enterpriseSearch.createConnector.configurationStep.h4.finishUpLabel": "结束",
     "xpack.enterpriseSearch.createConnector.configurationStep.p.description": "您可以手动同步数据，计划重复同步或管理您的域。",
-    "xpack.enterpriseSearch.createConnector.connectorDescriptionBadge.notAvailableTitle": "此连接器不可用作 Elastic 托管连接器",
     "xpack.enterpriseSearch.createConnector.connectorDocsLinkLabel": "连接器参考",
     "xpack.enterpriseSearch.createConnector.DeploymentStep.Configuration.description": "立即配置您的 Elastic 网络爬虫并同步数据。",
     "xpack.enterpriseSearch.createConnector.DeploymentStep.Configuration.title": "配置",