CHE-10883 migrate from bower to yarn

Signed-off-by: Oleksii Orel <[email protected]>

dashboard/Dockerfile

@@ -12,17 +12,16 @@
 # Build step: $ docker build -t eclipse-che-dashboard
 # It builds an archive file that can be used by doing later
 #  $ docker run --rm eclipse-che-dashboard | tar -C target/ -zxf -
-FROM node:6.11.2
+FROM node:8.10.0
 
 RUN apt-get update && \
     apt-get install -y git \
     && apt-get -y clean \
     && rm -rf /var/lib/apt/lists/*
 COPY package.json /dashboard/
-RUN cd /dashboard && npm install
-COPY bower.json /dashboard/
-RUN cd /dashboard && ./node_modules/.bin/bower install --allow-root
+RUN cd /dashboard && npm i yarn && npx yarn install --ignore-scripts
 COPY . /dashboard/
-RUN cd /dashboard && npm run build && cd target/ && tar zcf /tmp/dashboard.tar.gz dist/
+RUN cd /dashboard  && npx yarn
+RUN cd /dashboard && cd target/ && tar zcf /tmp/dashboard.tar.gz dist/
 
 CMD zcat /tmp/dashboard.tar.gz

dashboard/README.md

@@ -23,7 +23,7 @@ $ mvn -Pnative clean install
 
 Required tools for native build:
 - Python `v2.7.x`(`v3.x.x`currently not supported)
-- Node.js `v4.x.x`, `v5.x.x` or `v6.x.x`
+- Node.js `v5.x.x`, `v6.x.x` or `v8.x.x`
 - npm
 
 Installation instructions for Node.js and npm can be found on the following [link](https://docs.npmjs.com/getting-started/installing-node). 

dashboard/gulp/build.js

@@ -17,7 +17,7 @@ var gulp = require('gulp');
 var conf = require('./conf');
 
 var $ = require('gulp-load-plugins')({
-  pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del']
+  pattern: ['gulp-*', 'uglify-save-license', 'del']
 });
 
 var minimist = require('minimist');
@@ -68,7 +68,6 @@ gulp.task('html', ['inject', 'partials'], function () {
     .pipe(jsFilter.restore)
     .pipe(cssFilter)
     .pipe($.sourcemaps.init())
-    .pipe($.replace('../../bower_components/material-design-iconfont/iconfont/', '../fonts/'))
     .pipe($.minifyCss({ processImport: false }))
     .pipe($.sourcemaps.write('maps'))
     .pipe(cssFilter.restore)
@@ -111,7 +110,10 @@ gulp.task('existingfonts', function () {
 });
 
 gulp.task('fonts', ['colors', 'outputcolors', 'proxySettings', 'existingfonts'], function () {
-  return gulp.src($.mainBowerFiles().concat('bower_components/material-design-iconfont/iconfont/*'))
+  return gulp.src([
+    'node_modules/material-design-iconfont/iconfont/*',
+    'node_modules/font-awesome/fonts/*'
+  ])
     .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
     .pipe($.flatten())
     .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));

dashboard/gulp/conf.js

@@ -19,20 +19,10 @@ exports.paths = {
   src: 'src',
   dist: 'target/dist',
   tmp: '.tmp',
-  e2e: 'e2e'
+  e2e: 'e2e',
+  modules: 'node_modules'
 };
 
-/**
- *  Wiredep is the lib which inject bower dependencies in your project
- *  Mainly used to inject script tags in the index.html but also used
- *  to inject css preprocessor deps and js files in karma
- */
-exports.wiredep = {
-  exclude: [/bootstrap\.js/, /bootstrap\.css/, /bootstrap\.css/, /foundation\.css/],
-  directory: 'bower_components'
-};
-
-
 
 /**
  *  Common implementation for an error handler of a Gulp plugin

dashboard/gulp/inject.js

@@ -18,9 +18,6 @@ var conf = require('./conf');
 
 var $ = require('gulp-load-plugins')();
 
-var wiredep = require('wiredep').stream;
-var _ = require('lodash');
-
 gulp.task('inject', ['outputcolors', 'proxySettings', 'scripts', 'styles'], function () {
   var injectStyles = gulp.src([
     path.join(conf.paths.tmp, '/serve/app/**/*.css'),
@@ -39,6 +36,5 @@ gulp.task('inject', ['outputcolors', 'proxySettings', 'scripts', 'styles'], func
   return gulp.src(path.join(conf.paths.src, '/*.html'))
     .pipe($.inject(injectStyles, injectOptions))
     .pipe($.inject(injectScripts, injectOptions))
-    .pipe(wiredep(_.extend({}, conf.wiredep)))
     .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
 });

dashboard/gulp/material-design-svgfont.js

