TFP-449 FPSAK-FRONTEND: Oppdatere dependencies og fjerne sikkerhetsproblemer (navikt#720)

Merger denne selv om quality gate fra SonarCloud feiler. Den feiler pga gammel kode. :-(

Author: Michael Johansen

.circleci/config.yml

@@ -33,6 +33,7 @@ jobs:
     docker:
       - image: circleci/node:latest
     working_directory: ~/repo
+    resource_class: large
     steps:
       - attach_workspace:
           at: /tmp/workspace
@@ -46,7 +47,12 @@ jobs:
             - yarn-packages-{{ checksum "yarn.lock" }}
       - run:
           name: Run yarn install
-          command: yarn install --ignore-scripts --no-progress --frozen-lockfile
+          command: yarn install --ignore-optional --ignore-scripts --no-progress --frozen-lockfile
+#      - run:
+#          name: Node prune feiler på "assets" i NAV-folderen.
+#          command: |
+#            curl -sfL https://install.goreleaser.com/github.com/tj/node-prune.sh | bash
+#            ./bin/node-prune
       - run:
           name: Run linting and tests
           command: yarn less:lint && yarn test

.sonarcloud.properties

@@ -1,12 +1,12 @@
 # Path to sources
 sonar.sources=packages
-sonar.exclusions=**/assets/**,**/*.spec.*
+sonar.exclusions=**/assets/**,packages/**/*.spec.*
 #sonar.inclusions=**/assets/**,**/*.spec.jsx
 
 # Path to tests
 sonar.tests=packages
 #sonar.test.exclusions=
-sonar.test.inclusions=**/*.spec.*
+sonar.test.inclusions=packages/**/*.spec.*
 
 # Source encoding
 sonar.sourceEncoding=UTF-8

README.md

@@ -21,6 +21,14 @@ yarn build
 * gjøre form pakken tilgjengelig med final-form og redux-form
 * Legge inn readme for pakkene!
 
+
+## Workspaces
+* Common dev dependencies skal kun ligge på roten. ref 
+https://medium.com/@jsilvax/a-workflow-guide-for-lerna-with-yarn-workspaces-60f97481149d
+>If you have common dev dependencies, it’s better to specify them in the workspace root package.json. 
+>For instance, this can be dependencies like Jest, Husky, Storybook, Eslint, Prettier, etc.
+
+
 ### Licenses and attribution
 *For updated information, always see LICENSE first!*
 

babel.config.js

@@ -1,8 +1,35 @@
+/* eslint-disable no-console */
+const { NODE_ENV, BABEL_ENV } = process.env;
+
 module.exports = function (api) {
-  api.cache(true);
-  const presets = ['@babel/react', ['@babel/env', { modules: false }], '@babel/typescript'];
+  // eslint-disable-next-line no-unused-expressions
+  api ? api.cache(true) : null;
+  const presets = [
+    '@babel/preset-react',
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+      },
+    ],
+    '@babel/preset-typescript',
+  ];
   const plugins = ['@babel/plugin-proposal-class-properties'];
 
+
+  if (NODE_ENV && BABEL_ENV && NODE_ENV !== BABEL_ENV) {
+    console.warn('WARNING: Both BABEL_ENV and NODE_ENV are set in');
+    console.warn('WARNING: the environment, but with different values.');
+    console.warn(`WARNING: BABEL_ENV = ${BABEL_ENV}`);
+    console.warn(`WARNING: NODE_ENV = ${NODE_ENV}`);
+  }
+
+  if (NODE_ENV === 'coverage' || BABEL_ENV === 'coverage') {
+    plugins.push('istanbul');
+    process.env.NODE_ENV = 'coverage';
+    process.env.BABEL_ENV = 'coverage';
+  }
+
   return {
     presets,
     plugins,

eslint/eslintrc.common.js

@@ -2,17 +2,15 @@ const OFF = 0;
 const ON = 1;
 const ERROR = 2;
 
-
 const config = {
-
   env: {
     es6: true,
     browser: true,
     mocha: true,
   },
 
   globals: {
-    VERSION: ON,
+    VERSION: 'off',
   },
 
   parser: '@typescript-eslint/parser',
@@ -43,7 +41,7 @@ const config = {
 
     // TODO (TOR) Ignorert inntil videre grunnet kost/nytte
     'jsx-a11y/anchor-is-valid': OFF,
-    
+
     '@typescript-eslint/no-unused-vars': ERROR,
     '@typescript-eslint/indent': OFF,
 
@@ -52,6 +50,14 @@ const config = {
     '@typescript-eslint/explicit-function-return-type': OFF,
     '@typescript-eslint/no-explicit-any': OFF,
   },
-};
 
+  overrides: [
+    {
+      files: ['*.spec.jsx'],
+      rules: {
+        'no-unused-expressions': 'off',
+      },
+    },
+  ],
+};
 module.exports = config;

package.json

@@ -1,6 +1,5 @@
 {
   "name": "fpsak-frontend",
-  "version": "0.3.363",
   "description": "Klient for Foreldrepenger",
   "main": "./dist/index.js",
   "author": "NAV",
@@ -11,23 +10,21 @@
     "url": "git+https://github.com/navikt/fpsak-frontend.git"
   },
   "scripts": {
-    "test": "mochapack --webpack-config webpack/webpack.test.js \"packages/**/*.spec.*\"",
+    "test": "mochapack --colors --webpack-config webpack/webpack.test.js \"packages/**/*.spec.*\"",
     "test:watch": "mochapack --watch --webpack-config webpack/webpack.test.watch.js \"packages/**/*.spec.*\"",
     "test:coverage": "nyc mochapack --webpack-config webpack/webpack.test.coverage.js \"packages/**/*.spec.*\"",
     "dev": "cross-env NODE_ENV=development node webpack/webpack.dev.server.js --config webpack/webpack.dev.js",
     "build": "cross-env NODE_ENV=production webpack --no-progress --colors --config webpack/webpack.prod.js",
-    "postinstall": "yarn run build && yarn test && yarn run less:lint",
+    "postinstall": "yarn test && yarn less:lint",
     "lerna": "lerna",
     "lerna:publish": "(lerna updated && lerna publish --cd-version patch --yes -m \"publish [ci skip]\") || echo \"Ingen endringer avslutter OK\"",
     "less:lint": "stylelint \"packages/**/*.less\"",
     "ts-check": "tsc --pretty",
     "doc": "react-asciidoc-generator ./packages/ -o ../../docs/generated/react.adoc --handlebar-template src/docs/asciidoc-template.handlebars",
-    "docker:build": "docker build . -t fpfront -f ./docker/Dockerfile --build-arg HTTP_PROXY=$HTTP_PROXY --build-arg HTTPS_PROXY=$HTTP_PROXY",
-    "docker:start": "yarn docker:stop; yarn docker:build; docker run -d --env-file=./docker/.env --name fpfront -p 443:9000 fpfront",
-    "docker:stop": "docker stop fpfront; docker rm fpfront",
-    "redis:start": "docker stop redis; docker rm redis; docker run --name redis -p 6379:6379 -d redis",
     "up": "docker-compose up -d --remove-orphans --build",
-    "down": "docker-compose down"
+    "down": "docker-compose down",
+    "lint": "./node_modules/.bin/eslint packages/**/*.jsx",
+    "remove-node-modules": "find . -name \"node_modules\" -exec rm -rf '{}' +"
   },
   "workspaces": [
     "packages/*"
@@ -36,24 +33,23 @@
     "@babel/polyfill": "^7.4.4",
     "@babel/runtime": "^7.4.4",
     "axios": "^0.19.0",
-    "circular-dependency-plugin": "^5.0.2",
-    "copy-webpack-plugin": "^5.0.3",
     "core-js": "^3.1.4",
     "dotenv": "^8.0.0",
     "history": "^4.9.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "stylelint-order": "^3.0.0"
+    "react-modal": "3.9.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.5",
+    "@babel/core": "^7.5.5",
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
-    "@babel/register": "^7.4.4",
+    "@babel/register": "^7.5.5",
     "@commercetools/enzyme-extensions": "^5.0.0",
+    "@istanbuljs/nyc-config-babel": "^2.1.1",
     "@types/chai": "^4.1.7",
     "@types/classnames": "^2.2.8",
     "@types/enzyme": "^3.9.3",
@@ -68,26 +64,28 @@
     "@types/react-redux": "^7.1.0",
     "@types/react-router-dom": "^4.3.4",
     "@types/sinon": "^7.0.13",
-    "@typescript-eslint/eslint-plugin": "^1.10.2",
+    "@typescript-eslint/eslint-plugin": "^1.13.0",
     "@typescript-eslint/parser": "^1.10.2",
     "axios-mock-adapter": "^1.16.0",
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
+    "babel-plugin-istanbul": "^5.2.0",
+    "cache-loader": "^4.1.0",
     "chai": "^4.2.0",
+    "circular-dependency-plugin": "^5.0.2",
+    "copy-webpack-plugin": "^5.0.3",
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-import": "^0.13.0",
+    "eslint": "^5.3.0",
+    "eslint-config-airbnb": "^17.1.1",
     "eslint-import-resolver-webpack": "^0.11.1",
     "eslint-loader": "^2.1.2",
-    "eslint-plugin-import": "^2.17.2",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.13.0",
+    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.14.2",
     "file-loader": "^4.0.0",
-    "happypack": "^5.0.1",
     "html-webpack-plugin": "^3.2.0",
     "ignore-styles": "^5.0.1",
     "istanbul-instrumenter-loader": "^3.0.1",
@@ -97,29 +95,32 @@
     "less": "^3.8.1",
     "less-loader": "^5.0.0",
     "mini-css-extract-plugin": "^0.7.0",
-    "mocha": "^6.1.4",
-    "mochapack": "^1.1.1",
+    "mocha": "^6.2.0",
+    "mochapack": "^1.1.2",
     "null-loader": "^3.0.0",
     "nyc": "^14.1.1",
-    "optimize-css-assets-webpack-plugin": "^4.0.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "react-test-renderer": "^16.8.6",
     "redux-mock-store": "^1.5.3",
-    "sinon": "^5.0.10",
-    "sinon-chai": "^3.2.0",
+    "sinon": "^7.3.2",
+    "sinon-chai": "^3.3.0",
     "style-loader": "^0.23.1",
     "stylelint": "^10.1.0",
+    "stylelint-order": "^3.0.0",
+    "thread-loader": "^2.1.2",
     "typescript": "^3.4.5",
     "uglifyjs-webpack-plugin": "^2.1.0",
-    "wait-on": "^3.2.0",
-    "webpack": "^4.35.0",
-    "webpack-cli": "^3.3.5",
+    "webpack": "^4.38.0",
+    "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.3.1",
     "webpack-merge": "^4.2.1"
   },
   "resolutions": {
     "react-test-renderer": "^16.8.6"
   },
   "nyc": {
+    "cache": false,
+    "check-coverage": true,
     "require": [
       "@babel/register",
       "./setup/setup.jsx"
@@ -129,7 +130,7 @@
     "reporter": [
       "text",
       "lcov",
-      "html"
+      "text-summary"
     ],
     "extension": [
       ".jsx",
@@ -138,9 +139,9 @@
       ".es6"
     ],
     "exclude": [
-      "**/*.spec.jsx",
-      "**/*.spec.tsx",
-      "**/*.spec.ts"
+      "packages/**/*.spec.jsx",
+      "packages/**/*.spec.tsx",
+      "packages/**/*.spec.ts"
     ]
   }
 }

packages/dekorator/package.json

@@ -11,28 +11,30 @@
     "@fpsak-frontend/shared-components": "1.0.0",
     "@fpsak-frontend/utils": "1.0.0",
     "classnames": "^2.2.6",
+    "lodash.throttle": "^4.1.1",
+    "nav-frontend-core": "4.0.9",
     "nav-frontend-grid": "1.0.21",
     "nav-frontend-grid-style": "0.2.18",
+    "nav-frontend-js-utils": "^1.0.7",
     "nav-frontend-knapper": "1.0.30",
     "nav-frontend-knapper-style": "0.3.26",
     "nav-frontend-lukknapp": "1.0.21",
     "nav-frontend-lukknapp-style": "0.2.19",
     "nav-frontend-modal": "1.0.28",
     "nav-frontend-modal-style": "0.3.29",
+    "nav-frontend-paneler-style": "0.3.15",
     "nav-frontend-typografi": "2.0.12",
     "nav-frontend-typografi-style": "1.0.13",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-intl": "^2.8.0",
+    "react-modal": "3.9.1",
     "react-redux": "^5.1.1",
     "react-router-dom": "^4.3.1",
+    "redux": "^4.0.4",
     "reselect": "^4.0.0"
   },
   "devDependencies": {
-    "@fpsak-frontend/utils-test": "1.0.0",
-    "chai": "^4.2.0",
-    "enzyme": "^3.10.0",
-    "sinon": "^5.0.10",
-    "sinon-chai": "^3.2.0"
+    "@fpsak-frontend/utils-test": "1.0.0"
   }
 }

