Merge pull request #1 from cjcenizal/watcher/actions-dropdown-tweaks

[Watcher] Add SCSS file and tweak actions dropdown position.

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'],
   },

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;
+}

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>