[Security Solution][Exceptions] - Fix empty combo box entry option fo…

…r exception item condition (#151398) ## Summary Addresses #145540 Filters out the empty default entry item from combo box option. (cherry picked from commit 28f4f1b)
elastic · Feb 23, 2023 · 264ad66 · 264ad66
1 parent a216384
commit 264ad66
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 8 deletions.
diff --git a/packages/kbn-securitysolution-autocomplete/src/field/__tests__/use_field.test.ts b/packages/kbn-securitysolution-autocomplete/src/field/__tests__/use_field.test.ts
@@ -84,6 +84,55 @@ describe('useField', () => {
       expect(comboOptions).toEqual([{ label: 'bytes' }, { label: 'ssl' }, { label: '@timestamp' }]);
       expect(selectedComboOptions).toEqual([]);
     });
+    it('should not return an empty field as a combo option', () => {
+      const newIndexPattern = {
+        ...indexPattern,
+        fields: [
+          {
+            name: 'bytes',
+            type: 'number',
+            esTypes: ['long'],
+            count: 10,
+            scripted: false,
+            searchable: true,
+            aggregatable: true,
+            readFromDocValues: true,
+          },
+          {
+            name: 'ssl',
+            type: 'boolean',
+            esTypes: ['boolean'],
+            count: 20,
+            scripted: false,
+            searchable: true,
+            aggregatable: true,
+            readFromDocValues: true,
+          },
+          {
+            name: '@timestamp',
+            type: 'date',
+            esTypes: ['date'],
+            count: 30,
+            scripted: false,
+            searchable: true,
+            aggregatable: true,
+            readFromDocValues: true,
+          },
+        ] as unknown as DataViewFieldBase[],
+        title: 'title1',
+      };
+
+      const { result } = renderHook(() =>
+        useField({
+          indexPattern: newIndexPattern,
+          onChange: onChangeMock,
+          selectedField: { name: ' ', type: 'keyword' },
+        })
+      );
+      const { comboOptions, selectedComboOptions } = result.current;
+      expect(comboOptions).toEqual([{ label: 'bytes' }, { label: 'ssl' }, { label: '@timestamp' }]);
+      expect(selectedComboOptions).toEqual([]);
+    });
     it('should map fields to comboOptions correctly and return selectedComboOptions', () => {
       const newIndexPattern = {
         ...indexPattern,
@@ -183,7 +232,7 @@ describe('useField', () => {
         { label: '@timestamp' },
       ]);
       act(() => {
-        const label = renderFields({ label: 'blob' }, '', '') as ReactElement;
+        const label = renderFields({ label: 'blob' }) as ReactElement;
         expect(label?.props.content).toEqual('Binary fields are currently unsupported');
       });
     });
@@ -238,7 +287,7 @@ describe('useField', () => {
         { label: '@timestamp' },
       ]);
       act(() => {
-        const label = renderFields({ label: 'blob' }, '', '') as ReactElement;
+        const label = renderFields({ label: 'blob' }) as ReactElement;
         expect(label?.props.content).toEqual('Binary fields are currently unsupported');
       });
     });
@@ -279,7 +328,7 @@ describe('useField', () => {
       const { comboOptions, renderFields } = result.current;
       expect(comboOptions).toEqual([{ label: 'bytes' }, { label: 'ssl' }, { label: '@timestamp' }]);
       act(() => {
-        const label = renderFields({ label: '@timestamp' }, '', '') as ReactElement;
+        const label = renderFields({ label: '@timestamp' }) as ReactElement;
         expect(label).toEqual('@timestamp');
       });
     });

diff --git a/packages/kbn-securitysolution-autocomplete/src/field/use_field.tsx b/packages/kbn-securitysolution-autocomplete/src/field/use_field.tsx
@@ -26,13 +26,14 @@ import {
   GetFieldComboBoxPropsReturn,
 } from './types';
 import { disabledTypesWithTooltipText } from './disabled_types_with_tooltip_text';
+import { paramContainsSpace } from '../param_contains_space';
 
 const getExistingFields = (indexPattern: DataViewBase | undefined): DataViewFieldBase[] => {
   return indexPattern != null ? indexPattern.fields : [];
 };
 
 const getSelectedFields = (selectedField: DataViewField | undefined): DataViewFieldBase[] => {
-  return selectedField ? [selectedField] : [];
+  return selectedField && !paramContainsSpace(selectedField.name) ? [selectedField] : [];
 };
 
 const getAvailableFields = (
@@ -130,7 +131,7 @@ export const useField = ({
   const { availableFields, selectedFields } = useMemo(() => {
     const indexPatternsToUse =
       customOption != null && indexPattern != null
-        ? { ...indexPattern, fields: [...indexPattern?.fields, customOption] }
+        ? { ...indexPattern, fields: [customOption, ...indexPattern?.fields] }
         : indexPattern;
     return getComboBoxFields(indexPatternsToUse, selectedField, fieldTypeFilter);
   }, [indexPattern, fieldTypeFilter, selectedField, customOption]);
@@ -183,9 +184,7 @@ export const useField = ({
   );
 
   const renderFields = (
-    option: EuiComboBoxOptionOption<string | number | string[] | undefined>,
-    searchValue: string,
-    contentClassName: string
+    option: EuiComboBoxOptionOption<string | number | string[] | undefined>
   ) => {
     const { label } = option;