From 38043fdc1c68ac8f4b02272191d8bc7e56634f03 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Fri, 6 Mar 2020 18:29:17 -0800
Subject: [PATCH] fix conflict

---
 .../triggers_actions_ui/public/index.scss     |  6 ---
 .../threshold/expression.scss                 |  3 ++
 .../threshold/expression.tsx                  | 45 ++++++++++++++-----
 .../threshold/visualization.tsx               |  2 -
 .../connector_add_modal.scss                  |  3 ++
 .../connector_add_modal.tsx                   |  1 +
 .../components/_index.scss                    |  1 -
 .../components/actions_connectors_list.tsx    |  1 +
 .../sections/alert_form/alert_form.tsx        |  1 -
 9 files changed, 42 insertions(+), 21 deletions(-)
 create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss
 create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.scss
 delete mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/_index.scss

diff --git a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss
index 3ae0ef35ee354..8c83c0a571f28 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss
+++ b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss
@@ -1,8 +1,2 @@
 // Imported EUI
 @import 'src/legacy/ui/public/styles/_styling_constants';
-
-// Styling within the app
-@import '../../../../plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/index';
-
-@import '../../../../plugins/triggers_actions_ui/public/application/sections/action_connector_form/index';
-
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss
new file mode 100644
index 0000000000000..d0a7039ae24e1
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss
@@ -0,0 +1,3 @@
+.actAlertVisualization__chart {
+  height: $euiSize * 15;
+}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx
index 5128fe23fd8a6..38207a0c9c976 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx
@@ -19,6 +19,8 @@ import {
   EuiComboBoxOptionOption,
   EuiFormRow,
   EuiCallOut,
+  EuiEmptyPrompt,
+  EuiText,
 } from '@elastic/eui';
 import { COMPARATORS, builtInComparators } from '../../../../common/constants';
 import {
@@ -38,6 +40,7 @@ import {
 import { builtInAggregationTypes } from '../../../../common/constants';
 import { IndexThresholdAlertParams } from './types';
 import { AlertsContextValue } from '../../../context/alerts_context';
+import './expression.scss';
 
 const DEFAULT_VALUES = {
   AGGREGATION_TYPE: 'count',
@@ -430,6 +433,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
             thresholdComparator={thresholdComparator ?? DEFAULT_VALUES.THRESHOLD_COMPARATOR}
             threshold={threshold}
             errors={errors}
+            popupPosition={'upLeft'}
             onChangeSelectedThreshold={selectedThresholds =>
               setAlertParams('threshold', selectedThresholds)
             }
@@ -440,6 +444,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <ForLastExpression
+            popupPosition={'upLeft'}
             timeWindowSize={timeWindowSize || 1}
             timeWindowUnit={timeWindowUnit || ''}
             errors={errors}
@@ -452,17 +457,35 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-      {canShowVizualization ? null : (
-        <Fragment>
-          <ThresholdVisualization
-            alertParams={alertParams}
-            alertInterval={alertInterval}
-            aggregationTypes={builtInAggregationTypes}
-            comparators={builtInComparators}
-            alertsContext={alertsContext}
-          />
-        </Fragment>
-      )}
+      <EuiSpacer size="l" />
+      <div className="actAlertVisualization__chart">
+        {canShowVizualization ? (
+          <Fragment>
+            <EuiSpacer size="xl" />
+            <EuiEmptyPrompt
+              iconType="visBarVertical"
+              body={
+                <EuiText color="subdued">
+                  <FormattedMessage
+                    id="xpack.triggersActionsUI.sections.alertAdd.previewAlertVisualizationDescription"
+                    defaultMessage="Complete the expression above to generate a preview"
+                  />
+                </EuiText>
+              }
+            />
+          </Fragment>
+        ) : (
+          <Fragment>
+            <ThresholdVisualization
+              alertParams={alertParams}
+              alertInterval={alertInterval}
+              aggregationTypes={builtInAggregationTypes}
+              comparators={builtInComparators}
+              alertsContext={alertsContext}
+            />
+          </Fragment>
+        )}
+      </div>
     </Fragment>
   );
 };
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx
index 4d3d837df4d82..321428d00a385 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx
@@ -226,7 +226,6 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
     const aggLabel = aggregationTypes[aggType].text;
     return (
       <div data-test-subj="alertVisualizationChart">
-        <EuiSpacer size="l" />
         {alertVisualizationDataKeys.length ? (
           <Chart size={['100%', 300]} renderer="canvas">
             <Settings
@@ -290,7 +289,6 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
             />
           </EuiCallOut>
         )}
-        <EuiSpacer size="l" />
       </div>
     );
   }
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.scss
new file mode 100644
index 0000000000000..f8fa882cd617d
--- /dev/null
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.scss
@@ -0,0 +1,3 @@
+.actConnectorModal {
+  z-index: 9000;
+}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx
index 3a53f9f06e0dd..c7f52fb462cc0 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx
@@ -23,6 +23,7 @@ import { ActionType, ActionConnector, IErrorObject, ActionTypeModel } from '../.
 import { connectorReducer } from './connector_reducer';
 import { createActionConnector } from '../../lib/action_connector_api';
 import { TypeRegistry } from '../../type_registry';
+import './connector_add_modal.scss';
 
 interface ConnectorAddModalProps {
   actionType: ActionType;
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/_index.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/_index.scss
deleted file mode 100644
index 98c6c2a307a74..0000000000000
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'actions_connectors_list';
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
index 4e514281be0ea..9444b31a8b78f 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
@@ -25,6 +25,7 @@ import { ConnectorAddFlyout, ConnectorEditFlyout } from '../../action_connector_
 import { hasDeleteActionsCapability, hasSaveActionsCapability } from '../../../lib/capabilities';
 import { DeleteConnectorsModal } from '../../../components/delete_connectors_modal';
 import { ActionsConnectorsContextProvider } from '../../../context/actions_connectors_context';
+import './actions_connectors_list.scss';
 
 export const ActionsConnectorsList: React.FunctionComponent = () => {
   const { http, toastNotifications, capabilities, actionTypeRegistry } = useAppDependencies();
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx
index a6d3644a35d9c..f90a05e2b766e 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx
@@ -208,7 +208,6 @@ export const AlertForm = ({ alert, canChangeTrigger = true, dispatch, errors }:
           alertsContext={alertsContext}
         />
       ) : null}
-      <EuiSpacer size="xl" />
       {defaultActionGroupId ? (
         <ActionForm
           actions={alert.actions}