[Security Solution] Add data source editable component (elastic#196948)

**Partially addresses:** elastic#171520

## Summary

This PR adds is built on top of elastic#193828 and add a Data Source editable component for final edit side of Three Way Diff tab of the upgrade prebuilt rule workflow.

## Details

elastic#171520 required adding editable components for each field diffable rule field. It imposes some difficulties since it's quite problematic to reuse existing especially complex components like Data Source from Define Rule step component.

This PR make little refactoring to the Define Rule step component to make it simpler and make it easier to reuse Data Source related code chunks scattered in Define Rule step component. You may notice some copy-paste chunks of Data Source editable component in the PR. At this stage it's the simplest way to proceed to avoid huge refactoring and potential new bugs. Taking into account deadlines for the task it looks like a good trade off. There is a plan to work on improvements for rules creation/editing forms later on.

x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/data_view_selector_field/__mocks__/use_data_views.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const useDataViews = jest.fn().mockReturnValue({
+  data: [],
+  isFetching: false,
+});

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

@@ -0,0 +1,114 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { TestProviders, useFormFieldMock } from '../../../../common/mock';
+import { DataViewSelectorField } from './data_view_selector_field';
+import { useDataViews } from './use_data_views';
+
+jest.mock('../../../../common/lib/kibana');
+jest.mock('./use_data_views');
+
+describe('data_view_selector', () => {
+  it('renders correctly', () => {
+    (useDataViews as jest.Mock).mockReturnValue({ data: [], isFetching: false });
+
+    render(
+      <DataViewSelectorField
+        field={useFormFieldMock<string | undefined>({
+          value: undefined,
+        })}
+      />,
+      { wrapper: TestProviders }
+    );
+
+    expect(screen.queryByTestId('pick-rule-data-source')).toBeInTheDocument();
+  });
+
+  it('disables the combobox while data views are fetching', () => {
+    (useDataViews as jest.Mock).mockReturnValue({ data: [], isFetching: true });
+
+    render(
+      <DataViewSelectorField
+        field={useFormFieldMock<string | undefined>({
+          value: undefined,
+        })}
+      />,
+      { wrapper: TestProviders }
+    );
+
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+
+  it('displays alerts on alerts warning when default security view selected', () => {
+    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-*',
+      },
+    ];
+    (useDataViews as jest.Mock).mockReturnValue({ data: dataViews, isFetching: false });
+
+    render(
+      <DataViewSelectorField
+        field={useFormFieldMock<string | undefined>({
+          value: 'security-solution-default',
+        })}
+      />,
+      { wrapper: TestProviders }
+    );
+
+    expect(screen.queryByTestId('defaultSecurityDataViewWarning')).toBeInTheDocument();
+  });
+
+  it('does not display alerts on alerts warning when default security view is not selected', () => {
+    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-*',
+      },
+    ];
+    (useDataViews as jest.Mock).mockReturnValue({ data: dataViews, isFetching: false });
+
+    render(
+      <DataViewSelectorField
+        field={useFormFieldMock<string | undefined>({
+          value: '1234',
+        })}
+      />,
+      { wrapper: TestProviders }
+    );
+
+    expect(screen.queryByTestId('defaultSecurityDataViewWarning')).not.toBeInTheDocument();
+  });
+
+  it('displays warning on missing data view', () => {
+    (useDataViews as jest.Mock).mockReturnValue({ data: [], isFetching: false });
+
+    render(
+      <DataViewSelectorField
+        field={useFormFieldMock<string | undefined>({
+          value: 'non-existent-id',
+        })}
+      />,
+      { wrapper: TestProviders }
+    );
+
+    expect(screen.queryByTestId('missingDataViewWarning')).toBeInTheDocument();
+  });
+});