[Detection Engine] Rule Data View select uses Data View name for display

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/data_view_selector_field/data_view_selector_field.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { screen, render } from '@testing-library/react';
+import { screen, render, fireEvent } from '@testing-library/react';
 import { TestProviders, useFormFieldMock } from '../../../../common/mock';
 import { DataViewSelectorField } from './data_view_selector_field';
 import { useDataViewListItems } from './use_data_view_list_items';
@@ -45,6 +45,35 @@ describe('data_view_selector', () => {
     expect(screen.getByRole('combobox')).toBeDisabled();
   });
 
+  it('displays the selected dataview by name, if specified', () => {
+    const dataViews = [
+      {
+        id: 'security-solution-default',
+        title:
+          '-*elastic-cloud-logs-*,.alerts-security.alerts-default,apm-*-transaction*,auditbeat-*,endgame-*,filebeat-*,logs-*,packetbeat-*,traces-apm*,winlogbeat-*',
+      },
+      {
+        id: '1234',
+        title: 'logs-*',
+        name: 'dataview-name',
+      },
+    ];
+    (useDataViewListItems as jest.Mock).mockReturnValue({ data: dataViews, isFetching: false });
+
+    render(
+      <DataViewSelectorField
+        field={useFormFieldMock<string | undefined>({
+          value: 'security-solution-default',
+        })}
+      />,
+      { wrapper: TestProviders }
+    );
+
+    expect(screen.queryByText('dataview-name')).not.toBeInTheDocument();
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'dataview-name' } });
+    expect(screen.getByText('dataview-name')).toBeInTheDocument();
+  });
+
   it('displays alerts on alerts warning when default security view selected', () => {
     const dataViews = [
       {

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/data_view_selector_field/data_view_selector_field.tsx

@@ -27,9 +27,9 @@ export function DataViewSelectorField({ field }: DataViewSelectorProps): JSX.Ele
   const errorMessage = fieldAndError?.errorMessage;
   const comboBoxOptions = useMemo(
     () =>
-      dataViews.map(({ id, title: label }) => ({
+      dataViews.map(({ id, title, name }) => ({
         id,
-        label,
+        label: name ?? title,
       })),
     [dataViews]
   );