[AO] Update the design of Threshold rule creation form (elastic#163313)

## Summary

Fixes elastic#162768 
Fixes elastic#162544

### After update 
<img width="466" alt="Screenshot 2023-08-09 at 17 53 44"
src="https://github.com/elastic/kibana/assets/6838659/926f0c9e-ca55-4711-be3a-2da39726caa8">

x-pack/plugins/observability/public/components/threshold/components/closable_popover_title.test.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { ClosablePopoverTitle } from './closable_popover_title';
+
+describe('closable popover title', () => {
+  it('renders with defined options', () => {
+    const onClose = jest.fn();
+    const children = <div className="foo" />;
+    const wrapper = mount(
+      <ClosablePopoverTitle onClose={onClose}>{children}</ClosablePopoverTitle>
+    );
+    expect(wrapper.contains(<div className="foo" />)).toBeTruthy();
+  });
+
+  it('onClose function gets called', () => {
+    const onClose = jest.fn();
+    const children = <div className="foo" />;
+    const wrapper = mount(
+      <ClosablePopoverTitle onClose={onClose}>{children}</ClosablePopoverTitle>
+    );
+    wrapper.find('EuiButtonIcon').simulate('click');
+    expect(onClose).toHaveBeenCalled();
+  });
+});

x-pack/plugins/observability/public/components/threshold/components/closable_popover_title.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiPopoverTitle, EuiFlexGroup, EuiFlexItem, EuiButtonIcon } from '@elastic/eui';
+
+interface ClosablePopoverTitleProps {
+  children: JSX.Element;
+  onClose: () => void;
+}
+
+export function ClosablePopoverTitle({ children, onClose }: ClosablePopoverTitleProps) {
+  return (
+    <EuiPopoverTitle>
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem>{children}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            iconType="cross"
+            color="danger"
+            aria-label={i18n.translate(
+              'xpack.observability.thresholdRule.closablePopoverTitle.closeLabel',
+              {
+                defaultMessage: 'Close',
+              }
+            )}
+            onClick={() => onClose()}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPopoverTitle>
+  );
+}

x-pack/plugins/observability/public/components/threshold/components/custom_equation/custom_equation_editor.tsx

@@ -11,12 +11,15 @@ import {
   EuiFlexGroup,
   EuiButtonEmpty,
   EuiSpacer,
+  EuiExpression,
+  EuiPopover,
 } from '@elastic/eui';
 import React, { useState, useCallback, useMemo } from 'react';
 import { omit, range, first, xor, debounce } from 'lodash';
 import { IErrorObject } from '@kbn/triggers-actions-ui-plugin/public';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { DataViewBase } from '@kbn/es-query';
