Merge 32faaa3 into f85a89f

.storybook/preview-head.html

@@ -1,10 +1,3 @@
-<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/patternfly/3.23.0/css/patternfly.min.css'>
-<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/patternfly/3.23.0/css/patternfly-additions.min.css'>
-<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
-<script src='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
-<script src='//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
-<script src='//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js'></script>
-<script src='//cdnjs.cloudflare.com/ajax/libs/patternfly/3.23.0/js/patternfly.min.js'></script>
 <!-- workaround until Jed is moved to webpack - see http://projects.theforeman.org/issues/17263 -->
 <script>
   function __(str) {

.storybook/webpack.config.js

@@ -1,4 +1,5 @@
-let path = require('path');
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
   module: {
@@ -20,17 +21,49 @@ module.exports = {
         }
       },
       {
-        test: /\.css$/,
-        loaders: ['style-loader', 'css-loader']
+        test: /(\.png|\.gif|\.jpg|\.svg|\.eot|\.woff|\.woff2|\.ttf)$/,
+        loader: 'url-loader',
+        options: { limit: 32767 },
       },
       {
-        test: /(\.png|\.gif)$/,
-        loader: 'url-loader?limit=32767'
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader'
+        })
       },
       {
         test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader']
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader', // The backup style loader
+          use: [{
+            loader: 'css-loader',
+            options: { sourceMap: true },
+          }, {
+            // solve the relative image urls inside jquery-ui
+            loader: 'resolve-url-loader',
+          }, {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              includePaths: [
+                // allow scss files to import variables and mixins without full relative path
+                path.join(__dirname, '..', 'webpack/assets/stylesheets/application'),
+                // allow patternfly to import bootstrap and fontawesome
+                path.join(__dirname, '..', 'node_modules/patternfly/node_modules/bootstrap-sass/assets/stylesheets'),
+                path.join(__dirname, '..', 'node_modules/patternfly/node_modules/font-awesome-sass/assets/stylesheets'),
+              ],
+            },
+          }]
+        })
       }
     ]
-  }
+  },
+
+  plugins: [
+    new ExtractTextPlugin({
+      filename: '[name].css',
+      allChunks: true
+    }),
+  ]
 };

app/assets/javascripts/application.js

@@ -1,11 +1,7 @@
 //= require jquery.turbolinks
 //= require turbolinks
 //= require i18n
-//= require jquery.ui.autocomplete
-//= require jquery.ui.spinner
 //= require scoped_search
-//= require bootstrap
-//= require patternfly
 //= require two-pane
 //= require vendor
 //= require jquery.extentions

app/assets/stylesheets/application.scss

@@ -1,13 +1,3 @@
-@import 'jquery.ui.theme';
-@import 'jquery.ui.core';
-@import 'jquery.ui.menu';
-//we need to import all the above because we are using jquery-ui-rails and it uses sprockets require instaed of sass import.
-@import 'jquery.ui.autocomplete';
-@import 'jquery.ui.spinner';
-@import 'jquery.ui.spinner_custom';
+@import 'jquery.gridster';
 @import 'scoped_search';
-@import 'patternfly-sprockets';
-@import 'colors';
-@import 'patternfly';
 @import 'editable/bootstrap-editable';
-@import '/*';

app/controllers/application_controller.rb

@@ -418,7 +418,7 @@ def parameter_filter_context
 
   def allow_webpack
     webpack_csp = { script_src: [webpack_server], connect_src: [webpack_server],
-                    style_src: [webpack_server], img_src: [webpack_server] }
+                    style_src: [webpack_server], img_src: [webpack_server], font_src: ['data:', webpack_server] }
 
     append_content_security_policy_directives(webpack_csp)
   end

bundler.d/assets.rb

@@ -1,6 +1,4 @@
 gem 'jquery-turbolinks', '~> 2.1'
-gem 'jquery-ui-rails', '< 5.0.0'
-gem 'patternfly-sass', '~> 3.32.1'
 gem 'gridster-rails', '~> 0.5'
 gem 'gettext_i18n_rails_js', '~> 1.0'
 gem 'execjs', '>= 1.4.0', '< 3.0'

config/webpack.config.js

