Merge pull request #32 from qlik-oss/tsm-color-picker-check

Update metric-semaphores.js

.circleci/config.yml

@@ -26,6 +26,9 @@ jobs:
             --blackduck.username="svc-blackduck" \
             --blackduck.password=${svc_blackduck} \
             --detect.project.name="viz-bundle-qlik-smart-pivot"
+      - run:
+          name: Run tests
+          command: npm run test-once
 
   bump-version:
     <<: *defaults
@@ -53,18 +56,16 @@ jobs:
           command: |
             export VERSION=$(scripts/get-bumped-version.sh)
             echo "Version: ${VERSION}"
-            npm run build:zip
-            sudo chmod +x scripts/verify-files.sh
-            scripts/verify-files.sh
+            npm run build
           environment:
             NODE_ENV: production
       - persist_to_workspace:
           root: ~/qlik-smart-pivot
           paths:
-            - dist
+            - build
       - store_artifacts:
-          path: dist
-          destination: dist
+          path: build
+          destination: build
   deploy:
     <<: *defaults
     steps:

.gitignore

@@ -19,7 +19,7 @@ $RECYCLE.BIN/
 
 # Temporary build files
 node_modules/
-dist/
+build/
 BUMPED_VERSION
 
 # =========================

README.md

@@ -16,6 +16,11 @@ It's specifically focused on financial reports, trying to solve some common need
 You'll find a manual [Qlik Sense P&LSmart Pivot Extension Manual.pdf](resources/Qlik Sense P&LSmart Pivot Extension Manual.pdf) and one app example [P&LSmartPivot_demo.qvf](resources/P&LSmartPivot_demo.qvf).
 
 
