From e4e9f4b78e8bce42ae177bf500c55f8bb2877ef9 Mon Sep 17 00:00:00 2001
From: Yuliia Naumenko <yuliia.naumenko@elastic.com>
Date: Wed, 5 Feb 2020 13:40:39 -0800
Subject: [PATCH] Cleaned up some not used params and added position popover
 definition

---
 .../threshold/expression.tsx                  |  9 +-
 .../expression_items/for_the_last.test.tsx    |  3 +-
 .../common/expression_items/for_the_last.tsx  | 21 ++++-
 .../expression_items/group_by_over.test.tsx   |  2 +-
 .../common/expression_items/group_by_over.tsx | 53 +++++++++---
 .../common/expression_items/of.test.tsx       |  6 +-
 .../public/common/expression_items/of.tsx     | 86 ++++++++++++-------
 .../common/expression_items/threshold.tsx     | 38 +++++---
 .../common/expression_items/when.test.tsx     | 11 +--
 .../public/common/expression_items/when.tsx   | 33 ++++---
 10 files changed, 164 insertions(+), 98 deletions(-)

diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/expression.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/expression.tsx
index 46eba14593b1d..af8d60e724f0b 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/expression.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/expression.tsx
@@ -259,8 +259,6 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
                 // reset time field and expression fields if indices are deleted
                 if (indices.length === 0) {
                   setTimeFieldOptions([firstFieldOption]);
-                  setAlertParams('timeFields', []);
-
                   setDefaultExpressionValues();
                   return;
                 }
@@ -268,7 +266,6 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
                 const timeFields = getTimeFieldOptions(currentEsFields as any);
 
                 setEsFields(currentEsFields);
