Migrate to @theforeman/vendor pkg

.babelrc

@@ -1,13 +1,13 @@
 {
   "presets": [
+    "@theforeman/vendor-dev/babel.preset.js",
     "env",
     "react"
   ],
   "plugins": [
     "transform-class-properties",
     "transform-object-rest-spread",
     "transform-object-assign",
-    "lodash",
     "syntax-dynamic-import"
   ],
   "env": {

.eslintrc

@@ -1,6 +1,9 @@
 {
   "plugins": ["patternfly-react"],
-  "extends": ["plugin:patternfly-react/recommended"],
+  "extends": [
+    "plugin:patternfly-react/recommended",
+    "./node_modules/@theforeman/vendor-dev/eslint.extends.js"
+  ],
   "rules": {
     "prettier/prettier": ["error", {
       "singleQuote": true,

app/views/layouts/base.html.erb

@@ -10,8 +10,9 @@
 
     <%= favicon_link_tag "favicon.ico"%>
 
-    <%= stylesheet_link_tag *webpack_asset_paths('bundle', :extension => 'css'), "data-turbolinks-track" => true %>
     <%= stylesheet_link_tag 'application', "data-turbolinks-track" => true %>
+    <%= stylesheet_link_tag *webpack_asset_paths('foreman-vendor', :extension => 'css'), "data-turbolinks-track" => true %>
+    <%= stylesheet_link_tag *webpack_asset_paths('bundle', :extension => 'css'), "data-turbolinks-track" => true %>
     <%= yield(:stylesheets) %>
 
     <%= csrf_meta_tags %>
@@ -30,6 +31,7 @@
       <% end %>
     </script>
     <%= javascript_include_tag "locale/#{FastGettext.locale}/app", "data-turbolinks-track" => true %>
+    <%= javascript_include_tag *webpack_asset_paths('foreman-vendor', :extension => 'js'), "data-turbolinks-track" => true %>
     <%= javascript_include_tag *webpack_asset_paths('vendor', :extension => 'js'), "data-turbolinks-track" => true %>
     <%= javascript_include_tag *webpack_asset_paths('bundle', :extension => 'js'), "data-turbolinks-track" => true %>
     <%= javascript_include_tag 'application', "data-turbolinks-track" => true %>

config/webpack.config.js

@@ -3,11 +3,11 @@
 
 var path = require('path');
 var webpack = require('webpack');
+var ForemanVendorPlugin = require('@theforeman/vendor/webpack.plugin');
 var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 var StatsWriterPlugin = require("webpack-stats-plugin").StatsWriterPlugin;
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var CompressionPlugin = require('compression-webpack-plugin');
-var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
 var pluginUtils = require('../script/plugin_webpack_directories');
 var vendorEntry = require('./webpack.vendor');
 var SimpleNamedModulesPlugin = require('../webpack/simple_named_modules');
@@ -142,7 +142,6 @@ module.exports = env => {
               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'),
-              path.join(__dirname, '..', 'node_modules/babel-plugin-lodash'),
               path.join(__dirname, '..', 'node_modules/babel-plugin-syntax-dynamic-import')
             ]
           }
@@ -169,12 +168,7 @@ module.exports = env => {
     },
 
     plugins: [
-      new LodashModuleReplacementPlugin({
-        paths: true,
-        collections: true,
-        flattening: true,
-        shorthands: true
-      }),
+      new ForemanVendorPlugin(),
       // must match config.webpack.manifest_filename
       new StatsWriterPlugin({
         filename: manifestFilename,
@@ -208,6 +202,7 @@ module.exports = env => {
         /react-intl\/locale-data/,
         supportedLanguagesRE
       ),
+      new SimpleNamedModulesPlugin(),
     ]
   };
 
@@ -225,7 +220,6 @@ module.exports = env => {
         },
         sourceMap: true
       }),
-      new SimpleNamedModulesPlugin(),
       new webpack.optimize.ModuleConcatenationPlugin(),
       new webpack.optimize.OccurrenceOrderPlugin(),
       new CompressionPlugin()

config/webpack.vendor.js

@@ -1,73 +1 @@
-module.exports = [
-  /**
-   * React related
-   */
-  'babel-polyfill',
-  'react',
-  'react-dom',
-  'react-debounce-input',
-  'react-diff-view',
-  'react-ellipsis-with-tooltip',
-  'react-numeric-input',
-  'react-onclickoutside',
-  'react-password-strength',
-  'patternfly-react',
-  'react-redux',
-  'redux',
-  'redux-form',
-  'redux-form-validators',
-  'redux-logger',
-  'redux-thunk',
-  'prop-types',
-  'seamless-immutable',
-  'isomorphic-fetch',
-  'react-intl',
-  'intl',
-  'react-router-dom',
-  'history',
-
-  /*
-   * jquery related
-   */
-  'jquery',
-  'jquery.cookie',
-  'select2',
-  'multiselect',
-  'jquery-ujs',
-  'datatables.net-bs',
-  // jquery-flot related
-  'jquery-flot/excanvas',
-  'jquery-flot',
-  'jquery-flot/jquery.flot.pie',
-  'jquery-flot/jquery.flot.selection',
-  'jquery-flot/jquery.flot.stack',
-  'jquery-flot/jquery.flot.time',
-
-  /**
-   * Brace related
-   */
-  'brace',
-  'brace/mode/ruby',
-  'brace/mode/html_ruby',
-  'brace/mode/json',
-  'brace/mode/sh',
-  'brace/mode/xml',
-  'brace/mode/yaml',
-  'brace/mode/diff',
-  'brace/theme/twilight',
-  'brace/theme/clouds',
-  'brace/keybinding/vim',
-  'brace/keybinding/emacs',
-  'brace/ext/searchbox',
-
-  /**
-   * Other packages
-   */
-  'axios',
-  'diff',
-  'ipaddr.js',
-  'jstz',
-  'urijs',
-  'uuid',
-  '@novnc/novnc/core/rfb.js',
-];
+module.exports = ['react-intl', 'intl'];

package.json

@@ -5,6 +5,7 @@
   "description": "Foreman isn't really a node module, these are just dependencies needed to build the webpack bundle. 'dependencies' are the asset libraries in use and 'devDependencies' are used for the build process.",
   "private": true,
   "devDependencies": {
+    "@theforeman/vendor-dev": "^0.1.0-alpha.4",
     "@storybook/addon-actions": "~3.4.12",
     "@storybook/addon-knobs": "~3.4.12",
     "@storybook/react": "~3.4.12",
@@ -17,7 +18,6 @@
     "babel-jest": "^23.6.0",
     "babel-loader": "^7.1.1",
     "babel-plugin-dynamic-import-node": "^2.0.0",
-    "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-assign": "^6.8.0",
@@ -67,61 +67,14 @@
     "chromedriver": "2.43.0"
   },
   "dependencies": {
-    "@novnc/novnc": "^1.0.0",
-    "@spice-project/spice-html5": "^0.2.1",
-    "axios": "^0.19.0",
-    "babel-polyfill": "^6.26.0",
-    "bootstrap-sass": "^3.3.7",
-    "brace": "^0.11.1",
-    "classnames": "^2.2.5",
-    "datatables.net": "~1.10.12",
-    "datatables.net-bs": "~1.10.12",
-    "diff": "~3.0.0",
-    "file-saver": "^2.0.1",
-    "gridster": "^0.5.6",
-    "history": "^4.7.2",
+    "@theforeman/vendor": "^0.1.0-alpha.4",
     "intl": "~1.2.5",
-    "ipaddr.js": "~1.2.0",
-    "isomorphic-fetch": "^2.2.1",
     "jed": "^1.1.1",
-    "jquery": "~2.2.4",
-    "jquery-flot": "~0.8.3",
-    "jquery-ujs": "~1.2.0",
-    "jquery.cookie": "~1.4.1",
-    "jstz": "~1.0.7",
-    "lodash": "^4.17.11",
-    "multiselect": "~0.9.12",
-    "number_helpers": "^0.1.1",
-    "patternfly": "^3.58.0",
-    "patternfly-react": "^2.34.1",
-    "patternfly-react-extensions": "^2.18.8",
-    "prop-types": "^15.6.0",
-    "react": "^16.8.1",
-    "react-ace": "^6.3.2",
-    "react-debounce-input": "^3.2.0",
-    "react-diff-view": "^1.8.1",
-    "react-dom": "^16.8.1",
-    "react-ellipsis-with-tooltip": "^1.0.8",
-    "react-intl": "^2.8.0",
-    "react-numeric-input": "^2.0.7",
-    "react-onclickoutside": "^6.6.2",
-    "react-password-strength": "^2.4.0",
-    "react-redux": "^5.1.1",
-    "react-router-dom": "^4.3.1",
-    "redux": "^3.6.0",
-    "redux-form": "8.2.0",
-    "redux-form-validators": "^2.1.2",
-    "redux-logger": "^2.8.1",
-    "redux-thunk": "^2.2.0",
-    "reselect": "^3.0.1",
-    "seamless-immutable": "^7.1.2",
-    "select2": "~3.5.2-browserify",
-    "unidiff": "^1.0.0",
-    "urijs": "^1.18.10",
-    "uuid": "^3.3.2"
+    "react-intl": "^2.8.0"
   },
   "scripts": {
     "lint": "./node_modules/.bin/eslint -c .eslintrc webpack/ script/",
+    "link:vendor": "./script/npm_link_vendor.sh",
     "postlint": "node ./script/npm_lint_plugins.js",
     "test": "node node_modules/.bin/jest --no-cache",
     "test:watch": "node node_modules/.bin/jest --watchAll",

script/npm_link_vendor.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+rm -rf ./node_modules/@theforeman
+mkdir -p ./node_modules/@theforeman
+
+ln -s ../../../foreman-js/packages/vendor-core ./node_modules/@theforeman/vendor-core
+ln -s ../../../foreman-js/packages/vendor-dev ./node_modules/@theforeman/vendor-dev
+ln -s ../../../foreman-js/packages/vendor ./node_modules/@theforeman/vendor

script/webpack-analyze

@@ -9,5 +9,5 @@ WEBPACK_DIR="$FOREMAN_PATH/public/webpack"
 REPORT="${WEBPACK_DIR}/report.html"
 
 mkdir -p $WEBPACK_DIR
-$WEBPACK --profile --json > $WEBPACK_DIR/stats.json && \
+$WEBPACK --profile --json > $WEBPACK_DIR/stats.json
 webpack-bundle-analyzer --mode static -r $REPORT $WEBPACK_DIR/stats.json

webpack/assets/javascripts/bundle.js

@@ -25,22 +25,9 @@ import * as configReportsModalDiff from './foreman_config_reports_modal_diff';
 import * as classEditor from './foreman_class_edit';
 import * as dashboard from './dashboard';
 import * as spice from './spice';
-import './bundle_datatables';
 import './bundle_lodash';
 import './bundle_novnc';
 
-/* eslint-disable-next-line */
-require('expose-loader?$!expose-loader?jQuery!jquery');
-require('jquery-ujs');
-
-window.jstz = require('jstz');
-window.ipaddr = require('ipaddr.js');
-window.JsDiff = require('diff');
-
-require('./bundle_flot');
-require('./bundle_multiselect');
-require('./bundle_select2');
-
 // Set the public path for dynamic imports
 if (process.env.NODE_ENV !== 'production') {
   /* eslint-disable-next-line */

webpack/assets/javascripts/dashboard/index.js

@@ -1,5 +1,4 @@
 import $ from 'jquery';
-import 'gridster/dist/jquery.gridster';
 import { doesDocumentHasFocus } from '../react_app/common/document';
 import { notify } from '../foreman_toast_notifications';
 import { activateTooltips, foremanUrl } from '../foreman_tools';

webpack/assets/javascripts/dashboard/index.scss

@@ -1,4 +1,3 @@
-@import "~gridster/dist/jquery.gridster";
 @import "gridster.scss";
 
 .dashboard {

webpack/assets/javascripts/hosts/tableCheckboxes.js

@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import 'jquery.cookie';
+
 import {
   sprintf,
   ngettext as n__,

webpack/assets/javascripts/react_app/common/helpers.js

@@ -1,5 +1,4 @@
-import debounce from 'lodash/debounce';
-import { snakeCase, camelCase } from 'lodash';
+import { snakeCase, camelCase, debounce } from 'lodash';
 import URI from 'urijs';
 import { translate as __ } from './I18n';
 

webpack/assets/javascripts/react_app/components/AutoComplete/AutoCompleteActions.js

@@ -1,5 +1,5 @@
 import URI from 'urijs';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash';
 import API from '../../API';
 import { STATUS } from '../../constants';
 import { clearSpaces } from '../../common/helpers';

webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/AutoComplete.test.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import lodash from 'lodash';
 import AutoComplete from '../AutoComplete';
 import { AutoCompleteProps } from '../AutoComplete.fixtures';
 import { testComponentSnapshotsWithFixtures } from '../../../common/testHelpers';
 import { KEYCODES } from '../../../common/keyCodes';
 import { noop } from '../../../common/helpers';
 
-jest.mock('lodash/debounce', () => jest.fn(fn => fn));
+lodash.debounce = jest.fn(fn => fn);
 
 const getProps = () => ({
   ...AutoCompleteProps,

webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/AutoCompleteActions.test.js

@@ -12,7 +12,7 @@ import {
   id,
 } from '../AutoComplete.fixtures';
 
-jest.mock('lodash/debounce', () => jest.fn(fn => fn));
+jest.mock('lodash', () => ({ debounce: jest.fn(fn => fn) }));
 jest.mock('../../../API');
 
 const loadResults = (requestParams, serverMock) => {

webpack/assets/javascripts/react_app/components/AutoComplete/__tests__/integration.test.js

@@ -5,7 +5,15 @@ import { AutoCompleteProps } from '../AutoComplete.fixtures';
 import Autocomplete, { reducers } from '../index';
 
 jest.mock('../../../API');
-jest.mock('lodash/debounce', () => jest.fn(fn => fn));
+jest.mock('lodash', () => ({
+  debounce: jest.fn(fn => fn),
+  groupBy: jest.fn((list, getProps) =>
+    list.reduce((a, b) => {
+      (a[getProps(b)] = a[getProps(b)] || []).push(b);
+      return a;
+    }, {})
+  ),
+}));
 jest.mock('uuid', () => jest.fn(fn => '1234'));
 global.Turbolinks = {
   visit: jest.fn(),

webpack/assets/javascripts/react_app/components/AutoComplete/auto-complete.scss

@@ -1,5 +1,4 @@
-@import "~patternfly/dist/sass/patternfly/_color-variables.scss";
-@import "~patternfly-react/dist/sass/_type-ahead-select.scss";
+@import "~@theforeman/vendor/scss/variables";
 
 .foreman-autocomplete {
   .autocomplete-aux {

webpack/assets/javascripts/react_app/components/AutoComplete/components/AutoCompleteMenu.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import groupBy from 'lodash/groupBy';
+import { groupBy } from 'lodash';
 import { TypeAheadSelect } from 'patternfly-react';
 import SubstringWrapper from '../../common/SubstringWrapper';