Use the displayName property in default editor (#73311) (#81763)

* Use displayName in field list in visualize editor

* Set key in combo box

* Fix jest tests

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/vis_default_editor/public/components/agg_params_helper.test.ts

@@ -33,6 +33,7 @@ import { FieldParamEditor, OrderByParamEditor } from './controls';
 import { EditorConfig } from './utils';
 import { Schema } from '../schemas';
 import { EditorVisState } from './sidebar/state/reducers';
+import { groupAndSortBy } from '../utils';
 
 jest.mock('../utils', () => ({
   groupAndSortBy: jest.fn(() => ['indexedFields']),
@@ -169,6 +170,9 @@ describe('DefaultEditorAggParams helpers', () => {
         ],
         advanced: [],
       });
+
+      // Should be grouped using displayName as label
+      expect(groupAndSortBy).toHaveBeenCalledWith(expect.anything(), 'type', 'displayName', 'name');
     });
   });
 

src/plugins/vis_default_editor/public/components/agg_params_helper.ts

@@ -93,7 +93,7 @@ function getAggParamsToRender({
         }
       }
       fields = filterAggTypeFields(availableFields, agg);
-      indexedFields = groupAndSortBy(fields, 'type', 'name');
+      indexedFields = groupAndSortBy(fields, 'type', 'displayName', 'name');
 
       if (fields && !indexedFields.length && index > 0) {
         // don't draw the rest of the options if there are no indexed fields and it's an extra param (index > 0).

src/plugins/vis_default_editor/public/components/controls/field.tsx

@@ -52,7 +52,7 @@ function FieldParamEditor({
 }: FieldParamEditorProps) {
   const [isDirty, setIsDirty] = useState(false);
   const selectedOptions: ComboBoxGroupedOptions<IndexPatternField> = value
-    ? [{ label: value.displayName || value.name, target: value }]
+    ? [{ label: value.displayName, target: value, key: value.name }]
     : [];
 
   const onChange = (options: EuiComboBoxOptionOption[]) => {

src/plugins/vis_default_editor/public/utils.ts

@@ -18,10 +18,12 @@
  */
 
 interface ComboBoxOption<T> {
+  key?: string;
   label: string;
   target: T;
 }
 interface ComboBoxGroupedOption<T> {
+  key?: string;
   label: string;
   options: Array<ComboBoxOption<T>>;
 }
@@ -40,15 +42,22 @@ export type ComboBoxGroupedOptions<T> = Array<GroupOrOption<T>>;
  * @returns An array of grouped and sorted alphabetically `objects` that are compatible with EuiComboBox options.
  */
 export function groupAndSortBy<
-  T extends Record<TGroupBy | TLabelName, string>,
+  T extends Record<TGroupBy | TLabelName | TKeyName, string>,
   TGroupBy extends string = 'type',
-  TLabelName extends string = 'title'
->(objects: T[], groupBy: TGroupBy, labelName: TLabelName): ComboBoxGroupedOptions<T> {
+  TLabelName extends string = 'title',
+  TKeyName extends string = never
+>(
+  objects: T[],
+  groupBy: TGroupBy,
+  labelName: TLabelName,
+  keyName?: TKeyName
+): ComboBoxGroupedOptions<T> {
   const groupedOptions = objects.reduce((array, obj) => {
     const group = array.find((element) => element.label === obj[groupBy]);
     const option = {
       label: obj[labelName],
       target: obj,
+      ...(keyName ? { key: obj[keyName] } : {}),
     };
 
     if (group && group.options) {