[8.x] [Search] New search connector creation flow (#187582) (#196293)

# Backport This will backport the following commits from `main` to `8.x`: - [[Search] New search connector creation flow (#187582)](#187582)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: José Luis González <[email protected]>
elastic · Oct 15, 2024 · 529d04f · 529d04f
1 parent 0e205fa
commit 529d04f
Show file tree

Hide file tree

Showing 34 changed files with 2,336 additions and 158 deletions.
diff --git a/packages/kbn-search-connectors/components/configuration/connector_configuration.tsx b/packages/kbn-search-connectors/components/configuration/connector_configuration.tsx
@@ -45,6 +45,7 @@ interface ConnectorConfigurationProps {
   hasPlatinumLicense: boolean;
   isLoading: boolean;
   saveConfig: (configuration: Record<string, string | number | boolean | null>) => void;
+  saveAndSync?: (configuration: Record<string, string | number | boolean | null>) => void;
   stackManagementLink?: string;
   subscriptionLink?: string;
   children?: React.ReactNode;
@@ -90,6 +91,7 @@ export const ConnectorConfigurationComponent: FC<
   hasPlatinumLicense,
   isLoading,
   saveConfig,
+  saveAndSync,
   subscriptionLink,
   stackManagementLink,
 }) => {
@@ -166,6 +168,12 @@ export const ConnectorConfigurationComponent: FC<
                 saveConfig(config);
                 setIsEditing(false);
               }}
+              {...(saveAndSync && {
+                saveAndSync: (config) => {
+                  saveAndSync(config);
+                  setIsEditing(false);
+                },
+              })}
             />
           ) : (
             uncategorizedDisplayList.length > 0 && (

diff --git a/packages/kbn-search-connectors/components/configuration/connector_configuration_form.tsx b/packages/kbn-search-connectors/components/configuration/connector_configuration_form.tsx
@@ -36,6 +36,7 @@ interface ConnectorConfigurationForm {
   isLoading: boolean;
   isNative: boolean;
   saveConfig: (config: Record<string, string | number | boolean | null>) => void;
+  saveAndSync?: (config: Record<string, string | number | boolean | null>) => void;
   stackManagementHref?: string;
   subscriptionLink?: string;
 }
@@ -60,6 +61,7 @@ export const ConnectorConfigurationForm: React.FC<ConnectorConfigurationForm> =
   isLoading,
   isNative,
   saveConfig,
+  saveAndSync,
 }) => {
   const [localConfig, setLocalConfig] = useState<ConnectorConfiguration>(configuration);
   const [configView, setConfigView] = useState<ConfigView>(
@@ -167,19 +169,7 @@ export const ConnectorConfigurationForm: React.FC<ConnectorConfigurationForm> =
       )}
       <EuiSpacer />
       <EuiFormRow>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              data-test-subj="entSearchContent-connector-configuration-saveConfiguration"
-              data-telemetry-id="entSearchContent-connector-configuration-saveConfiguration"
-              type="submit"
-              isLoading={isLoading}
-            >
-              {i18n.translate('searchConnectors.configurationConnector.config.submitButton.title', {
-                defaultMessage: 'Save configuration',
-              })}
-            </EuiButton>
-          </EuiFlexItem>
+        <EuiFlexGroup gutterSize="s">
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty
               data-telemetry-id="entSearchContent-connector-configuration-cancelEdit"
@@ -196,6 +186,38 @@ export const ConnectorConfigurationForm: React.FC<ConnectorConfigurationForm> =
               )}
             </EuiButtonEmpty>
           </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              data-test-subj="entSearchContent-connector-configuration-saveConfiguration"
+              data-telemetry-id="entSearchContent-connector-configuration-saveConfiguration"
+              type="submit"
+              isLoading={isLoading}
+            >
+              {i18n.translate('searchConnectors.configurationConnector.config.submitButton.title', {
+                defaultMessage: 'Save',
+              })}
+            </EuiButton>
+          </EuiFlexItem>
+          {saveAndSync && (
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                data-test-subj="entSearchContent-connector-configuration-saveConfiguration"
+                data-telemetry-id="entSearchContent-connector-configuration-saveConfiguration"
+                isLoading={isLoading}
+                fill
+                onClick={() => {
+                  saveAndSync(configViewToConfigValues(configView));
+                }}
+              >
+                {i18n.translate(
+                  'searchConnectors.configurationConnector.config.submitButton.title',
+                  {
+                    defaultMessage: 'Save and sync',
+                  }
+                )}
+              </EuiButton>
+            </EuiFlexItem>
+          )}
         </EuiFlexGroup>
       </EuiFormRow>
     </EuiForm>