+# If the import does not work at first time
+- remove [Accounts.csv](resources/Accounts.csv), [Accounts2.csv](resources/Accounts2.csv) and [Excel.png](resources/Excel.png), zip it again and import.
+- Then reintroduce [Accounts.csv](resources/Accounts.csv), [Accounts2.csv](resources/Accounts2.csv) and [Excel.png](resources/Excel.png), zip it again and import.
+
+
 # Installation
 
 1. Download the extension zip, `qlik-smart-pivot_<version>.zip`, from the latest release(https://github.com/qlik-oss/PLSmartPivot/releases/latest)

assets/qlik-smart-pivot.qext

@@ -0,0 +1,16 @@
+{
+	"name": "P&L pivot",
+	"description": "Profit & Loss reporting with color and font customizations.",
+	"type": "visualization",
+	"version": "X.Y.Z",
+	"icon": "table",
+	"preview": "",
+	"author": "Ivan Felipe Asensio <ivan.felipe@qlik.com>",
+	"homepage": "",
+	"keywords": "qlik-sense, visualization",
+	"license": "MIT",
+	"repository": "https://github.com/qlik-oss/PLSmartPivot",
+	"dependencies": {
+		"qlik-sense": ">=5.5.x"
+	}
+}

assets/wbfolder.wbl

@@ -0,0 +1,3 @@
+qlik-smart-pivot.js;
+qlik-smart-pivot.css;
+qlik-smart-pivot.qext

gulpfile.js

@@ -1,61 +1,23 @@
 var gulp = require('gulp');
-var gutil = require('gulp-util');
 var zip = require('gulp-zip');
 var del = require('del');
+var path = require('path');
+var settings = require('./settings');
 var webpackConfig = require('./webpack.config');
 var webpack = require('webpack');
-var pkg = require('./package.json');
+var WebpackDevServer = require('webpack-dev-server');
+var jeditor = require("gulp-json-editor");
 
-var DIST = './dist';
-var VERSION = process.env.VERSION || 'local-dev';
+var srcFiles = path.resolve('./src/**/*.*');
 
-gulp.task('qext', function () {
-	var qext = {
-		name: 'P&L pivot',
-		type: 'visualization',
-		description: pkg.description + '\nVersion: ' + VERSION,
-		version: VERSION,
-		icon: 'table',
-		preview: 'qlik-smart-pivot.png',
-		keywords: 'qlik-sense, visualization',
-		author: pkg.author,
-		homepage: pkg.homepage,
-		license: pkg.license,
-		repository: pkg.repository,
-		dependencies: {
-			'qlik-sense': '>=5.5.x'
-		}
-	};
-	if (pkg.contributors) {
-		qext.contributors = pkg.contributors;
-	}
-	var src = require('stream').Readable({
-		objectMode: true
-	});
-	src._read = function () {
-		this.push(new gutil.File({
-			cwd: '',
-			base: '',
-			path: pkg.name + '.qext',
-			contents: Buffer.from(JSON.stringify(qext, null, 4))
-		}));
-		this.push(null);
-	};
-	return src.pipe(gulp.dest(DIST));
-});
-
-gulp.task('clean', function(){
-  return del([DIST], { force: true });
+gulp.task('remove-build-folder', function(){
+  return del([settings.buildDestination], { force: true });
 });
 
 gulp.task('zip-build', function(){
-  return gulp.src(DIST + '/**/*')
-    .pipe(zip(`${pkg.name}_${VERSION}.zip`))
-    .pipe(gulp.dest(DIST));
-});
-
-gulp.task('add-assets', function(){
-  return gulp.src('./assets/**/*').pipe(gulp.dest(DIST));
+  return gulp.src(settings.buildDestination + '/**/*')
+    .pipe(zip(`${settings.name}_${settings.version}.zip`))
+    .pipe(gulp.dest(settings.buildDestination));
 });
 
 gulp.task('webpack-build', done => {
@@ -74,14 +36,40 @@ gulp.task('webpack-build', done => {
   });
 });
 
-gulp.task('build',
-  gulp.series('clean', 'webpack-build', 'qext', 'add-assets')
-);
+gulp.task('update-qext-version', function () {
+  return gulp.src(`${settings.buildDestination}/${settings.name}.qext`)
+    .pipe(jeditor({
+      'version': settings.version
+    }))
+    .pipe(gulp.dest(settings.buildDestination));
+});
 
-gulp.task('zip',
-  gulp.series('build', 'zip-build')
+gulp.task('build',
+  gulp.series('remove-build-folder', 'webpack-build', 'update-qext-version', 'zip-build')
 );
 
 gulp.task('default',
   gulp.series('build')
 );
+
+gulp.task('watch', () => new Promise((resolve, reject) => {
+  webpackConfig.entry.unshift('webpack-dev-server/client?http://localhost:' + settings.port);
+  const compiler = webpack(webpackConfig);
+  const originalOutputFileSystem = compiler.outputFileSystem;
+  const devServer = new WebpackDevServer(compiler, {
+    headers: {
+      "Access-Control-Allow-Origin": "*"
+    },
+  }).listen(settings.port, 'localhost', error => {
+    compiler.outputFileSystem = originalOutputFileSystem;
+    if (error) {
+      console.error(error); // eslint-disable-line no-console
+      return reject(error);
+    }
+
+    // eslint-disable-next-line no-console
+    console.log('Listening at localhost:' + settings.port);
+
+    resolve(null, devServer);
+  });
+}));

karma.conf.js

@@ -0,0 +1,69 @@
+const path = require('path');
+const settings = require('./settings');
+
+module.exports = (config) => {
+  config.set({
+    browsers: ['SlimChromeHeadless'],
+    customLaunchers: {
+      SlimChromeHeadless: {
+        base: 'ChromeHeadless',
+        flags: [
+          '--headless',
+          '--disable-gpu',
+          '--disable-translate',
+          '--disable-extensions'
+        ]
+      }
+    },
+    files: [
+      {
+        pattern: 'src/**/*.spec.js',
+        watched: true
+      }
+    ],
+    frameworks: ['jasmine'],
+    preprocessors: {
+      'src/**/*.spec.{js, jsx}': [
+        'webpack',
+        'sourcemap'
+      ]
+    },
+    webpack: {
+      devtool: 'source-map',
+      externals: {
+        jquery: {
+          amd: 'jquery',
+          commonjs: 'jquery',
+          commonjs2: 'jquery',
+          root: '_'
+        }
+      },
+      mode: settings.mode,
+      module: {
+        rules: [
+          {
+            exclude: [/node_modules/],
+            loader: 'babel-loader',
+            options: {
+              plugins: [
+                '@babel/plugin-transform-async-to-generator',
+                '@babel/plugin-proposal-class-properties'],
+              presets: ['@babel/preset-react']
+            },
+            test: /\.(js|jsx)$/
+          },
+          {
+            loader: 'ignore-loader',
+            test: /\.less$/
+          }
+        ]
+      },
+      resolve: {
+        alias: {
+          'test-utilities': path.resolve('test/test-utilities')
+        },
+        modules: ['node_modules']
+      }
+    }
+  });
+};

package.json

@@ -1,15 +1,18 @@
 {
   "name": "qlik-smart-pivot",
   "version": "0.0.1",
-  "description": "Profit & Loss reporting with color and font customizations.",
-  "homepage": "",
+  "description": "Formatted table for P&L reports.",
+  "keywords": "smart pivot qliksense extension",
   "repository": "https://github.com/iviasensio/PLSmartPivot",
   "author": "Ivan Felipe Asensio <ivan.felipe@qlik.com>",
   "license": "MIT",
   "scripts": {
     "build": "gulp build",
-    "build:zip": "gulp zip",
     "eslint": "eslint src",
+    "eslint:fix": "eslint --fix src",
+    "test": "karma start karma.conf.js",
+    "test-once": "karma start karma.conf.js --single-run",
+    "watch": "gulp watch",
     "stylelint": "stylelint src/main.less"
   },
   "devDependencies": {
@@ -21,6 +24,7 @@
     "@babel/preset-react": "7.0.0",
     "babel-eslint": "10.0.1",
     "babel-loader": "8.0.4",
+    "copy-webpack-plugin": "4.5.3",
     "css-loader": "1.0.0",
     "del": "2.0.2",
     "enzyme": "3.8.0",
@@ -29,8 +33,15 @@
     "eslint-loader": "2.1.1",
     "eslint-plugin-react": "7.11.1",
     "gulp": "4.0.0",
-    "gulp-util": "^3.0.7",
+    "gulp-json-editor": "2.4.3",
     "gulp-zip": "3.0.2",
+    "jasmine-core": "3.2.1",
+    "jasmine-enzyme": "7.0.1",
+    "karma": "3.0.0",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-jasmine": "1.1.2",
+    "karma-sourcemap-loader": "0.3.7",
+    "karma-webpack": "3.0.5",
     "less": "3.8.1",
     "less-loader": "4.1.0",
     "lodash.merge": "4.6.1",
@@ -38,7 +49,9 @@
     "stylelint": "8.4.0",
     "stylelint-webpack-plugin": "0.10.5",
     "text-loader": "0.0.1",
-    "webpack": "4.20.2"
+    "webpack": "4.20.2",
+    "webpack-cli": "3.1.2",
+    "webpack-dev-server": "3.1.10"
   },
   "dependencies": {
     "prop-types": "15.6.2",

scripts/create-release.sh

@@ -2,8 +2,8 @@
 set -o errexit
 
 echo "Creating release for version: $VERSION"
-echo "Artifact name: ./dist/${3}_${VERSION}.zip"
-$HOME/bin/ghr -t ${ghoauth} -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} -c ${CIRCLE_SHA1} ${VERSION} "./dist/${3}_${4}.zip"
+echo "Artifact name: ./build/${3}_${VERSION}.zip"
+$HOME/bin/ghr -t ${ghoauth} -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} -c ${CIRCLE_SHA1} ${VERSION} "./build/${3}_${4}.zip"
 
 
 # Usage

scripts/verify-files.sh

@@ -1,25 +0,0 @@
-#!/bin/bash
-# The build script has a known race-condition that sometimes causes it to not include all files
-# in the built zip. This script verifies the that the zip contains the correct number of files.
-
-set -o errexit
-
-echo "Verifying built file count"
-
-while read line; do
-    if [[ $line =~ ^\"name\": ]]; then
-        name=${line#*: \"}
-        name=${name%\"*}
-    fi
-done < package.json
-
-expected_file_count=$(($(find dist -type f | wc -l)-1))
-zip_file_count=$(zipinfo dist/${name}_${VERSION}.zip | grep ^- | wc -l)
-
-if [ "${expected_file_count}" -ne "${zip_file_count}" ]; then
-    # File count is incorrect
-    echo "Expected file count ${expected_file_count}, but was ${zip_file_count}"
-    exit 1
-fi
-echo "File count OK"
-exit 0

settings.js

@@ -0,0 +1,13 @@
+const path = require('path');
+const packageJSON = require('./package.json');
+
+const defaultBuildDestination = path.resolve("./build");
+
+module.exports = {
+  buildDestination: process.env.BUILD_PATH || defaultBuildDestination,
+  mode: process.env.NODE_ENV || 'development',
+  name: packageJSON.name,
+  version: process.env.VERSION || 'local-dev',
+  url: process.env.BUILD_URL || defaultBuildDestination,
+  port: process.env.PORT || 8085
+};

src/definition/metric-semaphores.js

@@ -39,6 +39,7 @@ const metricSemaphores = {
       label: 'Critic Color Fill',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 8,
         color: '#f93f17'
@@ -49,6 +50,7 @@ const metricSemaphores = {
       label: 'Critic Color Text',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 11,
         color: '#ffffff'
@@ -65,6 +67,7 @@ const metricSemaphores = {
       label: 'Medium Color Fill',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 9,
         color: '#ffcf02'
@@ -75,6 +78,7 @@ const metricSemaphores = {
       label: 'Medium Color Text',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 12,
         color: '#000000'
@@ -85,6 +89,7 @@ const metricSemaphores = {
       label: 'Success Color Fill',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 10,
         color: '#276e27'
@@ -95,6 +100,7 @@ const metricSemaphores = {
       label: 'Success Color Text',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 11,
         color: '#ffffff'

test/test-utilities/enzyme-setup.js

@@ -0,0 +1,10 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import jasmineEnzyme from 'jasmine-enzyme';
+Enzyme.configure({ adapter: new Adapter() });
+
+beforeEach(() => {
+  jasmineEnzyme();
+});
+
+export * from 'enzyme';

test/test-utilities/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'test-utilities/enzyme-setup';
+
+export function mountedComponent (Model, Component, props = {}) {
+  const component = mount((
+    <Component {...props} />
+  )).find(Component);
+  return new Model(component);
+}

webpack.config.js

@@ -1,11 +1,8 @@
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
-const packageJSON = require('./package.json');
-const path = require('path');
+const settings = require('./settings');
 
-const DIST = path.resolve("./dist");
-const MODE = process.env.NODE_ENV || 'development';
-
-console.log('Webpack mode:', MODE); // eslint-disable-line no-console
+console.log('Webpack mode:', settings.mode); // eslint-disable-line no-console
 
 const config = {
   devtool: 'source-map',
@@ -24,7 +21,7 @@ const config = {
       root: '_'
     }
   },
-  mode: MODE,
+  mode: settings.mode,
   module: {
     rules: [
       {
@@ -64,11 +61,17 @@ const config = {
     ]
   },
   output: {
-    filename: `${packageJSON.name}.js`,
+    filename: `${settings.name}.js`,
     libraryTarget: 'amd',
-    path: DIST
+    path: settings.buildDestination
   },
   plugins: [
+    new CopyWebpackPlugin([
+      `assets/${settings.name}.qext`,
+      `assets/${settings.name}.png`,
+      'assets/wbfolder.wbl',
+      'resources/Excel.png'
+    ], {}),
     new StyleLintPlugin({
       files: '**/*.less'
     })