@@ -19,7 +19,7 @@ var conf = require('./conf');
 var $ = require('gulp-load-plugins')();
 
 gulp.task('material-svgfonts', function() {
-  return gulp.src('bower_components/material-design-icons/**/production/*')
+  return gulp.src('node_modules/material-design-icons/**/production/*')
     .pipe($.iconfontCss({
       fontName: 'material-design',
       targetPath: '../styles/material-design.css',

dashboard/gulp/scripts.js

@@ -15,6 +15,7 @@
 var path = require('path');
 var gulp = require('gulp');
 var conf = require('./conf');
+var bootstrap = require('bootstrap-styl');
 
 var browserSync = require('browser-sync');
 var webpack = require('webpack-stream');
@@ -23,21 +24,67 @@ var $ = require('gulp-load-plugins')();
 
 function webpackWrapper(watch, test, callback) {
   var webpackOptions = {
-    resolve: { extensions: ['', '.ts'] },
+    context: __dirname,
+    resolve: {extensions: ['', '.ts', '.js', '.styl']},
     watch: watch,
     module: {
-      preLoaders: [{ test: /\.ts$/, exclude: /node_modules/, loader: 'tslint-loader'}],
-      loaders: [{ test: /\.ts$/, exclude: /node_modules/, loaders: ['babel-loader', 'awesome-typescript-loader']}]
+      loaders: [
+        {
+          test: /\.ts$/,
+          exclude: /node_modules/,
+          loaders: ['babel-loader', 'awesome-typescript-loader']
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader']
+        },
+        {
+          test: /\.styl$/,
+          use: [
+            'style-loader',
+            'css-loader',
+            {
+              loader: 'stylus-loader?paths=node_modules/bootstrap-styl',
+              options: {
+                preferPathResolver: 'webpack',
+                use: [bootstrap()]
+              }
+            }
+          ]
+        },
+        {
+          test: /\.(svg|woff|woff2|ttf|eot|ico)$/,
+          use: [
+            {
+              loader: 'file-loader'
+            }
+          ]
+        },
+        {
+          test: /\.html$/,
+          use: [
+            {
+              loader: 'ngtemplate-loader',
+              options: {
+                angular: true
+              }
+            },
+            {
+              loader: 'html-loader'
+            }
+          ]
+        }
+      ]
     },
-    output: { filename: 'index.module.js' }
+    output: {filename: 'index.module.js'}
   };
 
-  if(watch) {
+  if (watch) {
     webpackOptions.devtool = 'inline-source-map';
   }
 
-  var webpackChangeHandler = function(err, stats) {
-    if(err) {
+  var webpackChangeHandler = function (err, stats) {
+    if (err) {
       conf.errorHandler('Webpack')(err);
     }
     $.util.log(stats.toString({
@@ -47,13 +94,13 @@ function webpackWrapper(watch, test, callback) {
       version: false
     }));
     browserSync.reload();
-    if(watch) {
+    if (watch) {
       watch = false;
       callback();
     }
   };
 
-  var sources = [ path.join(conf.paths.src, '/app/index.module.ts') ];
+  var sources = [path.join(conf.paths.src, '/index.ts')];
   if (test) {
     sources.push(path.join(conf.paths.src, '/{app,components}/**/*.spec.ts'));
   }

dashboard/gulp/server.js

@@ -29,7 +29,7 @@ function browserSyncInit(baseDir, browser) {
   var routes = null;
   if(baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) {
     routes = {
-      '/bower_components': 'bower_components'
+      '/node_modules': 'node_modules'
     };
   }
 

dashboard/gulp/styles.js

@@ -15,14 +15,13 @@
 var path = require('path');
 var gulp = require('gulp');
 var conf = require('./conf');
+var concat = require('gulp-concat');
+var merge = require('merge-stream');
 
 var browserSync = require('browser-sync');
 
 var $ = require('gulp-load-plugins')();
 
-var wiredep = require('wiredep').stream;
-var _ = require('lodash');
-
 gulp.task('styles', function () {
 
   var injectFiles = gulp.src([
@@ -42,15 +41,27 @@ gulp.task('styles', function () {
   };
 
 
-  return gulp.src([
+  var stylCss =  gulp.src([
     path.join(conf.paths.src, '/app/index.styl')
   ])
     .pipe($.inject(injectFiles, injectOptions))
-    .pipe(wiredep(_.extend({}, conf.wiredep)))
     .pipe($.sourcemaps.init())
     .pipe($.stylus()).on('error', conf.errorHandler('Stylus'))
     .pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer'))
     .pipe($.sourcemaps.write())
     .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')))
     .pipe(browserSync.reload({ stream: true }));
+
+  var css = gulp.src([
+    path.join(conf.paths.modules, '/font-awesome/css/font-awesome.css'),
+    path.join(conf.paths.modules, '/angular-material/**/*.css'),
+    path.join(conf.paths.modules, '/codemirror/lib/codemirror.css'),
+    path.join(conf.paths.modules, '/codemirror/addon/lint/lint.css'),
+    path.join(conf.paths.modules, '/codemirror/addon/fold/foldgutter.css')
+  ])
+    .pipe(concat('css-files.css'));
+
+  return merge(stylCss, css)
+    .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')))
+    .pipe(browserSync.reload({stream: true}));
 });

dashboard/gulp/unit-tests.js

@@ -38,7 +38,7 @@ function runTests (singleRun, done) {
     pathSrcJs.forEach(function(path) {
       preprocessors[path] = ['coverage'];
     });
-    reporters.push('coverage')
+    reporters.push('coverage');
   }
 
   var localConfig = {
@@ -51,7 +51,7 @@ function runTests (singleRun, done) {
 
   var server = new karma.Server(localConfig, function(failCount) {
     done(failCount ? new Error("Failed " + failCount + " tests.") : null);
-  })
+  });
   server.start();
 }
 

dashboard/gulp/watch.js

@@ -24,7 +24,7 @@ function isOnlyChange(event) {
 
 gulp.task('watch', ['scripts:watch', 'inject'], function () {
 
-  gulp.watch([path.join(conf.paths.src, '/*.html'), 'bower.json'], ['inject']);
+  gulp.watch([path.join(conf.paths.src, '/*.html')], ['inject']);
 
   gulp.watch([
     path.join(conf.paths.src, '/app/**/*.css'),