+import { i18n } from '@kbn/i18n';
 import { OMITTED_AGGREGATIONS_FOR_CUSTOM_METRICS } from '../../../../../common/threshold_rule/metrics_explorer';
 import {
   Aggregators,
@@ -27,13 +30,8 @@ import {
 import { MetricExpression } from '../../types';
 import { CustomMetrics, AggregationTypes, NormalizedFields } from './types';
 import { MetricRowWithAgg } from './metric_row_with_agg';
-import { MetricRowWithCount } from './metric_row_with_count';
-import {
-  CUSTOM_EQUATION,
-  EQUATION_HELP_MESSAGE,
-  LABEL_HELP_MESSAGE,
-  LABEL_LABEL,
-} from '../../i18n_strings';
+import { ClosablePopoverTitle } from '../closable_popover_title';
+import { EQUATION_HELP_MESSAGE } from '../../i18n_strings';
 
 export interface CustomEquationEditorProps {
   onChange: (expression: MetricExpression) => void;
@@ -61,7 +59,7 @@ export function CustomEquationEditor({
   const [customMetrics, setCustomMetrics] = useState<CustomMetrics>(
     expression?.customMetrics ?? [NEW_METRIC]
   );
-  const [label, setLabel] = useState<string | undefined>(expression?.label || undefined);
+  const [customEqPopoverOpen, setCustomEqPopoverOpen] = useState(false);
   const [equation, setEquation] = useState<string | undefined>(expression?.equation || undefined);
   const debouncedOnChange = useMemo(() => debounce(onChange, 500), [onChange]);
 
@@ -70,91 +68,65 @@ export function CustomEquationEditor({
       const currentVars = previous?.map((m) => m.name) ?? [];
       const name = first(xor(VAR_NAMES, currentVars))!;
       const nextMetrics = [...(previous || []), { ...NEW_METRIC, name }];
-      debouncedOnChange({ ...expression, customMetrics: nextMetrics, equation, label });
+      debouncedOnChange({ ...expression, customMetrics: nextMetrics, equation });
       return nextMetrics;
     });
-  }, [debouncedOnChange, equation, expression, label]);
+  }, [debouncedOnChange, equation, expression]);
 
   const handleDelete = useCallback(
     (name: string) => {
       setCustomMetrics((previous) => {
         const nextMetrics = previous?.filter((row) => row.name !== name) ?? [NEW_METRIC];
         const finalMetrics = (nextMetrics.length && nextMetrics) || [NEW_METRIC];
-        debouncedOnChange({ ...expression, customMetrics: finalMetrics, equation, label });
+        debouncedOnChange({ ...expression, customMetrics: finalMetrics, equation });
         return finalMetrics;
       });
     },
-    [equation, expression, debouncedOnChange, label]
+    [equation, expression, debouncedOnChange]
   );
 
   const handleChange = useCallback(
     (metric: MetricExpressionCustomMetric) => {
       setCustomMetrics((previous) => {
         const nextMetrics = previous?.map((m) => (m.name === metric.name ? metric : m));
-        debouncedOnChange({ ...expression, customMetrics: nextMetrics, equation, label });
+        debouncedOnChange({ ...expression, customMetrics: nextMetrics, equation });
         return nextMetrics;
       });
     },
-    [equation, expression, debouncedOnChange, label]
+    [equation, expression, debouncedOnChange]
   );
 
   const handleEquationChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       setEquation(e.target.value);
-      debouncedOnChange({ ...expression, customMetrics, equation: e.target.value, label });
+      debouncedOnChange({ ...expression, customMetrics, equation: e.target.value });
     },
-    [debouncedOnChange, expression, customMetrics, label]
-  );
-
-  const handleLabelChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setLabel(e.target.value);
-      debouncedOnChange({ ...expression, customMetrics, equation, label: e.target.value });
-    },
-    [debouncedOnChange, expression, customMetrics, equation]
+    [debouncedOnChange, expression, customMetrics]
   );
 
   const disableAdd = customMetrics?.length === MAX_VARIABLES;
   const disableDelete = customMetrics?.length === 1;
 
   const filteredAggregationTypes = omit(aggregationTypes, OMITTED_AGGREGATIONS_FOR_CUSTOM_METRICS);
 
