[Enterprise Search] Clean up rich configurable fields UI (#155282)

- Add spacing between `EuiRow` and `EuiPanel` for `ConnectorConfigurationField`. - Hide fields that have any `ui_restrictions` - Fix labelling for sensitive textareas - Other misc cleanup tasks
elastic · Apr 24, 2023 · 03464e7 · 03464e7
1 parent 67927e1
commit 03464e7
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 19 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
@@ -27,6 +27,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         required: true,
         sensitive: false,
         tooltip: '',
+        ui_restrictions: [],
         value: '',
       },
       user: {
@@ -44,6 +45,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         required: true,
         sensitive: false,
         tooltip: '',
+        ui_restrictions: [],
         value: '',
       },
       password: {
@@ -61,6 +63,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         required: true,
         sensitive: true,
         tooltip: '',
+        ui_restrictions: [],
         value: '',
       },
       database: {
@@ -78,6 +81,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         required: true,
         sensitive: false,
         tooltip: '',
+        ui_restrictions: [],
         value: '',
       },
       collection: {
@@ -95,6 +99,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         required: true,
         sensitive: false,
         tooltip: '',
+        ui_restrictions: [],
         value: '',
       },
       direct_connection: {
@@ -112,6 +117,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         required: true,
         sensitive: false,
         tooltip: '',
+        ui_restrictions: [],
         value: true,
       },
     },
@@ -145,6 +151,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         required: true,
         sensitive: false,
         tooltip: '',
+        ui_restrictions: [],
         value: '',
       },
       port: {
@@ -162,6 +169,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         required: true,
         sensitive: false,
         tooltip: '',
+        ui_restrictions: [],
         value: '',
       },
       user: {
@@ -179,6 +187,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         required: false,
         sensitive: false,
         tooltip: '',
+        ui_restrictions: [],
         value: '',
       },
       password: {
@@ -196,6 +205,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         required: false,
         sensitive: true,
         tooltip: '',
+        ui_restrictions: [],
         value: '',
       },
       database: {
@@ -213,6 +223,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         required: true,
         sensitive: false,
         tooltip: '',
+        ui_restrictions: [],
         value: '',
       },
       tables: {
@@ -230,6 +241,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         required: true,
         sensitive: false,
         tooltip: '',
+        ui_restrictions: [],
         value: '',
       },
       ssl_enabled: {
@@ -247,6 +259,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         required: true,
         sensitive: false,
         tooltip: '',
+        ui_restrictions: [],
         value: false,
       },
       ssl_ca: {
@@ -264,6 +277,7 @@ export const NATIVE_CONNECTOR_DEFINITIONS: Record<string, NativeConnector | unde
         required: true,
         sensitive: false,
         tooltip: '',
+        ui_restrictions: [],
         value: '',
       },
     },

diff --git a/x-pack/plugins/enterprise_search/common/types/connectors.ts b/x-pack/plugins/enterprise_search/common/types/connectors.ts
@@ -23,7 +23,6 @@ export enum DisplayType {
   NUMERIC = 'numeric',
   TOGGLE = 'toggle',
   DROPDOWN = 'dropdown',
-  CHECKBOX = 'checkbox',
 }
 
 export interface ConnectorConfigProperties {
@@ -36,6 +35,7 @@ export interface ConnectorConfigProperties {
   required: boolean;
   sensitive: boolean;
   tooltip: string;
+  ui_restrictions: string[];
   value: string | number | boolean | null;
 }
 

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
@@ -45,6 +45,7 @@ export const indices: ElasticsearchIndexWithIngestion[] = [
           required: false,
           sensitive: false,
           tooltip: '',
+          ui_restrictions: [],
           value: 'barbar',
         },
       },
@@ -155,6 +156,7 @@ export const indices: ElasticsearchIndexWithIngestion[] = [
           required: false,
           sensitive: false,
           tooltip: '',
+          ui_restrictions: [],
           value: 'barbar',
         },
       },

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
@@ -55,6 +55,7 @@ export const connectorIndex: ConnectorViewIndex = {
         required: false,
         sensitive: false,
         tooltip: '',
+        ui_restrictions: [],
         value: 'barbar',
       },
     },
