[Search] New search connector creation flow (#187582)

## Summary This PR brings a new and dedicated search connector creation flow for ES3 and ESS. [Figma Prototype](https://www.figma.com/proto/eKQr4HYlz0v9pTofRPWIyH/Ingestion-methods-flow?page-id=411%3A158867&node-id=411-158870&viewport=3831%2C-1905%2C1.23&t=ZP9e3LtaSeJ5FMAz-9&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=411%3A158870&show-proto-sidebar=1) ![CleanShot 2024-07-04 at 16 27 21](https://github.com/elastic/kibana/assets/3108788/45e61110-f222-4bad-b24d-87ebad07ca98) ### Checklist Delete any items that are not applicable to this PR. - [ ] 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) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [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 - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] 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)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] 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) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: Efe Gürkan YALAMAN <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: kibanamachine <[email protected]>
elastic · Oct 15, 2024 · 63e116b · 63e116b
1 parent bdc9ce9
commit 63e116b
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>