packages/error-api-redux/package.json

@@ -8,8 +8,5 @@
     "reselect": "^4.0.0",
     "@fpsak-frontend/utils": "1.0.0"
   },
-  "devDependencies": {
-    "chai": "^4.2.0",
-    "sinon": "^5.0.10"
-  }
+  "devDependencies": {}
 }

packages/form/package.json

@@ -28,14 +28,10 @@
     "react": "^16.8.6",
     "react-intl": "^2.8.0",
     "react-redux": "^5.1.1",
-    "redux": "^4.0.1",
+    "redux": "^4.0.4",
     "redux-form": "^7.4.2"
   },
   "devDependencies": {
-    "@fpsak-frontend/utils-test": "1.0.0",
-    "chai": "^4.2.0",
-    "enzyme": "^3.10.0",
-    "sinon": "^5.0.10",
-    "sinon-chai": "^3.2.0"
+    "@fpsak-frontend/utils-test": "1.0.0"
   }
 }

packages/form/src/SelectField.jsx

@@ -7,8 +7,9 @@ import renderNavField from './renderNavField';
 import { labelPropType } from './Label';
 import ReadOnlyField from './ReadOnlyField';
 
-// eslint-disable-next-line react/prop-types
+/* eslint-disable-next-line react/prop-types */
 const renderReadOnly = () => ({ input, selectValues, ...otherProps }) => {
+  /* eslint-disable-next-line react/prop-types */
   const option = selectValues.map(sv => sv.props).find(o => o.value === input.value);
   const value = option ? option.children : undefined;
   return <ReadOnlyField input={{ value }} {...otherProps} />;

packages/form/src/renderNavField.jsx

@@ -45,6 +45,7 @@ const renderNavField = (WrappedNavFieldComponent) => {
     input: PropTypes.shape(fieldInputPropTypes).isRequired,
     meta: PropTypes.shape({
       ...fieldMetaPropTypes,
+      submitFailed: PropTypes.bool,
       error: PropTypes.any,
     }).isRequired,
     intl: intlShape.isRequired,