@@ -64,11 +64,11 @@ var config = {
         exclude: /node_modules/,
         loader: 'babel-loader',
         options: {
-          'presets': [
+          presets: [
             path.join(__dirname, '..', 'node_modules/babel-preset-react'),
             path.join(__dirname, '..', 'node_modules/babel-preset-env')
           ],
-          'plugins': [
+          plugins: [
             path.join(__dirname, '..', 'node_modules/babel-plugin-transform-class-properties'),
             path.join(__dirname, '..', 'node_modules/babel-plugin-transform-object-rest-spread'),
             path.join(__dirname, '..', 'node_modules/babel-plugin-transform-object-assign'),
@@ -84,14 +84,33 @@ var config = {
         })
       },
       {
-        test: /(\.png|\.gif)$/,
-        use: 'url-loader?limit=32767'
+        test: /(\.png|\.gif|\.jpg|\.svg|\.eot|\.woff|\.woff2|\.ttf)$/,
+        loader: 'url-loader',
+        options: { limit: 32767 }
       },
       {
         test: /\.scss$/,
         use: ExtractTextPlugin.extract({
           fallback: 'style-loader', // The backup style loader
-          use: 'css-loader?sourceMap!sass-loader?sourceMap'
+          use: [{
+            loader: 'css-loader',
+            options: { sourceMap: true },
+          }, {
+            // solve the relative image urls inside jquery-ui
+            loader: 'resolve-url-loader',
+          }, {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              includePaths: [
+                // allow scss files to import variables and mixins without full relative path
+                path.join(__dirname, '..', 'webpack/assets/stylesheets/application'),
+                // allow patternfly to import bootstrap and fontawesome
+                path.join(__dirname, '..', 'node_modules/patternfly/node_modules/bootstrap-sass/assets/stylesheets'),
+                path.join(__dirname, '..', 'node_modules/patternfly/node_modules/font-awesome-sass/assets/stylesheets'),
+              ],
+            },
+          }]
         })
       }
     ]

config/webpack.vendor.js

@@ -26,6 +26,8 @@ module.exports = [
    */
   'jquery',
   'jquery.cookie',
+  'jquery-ui/autocomplete',
+  'jquery-ui/spinner',
   'select2',
   'multiselect',
   'jquery-ujs',
@@ -59,6 +61,8 @@ module.exports = [
   /**
    * Other packages
    */
+  'bootstrap',
+  'patternfly/dist/js/patternfly',
   'c3',
   'diff',
   'ipaddr.js',

package.json

@@ -43,6 +43,7 @@
     "raf": "^3.4.0",
     "react-test-renderer": "^16.2.0",
     "redux-mock-store": "^1.2.2",
+    "resolve-url-loader": "^2.2.1",
     "sass-loader": "~6.0.6",
     "style-loader": "^0.13.1",
     "stylelint": "^7.13.0",
@@ -58,6 +59,7 @@
   "dependencies": {
     "axios": "^0.17.1",
     "babel-polyfill": "^6.26.0",
+    "bootstrap": "^3.3.7",
     "brace": "^0.10.0",
     "c3": "^0.4.11",
     "datatables.net": "~1.10.12",
@@ -67,16 +69,16 @@
     "isomorphic-fetch": "^2.2.1",
     "jquery": "~2.2.4",
     "jquery-flot": "~0.8.3",
+    "jquery-ui": "~1.10.4",
     "jquery-ujs": "~1.2.0",
     "jquery.cookie": "~1.4.1",
     "jstz": "~1.0.7",
     "lodash": "~4.15.0",
     "multiselect": "~0.9.12",
-    "patternfly": "^3.31.2",
+    "patternfly": "^3.37.7",
     "patternfly-react": "^1.5.0",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
-    "react-bootstrap": "^0.31.5",
     "react-dom": "^16.2.0",
     "react-ellipsis-with-tooltip": "^1.0.7",
     "react-numeric-input": "^2.0.7",

webpack/assets/javascripts/bundle.js

@@ -6,17 +6,19 @@
 /* eslint-disable import/first */
 import 'babel-polyfill';
 
-require('expose-loader?$!expose-loader?jQuery!jquery');
-require('jquery-ujs');
-require('expose-loader?jstz!jstz');
-require('expose-loader?ipaddr!ipaddr.js');
-require('jquery.cookie');
-require('expose-loader?JsDiff!diff');
-require('./bundle_flot');
-require('./bundle_multiselect');
-require('./bundle_select2');
-require('./bundle_datatables');
-require('./bundle_lodash');
+import 'expose-loader?$!expose-loader?jQuery!jquery';
+import 'jquery-ujs';
+import 'expose-loader?jstz!jstz';
+import 'expose-loader?ipaddr!ipaddr.js';
+import 'jquery.cookie';
+import 'expose-loader?JsDiff!diff';
+import './bundle_flot';
+import './bundle_multiselect';
+import './bundle_select2';
+import './bundle_lodash';
+import './bundle_datatables';
+
+import '../stylesheets/application.scss';
 
 import compute from './foreman_compute_resource';
 

webpack/assets/javascripts/bundle_datatables.js

@@ -1,3 +1,2 @@
 import 'datatables.net-bs/css/dataTables.bootstrap.css';
 import 'datatables.net-bs';
-

webpack/assets/javascripts/react_app/components/hosts/storage/vmware/StorageContainer.scss

@@ -1,4 +1,4 @@
-@import '../../../../common/colors';
+@import 'variables';
 
 .vmware-storage-container {
   display: flex;
@@ -7,7 +7,7 @@
   .storage-header {
     padding: 10px 0;
     margin-bottom: 10px;
-    border-bottom: 1px solid $pf-black-200;
+    border-bottom: 1px solid $color-pf-black-200;
 
     .storage-title {
       font-size: 18px;

webpack/assets/javascripts/react_app/components/hosts/storage/vmware/controller/disk/disk.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../common/colors';
+@import 'variables';
 
 .disks-container {
   padding: 0 150px;
@@ -10,7 +10,7 @@
     padding: 20px 0;
     margin-top: 20px;
     flex-direction: column;
-    border-top: 1px solid $pf-black-200;
+    border-top: 1px solid $color-pf-black-200;
 
     .close {
       background-color: red;

webpack/assets/javascripts/react_app/components/notifications/drawer/notification.js

@@ -2,7 +2,6 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import React from 'react';
 
 import Icon from '../../common/Icon';
-import '../../../common/commonStyles.css';
 
 import NotificationDropdown from './NotificationDropdown';
 

webpack/assets/javascripts/react_app/components/user/passwordStrength/password_strength.scss

@@ -1,4 +1,4 @@
-@import '../../../common/colors.scss';
+@import 'variables';
 
 .ReactPasswordStrength {
   .ReactPasswordStrength-input {
@@ -22,56 +22,56 @@
 
 #password_react {
   .form-group.has-error .ReactPasswordStrength-input {
-    border: 1px solid $pf-red-100;
+    border: 1px solid $color-pf-red-100;
   }
 
   .is-strength-0 {
     .ReactPasswordStrength-strength-desc {
-      color: $pf-red-200;
+      color: $color-pf-red-200;
     }
 
     .ReactPasswordStrength-strength-bar {
-      background: $pf-red-200;
+      background: $color-pf-red-200;
     }
   }
 
   .is-strength-1 {
     .ReactPasswordStrength-strength-desc {
-      color: $pf-orange-400;
+      color: $color-pf-orange-400;
     }
 
     .ReactPasswordStrength-strength-bar {
-      background: $pf-orange-400;
+      background: $color-pf-orange-400;
     }
   }
 
   .is-strength-2 {
     .ReactPasswordStrength-strength-desc {
-      color: $pf-gold-400;
+      color: $color-pf-gold-400;
     }
 
     .ReactPasswordStrength-strength-bar {
-      background: $pf-gold-400;
+      background: $color-pf-gold-400;
     }
   }
 
   .is-strength-3 {
     .ReactPasswordStrength-strength-desc {
-      color: $pf-green-400;
+      color: $color-pf-green-400;
     }
 
     .ReactPasswordStrength-strength-bar {
-      background: $pf-green-400;
+      background: $color-pf-green-400;
     }
   }
 
   .is-strength-4 {
     .ReactPasswordStrength-strength-desc {
-      color: $pf-green-600;
+      color: $color-pf-green-600;
     }
 
     .ReactPasswordStrength-strength-bar {
-      background: $pf-green-600;
+      background: $color-pf-green-600;
     }
   }
 }

webpack/assets/stylesheets/application.scss

@@ -0,0 +1,4 @@
+@import 'application/variables';
+@import 'application/mixins';
+@import 'application/vendor';
+@import 'application/partials';

webpack/assets/stylesheets/application/_mixins.scss

@@ -0,0 +1,9 @@
+/*
+  Import application mixins
+ */
+// @import 'mixins/my-mixin';
+
+/*
+  Import vendor mixins
+ */
+@import 'vendor/mixins';