From 03464e79c22149e072216b51afec5b7ccd4f3faf Mon Sep 17 00:00:00 2001
From: Navarone Feekery <13634519+navarone-feekery@users.noreply.github.com>
Date: Mon, 24 Apr 2023 10:17:00 +0200
Subject: [PATCH] [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
---
 .../common/connectors/native_connectors.ts    | 14 +++++
 .../common/types/connectors.ts                |  2 +-
 .../__mocks__/search_indices.mock.ts          |  2 +
 .../__mocks__/view_index.mock.ts              |  2 +
 .../connector_configuration_field.tsx         |  9 ++-
 .../connector_configuration_form.tsx          | 55 +++++++++++++------
 .../connector_configuration_logic.test.ts     | 23 ++++++++
 .../connector_configuration_logic.ts          |  4 ++
 8 files changed, 92 insertions(+), 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
index 8d962ee206f9e..78a720304d996 100644
--- 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
index 33d12e300c72b..8093c80c36759 100644
--- 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/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/search_indices.mock.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/search_indices.mock.ts
index 5ae2784b52664..1a4a58558dc5c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/search_indices.mock.ts
+++ b/x-pack/plugins/enterprise_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/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/view_index.mock.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/view_index.mock.ts
index 1674f5ca18675..3f9972d1545c5 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/view_index.mock.ts
+++ b/x-pack/plugins/enterprise_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/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_field.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_field.tsx
index 1030cbdcfa5d9..e154785a33531 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_field.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_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/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_form.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_form.tsx
index 2ef04c8e2c18b..7627c5c869469 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_form.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_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>
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_logic.test.ts
index 9ff1fc60db168..64e7d1af9c999 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_logic.test.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_logic.test.ts
@@ -61,6 +61,7 @@ describe('ConnectorConfigurationLogic', () => {
             required: false,
             sensitive: false,
             tooltip: '',
+            ui_restrictions: [],
             value: 'oldBar',
           },
         },
@@ -79,6 +80,7 @@ describe('ConnectorConfigurationLogic', () => {
             required: false,
             sensitive: false,
             tooltip: '',
+            ui_restrictions: [],
             value: 'oldBar',
           },
         },
@@ -94,6 +96,7 @@ describe('ConnectorConfigurationLogic', () => {
             required: false,
             sensitive: false,
             tooltip: '',
+            ui_restrictions: [],
             value: 'oldBar',
           },
         ],
@@ -111,6 +114,7 @@ describe('ConnectorConfigurationLogic', () => {
           required: false,
           sensitive: false,
           tooltip: '',
+          ui_restrictions: [],
           value: 'fourthBar',
         },
       });
@@ -127,6 +131,7 @@ describe('ConnectorConfigurationLogic', () => {
             required: false,
             sensitive: false,
             tooltip: '',
+            ui_restrictions: [],
             value: 'fourthBar',
           },
         },
@@ -142,6 +147,7 @@ describe('ConnectorConfigurationLogic', () => {
             required: false,
             sensitive: false,
             tooltip: '',
+            ui_restrictions: [],
             value: 'fourthBar',
           },
         ],