@@ -169,6 +170,7 @@ export const crawlerIndex: CrawlerViewIndex = {
         required: false,
         sensitive: false,
         tooltip: '',
+        ui_restrictions: [],
         value: 'barbar',
       },
     },

diff --git a/...rprise_search_content/components/search_index/connector/connector_configuration_field.tsx b/...rprise_search_content/components/search_index/connector/connector_configuration_field.tsx
@@ -95,7 +95,14 @@ export const ConnectorConfigurationField: React.FC<ConnectorConfigurationFieldPr
       );
 
       return sensitive ? (
-        <EuiAccordion id={key + '-accordion'} buttonContent={label}>
+        <EuiAccordion
+          id={key + '-accordion'}
+          buttonContent={
+            <EuiToolTip content={tooltip}>
+              <p>{label}</p>
+            </EuiToolTip>
+          }
+        >
           {textarea}
         </EuiAccordion>
       ) : (

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
@@ -17,6 +17,7 @@ import {
   EuiForm,
   EuiFormRow,
   EuiPanel,
+  EuiSpacer,
   EuiToolTip,
 } from '@elastic/eui';
 
@@ -48,6 +49,12 @@ export const ConnectorConfigurationForm = () => {
     {}
   );
 
+  const filteredConfigView = localConfigView.filter(
+    (configEntry) =>
+      configEntry.ui_restrictions.length <= 0 &&
+      dependenciesSatisfied(configEntry.depends_on, dependencyLookup)
+  );
+
   return (
     <EuiForm
       onSubmit={(event) => {
@@ -56,17 +63,16 @@ export const ConnectorConfigurationForm = () => {
       }}
       component="form"
     >
-      {localConfigView.map((configEntry) => {
+      {filteredConfigView.map((configEntry, index) => {
         const {
           default_value: defaultValue,
           depends_on: dependencies,
           key,
           display,
           label,
+          sensitive,
           tooltip,
         } = configEntry;
-        // toggle label goes next to the element, not in the row
-        const hasDependencies = dependencies.length > 0;
         const helpText = defaultValue
           ? i18n.translate(
               'xpack.enterpriseSearch.content.indices.configurationConnector.config.defaultValue',
@@ -76,26 +82,41 @@ export const ConnectorConfigurationForm = () => {
               }
             )
           : '';
+        // toggle and sensitive textarea labels go next to the element, not in the row
         const rowLabel =
-          display !== DisplayType.TOGGLE ? (
+          display === DisplayType.TOGGLE || (display === DisplayType.TEXTAREA && sensitive) ? (
+            <></>
+          ) : (
             <EuiToolTip content={tooltip}>
               <p>{label}</p>
             </EuiToolTip>
-          ) : (
-            <></>
           );
 
-        return hasDependencies ? (
-          dependenciesSatisfied(dependencies, dependencyLookup) ? (
-            <EuiPanel color="subdued" borderRadius="none">
-              <EuiFormRow label={rowLabel} key={key} helpText={helpText}>
-                <ConnectorConfigurationField configEntry={configEntry} />
-              </EuiFormRow>
-            </EuiPanel>
-          ) : (
-            <></>
-          )
-        ) : (
+        if (dependencies.length > 0) {
+          // dynamic spacing without CSS
+          const previousField = filteredConfigView[index - 1];
+          const nextField = filteredConfigView[index + 1];
+
+          const topSpacing =
+            !previousField || previousField.depends_on.length <= 0 ? <EuiSpacer size="m" /> : <></>;
+
+          const bottomSpacing =
+            !nextField || nextField.depends_on.length <= 0 ? <EuiSpacer size="m" /> : <></>;
+
+          return (
+            <>
+              {topSpacing}
+              <EuiPanel color="subdued" borderRadius="none">
+                <EuiFormRow label={rowLabel} key={key} helpText={helpText}>
+                  <ConnectorConfigurationField configEntry={configEntry} />
+                </EuiFormRow>
+              </EuiPanel>
+              {bottomSpacing}
+            </>
+          );
+        }
+
+        return (
           <EuiFormRow label={rowLabel} key={key} helpText={helpText}>
             <ConnectorConfigurationField configEntry={configEntry} />
           </EuiFormRow>