[Discover] Show "Temporary" badge for ad-hoc data views in Alerts flyout

x-pack/plugins/stack_alerts/public/rule_types/components/data_view_select_popover.test.tsx

@@ -12,6 +12,7 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { indexPatternEditorPluginMock as dataViewEditorPluginMock } from '@kbn/data-view-editor-plugin/public/mocks';
+import { DataViewSelector } from '@kbn/unified-search-plugin/public';
 import { act } from 'react-dom/test-utils';
 
 const selectedDataView = {
@@ -29,7 +30,7 @@ const props: DataViewSelectPopoverProps = {
   dataView: selectedDataView,
 };
 
-const dataViewIds = ['mock-data-logs-id', 'mock-ecommerce-id', 'mock-test-id'];
+const dataViewIds = ['mock-data-logs-id', 'mock-ecommerce-id', 'mock-test-id', 'mock-ad-hoc-id'];
 
 const dataViewOptions = [
   selectedDataView,
@@ -59,6 +60,15 @@ const dataViewOptions = [
     isPersisted: jest.fn(() => true),
     getName: () => 'test',
   },
+  {
+    id: 'mock-ad-hoc-id',
+    namespaces: ['default'],
+    title: 'ad-hoc data view',
+    typeMeta: {},
+    isTimeBased: jest.fn(),
+    isPersisted: jest.fn(() => false),
+    getName: () => 'ad-hoc data view',
+  },
 ];
 
 const mount = () => {
@@ -98,4 +108,44 @@ describe('DataViewSelectPopover', () => {
     const getIdsResult = await dataViewsMock.getIds.mock.results[0].value;
     expect(getIdsResult).toBe(dataViewIds);
   });
+
+  test('should open a popover on click', async () => {
+    const { wrapper } = mount();
+
+    await act(async () => {
+      await nextTick();
+      wrapper.update();
+    });
+
+    await wrapper.find('[data-test-subj="selectDataViewExpression"]').first().simulate('click');
+
+    expect(wrapper.find(DataViewSelector).prop('dataViewsList')).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "id": "mock-data-logs-id",
+          "isAdhoc": false,
+          "name": undefined,
+          "title": "kibana_sample_data_logs",
+        },
+        Object {
+          "id": "mock-ecommerce-id",
+          "isAdhoc": false,
+          "name": undefined,
+          "title": "kibana_sample_data_ecommerce",
+        },
+        Object {
+          "id": "mock-test-id",
+          "isAdhoc": false,
+          "name": undefined,
+          "title": "test",
+        },
+        Object {
+          "id": "mock-ad-hoc-id",
+          "isAdhoc": true,
+          "name": undefined,
+          "title": "ad-hoc data view",
+        },
+      ]
+    `);
+  });
 });

x-pack/plugins/stack_alerts/public/rule_types/components/data_view_select_popover.tsx

@@ -20,8 +20,9 @@ import {
   EuiText,
   useEuiPaddingCSS,
 } from '@elastic/eui';
-import type { DataViewListItem, DataView } from '@kbn/data-views-plugin/public';
+import type { DataView } from '@kbn/data-views-plugin/public';
 import { DataViewSelector } from '@kbn/unified-search-plugin/public';
+import type { DataViewListItemEnhanced } from '@kbn/unified-search-plugin/public/dataview_picker/dataview_list';
 import { useTriggerUiActionServices } from '../es_query/util';
 import { EsQueryRuleMetaData } from '../es_query/types';
 
@@ -32,11 +33,12 @@ export interface DataViewSelectPopoverProps {
   onChangeMetaData: (metadata: EsQueryRuleMetaData) => void;
 }
 
-const toDataViewListItem = (dataView: DataView): DataViewListItem => {
+const toDataViewListItem = (dataView: DataView): DataViewListItemEnhanced => {
   return {
     id: dataView.id!,
     title: dataView.title,
     name: dataView.name,
+    isAdhoc: !dataView.isPersisted(),
   };
 };
 
@@ -47,7 +49,7 @@ export const DataViewSelectPopover: React.FunctionComponent<DataViewSelectPopove
   onChangeMetaData,
 }) => {
   const { dataViews, dataViewEditor } = useTriggerUiActionServices();
-  const [dataViewItems, setDataViewsItems] = useState<DataViewListItem[]>([]);
+  const [dataViewItems, setDataViewsItems] = useState<DataViewListItemEnhanced[]>([]);
   const [dataViewPopoverOpen, setDataViewPopoverOpen] = useState(false);
 
   const closeDataViewEditor = useRef<() => void | undefined>();