diff --git a/x-pack/plugins/enterprise_search/common/constants.ts b/x-pack/plugins/enterprise_search/common/constants.ts
@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import dedent from 'dedent';
+
 import {
   ENTERPRISE_SEARCH_APP_ID,
   ENTERPRISE_SEARCH_CONTENT_APP_ID,
@@ -210,6 +212,58 @@ export const SEARCH_RELEVANCE_PLUGIN = {
   SUPPORT_URL: 'https://discuss.elastic.co/c/enterprise-search/',
 };
 
+export const CREATE_CONNECTOR_PLUGIN = {
+  CLI_SNIPPET: dedent`./bin/connectors connector create
+  --index-name my-index
+  --index-language en
+  --from-file config.yml
+  `,
+  CONSOLE_SNIPPET: dedent`# Create an index
+PUT /my-index-000001
+{
+  "settings": {
+    "index": {
+      "number_of_shards": 3,
+      "number_of_replicas": 2
+    }
+  }
+}
+
+# Create an API key
+POST /_security/api_key
+{
+  "name": "my-api-key",
+  "expiration": "1d",
+  "role_descriptors":
+    {
+       "role-a": {
+          "cluster": ["all"],
+            "indices": [
+                          {
+                            "names": ["index-a*"],
+                             "privileges": ["read"]
+                          }
+                        ]
+                          },
+                            "role-b": {
+                            "cluster": ["all"],
+                            "indices": [
+                              {
+                                "names": ["index-b*"],
+                                  "privileges": ["all"]
+                              }]
+                            }
+                          }, "metadata":
+                          {  "application": "my-application",
+                             "environment": {
+                              "level": 1,
+                              "trusted": true,
+                              "tags": ["dev", "staging"]
+                          }
+      }
+  }`,
+};
+
 export const LICENSED_SUPPORT_URL = 'https://support.elastic.co';
 
 export const JSON_HEADER = {

diff --git a/...ch/public/applications/enterprise_search_content/api/connector/add_connector_api_logic.ts b/...ch/public/applications/enterprise_search_content/api/connector/add_connector_api_logic.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { createApiLogic } from '../../../shared/api_logic/create_api_logic';
+import { Actions, createApiLogic } from '../../../shared/api_logic/create_api_logic';
 import { HttpLogic } from '../../../shared/http';
 
 interface AddConnectorValue {
@@ -20,11 +20,17 @@ export interface AddConnectorApiLogicArgs {
   language: string | null;
   name: string;
   serviceType?: string;
+  // Without a proper refactoring there is no good way to chain actions.
+  // This prop is simply passed back with the result to let listeners
+  // know what was the intent of the request. And call the next action
+  // accordingly.
+  uiFlags?: Record<string, boolean>;
 }
 
 export interface AddConnectorApiLogicResponse {
   id: string;
   indexName: string;
+  uiFlags?: Record<string, boolean>;
 }
 
 export const addConnector = async ({
@@ -34,6 +40,7 @@ export const addConnector = async ({
   isNative,
   language,
   serviceType,
+  uiFlags,
 }: AddConnectorApiLogicArgs): Promise<AddConnectorApiLogicResponse> => {
   const route = '/internal/enterprise_search/connectors';
 
@@ -54,7 +61,12 @@ export const addConnector = async ({
   return {
     id: result.id,
     indexName: result.index_name,
+    uiFlags,
   };
 };
 
 export const AddConnectorApiLogic = createApiLogic(['add_connector_api_logic'], addConnector);
+export type AddConnectorApiLogicActions = Actions<
+  AddConnectorApiLogicArgs,
+  AddConnectorApiLogicResponse
+>;
diff --git a/...plications/enterprise_search_content/api/connector/generate_connector_config_api_logic.ts b/...plications/enterprise_search_content/api/connector/generate_connector_config_api_logic.ts
@@ -5,13 +5,15 @@
  * 2.0.
  */
 
-import { createApiLogic } from '../../../shared/api_logic/create_api_logic';
+import { Actions, createApiLogic } from '../../../shared/api_logic/create_api_logic';
 import { HttpLogic } from '../../../shared/http';
 
 export interface GenerateConfigApiArgs {
   connectorId: string;
 }
 
+export type GenerateConfigApiActions = Actions<GenerateConfigApiArgs, {}>;
+
 export const generateConnectorConfig = async ({ connectorId }: GenerateConfigApiArgs) => {
   const route = `/internal/enterprise_search/connectors/${connectorId}/generate_config`;
   return await HttpLogic.values.http.post(route);

diff --git a/...pplications/enterprise_search_content/api/connector/generate_connector_names_api_logic.ts b/...pplications/enterprise_search_content/api/connector/generate_connector_names_api_logic.ts
@@ -4,23 +4,38 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { createApiLogic } from '../../../shared/api_logic/create_api_logic';
+import { Actions, createApiLogic } from '../../../shared/api_logic/create_api_logic';
 import { HttpLogic } from '../../../shared/http';
 
 export interface GenerateConnectorNamesApiArgs {
+  connectorName?: string;
   connectorType?: string;
 }
 
+export interface GenerateConnectorNamesApiResponse {
+  apiKeyName: string;
+  connectorName: string;
+  indexName: string;
+}
+
 export const generateConnectorNames = async (
-  { connectorType }: GenerateConnectorNamesApiArgs = { connectorType: 'custom' }
+  { connectorType, connectorName }: GenerateConnectorNamesApiArgs = { connectorType: 'custom' }
 ) => {
+  if (connectorType === '') {
+    connectorType = 'custom';
+  }
   const route = `/internal/enterprise_search/connectors/generate_connector_name`;
   return await HttpLogic.values.http.post(route, {
-    body: JSON.stringify({ connectorType }),
+    body: JSON.stringify({ connectorName, connectorType }),
   });
 };
 
 export const GenerateConnectorNamesApiLogic = createApiLogic(
-  ['generate_config_api_logic'],
+  ['generate_connector_names_api_logic'],
   generateConnectorNames
 );
+
+export type GenerateConnectorNamesApiLogicActions = Actions<
+  GenerateConnectorNamesApiArgs,
+  GenerateConnectorNamesApiResponse
+>;
diff --git a/...terprise_search_content/components/connector_detail/components/generate_config_button.tsx b/...terprise_search_content/components/connector_detail/components/generate_config_button.tsx
@@ -12,20 +12,23 @@ import { i18n } from '@kbn/i18n';
 
 export interface GenerateConfigButtonProps {
   connectorId: string;
+  disabled?: boolean;
   generateConfiguration: (params: { connectorId: string }) => void;
   isGenerateLoading: boolean;
 }
 export const GenerateConfigButton: React.FC<GenerateConfigButtonProps> = ({
   connectorId,
+  disabled,
   generateConfiguration,
-  isGenerateLoading,
+  isGenerateLoading = false,
 }) => {
   return (
     <EuiFlexGroup direction="row" gutterSize="xs" responsive={false} alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiButton
           data-test-subj="entSearchContent-connector-configuration-generateConfigButton"
           data-telemetry-id="entSearchContent-connector-configuration-generateConfigButton"
+          disabled={disabled}
           fill
           iconType="sparkles"
           isLoading={isGenerateLoading}

diff --git a/...erprise_search_content/components/connector_detail/components/generated_config_fields.tsx b/...erprise_search_content/components/connector_detail/components/generated_config_fields.tsx
@@ -36,7 +36,7 @@ import { CONNECTOR_DETAIL_PATH, SEARCH_INDEX_PATH } from '../../../routes';
 export interface GeneratedConfigFieldsProps {
   apiKey?: ApiKey;
   connector: Connector;
-  generateApiKey: () => void;
+  generateApiKey?: () => void;
   isGenerateLoading: boolean;
 }
 
@@ -93,7 +93,7 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
   };
 
   const onConfirm = () => {
-    generateApiKey();
+    if (generateApiKey) generateApiKey();
     setIsModalVisible(false);
   };
 
@@ -222,16 +222,18 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
                         <EuiFlexItem>
                           <EuiCode>{apiKey?.encoded}</EuiCode>
                         </EuiFlexItem>
-                        <EuiFlexItem grow={false}>
-                          <EuiButtonIcon
-                            data-test-subj="enterpriseSearchGeneratedConfigFieldsButton"
-                            size="xs"
-                            iconType="refresh"
-                            isLoading={isGenerateLoading}
-                            onClick={refreshButtonClick}
-                            disabled={!connector.index_name}
-                          />
-                        </EuiFlexItem>
+                        {generateApiKey && (
+                          <EuiFlexItem grow={false}>
+                            <EuiButtonIcon
+                              data-test-subj="enterpriseSearchGeneratedConfigFieldsButton"
+                              size="xs"
+                              iconType="refresh"
+                              isLoading={isGenerateLoading}
+                              onClick={refreshButtonClick}
+                              disabled={!connector.index_name}
+                            />
+                          </EuiFlexItem>
+                        )}
                         <EuiFlexItem grow={false}>
                           <EuiButtonIcon
                             size="xs"
@@ -245,16 +247,18 @@ export const GeneratedConfigFields: React.FC<GeneratedConfigFieldsProps> = ({
                   </EuiCopy>
                 </EuiFlexItem>
               ) : (
-                <EuiFlexItem grow={false}>
-                  <EuiButtonIcon
-                    data-test-subj="enterpriseSearchGeneratedConfigFieldsButton"
-                    size="xs"
-                    iconType="refresh"
-                    isLoading={isGenerateLoading}
-                    onClick={refreshButtonClick}
-                    disabled={!connector.index_name}
-                  />
-                </EuiFlexItem>
+                generateApiKey && (
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonIcon
+                      data-test-subj="enterpriseSearchGeneratedConfigFieldsButton"
+                      size="xs"
+                      iconType="refresh"
+                      isLoading={isGenerateLoading}
+                      onClick={refreshButtonClick}
+                      disabled={!connector.index_name}
+                    />
+                  </EuiFlexItem>
+                )
               )}
             </EuiFlexGroup>
           </EuiFlexItem>