[Enterprise Search] Add connector configurable field dependencies (#1…

…55039) This PR hides a configurable field if its dependencies (document field `depends_on`) are not satisfied. Fields that have one or many dependencies also have some styling changes.
elastic · Apr 18, 2023 · a7c9880 · a7c9880
1 parent 7172905
commit a7c9880
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 14 deletions.
diff --git a/x-pack/plugins/enterprise_search/common/connectors/native_connectors.ts b/x-pack/plugins/enterprise_search/common/connectors/native_connectors.ts
@@ -13,6 +13,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
   mongodb: {
     configuration: {
       host: {
+        depends_on: [],
         display: 'textbox',
         label: i18n.translate(
           'xpack.enterpriseSearch.nativeConnectors.mongodb.configuration.hostLabel',
@@ -27,6 +28,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         value: '',
       },
       user: {
+        depends_on: [],
         display: 'textbox',
         label: i18n.translate(
           'xpack.enterpriseSearch.nativeConnectors.mongodb.configuration.usernameLabel',
@@ -41,6 +43,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         value: '',
       },
       password: {
+        depends_on: [],
         display: 'textbox',
         label: i18n.translate(
           'xpack.enterpriseSearch.nativeConnectors.mongodb.configuration.passwordLabel',
@@ -55,6 +58,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         value: '',
       },
       database: {
+        depends_on: [],
         display: 'textbox',
         label: i18n.translate(
           'xpack.enterpriseSearch.nativeConnectors.mongodb.configuration.databaseLabel',
@@ -69,6 +73,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         value: '',
       },
       collection: {
+        depends_on: [],
         display: 'textbox',
         label: i18n.translate(
           'xpack.enterpriseSearch.nativeConnectors.mongodb.configuration.collectionLabel',
@@ -83,6 +88,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         value: '',
       },
       direct_connection: {
+        depends_on: [],
         display: 'toggle',
         label: i18n.translate(
           'xpack.enterpriseSearch.nativeConnectors.mongodb.configuration.directConnectionLabel',
@@ -113,6 +119,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
   mysql: {
     configuration: {
       host: {
+        depends_on: [],
         display: 'textbox',
         label: i18n.translate(
           'xpack.enterpriseSearch.nativeConnectors.mysql.configuration.hostLabel',
@@ -127,6 +134,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         value: '',
       },
       port: {
+        depends_on: [],
         display: 'numeric',
         label: i18n.translate(
           'xpack.enterpriseSearch.nativeConnectors.mysql.configuration.portLabel',
@@ -141,6 +149,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         value: '',
       },
       user: {
+        depends_on: [],
         display: 'textbox',
         label: i18n.translate(
           'xpack.enterpriseSearch.nativeConnectors.mysql.configuration.usernameLabel',
@@ -155,6 +164,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         value: '',
       },
       password: {
+        depends_on: [],
         display: 'textbox',
         label: i18n.translate(
           'xpack.enterpriseSearch.nativeConnectors.mysql.configuration.passwordLabel',
@@ -169,6 +179,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         value: '',
       },
       database: {
+        depends_on: [],
         display: 'textbox',
         label: i18n.translate(
           'xpack.enterpriseSearch.nativeConnectors.mysql.configuration.databaseLabel',
@@ -183,6 +194,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         value: '',
       },
       tables: {
+        depends_on: [],
         display: 'textarea',
         label: i18n.translate(
           'xpack.enterpriseSearch.nativeConnectors.mysql.configuration.tablesLabel',
@@ -197,6 +209,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         value: '',
       },
       ssl_enabled: {
+        depends_on: [],
         display: 'toggle',
         label: i18n.translate(
           'xpack.enterpriseSearch.nativeConnectors.mysql.configuration.sslEnabledLabel',
@@ -211,6 +224,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         value: false,
       },
       ssl_ca: {
+        depends_on: [{ field: 'ssl_enabled', value: true }],
         display: 'textbox',
         label: i18n.translate(
           'xpack.enterpriseSearch.nativeConnectors.mysql.configuration.sslCertificateLabel',

diff --git a/x-pack/plugins/enterprise_search/common/types/connectors.ts b/x-pack/plugins/enterprise_search/common/types/connectors.ts
@@ -5,15 +5,23 @@
  * 2.0.
  */
 
-export interface SelectOptions {
+export interface SelectOption {
   label: string;
   value: string;
 }
 
+export interface Dependency {
+  field: string;
+  value: string | number | boolean | null;
+}
+
+export type DependencyLookup = Record<string, string | number | boolean | null>;
+
 export interface ConnectorConfigProperties {
+  depends_on: Dependency[];
   display: string;
   label: string;
-  options: SelectOptions[];
+  options: SelectOption[];
   order?: number | null;
   required: boolean;
   sensitive: boolean;

diff --git a/...ise_search/public/applications/enterprise_search_content/__mocks__/search_indices.mock.ts b/...ise_search/public/applications/enterprise_search_content/__mocks__/search_indices.mock.ts
@@ -34,6 +34,7 @@ export const indices: ElasticsearchIndexWithIngestion[] = [
       api_key_id: null,
       configuration: {
         foo: {
+          depends_on: [],
           display: 'textbox',
           key: 'foo',
           label: 'bar',
@@ -141,6 +142,7 @@ export const indices: ElasticsearchIndexWithIngestion[] = [
       api_key_id: null,
       configuration: {
         foo: {
+          depends_on: [],
           display: 'textbox',
           key: 'foo',
           label: 'bar',

diff --git a/...erprise_search/public/applications/enterprise_search_content/__mocks__/view_index.mock.ts b/...erprise_search/public/applications/enterprise_search_content/__mocks__/view_index.mock.ts
@@ -44,6 +44,7 @@ export const connectorIndex: ConnectorViewIndex = {
     api_key_id: null,
     configuration: {
       foo: {
+        depends_on: [],
         display: 'textbox',
         key: 'foo',
         label: 'bar',
@@ -155,6 +156,7 @@ export const crawlerIndex: CrawlerViewIndex = {
     api_key_id: null,
     configuration: {
       foo: {
+        depends_on: [],
         display: 'textbox',
         key: 'foo',
         label: 'bar',

diff --git a/...erprise_search_content/components/search_index/connector/connector_configuration_form.tsx b/...erprise_search_content/components/search_index/connector/connector_configuration_form.tsx
@@ -16,23 +16,37 @@ import {
   EuiFlexItem,
   EuiButton,
   EuiButtonEmpty,
+  EuiPanel,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
 import { Status } from '../../../../../../common/types/api';
+import { DependencyLookup } from '../../../../../../common/types/connectors';
 
 import { ConnectorConfigurationApiLogic } from '../../../api/connector/update_connector_configuration_api_logic';
 
 import { ConnectorConfigurationField } from './connector_configuration_field';
-import { ConnectorConfigurationLogic } from './connector_configuration_logic';
+import {
+  ConfigEntry,
+  ConnectorConfigurationLogic,
+  dependenciesSatisfied,
+} from './connector_configuration_logic';
 
 export const ConnectorConfigurationForm = () => {
   const { status } = useValues(ConnectorConfigurationApiLogic);
 
   const { localConfigView } = useValues(ConnectorConfigurationLogic);
   const { saveConfig, setIsEditing } = useActions(ConnectorConfigurationLogic);
 
+  const dependencyLookup: DependencyLookup = localConfigView.reduce(
+    (prev: Record<string, string | number | boolean | null>, configEntry: ConfigEntry) => ({
+      ...prev,
+      [configEntry.key]: configEntry.value,
+    }),
+    {}
+  );
+
   return (
     <EuiForm
       onSubmit={(event) => {
@@ -42,9 +56,20 @@ export const ConnectorConfigurationForm = () => {
       component="form"
     >
       {localConfigView.map((configEntry) => {
-        const { key, label } = configEntry;
+        const { depends_on: dependencies, key, label } = configEntry;
+        const hasDependencies = dependencies.length > 0;
 
-        return (
+        return hasDependencies ? (
+          dependenciesSatisfied(dependencies, dependencyLookup) ? (
+            <EuiPanel color="subdued" borderRadius="none">
+              <EuiFormRow label={label ?? ''} key={key}>
+                <ConnectorConfigurationField configEntry={configEntry} />
+              </EuiFormRow>
+            </EuiPanel>
+          ) : (
+            <></>
+          )
+        ) : (
           <EuiFormRow label={label ?? ''} key={key}>
             <ConnectorConfigurationField configEntry={configEntry} />
           </EuiFormRow>