[Alerting] Improve creation and editing of "Elasticsearch query" rule in Management

src/plugins/home/server/services/sample_data/routes/list.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { sortBy } from 'lodash';
 import type { IRouter, Logger, RequestHandlerContext } from '@kbn/core/server';
 import type { AppLinkData, SampleDatasetSchema } from '../lib/sample_dataset_registry_types';
 import { createIndexName } from '../lib/create_index_name';
@@ -55,7 +56,7 @@ export const createListRoute = (
           previewImagePath: sampleDataset.previewImagePath,
           darkPreviewImagePath: sampleDataset.darkPreviewImagePath,
           overviewDashboard: findObjectId('dashboard', sampleDataset.overviewDashboard),
-          appLinks,
+          appLinks: sortBy(appLinks, 'order'),
           defaultIndex: findObjectId('index-pattern', sampleDataset.defaultIndex),
           dataIndices: sampleDataset.dataIndices.map(({ id }) => ({ id })),
           ...sampleDataStatus,

test/api_integration/apis/home/sample_data.ts

@@ -21,6 +21,10 @@ export default function ({ getService }: FtrProviderContext) {
   const FLIGHTS_CANVAS_APPLINK_PATH =
     '/app/canvas#/workpad/workpad-a474e74b-aedc-47c3-894a-db77e62c41e0'; // includes default ID of the flights canvas applink path
 
+  const includesPathInAppLinks = (appLinks: Array<{ path: string }>, path: string): boolean => {
+    return appLinks.some((item) => item.path === path);
+  };
+
   describe('sample data apis', () => {
     before(async () => {
       await esArchiver.emptyKibanaIndex();
@@ -41,7 +45,9 @@ export default function ({ getService }: FtrProviderContext) {
           // Check and make sure the sample dataset reflects the default object IDs, because no sample data objects exist.
           // Instead of checking each object ID, we check the dashboard and canvas app link as representatives.
           expect(flightsData.overviewDashboard).to.be(FLIGHTS_OVERVIEW_DASHBOARD_ID);
-          expect(flightsData.appLinks[0].path).to.be(FLIGHTS_CANVAS_APPLINK_PATH);
+          expect(includesPathInAppLinks(flightsData.appLinks, FLIGHTS_CANVAS_APPLINK_PATH)).to.be(
+            true
+          );
         });
       });
 
@@ -109,11 +115,15 @@ export default function ({ getService }: FtrProviderContext) {
           // Instead of checking each object ID, we check the dashboard and canvas app link as representatives.
           if (space === 'default') {
             expect(flightsData.overviewDashboard).to.be(FLIGHTS_OVERVIEW_DASHBOARD_ID);
-            expect(flightsData.appLinks[0].path).to.be(FLIGHTS_CANVAS_APPLINK_PATH);
+            expect(includesPathInAppLinks(flightsData.appLinks, FLIGHTS_CANVAS_APPLINK_PATH)).to.be(
+              true
+            );
           } else {
             // the sample data objects installed in the 'other' space had their IDs regenerated upon import
             expect(flightsData.overviewDashboard).not.to.be(FLIGHTS_OVERVIEW_DASHBOARD_ID);
-            expect(flightsData.appLinks[0].path).not.to.be(FLIGHTS_CANVAS_APPLINK_PATH);
+            expect(includesPathInAppLinks(flightsData.appLinks, FLIGHTS_CANVAS_APPLINK_PATH)).to.be(
+              false
+            );
           }
         });
       });
@@ -145,7 +155,9 @@ export default function ({ getService }: FtrProviderContext) {
           // Check and make sure the sample dataset reflects the default object IDs, because no sample data objects exist.
           // Instead of checking each object ID, we check the dashboard and canvas app link as representatives.
           expect(flightsData.overviewDashboard).to.be(FLIGHTS_OVERVIEW_DASHBOARD_ID);
-          expect(flightsData.appLinks[0].path).to.be(FLIGHTS_CANVAS_APPLINK_PATH);
+          expect(includesPathInAppLinks(flightsData.appLinks, FLIGHTS_CANVAS_APPLINK_PATH)).to.be(
+            true
+          );
         });
       });
     }

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

@@ -7,15 +7,15 @@
 
 import React from 'react';
 import { mountWithIntl, nextTick } from '@kbn/test-jest-helpers';
-import { DataViewSelectPopover } from './data_view_select_popover';
+import { DataViewSelectPopover, DataViewSelectPopoverProps } from './data_view_select_popover';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks';
 import { act } from 'react-dom/test-utils';
 
