Update to remove npm audit vulnerabilities (#1190)

* Update to remove npm audit vulnerabilities

* fix build

* harden versions

* review feedback

* Adding python the the PATH for node install

* debugging PATH variable - not to merge

* Docker file updates to install g++ make and python (required for node modules access)

* shebang update

* upgrade additional packages

* update ag-grid-community

README.md

@@ -44,7 +44,6 @@ Build, run and test locally
 * `npm start`: Launches the project in browser - watches for code changes and refreshes the page.
 * `npm run build`: Creates a production ready build.
 * `npm test`: Runs test in watch mode, press `q` to quit
-* `npm flow`: Runs Flow type checker. Learn more about Flow [here](https://flow.org/).
 
 Project Structure
 ===========================

package.json

@@ -3,50 +3,49 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "adal-angular": "1.0.15",
-    "ag-grid": "17.1.1",
-    "ag-grid-react": "17.1.0",
+    "adal-angular": "1.0.17",
+    "ag-grid-community": "19.1.4",
+    "ag-grid-react": "19.1.2",
     "dot-object": "1.7.0",
-    "i18next": "10.3.0",
-    "i18next-browser-languagedetector": "2.1.0",
+    "i18next": "12.1.0",
+    "i18next-browser-languagedetector": "2.2.4",
     "i18next-xhr-backend": "1.5.1",
-    "immutability-helper": "2.5.1",
-    "moment": "2.22.1",
-    "normalizr": "3.2.4",
-    "query-string": "5.1.0",
-    "react": "16.0.0",
-    "react-dom": "16.0.0",
+    "immutability-helper": "2.8.1",
+    "moment": "2.22.2",
+    "node-sass": "4.11.0",
+    "normalizr": "3.3.0",
+    "prop-types": "15.6.2",
+    "query-string": "6.2.0",
+    "react": "16.6.3",
+    "react-dom": "16.6.3",
     "react-dom-factories": "1.0.2",
-    "react-i18next": "7.3.1",
-    "react-redux": "5.0.6",
-    "react-router-dom": "4.2.2",
-    "react-scripts": "1.0.17",
-    "react-select": "1.0.0-rc.10",
-    "react-svg": "2.1.22",
-    "redux": "3.7.2",
-    "redux-devtools-extension": "2.13.5",
-    "redux-observable": "0.17.0",
-    "reselect": "3.0.1",
-    "rxjs": "5.5.2",
-    "tsiclient": "1.1.19"
+    "react-i18next": "8.3.8",
+    "react-redux": "5.1.1",
+    "react-router-dom": "4.3.1",
+    "react-scripts": "2.1.1",
+    "react-select": "1.3.0",
+    "react-svg": "2.2.18",
+    "redux": "4.0.1",
+    "redux-devtools-extension": "2.13.7",
+    "redux-observable": "0.19.0",
+    "reselect": "4.0.0",
+    "rxjs": "5.5.12",
+    "tsiclient": "1.2.20"
   },
   "devDependencies": {
-    "enzyme": "3.2.0",
-    "enzyme-adapter-react-16": "1.1.0",
-    "flow-bin": "0.48.0",
-    "mocha-steps": "1.1.0",
-    "node-fetch": "1.7.1",
-    "node-sass-chokidar": "0.0.3",
-    "npm-run-all": "4.0.2",
-    "rxjs-marbles": "2.3.1"
+    "enzyme": "3.7.0",
+    "enzyme-adapter-react-16": "1.7.0"
   },
   "scripts": {
-    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
-    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
-    "start-js": "react-scripts start",
-    "start": "npm-run-all -p watch-css start-js",
-    "build": "npm run build-css && react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
     "eject": "react-scripts eject"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

scripts/build

@@ -1,4 +1,5 @@
-#!/usr/bin/env bash -e
+#!/usr/bin/env bash
+set -e
 
 APP_HOME="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && cd .. && pwd )/"
 source "$APP_HOME/scripts/.functions.sh"

scripts/docker/Dockerfile

@@ -3,7 +3,9 @@
 FROM node:9.2.0-alpine as codebuilder
 COPY ./ /app/
 WORKDIR /app
-RUN echo "Installing node packages ..." && npm install
+RUN echo "Installing python2 (reqd for node pckgs)" && apk --update add python
+RUN echo "Install GCC for make command" && apk add --no-cache --virtual build-base
+RUN echo "Installing node packages ..." && npm --add-python-to-path='true' install
 RUN echo "Building app..."              && export CI=true && npm run build
 RUN echo "Removing temp files..."       && rm -rf node_modules src public package.json Dockerfile .dockerignore
 

src/components/app.container.js

@@ -2,7 +2,7 @@
 
 import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { translate } from 'react-i18next';
+import { withNamespaces } from 'react-i18next';
 import {
   epics as appEpics,
   getTheme,
@@ -20,4 +20,4 @@ const mapDispatchToProps = dispatch => ({
   registerRouteEvent: pathname => dispatch(appEpics.actions.detectRouteChange(pathname))
 });
 
-export const AppContainer = withRouter(translate()(connect(mapStateToProps, mapDispatchToProps)(App)));
+export const AppContainer = withRouter(withNamespaces()(connect(mapStateToProps, mapDispatchToProps)(App)));

src/components/pages/dashboard/dashboard.container.js

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 import { connect } from 'react-redux';
-import { translate } from 'react-i18next';
+import { withNamespaces } from 'react-i18next';
 import {
   redux as appRedux,
   getActiveDeviceGroup,
@@ -55,4 +55,4 @@ const mapDispatchToProps = dispatch => ({
   updateCurrentWindow: (currentWindow) => dispatch(appRedux.actions.updateCurrentWindow(currentWindow))
 });
 
-export const DashboardContainer = translate()(connect(mapStateToProps, mapDispatchToProps)(Dashboard));
+export const DashboardContainer = withNamespaces()(connect(mapStateToProps, mapDispatchToProps)(Dashboard));

src/components/pages/dashboard/dashboard.js

@@ -32,7 +32,7 @@ import {
   RefreshBar
 } from 'components/shared';
 
-import './dashboard.css';
+import './dashboard.scss';
 
 const initialState = {
   // Telemetry data

src/components/pages/dashboard/grid/cell.js

@@ -4,7 +4,7 @@ import React from 'react';
 
 import { joinClasses } from 'utilities';
 
-import './grid.css';
+import './grid.scss';
 
 export const Cell = ({ className, children }) => (
   <div className={joinClasses('grid-cell', className)}>

src/components/pages/dashboard/grid/grid.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import './grid.css';
+import './grid.scss';
 
 export const Grid = ({ children }) => (
   <div className="grid-container">

src/components/pages/dashboard/panel/panel.js

@@ -4,7 +4,7 @@ import React from 'react';
 
 import { joinClasses } from 'utilities';
 
-import './panel.css';
+import './panel.scss';
 
 export const Panel = ({ className, children }) => (
   <div className={joinClasses('panel-container', className)}>

src/components/pages/dashboard/panels/_examplePanel/examplePanel.js

@@ -9,7 +9,7 @@ import {
   PanelContent,
 } from 'components/pages/dashboard/panel';
 
-import './examplePanel.css';
+import './examplePanel.scss';
 
 export class ExamplePanel extends Component {
   constructor(props) {

src/components/pages/dashboard/panels/alerts/alertsPanel.js

@@ -41,7 +41,7 @@ export class AlertsPanel extends Component {
       columnDefs: translateColumnDefs(t, this.columnDefs),
       rowData: alerts,
       suppressFlyouts: true,
-      domLayout: 'autoHeight',
+      gridAutoHeight: true,
       deltaRowDataMode: false,
       t
     };

src/components/pages/dashboard/panels/analytics/analyticsPanel.container.js

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 import { connect } from 'react-redux';
-import { translate } from 'react-i18next';
+import { withNamespaces } from 'react-i18next';
 import { AnalyticsPanel } from './analyticsPanel';
 import { getEntities as getRuleEntities } from 'store/reducers/rulesReducer';
 import { getEntities as getDeviceEntities } from 'store/reducers/devicesReducer';
@@ -12,4 +12,4 @@ const mapStateToProps = state => ({
   devices: getDeviceEntities(state)
 });
 
-export const AnalyticsPanelContainer = translate()(connect(mapStateToProps, null)(AnalyticsPanel));
+export const AnalyticsPanelContainer = withNamespaces()(connect(mapStateToProps, null)(AnalyticsPanel));

src/components/pages/dashboard/panels/analytics/analyticsPanel.js

@@ -14,7 +14,7 @@ import {
   PanelMsg
 } from 'components/pages/dashboard/panel';
 
-import './analyticsPanel.css';
+import './analyticsPanel.scss';
 
 const barChartId = 'analytics-bar-chart-container';
 const pieChartId = 'analytics-pie-chart-container';

src/components/pages/dashboard/panels/map/mapPanel.js

@@ -16,7 +16,7 @@ import {
 import { DeviceDetailsContainer } from 'components/pages/devices/flyouts/deviceDetails';
 import { AzureMap } from './azureMap';
 
-import './mapPanel.css';
+import './mapPanel.scss';
 
 const AzureMaps = window.atlas;
 const nominalDeviceLayer = 'devices-nominal-layer';

src/components/pages/dashboard/panels/overview/overviewPanel.js

@@ -14,7 +14,7 @@ import {
   PanelError
 } from 'components/pages/dashboard/panel';
 
-import './overviewPanel.css';
+import './overviewPanel.scss';
 
 export class OverviewPanel extends Component {
   constructor(props) {

src/components/pages/dashboard/panels/telemetry/telemetryChart.js

@@ -7,7 +7,7 @@ import 'tsiclient';
 
 import { joinClasses } from 'utilities';
 
-import './telemetryChart.css';
+import './telemetryChart.scss';
 
 const maxDatums = 100; // Max telemetry messages for the telemetry graph
 

src/components/pages/dashboard/panels/telemetry/telemetryPanel.js

@@ -16,7 +16,7 @@ import {
 
 import { TelemetryChart } from './telemetryChart';
 
-import './telemetryPanel.css';
+import './telemetryPanel.scss';
 
 export class TelemetryPanel extends Component {
   render() {

src/components/pages/deployments/deploymentDetails/deploymentDetails.container.js

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
-import { translate } from 'react-i18next';
+import { withNamespaces } from 'react-i18next';
 import { connect } from 'react-redux';
 import { DeploymentDetails } from './deploymentDetails';
 import {
@@ -43,4 +43,4 @@ const mapDispatchToProps = dispatch => ({
   logEvent: diagnosticsModel => dispatch(appEpics.actions.logEvent(diagnosticsModel))
 });
 
-export const DeploymentDetailsContainer = translate()(connect(mapStateToProps, mapDispatchToProps)(DeploymentDetails));
+export const DeploymentDetailsContainer = withNamespaces()(connect(mapStateToProps, mapDispatchToProps)(DeploymentDetails));

src/components/pages/deployments/deploymentDetails/deploymentDetails.js

@@ -28,7 +28,7 @@ import { getPackageTypeTranslation, getConfigTypeTranslation, svgs, renderUndefi
 import { DeploymentDetailsGrid } from './deploymentDetailsGrid/deploymentDetailsGrid';
 import Config from 'app.config';
 
-import "./deploymentDetails.css";
+import "./deploymentDetails.scss";
 
 const closedModalState = {
   openModalName: undefined

src/components/pages/deployments/deploymentDetails/deploymentDetailsGrid/deploymentDetailsGridConfig.js

@@ -49,5 +49,5 @@ export const defaultDeploymentDetailsGridProps = {
   deltaRowDataMode: true,
   enableSorting: true,
   unSortIcon: true,
-  domLayout: 'autoHeight'
+  gridAutoHeight: true
 };

src/components/pages/deployments/deploymentsHome/deployments.container.js

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
-import { translate } from 'react-i18next';
+import { withNamespaces } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Deployments } from './deployments';
 import {
@@ -30,4 +30,4 @@ const mapDispatchToProps = dispatch => ({
   logEvent: diagnosticsModel => dispatch(appEpics.actions.logEvent(diagnosticsModel))
 });
 
-export const DeploymentsContainer = translate()(connect(mapStateToProps, mapDispatchToProps)(Deployments));
+export const DeploymentsContainer = withNamespaces()(connect(mapStateToProps, mapDispatchToProps)(Deployments));

src/components/pages/deployments/deploymentsHome/deployments.js

@@ -20,7 +20,7 @@ import { DeploymentsGrid } from './deploymentsGrid';
 import { DeploymentNewContainer } from './flyouts';
 import { svgs } from 'utilities';
 
-import './deployments.css';
+import './deployments.scss';
 
 const closedFlyoutState = { openFlyoutName: undefined };
 

src/components/pages/deployments/deploymentsHome/flyouts/deploymentNew/deploymentNew.container.js

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 import { connect } from 'react-redux';
-import { translate } from 'react-i18next';
+import { withNamespaces } from 'react-i18next';
 import { DeploymentNew } from './deploymentNew';
 import {
   getCreateDeploymentError,
@@ -61,4 +61,4 @@ const mapDispatchToProps = dispatch => ({
   fetchConfigTypes: () => dispatch(packagesEpics.actions.fetchConfigTypes())
 });
 
-export const DeploymentNewContainer = translate()(connect(mapStateToProps, mapDispatchToProps)(DeploymentNew));
+export const DeploymentNewContainer = withNamespaces()(connect(mapStateToProps, mapDispatchToProps)(DeploymentNew));

src/components/pages/deployments/deploymentsHome/flyouts/deploymentNew/deploymentNew.js

@@ -43,7 +43,7 @@ import {
   ThemedSvgContainer
 } from 'components/shared';
 
-import './deploymentNew.css';
+import './deploymentNew.scss';
 
 const isPositiveInteger = (str) => /^\+?(0|[1-9]\d*)$/.test(str) && str <= 2147483647;
 

src/components/pages/devices/devices.container.js

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 import { connect } from 'react-redux';
-import { translate } from 'react-i18next';
+import { withNamespaces } from 'react-i18next';
 import { Devices } from './devices';
 import {
   epics as devicesEpics,
@@ -34,4 +34,4 @@ const mapDispatchToProps = dispatch => ({
   logEvent: diagnosticsModel => dispatch(appEpics.actions.logEvent(diagnosticsModel))
 });
 
-export const DevicesContainer = translate()(connect(mapStateToProps, mapDispatchToProps)(Devices));
+export const DevicesContainer = withNamespaces()(connect(mapStateToProps, mapDispatchToProps)(Devices));

src/components/pages/devices/devices.js

@@ -22,7 +22,7 @@ import { DeviceNewContainer } from './flyouts/deviceNew';
 import { SIMManagementContainer } from './flyouts/SIMManagement';
 import { svgs } from 'utilities';
 
-import './devices.css';
+import './devices.scss';
 
 const closedFlyoutState = { openFlyoutName: undefined };
 

src/components/pages/devices/flyouts/SIMManagement/SIMManagement.container.js

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
-import { translate } from 'react-i18next';
+import { withNamespaces } from 'react-i18next';
 import { SIMManagement } from './SIMManagement';
 
-export const SIMManagementContainer = translate()(SIMManagement);
+export const SIMManagementContainer = withNamespaces()(SIMManagement);

src/components/pages/devices/flyouts/SIMManagement/SIMManagement.js

@@ -17,7 +17,7 @@ import {
 
 import Flyout from 'components/shared/flyout';
 
-import './SIMManagement.css';
+import './SIMManagement.scss';
 
 const Section = Flyout.Section;
 

src/components/pages/devices/flyouts/deviceDelete/deviceDelete.container.js

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 
 import { connect } from 'react-redux';
-import { translate } from 'react-i18next';
+import { withNamespaces } from 'react-i18next';
 import { DeviceDelete } from './deviceDelete';
 import { redux as deviceRedux } from 'store/reducers/devicesReducer';
 
@@ -10,4 +10,4 @@ const mapDispatchToProps = dispatch => ({
   deleteDevices: deviceIds => dispatch(deviceRedux.actions.deleteDevices(deviceIds))
 });
 
-export const DeviceDeleteContainer = translate()(connect(null, mapDispatchToProps)(DeviceDelete));
+export const DeviceDeleteContainer = withNamespaces()(connect(null, mapDispatchToProps)(DeviceDelete));