-  const metricRows = customMetrics?.map((row) => {
-    if (row.aggType === Aggregators.COUNT) {
-      return (
-        <MetricRowWithCount
-          key={row.name}
-          name={row.name}
-          agg={row.aggType}
-          filter={row.filter}
-          onAdd={handleAddNewRow}
-          onDelete={handleDelete}
-          disableAdd={disableAdd}
-          aggregationTypes={filteredAggregationTypes}
-          disableDelete={disableDelete}
-          onChange={handleChange}
-          errors={errors}
-          dataView={dataView}
-        />
-      );
-    }
-    return (
-      <MetricRowWithAgg
-        key={row.name}
-        name={row.name}
-        aggType={row.aggType}
-        aggregationTypes={filteredAggregationTypes}
-        field={row.field}
-        fields={fields}
-        onAdd={handleAddNewRow}
-        onDelete={handleDelete}
-        disableAdd={disableAdd}
-        disableDelete={disableDelete}
-        onChange={handleChange}
-        errors={errors}
-      />
-    );
-  });
+  const metricRows = customMetrics?.map((row) => (
+    <MetricRowWithAgg
+      key={row.name}
+      name={row.name}
+      aggType={row.aggType}
+      aggregationTypes={filteredAggregationTypes}
+      field={row.field}
+      filter={row.filter}
+      fields={fields}
+      onAdd={handleAddNewRow}
+      onDelete={handleDelete}
+      disableAdd={disableAdd}
+      disableDelete={disableDelete}
+      onChange={handleChange}
+      errors={errors}
+      dataView={dataView}
+    />
+  ));
 
   const placeholder = useMemo(() => {
     return customMetrics?.map((row) => row.name).join(' + ');
@@ -181,42 +153,69 @@ export function CustomEquationEditor({
         </EuiButtonEmpty>
       </EuiFlexGroup>
       <EuiSpacer size={'m'} />
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiFormRow
-            label="Equation"
-            fullWidth
-            helpText={EQUATION_HELP_MESSAGE}
-            isInvalid={errors.equation != null}
-            error={[errors.equation]}
-          >
-            <EuiFieldText
-              data-test-subj="thresholdRuleCustomEquationEditorFieldText"
-              isInvalid={errors.equation != null}
-              compressed
+      <EuiFlexItem>
+        <EuiPopover
+          button={
+            <EuiFormRow
               fullWidth
-              placeholder={placeholder}
-              onChange={handleEquationChange}
-              value={equation ?? ''}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer size={'s'} />
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiFormRow label={LABEL_LABEL} fullWidth helpText={LABEL_HELP_MESSAGE}>
-            <EuiFieldText
-              data-test-subj="thresholdRuleCustomEquationEditorFieldText"
-              compressed
+              label={i18n.translate(
+                'xpack.observability.threshold.rule.alertFlyout.customEquationEditor.equationAndThreshold',
+                { defaultMessage: 'Equation and threshold' }
+              )}
+              error={[errors.equation]}
+              isInvalid={errors.equation != null}
+            >
+              <>
+                <EuiSpacer size="xs" />
+                <EuiExpression
+                  data-test-subj="customEquation"
+                  description={i18n.translate(
+                    'xpack.observability.threshold.rule.alertFlyout.customEquationEditor.equationLabel',
+                    { defaultMessage: 'Equation' }
+                  )}
+                  value={equation ?? placeholder}
+                  display={'columns'}
+                  onClick={() => {
+                    setCustomEqPopoverOpen(true);
+                  }}
+                />
+              </>
+            </EuiFormRow>
+          }
+          isOpen={customEqPopoverOpen}
+          closePopover={() => {
+            setCustomEqPopoverOpen(false);
+          }}
+          display="block"
+          ownFocus
+          anchorPosition={'downLeft'}
+          repositionOnScroll
+        >
+          <div>
+            <ClosablePopoverTitle onClose={() => setCustomEqPopoverOpen(false)}>
+              <FormattedMessage
+                id="xpack.observability.threshold.rule.alertFlyout.customEquationLabel"
+                defaultMessage="Custom equation"
+              />
+            </ClosablePopoverTitle>
+            <EuiFormRow
               fullWidth
-              value={label}
-              placeholder={CUSTOM_EQUATION}
-              onChange={handleLabelChange}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+              helpText={EQUATION_HELP_MESSAGE}
+              isInvalid={errors.equation != null}
+            >
+              <EuiFieldText
+                data-test-subj="thresholdRuleCustomEquationEditorFieldText"
+                isInvalid={errors.equation != null}
+                compressed
+                fullWidth
+                placeholder={placeholder}
+                onChange={handleEquationChange}
+                value={equation ?? ''}
+              />
+            </EuiFormRow>
+          </div>
+        </EuiPopover>
+      </EuiFlexItem>
     </div>
   );
 }

x-pack/plugins/observability/public/components/threshold/components/custom_equation/metric_row_controls.tsx

@@ -21,7 +21,7 @@ export function MetricRowControls({ onDelete, disableDelete }: MetricRowControlP
           aria-label={DELETE_LABEL}
           iconType="trash"
           color="danger"
-          style={{ marginBottom: '0.2em' }}
+          style={{ marginBottom: '0.6em' }}
           onClick={onDelete}
           disabled={disableDelete}
           title={DELETE_LABEL}