Cleaned up some not used params and added position popover definition

elastic · Feb 5, 2020 · e4e9f4b · e4e9f4b
1 parent 293d985
commit e4e9f4b
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 98 deletions.
diff --git a/...ns_ui/np_ready/public/application/components/builtin_alert_types/threshold/expression.tsx b/...ns_ui/np_ready/public/application/components/builtin_alert_types/threshold/expression.tsx
@@ -259,16 +259,13 @@ 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;
                 }
                 const currentEsFields = await getFields(indices);
                 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/...plugins/triggers_actions_ui/np_ready/public/common/expression_items/for_the_last.test.tsx b/...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/...gacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/for_the_last.tsx b/...gacy/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/...lugins/triggers_actions_ui/np_ready/public/common/expression_items/group_by_over.test.tsx b/...lugins/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/...acy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/group_by_over.tsx b/...acy/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/...ck/legacy/plugins/triggers_actions_ui/np_ready/public/common/expression_items/of.test.tsx b/...ck/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
@@ -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>
   );
 };