@@ -160,6 +166,7 @@ describe('ConnectorConfigurationLogic', () => {
             required: false,
             sensitive: false,
             tooltip: '',
+            ui_restrictions: [],
             value: 'foofoo',
           },
           password: {
@@ -172,6 +179,7 @@ describe('ConnectorConfigurationLogic', () => {
             required: false,
             sensitive: true,
             tooltip: '',
+            ui_restrictions: [],
             value: 'fourthBar',
           },
         });
@@ -186,6 +194,7 @@ describe('ConnectorConfigurationLogic', () => {
             required: false,
             sensitive: false,
             tooltip: '',
+            ui_restrictions: [],
             value: 'foofoo',
           },
           password: {
@@ -198,6 +207,7 @@ describe('ConnectorConfigurationLogic', () => {
             required: false,
             sensitive: true,
             tooltip: '',
+            ui_restrictions: [],
             value: 'fourthBar',
           },
         });
@@ -212,6 +222,7 @@ describe('ConnectorConfigurationLogic', () => {
           required: false,
           sensitive: false,
           tooltip: '',
+          ui_restrictions: [],
           value: 'fafa',
         });
         expect(ConnectorConfigurationLogic.values).toEqual({
@@ -227,6 +238,7 @@ describe('ConnectorConfigurationLogic', () => {
               required: false,
               sensitive: false,
               tooltip: '',
+              ui_restrictions: [],
               value: 'foofoo',
             },
             password: {
@@ -239,6 +251,7 @@ describe('ConnectorConfigurationLogic', () => {
               required: false,
               sensitive: true,
               tooltip: '',
+              ui_restrictions: [],
               value: 'fourthBar',
             },
           },
@@ -254,6 +267,7 @@ describe('ConnectorConfigurationLogic', () => {
               required: false,
               sensitive: false,
               tooltip: '',
+              ui_restrictions: [],
               value: 'foofoo',
             },
             {
@@ -267,6 +281,7 @@ describe('ConnectorConfigurationLogic', () => {
               required: false,
               sensitive: true,
               tooltip: '',
+              ui_restrictions: [],
               value: 'fourthBar',
             },
           ],
@@ -281,6 +296,7 @@ describe('ConnectorConfigurationLogic', () => {
               required: false,
               sensitive: false,
               tooltip: '',
+              ui_restrictions: [],
               value: 'fafa',
             },
             password: {
@@ -293,6 +309,7 @@ describe('ConnectorConfigurationLogic', () => {
               required: false,
               sensitive: true,
               tooltip: '',
+              ui_restrictions: [],
               value: 'fourthBar',
             },
           },
@@ -308,6 +325,7 @@ describe('ConnectorConfigurationLogic', () => {
               required: false,
               sensitive: false,
               tooltip: '',
+              ui_restrictions: [],
               value: 'fafa',
             },
             {
@@ -321,6 +339,7 @@ describe('ConnectorConfigurationLogic', () => {
               required: false,
               sensitive: true,
               tooltip: '',
+              ui_restrictions: [],
               value: 'fourthBar',
             },
           ],
@@ -345,6 +364,7 @@ describe('ConnectorConfigurationLogic', () => {
               required: false,
               sensitive: false,
               tooltip: '',
+              ui_restrictions: [],
               value: 'barbar',
             },
           ],
@@ -381,6 +401,7 @@ describe('ConnectorConfigurationLogic', () => {
               required: false,
               sensitive: false,
               tooltip: '',
+              ui_restrictions: [],
               value: 'barbar',
             },
           ],
@@ -402,6 +423,7 @@ describe('ConnectorConfigurationLogic', () => {
               required: false,
               sensitive: false,
               tooltip: '',
+              ui_restrictions: [],
               value: 'barbar',
             },
           ],
@@ -424,6 +446,7 @@ describe('ConnectorConfigurationLogic', () => {
             required: false,
             sensitive: true,
             tooltip: '',
+            ui_restrictions: [],
             value: 'Barbara',
           },
         });
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_logic.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_logic.ts
index 02ebb7888b7b8..84b0fd4d23fdb 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_logic.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_configuration_logic.ts
@@ -66,6 +66,7 @@ export interface ConfigEntry {
   required: boolean;
   sensitive: boolean;
   tooltip: string;
+  ui_restrictions: string[];
   value: string | number | boolean | null;
 }
 
@@ -245,6 +246,8 @@ export const ConnectorConfigurationLogic = kea<
             required,
             sensitive,
             tooltip,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            ui_restrictions,
             value,
           }
         ) => ({
@@ -259,6 +262,7 @@ export const ConnectorConfigurationLogic = kea<
             required,
             sensitive,
             tooltip,
+            ui_restrictions,
             value,
           },
         }),