[Alerting] Fixing bug with Index Threshold alert when selecting "Of" expression (#90174)

* Fixing bug

* Updating functional test

* Fixing functional test

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Author: ymao1

x-pack/plugins/stack_alerts/public/alert_types/threshold/expression.tsx

@@ -124,15 +124,13 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<
     });
 
     if (indexArray.length > 0) {
-      await refreshEsFields();
+      await refreshEsFields(indexArray);
     }
   };
 
-  const refreshEsFields = async () => {
-    if (indexArray.length > 0) {
-      const currentEsFields = await getFields(http, indexArray);
-      setEsFields(currentEsFields);
-    }
+  const refreshEsFields = async (indices: string[]) => {
+    const currentEsFields = await getFields(http, indices);
+    setEsFields(currentEsFields);
   };
 
   useEffect(() => {
@@ -181,7 +179,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<
               timeField: '',
             });
           } else {
-            await refreshEsFields();
+            await refreshEsFields(indices);
           }
         }}
         onTimeFieldChange={(updatedTimeField: string) =>

x-pack/plugins/triggers_actions_ui/public/common/expression_items/of.tsx

@@ -91,6 +91,7 @@ export const OfExpression = ({
               defaultMessage: 'of',
             }
           )}
+          data-test-subj="ofExpressionPopover"
           display={display === 'inline' ? 'inline' : 'columns'}
           value={aggField || firstFieldOption.text}
           isActive={aggFieldPopoverOpen || !aggField}
@@ -119,6 +120,7 @@ export const OfExpression = ({
         <EuiFlexGroup>
           <EuiFlexItem grow={false} className="actOf__aggFieldContainer">
             <EuiFormRow
+              id="ofField"
               fullWidth
               isInvalid={errors.aggField.length > 0 && aggField !== undefined}
               error={errors.aggField}

x-pack/plugins/triggers_actions_ui/public/common/expression_items/when.test.tsx

@@ -20,6 +20,7 @@ describe('when expression', () => {
     <EuiSelect
       data-test-subj="whenExpressionSelect"
       fullWidth={true}
+      id="aggTypeField"
       onChange={[Function]}
       options={
         Array [
@@ -77,6 +78,7 @@ describe('when expression', () => {
     <EuiSelect
       data-test-subj="whenExpressionSelect"
       fullWidth={true}
+      id="aggTypeField"
       onChange={[Function]}
       options={
         Array [

x-pack/plugins/triggers_actions_ui/public/common/expression_items/when.tsx

@@ -79,6 +79,7 @@ export const WhenExpression = ({
         </ClosablePopoverTitle>
         <EuiSelect
           data-test-subj="whenExpressionSelect"
+          id="aggTypeField"
           value={aggType}
           fullWidth
           onChange={(e) => {

x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alert_create_flyout.ts

@@ -15,6 +15,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const supertest = getService('supertest');
   const find = getService('find');
   const retry = getService('retry');
+  const comboBox = getService('comboBox');
 
   async function getAlertsByName(name: string) {
     const {
@@ -30,15 +31,14 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
     });
   }
 
-  async function defineAlert(alertName: string, alertType?: string) {
-    alertType = alertType || '.index-threshold';
+  async function defineEsQueryAlert(alertName: string) {
     await pageObjects.triggersActionsUI.clickCreateAlertButton();
     await testSubjects.setValue('alertNameInput', alertName);
-    await testSubjects.click(`${alertType}-SelectOption`);
+    await testSubjects.click(`.es-query-SelectOption`);
     await testSubjects.click('selectIndexExpression');
-    const comboBox = await find.byCssSelector('#indexSelectSearchBox');
-    await comboBox.click();
-    await comboBox.type('k');
+    const indexComboBox = await find.byCssSelector('#indexSelectSearchBox');
+    await indexComboBox.click();
+    await indexComboBox.type('k');
     const filterSelectItem = await find.byCssSelector(`.euiFilterSelectItem`);
     await filterSelectItem.click();
     await testSubjects.click('thresholdAlertTimeFieldSelect');
@@ -53,6 +53,44 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
     await nameInput.click();
   }
 
+  async function defineIndexThresholdAlert(alertName: string) {
+    await pageObjects.triggersActionsUI.clickCreateAlertButton();
+    await testSubjects.setValue('alertNameInput', alertName);
+    await testSubjects.click(`.index-threshold-SelectOption`);
+    await testSubjects.click('selectIndexExpression');
+    const indexComboBox = await find.byCssSelector('#indexSelectSearchBox');
+    await indexComboBox.click();
+    await indexComboBox.type('k');
+    const filterSelectItem = await find.byCssSelector(`.euiFilterSelectItem`);
+    await filterSelectItem.click();
+    await testSubjects.click('thresholdAlertTimeFieldSelect');
+    await retry.try(async () => {
+      const fieldOptions = await find.allByCssSelector('#thresholdTimeField option');
+      expect(fieldOptions[1]).not.to.be(undefined);
+      await fieldOptions[1].click();
+    });
+    await testSubjects.click('closePopover');
+    // need this two out of popup clicks to close them
+    const nameInput = await testSubjects.find('alertNameInput');
+    await nameInput.click();
+
+    await testSubjects.click('whenExpression');
+    await testSubjects.click('whenExpressionSelect');
+    await retry.try(async () => {
+      const aggTypeOptions = await find.allByCssSelector('#aggTypeField option');
+      expect(aggTypeOptions[1]).not.to.be(undefined);
+      await aggTypeOptions[1].click();
+    });
+
+    await testSubjects.click('ofExpressionPopover');
+    const ofComboBox = await find.byCssSelector('#ofField');
+    await ofComboBox.click();
+    const ofOptionsString = await comboBox.getOptionsList('availablefieldsOptionsComboBox');
+    const ofOptions = ofOptionsString.trim().split('\n');
+    expect(ofOptions.length > 0).to.be(true);
+    await comboBox.set('availablefieldsOptionsComboBox', ofOptions[0]);
+  }
+
   async function defineAlwaysFiringAlert(alertName: string) {
     await pageObjects.triggersActionsUI.clickCreateAlertButton();
     await testSubjects.setValue('alertNameInput', alertName);
@@ -67,7 +105,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
     it('should create an alert', async () => {
       const alertName = generateUniqueKey();
-      await defineAlert(alertName);
+      await defineIndexThresholdAlert(alertName);
 
       await testSubjects.click('notifyWhenSelect');
       await testSubjects.click('onThrottleInterval');
@@ -222,7 +260,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
     it('should successfully test valid es_query alert', async () => {
       const alertName = generateUniqueKey();
-      await defineAlert(alertName, '.es-query');
+      await defineEsQueryAlert(alertName);
 
       // Valid query
       await testSubjects.setValue('queryJsonEditor', '{"query":{"match_all":{}}}', {