From 4ad38cb350ea05dba7a19f564e26ee6dbeb7db72 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 24 Apr 2019 15:33:23 -0700
Subject: [PATCH] Add SCSS file and tweak actions dropdown position.

---
 x-pack/plugins/watcher/plugin_definition.js      |  1 +
 x-pack/plugins/watcher/public/_hacks.scss        |  4 ----
 x-pack/plugins/watcher/public/index.scss         | 16 ++++++++++++++++
 .../components/threshold_watch_action_panel.tsx  |  4 ++--
 4 files changed, 19 insertions(+), 6 deletions(-)
 delete mode 100644 x-pack/plugins/watcher/public/_hacks.scss
 create mode 100644 x-pack/plugins/watcher/public/index.scss

diff --git a/x-pack/plugins/watcher/plugin_definition.js b/x-pack/plugins/watcher/plugin_definition.js
index a03341edb6f6e..36f5f4865e6d4 100644
--- a/x-pack/plugins/watcher/plugin_definition.js
+++ b/x-pack/plugins/watcher/plugin_definition.js
@@ -21,6 +21,7 @@ export const pluginDefinition = {
   publicDir: resolve(__dirname, 'public'),
   require: ['kibana', 'elasticsearch', 'xpack_main'],
   uiExports: {
+    styleSheetPaths: resolve(__dirname, 'public/index.scss'),
     managementSections: ['plugins/watcher'],
     home: ['plugins/watcher/register_feature'],
   },
diff --git a/x-pack/plugins/watcher/public/_hacks.scss b/x-pack/plugins/watcher/public/_hacks.scss
deleted file mode 100644
index 3b42e2d3a7642..0000000000000
--- a/x-pack/plugins/watcher/public/_hacks.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.mgtWatcher__list {
-  display: flex;
-  flex-grow: 1;
-}
\ No newline at end of file
diff --git a/x-pack/plugins/watcher/public/index.scss b/x-pack/plugins/watcher/public/index.scss
new file mode 100644
index 0000000000000..856fa656c6330
--- /dev/null
+++ b/x-pack/plugins/watcher/public/index.scss
@@ -0,0 +1,16 @@
+// Import the EUI global scope so we can use EUI constants
+@import 'src/legacy/ui/public/styles/_styling_constants';
+
+// Watcher plugin styles
+
+// Prefix all styles with "watcher" to avoid conflicts.
+// Examples
+//   watcherChart
+//   watcherChart__legend
+//   watcherChart__legend--small
+//   watcherChart__legend-isLoading
+
+.watcherThresholdWatchActionDropdownContainer {
+  justify-content: flex-end;
+  flex-direction: row;
+}
\ No newline at end of file
diff --git a/x-pack/plugins/watcher/public/sections/watch_edit/components/threshold_watch_action_panel.tsx b/x-pack/plugins/watcher/public/sections/watch_edit/components/threshold_watch_action_panel.tsx
index e6c5ccf538d00..2902c4919461c 100644
--- a/x-pack/plugins/watcher/public/sections/watch_edit/components/threshold_watch_action_panel.tsx
+++ b/x-pack/plugins/watcher/public/sections/watch_edit/components/threshold_watch_action_panel.tsx
@@ -14,7 +14,7 @@ export const WatchActionsPanel = () => {
   const { watch } = useContext(WatchContext);
   return (
     <Fragment>
-      <EuiFlexGroup justifyContent="spaceBetween">
+      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
         <EuiFlexItem>
           <EuiTitle size="s">
             <h3>
@@ -28,7 +28,7 @@ export const WatchActionsPanel = () => {
             </h3>
           </EuiTitle>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem className="watcherThresholdWatchActionDropdownContainer">
           <WatchActionsDropdown />
         </EuiFlexItem>
       </EuiFlexGroup>