From a108e3a829d10507a58c03be2655353b37a6c065 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <rkeairns@chef.io>
Date: Mon, 5 Nov 2018 15:39:12 -0600
Subject: [PATCH] Security - convert LESS to SASS (#25079) (#25158)

* convert security less to sass

* remove unused less styles from xpack_main
---
 x-pack/plugins/security/public/index.scss     |  3 ++
 .../security/public/views/account/account.js  |  1 -
 .../public/views/account/account.less         |  1 -
 .../security/public/views/logout/logout.js    |  1 -
 .../security/public/views/logout/logout.less  |  1 -
 .../change_password_form.html                 | 10 ++---
 ...ible_panel.less => collapsible_panel.scss} |  4 +-
 .../components/collapsible_panel.tsx          |  1 -
 .../es/elasticsearch_privileges.less          |  3 --
 ...lyout.less => impacted_spaces_flyout.scss} |  4 ++
 .../kibana/impacted_spaces_flyout.tsx         |  1 -
 .../views/management/edit_role/edit_role.scss |  4 ++
 .../views/management/edit_role/index.js       |  1 -
 .../public/views/management/index.scss        | 42 +++++++++++++++++++
 .../public/views/management/management.js     |  1 -
 .../public/views/management/management.less   | 27 ------------
 .../components/telemetry/telemetry_form.js    |  1 -
 .../components/telemetry/telemetry_form.less  |  3 --
 .../plugins/xpack_main/public/style/main.less |  5 ---
 19 files changed, 60 insertions(+), 54 deletions(-)
 delete mode 100644 x-pack/plugins/security/public/views/account/account.less
 delete mode 100644 x-pack/plugins/security/public/views/logout/logout.less
 rename x-pack/plugins/security/public/views/management/edit_role/components/{collapsible_panel.less => collapsible_panel.scss} (67%)
 delete mode 100644 x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.less
 rename x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/{impacted_spaces_flyout.less => impacted_spaces_flyout.scss} (63%)
 create mode 100644 x-pack/plugins/security/public/views/management/edit_role/edit_role.scss
 create mode 100644 x-pack/plugins/security/public/views/management/index.scss
 delete mode 100644 x-pack/plugins/security/public/views/management/management.less
 delete mode 100644 x-pack/plugins/xpack_main/public/components/telemetry/telemetry_form.less
 delete mode 100644 x-pack/plugins/xpack_main/public/style/main.less

diff --git a/x-pack/plugins/security/public/index.scss b/x-pack/plugins/security/public/index.scss
index 3d0bcf433dc45..97e6b9fed728c 100644
--- a/x-pack/plugins/security/public/index.scss
+++ b/x-pack/plugins/security/public/index.scss
@@ -5,3 +5,6 @@
 
 // Login styles
 @import './views/login/index';
+
+// Management styles
+@import './views/management/index';
diff --git a/x-pack/plugins/security/public/views/account/account.js b/x-pack/plugins/security/public/views/account/account.js
index 7008f6eee270a..0ae51abce2340 100644
--- a/x-pack/plugins/security/public/views/account/account.js
+++ b/x-pack/plugins/security/public/views/account/account.js
@@ -9,7 +9,6 @@ import { toastNotifications } from 'ui/notify';
 import routes from 'ui/routes';
 import template from './account.html';
 import '../management/change_password_form/change_password_form';
-import './account.less';
 import '../../services/shield_user';
 import { GateKeeperProvider } from 'plugins/xpack_main/services/gate_keeper';
 
diff --git a/x-pack/plugins/security/public/views/account/account.less b/x-pack/plugins/security/public/views/account/account.less
deleted file mode 100644
index b8fd2a3f43c31..0000000000000
--- a/x-pack/plugins/security/public/views/account/account.less
+++ /dev/null
@@ -1 +0,0 @@
-@import '~plugins/xpack_main/style/main.less';
diff --git a/x-pack/plugins/security/public/views/logout/logout.js b/x-pack/plugins/security/public/views/logout/logout.js
index c404d72037864..4411ecdade8e7 100644
--- a/x-pack/plugins/security/public/views/logout/logout.js
+++ b/x-pack/plugins/security/public/views/logout/logout.js
@@ -5,7 +5,6 @@
  */
 
 import chrome from 'ui/chrome';
-import 'plugins/security/views/logout/logout.less';
 
 chrome
   .setVisible(false)
diff --git a/x-pack/plugins/security/public/views/logout/logout.less b/x-pack/plugins/security/public/views/logout/logout.less
deleted file mode 100644
index b8fd2a3f43c31..0000000000000
--- a/x-pack/plugins/security/public/views/logout/logout.less
+++ /dev/null
@@ -1 +0,0 @@
-@import '~plugins/xpack_main/style/main.less';
diff --git a/x-pack/plugins/security/public/views/management/change_password_form/change_password_form.html b/x-pack/plugins/security/public/views/management/change_password_form/change_password_form.html
index 45b2cff41031e..a6f6937bf6b5c 100644
--- a/x-pack/plugins/security/public/views/management/change_password_form/change_password_form.html
+++ b/x-pack/plugins/security/public/views/management/change_password_form/change_password_form.html
@@ -18,11 +18,11 @@
     <!-- Changing password -->
     <div
       ng-show="changePasswordController.isFormVisible"