-                setAlertParams('timeFields', timeFields);
                 setTimeFieldOptions([firstFieldOption, ...timeFields]);
               }}
               onSearchChange={async search => {
@@ -374,8 +371,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <WhenExpression
-            aggType={aggType}
-            defaultAggType={DEFAULT_VALUES.AGGREGATION_TYPE}
+            aggType={aggType ?? DEFAULT_VALUES.AGGREGATION_TYPE}
             onChangeSelectedAggType={(selectedAggType: string) =>
               setAlertParams('aggType', selectedAggType)
             }
@@ -412,9 +408,8 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <ThresholdExpression
-            thresholdComparator={thresholdComparator || DEFAULT_VALUES.THRESHOLD_COMPARATOR}
+            thresholdComparator={thresholdComparator ?? DEFAULT_VALUES.THRESHOLD_COMPARATOR}
             threshold={threshold}
-            defaultThresholdComparator={DEFAULT_VALUES.THRESHOLD_COMPARATOR}
             errors={errors}
             onChangeSelectedThreshold={selectedThresholds =>
               setAlertParams('threshold', selectedThresholds)
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/for_the_last.test.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/for_the_last.test.tsx
index 6097cdf1035dd..6ae3056001c8f 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/for_the_last.test.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/for_the_last.test.tsx
@@ -42,9 +42,8 @@ describe('for the last expression', () => {
       wrapper.contains(
         <EuiPopoverTitle>
           <FormattedMessage
+            id="xpack.triggersActionsUI.common.expressionItems.forTheLast.popoverTitle"
             defaultMessage="For the last"
-            id="xpack.triggersActionsUI.sections.alertAdd.threshold.forTheLastButtonLabel"
-            values={{}}
           />
         </EuiPopoverTitle>
       )
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/for_the_last.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/for_the_last.tsx
index e395af5b21172..844551de3171d 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/for_the_last.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/for_the_last.tsx
@@ -27,6 +27,19 @@ interface ForLastExpressionProps {
   errors: { [key: string]: string[] };
   onChangeWindowSize: (selectedWindowSize: number | '') => void;
   onChangeWindowUnit: (selectedWindowUnit: string) => void;
+  popupPosition?:
+    | 'upCenter'
+    | 'upLeft'
+    | 'upRight'
+    | 'downCenter'
+    | 'downLeft'
+    | 'downRight'
+    | 'leftCenter'
+    | 'leftUp'
+    | 'leftDown'
+    | 'rightCenter'
+    | 'rightUp'
+    | 'rightDown';
 }
 
 export const ForLastExpression = ({
@@ -35,16 +48,16 @@ export const ForLastExpression = ({
   errors,
   onChangeWindowSize,
   onChangeWindowUnit,
+  popupPosition,
 }: ForLastExpressionProps) => {
   const [alertDurationPopoverOpen, setAlertDurationPopoverOpen] = useState(false);
 
   return (
     <EuiPopover
-      id="watchDurationPopover"
       button={
         <EuiExpression
           description={i18n.translate(
-            'xpack.triggersActionsUI.sections.alertAdd.threshold.forTheLastLabel',
+            'xpack.triggersActionsUI.common.expressionItems.forTheLast.descriptionLabel',
             {
               defaultMessage: 'for the last',
             }
@@ -66,12 +79,12 @@ export const ForLastExpression = ({
       }}
       ownFocus
       withTitle
-      anchorPosition="downLeft"
+      anchorPosition={popupPosition ?? 'downLeft'}
     >
       <div>
         <EuiPopoverTitle>
           <FormattedMessage
-            id="xpack.triggersActionsUI.sections.alertAdd.threshold.forTheLastButtonLabel"
+            id="xpack.triggersActionsUI.common.expressionItems.forTheLast.popoverTitle"
             defaultMessage="For the last"
           />
         </EuiPopoverTitle>
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/group_by_over.test.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/group_by_over.test.tsx
index cc3f037f2ee7b..39cca005d5176 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/group_by_over.test.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/group_by_over.test.tsx
@@ -63,6 +63,7 @@ describe('group by expression', () => {
         <EuiSelect
           data-test-subj="fieldsExpressionSelect"
           isInvalid={false}
+          onBlur={[Function]}
           onChange={[Function]}
           options={
             Array [
@@ -76,7 +77,6 @@ describe('group by expression', () => {
               },
             ]
           }
-          value=""
         />
     `);
   });
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/group_by_over.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/group_by_over.tsx
index f8e236a714c86..01e454187d398 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/group_by_over.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/group_by_over.tsx
@@ -31,6 +31,19 @@ interface GroupByExpressionProps {
   customGroupByTypes?: {
     [key: string]: GroupByType;
   };
+  popupPosition?:
+    | 'upCenter'
+    | 'upLeft'
+    | 'upRight'
+    | 'downCenter'
+    | 'downLeft'
+    | 'downRight'
+    | 'leftCenter'
+    | 'leftUp'
+    | 'leftDown'
+    | 'rightCenter'
+    | 'rightUp'
+    | 'rightDown';
 }
 
 export const GroupByExpression = ({
@@ -43,30 +56,39 @@ export const GroupByExpression = ({
   termSize,
   termField,
   customGroupByTypes,
+  popupPosition,
 }: GroupByExpressionProps) => {
   const groupByTypes = customGroupByTypes ?? builtInGroupByTypes;
   const [groupByPopoverOpen, setGroupByPopoverOpen] = useState(false);
   const MIN_TERM_SIZE = 1;
   const firstFieldOption = {
-    text: i18n.translate('xpack.triggersActionsUI.common.groupByType.timeFieldOptionLabel', {
-      defaultMessage: 'Select a field',
-    }),
+    text: i18n.translate(
+      'xpack.triggersActionsUI.common.expressionItems.groupByType.timeFieldOptionLabel',
+      {
+        defaultMessage: 'Select a field',
+      }
+    ),
     value: '',
   };
 
   return (
     <EuiPopover
-      id="groupByPopover"
       button={
         <EuiExpression
           description={`${
             groupByTypes[groupBy].sizeRequired
-              ? i18n.translate('xpack.triggersActionsUI.common.groupByType.groupedOverLabel', {
-                  defaultMessage: 'grouped over',
-                })
-              : i18n.translate('xpack.triggersActionsUI.common.groupByType.overLabel', {
-                  defaultMessage: 'over',
-                })
+              ? i18n.translate(
+                  'xpack.triggersActionsUI.common.expressionItems.groupByType.groupedOverLabel',
+                  {
+                    defaultMessage: 'grouped over',
+                  }
+                )
+              : i18n.translate(
+                  'xpack.triggersActionsUI.common.expressionItems.groupByType.overLabel',
+                  {
+                    defaultMessage: 'over',
+                  }
+                )
           }`}
           value={`${groupByTypes[groupBy].text} ${
             groupByTypes[groupBy].sizeRequired
@@ -86,13 +108,16 @@ export const GroupByExpression = ({
       }}
       ownFocus
       withTitle
-      anchorPosition="downRight"
+      anchorPosition={popupPosition ?? 'downRight'}
     >
       <div>
         <EuiPopoverTitle>
-          {i18n.translate('xpack.triggersActionsUI.common.groupByType.overButtonLabel', {
-            defaultMessage: 'over',
-          })}
+          {i18n.translate(
+            'xpack.triggersActionsUI.common.expressionItems.groupByType.overButtonLabel',
+            {
+              defaultMessage: 'over',
+            }
+          )}
         </EuiPopoverTitle>
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/of.test.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/of.test.tsx
index 25a47e6222647..2e674f4fb47b1 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/of.test.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/of.test.tsx
@@ -25,9 +25,10 @@ describe('of expression', () => {
       <EuiComboBox
         compressed={false}
         data-test-subj="availablefieldsOptionsComboBox"
-        fullWidth={false}
+        fullWidth={true}
         isClearable={true}
         isInvalid={false}
+        noSuggestions={true}
         onChange={[Function]}
         options={Array []}
         placeholder="Select a field"
@@ -77,9 +78,10 @@ describe('of expression', () => {
     <EuiComboBox
       compressed={false}
       data-test-subj="availablefieldsOptionsComboBox"
-      fullWidth={false}
+      fullWidth={true}
       isClearable={true}
       isInvalid={false}
+      noSuggestions={false}
       onChange={[Function]}
       options={
         Array [
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/of.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/of.tsx
index 7036924d85bf2..954e584d52a87 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/of.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/of.tsx
@@ -27,6 +27,19 @@ interface OfExpressionProps {
   customAggTypesOptions?: {
     [key: string]: AggregationType;
   };
+  popupPosition?:
+    | 'upCenter'
+    | 'upLeft'
+    | 'upRight'
+    | 'downCenter'
+    | 'downLeft'
+    | 'downRight'
+    | 'leftCenter'
+    | 'leftUp'
+    | 'leftDown'
+    | 'rightCenter'
+    | 'rightUp'
+    | 'rightDown';
 }
 
 export const OfExpression = ({
@@ -36,6 +49,7 @@ export const OfExpression = ({
   onChangeSelectedAggField,
   fields,
   customAggTypesOptions,
+  popupPosition,
 }: OfExpressionProps) => {
   const [aggFieldPopoverOpen, setAggFieldPopoverOpen] = useState(false);
   const firstFieldOption = {
@@ -63,9 +77,12 @@ export const OfExpression = ({
       id="aggFieldPopover"
       button={
         <EuiExpression
-          description={i18n.translate('xpack.triggersActionsUI.common.of.ofLabel', {
-            defaultMessage: 'of',
-          })}
+          description={i18n.translate(
+            'xpack.triggersActionsUI.common.expressionItems.of.buttonLabel',
+            {
+              defaultMessage: 'of',
+            }
+          )}
           value={aggField || firstFieldOption.text}
           isActive={aggFieldPopoverOpen || !aggField}
           onClick={() => {
@@ -78,40 +95,43 @@ export const OfExpression = ({
       closePopover={() => {
         setAggFieldPopoverOpen(false);
       }}
-      ownFocus
       withTitle
-      anchorPosition="upRight"
+      anchorPosition={popupPosition ?? 'downRight'}
+      zIndex={8000}
     >
-      <EuiPopoverTitle>
-        {i18n.translate('xpack.triggersActionsUI.common.of.ofButtonLabel', {
-          defaultMessage: 'of',
-        })}
-      </EuiPopoverTitle>
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem>
-          <EuiFormRow
-            fullWidth
-            isInvalid={errors.aggField.length > 0 && aggField !== undefined}
-            error={errors.aggField}
-          >
-            <EuiComboBox
+      <div>
+        <EuiPopoverTitle>
+          {i18n.translate('xpack.triggersActionsUI.common.expressionItems.of.popoverTitle', {
+            defaultMessage: 'of',
+          })}
+        </EuiPopoverTitle>
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false} className="watcherThresholdAlertAggFieldContainer">
+            <EuiFormRow
               fullWidth
-              singleSelection={{ asPlainText: true }}
-              data-test-subj="availablefieldsOptionsComboBox"
               isInvalid={errors.aggField.length > 0 && aggField !== undefined}
-              placeholder={firstFieldOption.text}
-              options={availablefieldsOptions}
-              selectedOptions={aggField ? [{ label: aggField }] : []}
-              onChange={selectedOptions => {
-                onChangeSelectedAggField(
-                  selectedOptions.length === 1 ? selectedOptions[0].label : undefined
-                );
-                setAggFieldPopoverOpen(false);
-              }}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+              error={errors.aggField}
+            >
+              <EuiComboBox
+                fullWidth
+                singleSelection={{ asPlainText: true }}
+                data-test-subj="availablefieldsOptionsComboBox"
+                isInvalid={errors.aggField.length > 0 && aggField !== undefined}
+                placeholder={firstFieldOption.text}
+                options={availablefieldsOptions}
+                noSuggestions={!availablefieldsOptions.length}
+                selectedOptions={aggField ? [{ label: aggField }] : []}
+                onChange={selectedOptions => {
+                  onChangeSelectedAggField(
+                    selectedOptions.length === 1 ? selectedOptions[0].label : undefined
+                  );
+                  setAggFieldPopoverOpen(false);
+                }}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </div>
     </EuiPopover>
   );
 };
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/threshold.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/threshold.tsx
index f8de29ac46a70..ecbf0aee63e2d 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/threshold.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/threshold.tsx
@@ -22,7 +22,6 @@ import { Comparator } from '../types';
 
 interface ThresholdExpressionProps {
   thresholdComparator: string;
-  defaultThresholdComparator: string;
   errors: { [key: string]: string[] };
   onChangeSelectedThresholdComparator: (selectedThresholdComparator?: string) => void;
   onChangeSelectedThreshold: (selectedThreshold?: number[]) => void;
@@ -30,22 +29,35 @@ interface ThresholdExpressionProps {
     [key: string]: Comparator;
   };
   threshold?: number[];
+  popupPosition?:
+    | 'upCenter'
+    | 'upLeft'
+    | 'upRight'
+    | 'downCenter'
+    | 'downLeft'
+    | 'downRight'
+    | 'leftCenter'
+    | 'leftUp'
+    | 'leftDown'
+    | 'rightCenter'
+    | 'rightUp'
+    | 'rightDown';
 }
 
 export const ThresholdExpression = ({
   thresholdComparator,
-  defaultThresholdComparator,
   errors,
   onChangeSelectedThresholdComparator,
   onChangeSelectedThreshold,
   customComparators,
   threshold = [],
+  popupPosition,
 }: ThresholdExpressionProps) => {
   const comparators = customComparators ?? builtInComparators;
   const [alertThresholdPopoverOpen, setAlertThresholdPopoverOpen] = useState(false);
 
   const andThresholdText = i18n.translate(
-    'xpack.triggersActionsUI.sections.alertAdd.threshold.andLabel',
+    'xpack.triggersActionsUI.common.expressionItems.threshold.andLabel',
     {
       defaultMessage: 'AND',
     }
@@ -53,13 +65,12 @@ export const ThresholdExpression = ({
 
   return (
     <EuiPopover
-      id="thresholdPopover"
       button={
         <EuiExpression
           data-test-subj="thresholdPopover"
-          description={comparators[thresholdComparator || defaultThresholdComparator].text}
+          description={comparators[thresholdComparator].text}
           value={(threshold || [])
-            .slice(0, comparators[thresholdComparator || defaultThresholdComparator].requiredValues)
+            .slice(0, comparators[thresholdComparator].requiredValues)
             .join(` ${andThresholdText} `)}
           isActive={Boolean(
             alertThresholdPopoverOpen ||
@@ -83,12 +94,10 @@ export const ThresholdExpression = ({
       }}
       ownFocus
       withTitle
-      anchorPosition="downLeft"
+      anchorPosition={popupPosition ?? 'downLeft'}
     >
       <div>
-        <EuiPopoverTitle>
-          {comparators[thresholdComparator || defaultThresholdComparator].text}
-        </EuiPopoverTitle>
+        <EuiPopoverTitle>{comparators[thresholdComparator].text}</EuiPopoverTitle>
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>
             <EuiSelect
@@ -102,13 +111,14 @@ export const ThresholdExpression = ({
               })}
             />
           </EuiFlexItem>
-          {Array.from(
-            Array(comparators[thresholdComparator || defaultThresholdComparator].requiredValues)
-          ).map((_notUsed, i) => {
+          {Array.from(Array(comparators[thresholdComparator].requiredValues)).map((_notUsed, i) => {
             return (
               <Fragment key={`threshold${i}`}>
                 {i > 0 ? (
-                  <EuiFlexItem grow={false} className="alertThresholdWatchInBetweenComparatorText">
+                  <EuiFlexItem
+                    grow={false}
+                    className="watcherThresholdWatchInBetweenComparatorText"
+                  >
                     <EuiText>{andThresholdText}</EuiText>
                   </EuiFlexItem>
                 ) : null}
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/when.test.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/when.test.tsx
index 31a2adc685a0b..02b6bf24977c9 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/when.test.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/when.test.tsx
@@ -12,11 +12,7 @@ describe('when expression', () => {
   it('renders with builtin aggregation types', () => {
     const onChangeSelectedAggType = jest.fn();
     const wrapper = shallow(
-      <WhenExpression
-        aggType={'count'}
-        defaultAggType={'count'}
-        onChangeSelectedAggType={onChangeSelectedAggType}
-      />
+      <WhenExpression aggType={'count'} onChangeSelectedAggType={onChangeSelectedAggType} />
     );
     expect(wrapper.find('[data-test-subj="whenExpressionSelect"]')).toMatchInlineSnapshot(`
     <EuiSelect
@@ -57,7 +53,6 @@ describe('when expression', () => {
     const wrapper = shallow(
       <WhenExpression
         aggType={'count'}
-        defaultAggType={'count'}
         onChangeSelectedAggType={onChangeSelectedAggType}
         customAggTypesOptions={{
           count: {
@@ -98,10 +93,10 @@ describe('when expression', () => {
     `);
   });
 
-  it('renders with default aggreagation type preselected if no aggType was set', () => {
+  it('renders when popover title', () => {
     const onChangeSelectedAggType = jest.fn();
     const wrapper = shallow(
-      <WhenExpression defaultAggType={'avg'} onChangeSelectedAggType={onChangeSelectedAggType} />
+      <WhenExpression aggType={'avg'} onChangeSelectedAggType={onChangeSelectedAggType} />
     );
     wrapper.simulate('click');
     expect(wrapper.find('[value="avg"]').length > 0).toBeTruthy();
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/when.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/when.tsx
index 932b940f2c6dd..b20040608ed9e 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/when.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/when.tsx
@@ -11,37 +11,44 @@ import { builtInAggregationTypes } from '../constants';
 import { AggregationType } from '../types';
 
 interface WhenExpressionProps {
-  aggType?: string;
-  defaultAggType: string;
+  aggType: string;
   customAggTypesOptions?: { [key: string]: AggregationType };
   onChangeSelectedAggType: (selectedAggType: string) => void;
+  popupPosition?:
+    | 'upCenter'
+    | 'upLeft'
+    | 'upRight'
+    | 'downCenter'
+    | 'downLeft'
+    | 'downRight'
+    | 'leftCenter'
+    | 'leftUp'
+    | 'leftDown'
+    | 'rightCenter'
+    | 'rightUp'
+    | 'rightDown';
 }
 
 export const WhenExpression = ({
   aggType,
-  defaultAggType,
   customAggTypesOptions,
   onChangeSelectedAggType,
+  popupPosition,
 }: WhenExpressionProps) => {
   const [aggTypePopoverOpen, setAggTypePopoverOpen] = useState(false);
   const aggregationTypes = customAggTypesOptions ?? builtInAggregationTypes;
   return (
     <EuiPopover
-      id="aggTypePopover"
       button={
         <EuiExpression
           data-test-subj="whenExpression"
           description={i18n.translate(
-            'xpack.triggersActionsUI.sections.alertAdd.threshold.whenLabel',
+            'xpack.triggersActionsUI.common.expressionItems.threshold.descriptionLabel',
             {
               defaultMessage: 'when',
             }
           )}
-          value={
-            aggregationTypes[aggType ?? '']
-              ? aggregationTypes[aggType ?? ''].text
-              : aggregationTypes[defaultAggType].text
-          }
+          value={aggregationTypes[aggType].text}
           isActive={aggTypePopoverOpen}
           onClick={() => {
             setAggTypePopoverOpen(true);
@@ -54,17 +61,17 @@ export const WhenExpression = ({
       }}
       ownFocus
       withTitle
-      anchorPosition="downLeft"
+      anchorPosition={popupPosition ?? 'downLeft'}
     >
       <div>
         <EuiPopoverTitle>
-          {i18n.translate('xpack.triggersActionsUI.sections.alertAdd.threshold.whenButtonLabel', {
+          {i18n.translate('xpack.triggersActionsUI.common.expressionItems.threshold.popoverTitle', {
             defaultMessage: 'when',
           })}
         </EuiPopoverTitle>
         <EuiSelect
           data-test-subj="whenExpressionSelect"
-          value={aggType || defaultAggType}
+          value={aggType}
           fullWidth
           onChange={e => {
             onChangeSelectedAggType(e.target.value);