Unblocks Connector creation for basic licensing cases and updates tex…

…t. (elastic#177485) ## Summary https://github.com/elastic/kibana/assets/1410658/8011a707-e589-47d7-8e01-8906fb18bb58 Also includes some quality of life improvements. ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
janmonschke · Feb 22, 2024 · 9d889b1 · 9d889b1
1 parent 46952f8
commit 9d889b1
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 13 deletions.
diff --git a/...s/enterprise_search_content/components/new_index/select_connector/connector_checkable.tsx b/...s/enterprise_search_content/components/new_index/select_connector/connector_checkable.tsx
@@ -20,6 +20,7 @@ import {
   EuiLink,
   EuiPanel,
   EuiPopover,
+  EuiSpacer,
   EuiText,
   EuiThemeComputed,
   EuiTitle,
@@ -32,6 +33,8 @@ import { BETA_LABEL, NATIVE_LABEL, CONNECTOR_CLIENT_LABEL } from '../../../../sh
 
 import { PlatinumLicensePopover } from '../../shared/platinum_license_popover/platinum_license_popover';
 
+import { NativePopover } from './native_popover';
+
 export interface ConnectorCheckableProps {
   documentationUrl: string | undefined;
   iconType: string;
@@ -41,12 +44,14 @@ export interface ConnectorCheckableProps {
   name: string;
   onConnectorSelect: (isNative?: boolean) => void;
   serviceType: string;
+  showLicensePopover?: boolean;
   showNativeBadge: boolean;
+  showNativePopover?: boolean;
 }
 
 const getCss = (
   euiTheme: EuiThemeComputed,
-  isDisabled: ConnectorCheckableProps['isDisabled'],
+  isDisabled: boolean,
   showNativeBadge: ConnectorCheckableProps['showNativeBadge']
 ) => {
   return css`
@@ -70,9 +75,12 @@ export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
   onConnectorSelect,
   serviceType,
   showNativeBadge,
+  showLicensePopover = false,
+  showNativePopover = false,
 }) => {
   const { euiTheme } = useEuiTheme();
   const [isLicensePopoverOpen, setIsLicensePopoverOpen] = useState(false);
+  const [isNativeInfoPopoverOpen, setIsNativeInfoPopoverOpen] = useState(false);
   const [isNativePopoverOpen, setIsNativePopoverOpen] = useState(false);
   return (
     <EuiPanel
@@ -81,7 +89,7 @@ export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
         onConnectorSelect(showNativeBadge);
       }}
       id={`checkableCard-${serviceType}`}
-      css={getCss(euiTheme, isDisabled, showNativeBadge)}
+      css={getCss(euiTheme, isDisabled || showLicensePopover, showNativeBadge)}
       hasBorder
       data-telemetry-id={`entSearchContent-connector-selectConnector-${serviceType}-select`}
     >
@@ -106,7 +114,7 @@ export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
                         </EuiTitle>
                       )}
                     </EuiFlexItem>
-                    {isDisabled && (
+                    {!showNativePopover && showLicensePopover && (
                       <EuiFlexItem grow={false}>
                         <PlatinumLicensePopover
                           button={
@@ -130,6 +138,30 @@ export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
                         />
                       </EuiFlexItem>
                     )}
+                    {showNativePopover && (
+                      <EuiFlexItem grow={false}>
+                        <NativePopover
+                          button={
+                            <EuiButtonIcon
+                              aria-label={i18n.translate(
+                                'xpack.enterpriseSearch.content.newIndex.selectConnector.openNativePopoverLabel',
+                                {
+                                  defaultMessage: 'Open native connector popover',
+                                }
+                              )}
+                              iconType="questionInCircle"
+                              onClick={(event: MouseEvent) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                setIsNativeInfoPopoverOpen(!isNativeInfoPopoverOpen);
+                              }}
+                            />
+                          }
+                          closePopover={() => setIsNativeInfoPopoverOpen(false)}
+                          isPopoverOpen={isNativeInfoPopoverOpen}
+                        />
+                      </EuiFlexItem>
+                    )}
                   </EuiFlexGroup>
                 </EuiFlexItem>
                 {showNativeBadge && (
@@ -138,7 +170,6 @@ export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
                       button={
                         <EuiButtonIcon
                           display="base"
-                          isDisabled={isDisabled}
                           color="primary"
                           iconType="boxesHorizontal"
                           onClick={(e: MouseEvent) => {
@@ -158,6 +189,7 @@ export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
                         items={[
                           <EuiContextMenuItem
                             key="native"
+                            disabled={isDisabled}
                             onClick={(e) => {
                               e.stopPropagation();
                               onConnectorSelect(true);
@@ -168,6 +200,8 @@ export const ConnectorCheckable: React.FC<ConnectorCheckableProps> = ({
                               { defaultMessage: 'Setup a Native Connector' }
                             )}
                           </EuiContextMenuItem>,
+                          <EuiSpacer size="s" />,
+
                           <EuiContextMenuItem
                             key="client"
                             onClick={(e) => {

diff --git a/...ations/enterprise_search_content/components/new_index/select_connector/native_popover.tsx b/...ations/enterprise_search_content/components/new_index/select_connector/native_popover.tsx
@@ -0,0 +1,92 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+
+import { css } from '@emotion/react';
+
+import {
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiText,
+  EuiPopoverFooter,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiPopoverProps,
+  useEuiTheme,
+} from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+interface NativePopoverProps {
+  button: EuiPopoverProps['button'];
+  closePopover: () => void;
+  isPopoverOpen: boolean;
+}
+
+export const NativePopover: React.FC<NativePopoverProps> = ({
+  button,
+  isPopoverOpen,
+  closePopover,
+}) => {
+  const { euiTheme } = useEuiTheme();
+  return (
+    <EuiPopover
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <EuiPopoverTitle>
+        {i18n.translate(
+          'xpack.enterpriseSearch.content.newIndex.selectConnectore.nativePopover.title',
+          {
+            defaultMessage: 'Elastic Cloud',
+          }
+        )}
+      </EuiPopoverTitle>
+      <EuiText
+        grow={false}
+        size="s"
+        css={css`
+          max-width: calc(${euiTheme.size.xl} * 10);
+        `}
+      >
+        <p>
+          {i18n.translate(
+            'xpack.enterpriseSearch.content.newIndex.selectConnectore.nativePopover.description',
+            {
+              defaultMessage:
+                'Native connectors are hosted on Elastic Cloud. Get started with a free 14-day trial.',
+            }
+          )}
+        </p>
+      </EuiText>
+      <EuiPopoverFooter>
+        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              iconType="popout"
+              target="_blank"
+              href="https://www.elastic.co/cloud/cloud-trial-overview"
+            >
+              {i18n.translate(
+                'xpack.enterpriseSearch.content.newIndex.selectConnector.cloudTrialButton',
+                {
+                  defaultMessage: 'Elastic Cloud Trial',
+                }
+              )}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPopoverFooter>
+    </EuiPopover>
+  );
+};
diff --git a/...ions/enterprise_search_content/components/new_index/select_connector/select_connector.tsx b/...ions/enterprise_search_content/components/new_index/select_connector/select_connector.tsx
@@ -321,11 +321,9 @@ export const SelectConnector: React.FC = () => {
             {filteredConnectors.map((connector) => (
               <EuiFlexItem key={connector.serviceType} grow>
                 <ConnectorCheckable
-                  isDisabled={
-                    ((connector.platinumOnly && !(hasPlatinumLicense || isCloud)) ||
-                      (!hasNativeAccess && useNativeFilter)) ??
-                    false
-                  }
+                  showNativePopover={(!hasNativeAccess && useNativeFilter) ?? false}
+                  showLicensePopover={connector.platinumOnly && !hasPlatinumLicense && !isCloud}
+                  isDisabled={(!hasNativeAccess && useNativeFilter) ?? false}
                   iconType={connector.icon}
                   isBeta={connector.isBeta}
                   isTechPreview={Boolean(connector.isTechPreview)}
@@ -373,7 +371,7 @@ export const SelectConnector: React.FC = () => {
                 <p>
                   <FormattedMessage
                     id="xpack.enterpriseSearch.content.indices.selectConnector.cloudCallout.description"
-                    defaultMessage="Native connectors are hosted on Elastic Cloud. Get started with a free day trial."
+                    defaultMessage="Native connectors are hosted on Elastic Cloud. Get started with a free 14-day trial."
                   />
                 </p>
                 <EuiButton

diff --git a/...lic/applications/enterprise_search_content/components/search_index/connector/constants.ts b/...lic/applications/enterprise_search_content/components/search_index/connector/constants.ts
@@ -140,6 +140,7 @@ export const CONNECTORS_DICT: Record<string, ConnectorClientSideDefinition> = {
       'https://docs.oracle.com/en/database/oracle/oracle-database/19/dbseg/index.html',
     externalDocsUrl: 'https://docs.oracle.com/database/oracle/oracle-database/',
     icon: CONNECTOR_ICONS.oracle,
+    platinumOnly: true,
   },
   outlook: {
     docsUrl: docLinks.connectorsOutlook,
@@ -153,6 +154,7 @@ export const CONNECTORS_DICT: Record<string, ConnectorClientSideDefinition> = {
     externalAuthDocsUrl: 'https://www.postgresql.org/docs/15/auth-methods.html',
     externalDocsUrl: 'https://www.postgresql.org/docs/',
     icon: CONNECTOR_ICONS.postgresql,
+    platinumOnly: true,
   },
   redis: {
     docsUrl: docLinks.connectorsRedis,
@@ -194,7 +196,7 @@ export const CONNECTORS_DICT: Record<string, ConnectorClientSideDefinition> = {
     externalAuthDocsUrl: '',
     externalDocsUrl: '',
     icon: CONNECTOR_ICONS.sharepoint,
-    platinumOnly: false,
+    platinumOnly: true,
   },
   slack: {
     docsUrl: docLinks.connectorsSlack,

diff --git a/...se_search_content/components/shared/platinum_license_popover/platinum_license_popover.tsx b/...se_search_content/components/shared/platinum_license_popover/platinum_license_popover.tsx
@@ -39,7 +39,14 @@ export const PlatinumLicensePopover: React.FC<PlatinumLicensePopoverProps> = ({
 }) => {
   const { euiTheme } = useEuiTheme();
   return (
-    <EuiPopover button={button} isOpen={isPopoverOpen} closePopover={closePopover}>
+    <EuiPopover
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
       <EuiPopoverTitle>
         {i18n.translate('xpack.enterpriseSearch.content.newIndex.selectConnector.upgradeTitle', {
           defaultMessage: 'Upgrade to Elastic Platinum',
@@ -57,7 +64,7 @@ export const PlatinumLicensePopover: React.FC<PlatinumLicensePopoverProps> = ({
             'xpack.enterpriseSearch.content.newIndex.selectConnector.upgradeContent',
             {
               defaultMessage:
-                'To use this connector, you must update your license to Platinum or start a 30-day free trial.',
+                'Connector clients sending data to a self-managed Elasticsearch instance require at least a Platinum license.',
             }
           )}
         </p>