-      class="kuiFormPanel"
+      class="kuiFormPanel mgtForm__panel"
     >
       <!-- Current password -->
       <div class="kuiFormSection" ng-if="requireCurrentPassword">
-        <label for="password" class="kuiFormSubLabel">
+        <label for="password" class="kuiFormSubLabel mgtForm__subLabel">
           Current password
         </label>
         <input
@@ -45,7 +45,7 @@
 
       <!-- New password -->
       <div class="kuiFormSection">
-        <label for="newPassword" class="kuiFormSubLabel">
+        <label for="newPassword" class="kuiFormSubLabel mgtForm__subLabel">
           New password
         </label>
         <input
@@ -69,7 +69,7 @@
 
       <!-- New password confirmation -->
       <div class="kuiFormSection">
-        <label for="confirmPassword" class="kuiFormSubLabel">
+        <label for="confirmPassword" class="kuiFormSubLabel mgtForm__subLabel">
           Confirm password
         </label>
         <input
@@ -99,7 +99,7 @@
       </div>
 
       <!-- Form actions -->
-      <div class="kuiFormFooter">
+      <div class="kuiFormFooter mgtForm__footer">
         <button
           type="button"
           class="kuiButton kuiButton--primary"
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.less b/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.scss
similarity index 67%
rename from x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.less
rename to x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.scss
index ffb065880c560..678d1f6da6015 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.less
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.scss
@@ -1,4 +1,4 @@
 .collapsiblePanel__logo {
-  margin-right: 8px;
+  margin-right: $euiSizeS;
   vertical-align: text-bottom;
-}
+}
\ No newline at end of file
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.tsx b/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.tsx
index a58042fda9697..f8271d4d83d2a 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.tsx
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.tsx
@@ -14,7 +14,6 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import React, { Component, Fragment } from 'react';
-import './collapsible_panel.less';
 
 interface Props {
   iconType: string | any;
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.less b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.less
deleted file mode 100644
index 776ef72a4627e..0000000000000
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.editRole__learnMore {
-  margin-left: 5px;
-}
\ No newline at end of file
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/impacted_spaces_flyout.less b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/impacted_spaces_flyout.scss
similarity index 63%
rename from x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/impacted_spaces_flyout.less
rename to x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/impacted_spaces_flyout.scss
index 19f6c14a4a6f9..9f977e31db12c 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/impacted_spaces_flyout.less
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/impacted_spaces_flyout.scss
@@ -1,3 +1,7 @@
 .showImpactedSpaces--flyout--footer, .showImpactedSpaces {
   text-align: right;
 }
+
+.showImpactedSpaces {
+  margin-top: $euiSize;
+}
\ No newline at end of file
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/impacted_spaces_flyout.tsx b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/impacted_spaces_flyout.tsx
index e8d53770270db..1636bf14a484a 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/impacted_spaces_flyout.tsx
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/impacted_spaces_flyout.tsx
@@ -21,7 +21,6 @@ import { UserProfile } from '../../../../../../../../xpack_main/public/services/
 import { KibanaPrivilege } from '../../../../../../../common/model/kibana_privilege';
 import { Role } from '../../../../../../../common/model/role';
 import { NO_PRIVILEGE_VALUE } from '../../../lib/constants';
-import './impacted_spaces_flyout.less';
 
 interface Props {
   role: Role;
diff --git a/x-pack/plugins/security/public/views/management/edit_role/edit_role.scss b/x-pack/plugins/security/public/views/management/edit_role/edit_role.scss
new file mode 100644
index 0000000000000..492c9d250fffb
--- /dev/null
+++ b/x-pack/plugins/security/public/views/management/edit_role/edit_role.scss
@@ -0,0 +1,4 @@
+#editRoleReactRoot {
+  background: $euiColorLightestShade;
+  min-height: calc(100vh - 70px);
+}
\ No newline at end of file
diff --git a/x-pack/plugins/security/public/views/management/edit_role/index.js b/x-pack/plugins/security/public/views/management/edit_role/index.js
index 9fd67807b6d0d..4d2e83a6f8072 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/index.js
+++ b/x-pack/plugins/security/public/views/management/edit_role/index.js
@@ -9,7 +9,6 @@ import chrome from 'ui/chrome';
 import routes from 'ui/routes';
 import { fatalError } from 'ui/notify';
 import template from 'plugins/security/views/management/edit_role/edit_role.html';
-import 'plugins/security/views/management/edit_role/edit_role.less';
 import 'angular-ui-select';
 import 'plugins/security/services/application_privilege';
 import 'plugins/security/services/shield_user';
diff --git a/x-pack/plugins/security/public/views/management/index.scss b/x-pack/plugins/security/public/views/management/index.scss
new file mode 100644
index 0000000000000..cd7694bbe6099
--- /dev/null
+++ b/x-pack/plugins/security/public/views/management/index.scss
@@ -0,0 +1,42 @@
+// Edit role styles
+@import './edit_role/components/privileges/kibana/impacted_spaces_flyout';
+@import './edit_role/components/collapsible_panel';
+@import './edit_role/edit_role';
+
+
+$securityFormWidth: 460px;
+
+// Management styles
+.mgtForm__panel {
+  max-width: $securityFormWidth;
+
+  .mgtForm__subLabel {
+    margin-bottom: $euiSizeS;
+  }
+}
+
+.mgtForm__footer {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  .kuiButton + .kuiButton {
+    margin-left: $euiSizeS;
+  }
+}
+
+.mgtUsersEditPage,
+.mgtUsersListingPage {
+  min-height: calc(100vh - 70px);
+}
+
+.mgtUsersListingPage__content {
+  flex-grow: 0;
+}
+
+.mgtUsersEditPage__content {
+  max-width: $securityFormWidth;
+  margin-left: auto;
+  margin-right: auto;
+  flex-grow: 0;
+}
\ No newline at end of file
diff --git a/x-pack/plugins/security/public/views/management/management.js b/x-pack/plugins/security/public/views/management/management.js
index 8c1ce063cff83..f06b59a29c061 100644
--- a/x-pack/plugins/security/public/views/management/management.js
+++ b/x-pack/plugins/security/public/views/management/management.js
@@ -10,7 +10,6 @@ import 'plugins/security/views/management/users';
 import 'plugins/security/views/management/roles';
 import 'plugins/security/views/management/edit_user';
 import 'plugins/security/views/management/edit_role/index';
-import 'plugins/security/views/management/management.less';
 import routes from 'ui/routes';
 import { XPackInfoProvider } from 'plugins/xpack_main/services/xpack_info';
 import '../../services/shield_user';
diff --git a/x-pack/plugins/security/public/views/management/management.less b/x-pack/plugins/security/public/views/management/management.less
deleted file mode 100644
index fa87006e6593e..0000000000000
--- a/x-pack/plugins/security/public/views/management/management.less
+++ /dev/null
@@ -1,27 +0,0 @@
-@import '~plugins/xpack_main/style/main.less';
-
-.kuiFormFooter {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-
-  .kuiButton + .kuiButton {
-    margin-left: 10px;
-  }
-}
-
-.mgtUsersEditPage,
-.mgtUsersListingPage {
-  min-height: ~"calc(100vh - 70px)";
-}
-
-.mgtUsersListingPage__content {
-  flex-grow: 0;
-}
-
-.mgtUsersEditPage__content {
-  max-width: 460px;
-  margin-left: auto;
-  margin-right: auto;
-  flex-grow: 0;
-}
diff --git a/x-pack/plugins/xpack_main/public/components/telemetry/telemetry_form.js b/x-pack/plugins/xpack_main/public/components/telemetry/telemetry_form.js
index 54ba58832f0ea..fa84c60605037 100644
--- a/x-pack/plugins/xpack_main/public/components/telemetry/telemetry_form.js
+++ b/x-pack/plugins/xpack_main/public/components/telemetry/telemetry_form.js
@@ -18,7 +18,6 @@ import {
 } from '@elastic/eui';
 import { CONFIG_TELEMETRY_DESC, PRIVACY_STATEMENT_URL } from '../../../common/constants';
 import { OptInExampleFlyout } from './opt_in_details_component';
-import './telemetry_form.less';
 import { Field } from 'ui/management';
 
 const SEARCH_TERMS = ['telemetry', 'usage', 'data', 'usage data'];
diff --git a/x-pack/plugins/xpack_main/public/components/telemetry/telemetry_form.less b/x-pack/plugins/xpack_main/public/components/telemetry/telemetry_form.less
deleted file mode 100644
index 041b0c9461e23..0000000000000
--- a/x-pack/plugins/xpack_main/public/components/telemetry/telemetry_form.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.telemetryForm {
-  margin: 10px 6px 6px 6px;
-}
\ No newline at end of file
diff --git a/x-pack/plugins/xpack_main/public/style/main.less b/x-pack/plugins/xpack_main/public/style/main.less
deleted file mode 100644
index 8e18b7d1bf5e9..0000000000000
--- a/x-pack/plugins/xpack_main/public/style/main.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.xpack-breadcrumbs {
-  min-height: 37px;
-  padding: 8px 10px;
-  margin: 0;
-}