-const props = {
+const props: DataViewSelectPopoverProps = {
   onSelectDataView: () => {},
-  initialDataViewTitle: 'kibana_sample_data_logs',
-  initialDataViewId: 'mock-data-logs-id',
+  dataViewName: 'kibana_sample_data_logs',
+  dataViewId: 'mock-data-logs-id',
 };
 
 const dataViewOptions = [

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

@@ -5,48 +5,76 @@
  * 2.0.
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
+  EuiButtonEmpty,
   EuiButtonIcon,
   EuiExpression,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
   EuiPopover,
+  EuiPopoverFooter,
   EuiPopoverTitle,
 } from '@elastic/eui';
 import { DataViewsList } from '@kbn/unified-search-plugin/public';
 import { DataViewListItem } from '@kbn/data-views-plugin/public';
 import { useTriggersAndActionsUiDeps } from '../es_query/util';
 
-interface DataViewSelectPopoverProps {
+export interface DataViewSelectPopoverProps {
   onSelectDataView: (newDataViewId: string) => void;
-  initialDataViewTitle: string;
-  initialDataViewId?: string;
+  dataViewName?: string;
+  dataViewId?: string;
 }
 
 export const DataViewSelectPopover: React.FunctionComponent<DataViewSelectPopoverProps> = ({
   onSelectDataView,
-  initialDataViewTitle,
-  initialDataViewId,
+  dataViewName,
+  dataViewId,
 }) => {
-  const { data } = useTriggersAndActionsUiDeps();
+  const { data, dataViewEditor } = useTriggersAndActionsUiDeps();
   const [dataViewItems, setDataViewsItems] = useState<DataViewListItem[]>();
   const [dataViewPopoverOpen, setDataViewPopoverOpen] = useState(false);
 
-  const [selectedDataViewId, setSelectedDataViewId] = useState(initialDataViewId);
-  const [selectedTitle, setSelectedTitle] = useState<string>(initialDataViewTitle);
+  const closeDataViewEditor = useRef<() => void | undefined>();
+
+  const loadDataViews = useCallback(async () => {
+    const fetchedDataViewItems = await data.dataViews.getIdsWithTitle();
+    setDataViewsItems(fetchedDataViewItems);
+  }, [setDataViewsItems, data.dataViews]);
+
+  const closeDataViewPopover = useCallback(() => setDataViewPopoverOpen(false), []);
+
+  const createDataView = useMemo(
+    () =>
+      dataViewEditor?.userPermissions.editDataView()
+        ? () => {
+            closeDataViewEditor.current = dataViewEditor.openEditor({
+              onSave: async (createdDataView) => {
+                if (createdDataView.id) {
+                  await onSelectDataView(createdDataView.id);
+                  await loadDataViews();
+                }
+              },
+            });
+          }
+        : undefined,
+    [dataViewEditor, onSelectDataView, loadDataViews]
+  );
 
   useEffect(() => {
-    const initDataViews = async () => {
-      const fetchedDataViewItems = await data.dataViews.getIdsWithTitle();
-      setDataViewsItems(fetchedDataViewItems);
+    return () => {
+      // Make sure to close the editor when unmounting
+      if (closeDataViewEditor.current) {
+        closeDataViewEditor.current();
+      }
     };
-    initDataViews();
-  }, [data.dataViews]);
+  }, []);
 
-  const closeDataViewPopover = useCallback(() => setDataViewPopoverOpen(false), []);
+  useEffect(() => {
+    loadDataViews();
+  }, [loadDataViews]);
 
   if (!dataViewItems) {
     return null;
@@ -62,12 +90,17 @@ export const DataViewSelectPopover: React.FunctionComponent<DataViewSelectPopove
           description={i18n.translate('xpack.stackAlerts.components.ui.alertParams.dataViewLabel', {
             defaultMessage: 'data view',
           })}
-          value={selectedTitle}
+          value={
+            dataViewName ??
+            i18n.translate('xpack.stackAlerts.components.ui.alertParams.dataViewPlaceholder', {
+              defaultMessage: 'Select a data view',
+            })
+          }
           isActive={dataViewPopoverOpen}
           onClick={() => {
             setDataViewPopoverOpen(true);
           }}
-          isInvalid={!selectedTitle}
+          isInvalid={!dataViewId}
         />
       }
       isOpen={dataViewPopoverOpen}
@@ -102,18 +135,31 @@ export const DataViewSelectPopover: React.FunctionComponent<DataViewSelectPopove
           <DataViewsList
             dataViewsList={dataViewItems}
             onChangeDataView={(newId) => {
-              setSelectedDataViewId(newId);
-              const newTitle = dataViewItems?.find(({ id }) => id === newId)?.title;
-              if (newTitle) {
-                setSelectedTitle(newTitle);
-              }
-
               onSelectDataView(newId);
               closeDataViewPopover();
             }}
-            currentDataViewId={selectedDataViewId}
+            currentDataViewId={dataViewId}
           />
         </EuiFormRow>
+        {createDataView && (
+          <EuiPopoverFooter>
+            <EuiButtonEmpty
+              iconType="plusInCircleFilled"
+              data-test-subj="chooseDataViewPopover.createDataViewButton"
+              onClick={() => {
+                closeDataViewPopover();
+                createDataView();
+              }}
+            >
+              {i18n.translate(
+                'xpack.stackAlerts.components.ui.alertParams.dataViewPopover.createDataViewButton',
+                {
+                  defaultMessage: 'Create a data view',
+                }
+              )}
+            </EuiButtonEmpty>
+          </EuiPopoverFooter>
+        )}
       </div>
     </EuiPopover>
   );

x-pack/plugins/stack_alerts/public/alert_types/components/index_select_popover.tsx

@@ -104,7 +104,13 @@ export const IndexSelectPopover: React.FunctionComponent<Props> = ({
           description={i18n.translate('xpack.stackAlerts.components.ui.alertParams.indexLabel', {
             defaultMessage: 'index',
           })}
-          value={index && index.length > 0 ? renderIndices(index) : firstFieldOption.text}
+          value={
+            index && index.length > 0
+              ? renderIndices(index)
+              : i18n.translate('xpack.stackAlerts.components.ui.alertParams.indexPlaceholder', {
+                  defaultMessage: 'Select an index',
+                })
+          }
           isActive={indexPopoverOpen}
           onClick={() => {
             setIndexPopoverOpen(true);

x-pack/plugins/stack_alerts/public/alert_types/es_query/constants.ts

@@ -31,6 +31,7 @@ export const EXPRESSION_ERRORS = {
   thresholdComparator: new Array<string>(),
   timeWindowSize: new Array<string>(),
   searchConfiguration: new Array<string>(),
+  searchType: new Array<string>(),
 };
 
 export const EXPRESSION_ERROR_KEYS = Object.keys(EXPRESSION_ERRORS) as ErrorKey[];