[8.13] [Controls] Fix controls on fields with custom label (#180615) (#180744)

# Backport

This will backport the following commits from `main` to `8.13`:
- [[Controls] Fix controls on fields with custom label
(#180615)](https://github.com/elastic/kibana/pull/180615)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Hannah
Mudge","email":"Heenawter@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-04-12T20:21:34Z","message":"[Controls]
Fix controls on fields with custom label (#180615)\n\nCloses
https://github.com/elastic/kibana/issues/180613\r\n\r\n##
Summary\r\n\r\nWe were incorrectly using the field's `displayName` (i.e.
the custom\r\nlabel) rather than the `name` (i.e. the field's actual
name) when\r\nreferencing it in the compatible types registry - this was
causing an\r\nerror to be thrown because the entry for the custom label
did not exist.\r\nThis fixes the attached bug by replacing `displayName`
with `name`.\r\n\r\n\r\n### Checklist\r\n\r\n-
[x]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials
-\r\nhttps://github.com/elastic/kibana/pull/180626\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"d3c7e180fda7613109e81f69c598df14f8c75c55","branchLabelMapping":{"^v8.14.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","regression","release_note:fix","Feature:Input
Control","Team:Presentation","loe:small","impact:critical","Project:Controls","backport:prev-minor","v8.14.0"],"title":"[Controls]
Fix controls on fields with custom
label","number":180615,"url":"https://github.com/elastic/kibana/pull/180615","mergeCommit":{"message":"[Controls]
Fix controls on fields with custom label (#180615)\n\nCloses
https://github.com/elastic/kibana/issues/180613\r\n\r\n##
Summary\r\n\r\nWe were incorrectly using the field's `displayName` (i.e.
the custom\r\nlabel) rather than the `name` (i.e. the field's actual
name) when\r\nreferencing it in the compatible types registry - this was
causing an\r\nerror to be thrown because the entry for the custom label
did not exist.\r\nThis fixes the attached bug by replacing `displayName`
with `name`.\r\n\r\n\r\n### Checklist\r\n\r\n-
[x]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials
-\r\nhttps://github.com/elastic/kibana/pull/180626\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"d3c7e180fda7613109e81f69c598df14f8c75c55"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.14.0","branchLabelMappingKey":"^v8.14.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/180615","number":180615,"mergeCommit":{"message":"[Controls]
Fix controls on fields with custom label (#180615)\n\nCloses
https://github.com/elastic/kibana/issues/180613\r\n\r\n##
Summary\r\n\r\nWe were incorrectly using the field's `displayName` (i.e.
the custom\r\nlabel) rather than the `name` (i.e. the field's actual
name) when\r\nreferencing it in the compatible types registry - this was
causing an\r\nerror to be thrown because the entry for the custom label
did not exist.\r\nThis fixes the attached bug by replacing `displayName`
with `name`.\r\n\r\n\r\n### Checklist\r\n\r\n-
[x]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials
-\r\nhttps://github.com/elastic/kibana/pull/180626\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"d3c7e180fda7613109e81f69c598df14f8c75c55"}}]}]
BACKPORT-->

Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>

src/plugins/controls/public/control_group/editor/control_editor.test.tsx

@@ -10,9 +10,10 @@ import { ReactWrapper } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import { stubDataView } from '@kbn/data-views-plugin/common/data_view.stub';
+import { createStubDataView } from '@kbn/data-views-plugin/common/data_view.stub';
 import { findTestSubject, mountWithIntl } from '@kbn/test-jest-helpers';
 
+import { stubFieldSpecMap } from '@kbn/data-views-plugin/common/field.stub';
 import { OptionsListEmbeddableFactory } from '../..';
 import {
   OptionsListEmbeddableInput,
@@ -40,6 +41,25 @@ describe('Data control editor', () => {
     explicitInput?: Partial<ControlGroupInput>;
   }
 
+  const stubDataView = createStubDataView({
+    spec: {
+      id: 'logstash-*',
+      fields: {
+        ...stubFieldSpecMap,
+        'machine.os.raw': {
+          name: 'machine.os.raw',
+          customLabel: 'OS',
+          type: 'string',
+          esTypes: ['keyword'],
+          aggregatable: true,
+          searchable: true,
+        },
+      },
+      title: 'logstash-*',
+      timeFieldName: '@timestamp',
+    },
+  });
+
   pluginServices.getServices().dataViews.get = jest.fn().mockResolvedValue(stubDataView);
   pluginServices.getServices().dataViews.getIdsWithTitle = jest
     .fn()

src/plugins/controls/public/control_group/editor/control_editor.tsx

@@ -182,7 +182,7 @@ export const ControlEditor = ({
 
           const disabled =
             fieldRegistry && selectedField
-              ? !fieldRegistry[selectedField].compatibleControlTypes.includes(controlType)
+              ? !fieldRegistry[selectedField]?.compatibleControlTypes.includes(controlType)
               : true;
           const keyPadMenuItem = (
             <EuiKeyPadMenuItem
@@ -301,9 +301,7 @@ export const ControlEditor = ({
                   const newDefaultTitle = field.displayName ?? field.name;
                   setDefaultTitle(newDefaultTitle);
                   setSelectedField(field.name);
-                  setSelectedControlType(
+                  setSelectedControlType(fieldRegistry?.[field.name]?.compatibleControlTypes[0]);
-                    fieldRegistry?.[field.displayName].compatibleControlTypes[0]
-                  );
                   if (!currentTitle || currentTitle === defaultTitle) {
                     setCurrentTitle(newDefaultTitle);
                   }