fix: babel-preset-env (#190)

* changed do @babel/preset-env

* runned lint fix

* added beforeEach in ui-config-store-test

frontend/.babelrc

@@ -1,12 +1,12 @@
 {
-  "presets": ["react", ["es2015", {"modules": false}], "stage-2"],
-  "plugins": ["transform-decorators-legacy"],
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    "@babel/plugin-proposal-class-properties"
+  ],
   "env": {
-    "development": {
-      "presets": ["react-hmre"]
-    },
     "test": {
-      "plugins": ["transform-es2015-modules-commonjs"]
+      "plugins": ["@babel/plugin-transform-modules-commonjs"]
     }
   }
 }

frontend/jest-setup.js

@@ -1,5 +1,6 @@
 'use strict';
 
 // We have set timezone to make sure tests are correct
-
-process.TZ = 'UTC';
+module.exports = () => {
+    process.env.TZ = 'UTC';
+};

frontend/package.json

@@ -40,15 +40,15 @@
   "main": "./index.js",
   "dependencies": {},
   "devDependencies": {
-    "babel-core": "^6.14.0",
-    "babel-eslint": "^9.0.0",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-es2015": "^6.14.0",
-    "babel-preset-react": "^6.11.1",
-    "babel-preset-react-hmre": "^1.1.1",
-    "babel-preset-stage-0": "^6.5.0",
-    "babel-preset-stage-2": "^6.13.0",
+    "@babel/core": "^7.6.2",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-decorators": "^7.6.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.6.0",
+    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^2.1.1",
     "debug": "^4.1.1",
@@ -63,7 +63,7 @@
     "fetch-mock": "^7.0.2",
     "identity-obj-proxy": "^3.0.0",
     "immutable": "^3.8.1",
-    "jest": "^23.5.0",
+    "jest": "^24.9.0",
     "mini-css-extract-plugin": "^0.4.1",
     "node-sass": "^4.5.3",
     "normalize.css": "^8.0.0",
@@ -97,7 +97,7 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
       "\\.(css|scss)$": "identity-obj-proxy"
     },
-    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js",
+    "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"],
     "setupFiles": [
       "<rootDir>/jest-setup.js"
     ],

frontend/src/component/api/show-api-details-container.jsx

@@ -11,4 +11,7 @@ const mapStateToProps = state => ({
     uiConfig: state.uiConfig.toJS(),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(ShowApiDetailsComponent);
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(ShowApiDetailsComponent);

frontend/src/component/application/application-edit-component.js

@@ -90,34 +90,33 @@ class ClientApplications extends PureComponent {
                         <h6> Toggles</h6>
                         <hr />
                         <List>
-                            {seenToggles.map(
-                                ({ name, description, enabled, notFound }, i) =>
-                                    notFound ? (
-                                        <ListItem twoLine key={i}>
-                                            {hasPermission(CREATE_FEATURE) ? (
-                                                <ListItemContent icon={'report'} subtitle={'Missing, want to create?'}>
-                                                    <Link to={`/features/create?name=${name}`}>{name}</Link>
-                                                </ListItemContent>
-                                            ) : (
-                                                <ListItemContent icon={'report'} subtitle={'Missing'}>
-                                                    {name}
-                                                </ListItemContent>
-                                            )}
-                                        </ListItem>
-                                    ) : (
-                                        <ListItem twoLine key={i}>
-                                            <ListItemContent
-                                                icon={
-                                                    <span>
-                                                        <Switch disabled checked={!!enabled} />
-                                                    </span>
-                                                }
-                                                subtitle={shorten(description, 60)}
-                                            >
-                                                <Link to={`/features/view/${name}`}>{shorten(name, 50)}</Link>
+                            {seenToggles.map(({ name, description, enabled, notFound }, i) =>
+                                notFound ? (
+                                    <ListItem twoLine key={i}>
+                                        {hasPermission(CREATE_FEATURE) ? (
+                                            <ListItemContent icon={'report'} subtitle={'Missing, want to create?'}>
+                                                <Link to={`/features/create?name=${name}`}>{name}</Link>
                                             </ListItemContent>
-                                        </ListItem>
-                                    )
+                                        ) : (
+                                            <ListItemContent icon={'report'} subtitle={'Missing'}>
+                                                {name}
+                                            </ListItemContent>
+                                        )}
+                                    </ListItem>
+                                ) : (
+                                    <ListItem twoLine key={i}>
+                                        <ListItemContent
+                                            icon={
+                                                <span>
+                                                    <Switch disabled checked={!!enabled} />
+                                                </span>
+                                            }
+                                            subtitle={shorten(description, 60)}
+                                        >
+                                            <Link to={`/features/view/${name}`}>{shorten(name, 50)}</Link>
+                                        </ListItemContent>
+                                    </ListItem>
+                                )
                             )}
                         </List>
                     </Cell>
@@ -125,27 +124,26 @@ class ClientApplications extends PureComponent {
                         <h6>Implemented strategies</h6>
                         <hr />
                         <List>
-                            {strategies.map(
-                                ({ name, description, notFound }, i) =>
-                                    notFound ? (
-                                        <ListItem twoLine key={`${name}-${i}`}>
-                                            {hasPermission(CREATE_STRATEGY) ? (
-                                                <ListItemContent icon={'report'} subtitle={'Missing, want to create?'}>
-                                                    <Link to={`/strategies/create?name=${name}`}>{name}</Link>
-                                                </ListItemContent>
-                                            ) : (
-                                                <ListItemContent icon={'report'} subtitle={'Missing'}>
-                                                    {name}
-                                                </ListItemContent>
-                                            )}
-                                        </ListItem>
-                                    ) : (
-                                        <ListItem twoLine key={`${name}-${i}`}>
-                                            <ListItemContent icon={'extension'} subtitle={shorten(description, 60)}>
-                                                <Link to={`/strategies/view/${name}`}>{shorten(name, 50)}</Link>
+                            {strategies.map(({ name, description, notFound }, i) =>
+                                notFound ? (
+                                    <ListItem twoLine key={`${name}-${i}`}>
+                                        {hasPermission(CREATE_STRATEGY) ? (
+                                            <ListItemContent icon={'report'} subtitle={'Missing, want to create?'}>
+                                                <Link to={`/strategies/create?name=${name}`}>{name}</Link>
                                             </ListItemContent>
-                                        </ListItem>
-                                    )
+                                        ) : (
+                                            <ListItemContent icon={'report'} subtitle={'Missing'}>
+                                                {name}
+                                            </ListItemContent>
+                                        )}
+                                    </ListItem>
+                                ) : (
+                                    <ListItem twoLine key={`${name}-${i}`}>
+                                        <ListItemContent icon={'extension'} subtitle={shorten(description, 60)}>
+                                            <Link to={`/strategies/view/${name}`}>{shorten(name, 50)}</Link>
+                                        </ListItemContent>
+                                    </ListItem>
+                                )
                             )}
                         </List>
                     </Cell>

frontend/src/component/application/application-edit-container.js

@@ -16,9 +16,12 @@ const mapStateToProps = (state, props) => {
     };
 };
 
-const Constainer = connect(mapStateToProps, {
-    fetchApplication,
-    storeApplicationMetaData,
-})(ApplicationEdit);
+const Constainer = connect(
+    mapStateToProps,
+    {
+        fetchApplication,
+        storeApplicationMetaData,
+    }
+)(ApplicationEdit);
 
 export default Constainer;

frontend/src/component/application/application-list-container.js

@@ -4,6 +4,9 @@ import { fetchAll } from './../../store/application/actions';
 
 const mapStateToProps = state => ({ applications: state.applications.get('list').toJS() });
 
-const Container = connect(mapStateToProps, { fetchAll })(ApplicationList);
+const Container = connect(
+    mapStateToProps,
+    { fetchAll }
+)(ApplicationList);
 
 export default Container;

frontend/src/component/archive/archive-list-container.js

@@ -11,6 +11,9 @@ const mapDispatchToProps = {
     updateSetting: updateSettingForGroup('feature'),
 };
 
-const ArchiveListContainer = connect(mapStateToProps, mapDispatchToProps)(FeatureListComponent);
+const ArchiveListContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(FeatureListComponent);
 
 export default ArchiveListContainer;

frontend/src/component/client-instance/client-instance-container.js

@@ -4,6 +4,9 @@ import { fetchClientInstances } from '../../store/client-instance-actions';
 
 const mapStateToProps = state => ({ clientInstances: state.clientInstances.toJS() });
 
-const StrategiesContainer = connect(mapStateToProps, { fetchClientInstances })(ClientInstances);
+const StrategiesContainer = connect(
+    mapStateToProps,
+    { fetchClientInstances }
+)(ClientInstances);
 
 export default StrategiesContainer;

frontend/src/component/common/index.js

@@ -180,7 +180,7 @@ export function calc(value, total, decimal) {
         }
     });
 
-    return (value / total * 100).toFixed(decimal);
+    return ((value / total) * 100).toFixed(decimal);
 }
 export function getDisplayName(WrappedComponent) {
     return WrappedComponent.displayName || WrappedComponent.name || 'Component';

frontend/src/component/error/error-container.jsx

@@ -13,4 +13,7 @@ const mapStateToProps = state => ({
         .reverse(),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(ErrorComponent);
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(ErrorComponent);

frontend/src/component/feature/form/form-add-feature-container.jsx

@@ -70,6 +70,9 @@ const prepare = (methods, dispatch, ownProps) => {
 };
 const actions = createActions({ id: ID, prepare });
 
-const FormAddContainer = connect(mapStateToProps, actions)(AddFeatureComponent);
+const FormAddContainer = connect(
+    mapStateToProps,
+    actions
+)(AddFeatureComponent);
 
 export default FormAddContainer;

frontend/src/component/feature/form/form-update-feature-container.jsx

@@ -71,4 +71,7 @@ const actions = createActions({
     prepare,
 });
 
-export default connect(mapStateToProps, actions)(UpdateFeatureToggleComponent);
+export default connect(
+    mapStateToProps,
+    actions
+)(UpdateFeatureToggleComponent);

frontend/src/component/feature/form/form-view-feature-container.jsx

@@ -36,4 +36,7 @@ const actions = createActions({
     prepare,
 });
 
-export default connect(mapStateToProps, actions)(ViewFeatureToggleComponent);
+export default connect(
+    mapStateToProps,
+    actions
+)(ViewFeatureToggleComponent);

frontend/src/component/feature/list-container.jsx

@@ -28,9 +28,8 @@ export const mapStateToPropsConfigurable = isFeature => state => {
     }
 
     if (settings.sort === 'enabled') {
-        features = features.sort(
-            (a, b) =>
-                // eslint-disable-next-line
+        features = features.sort((a, b) =>
+            // eslint-disable-next-line
             a.enabled === b.enabled ? 0 : a.enabled ? -1 : 1
         );
     } else if (settings.sort === 'created') {
@@ -78,6 +77,9 @@ const mapDispatchToProps = {
     updateSetting: updateSettingForGroup('feature'),
 };
 
-const FeatureListContainer = connect(mapStateToProps, mapDispatchToProps)(FeatureListComponent);
+const FeatureListContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(FeatureListComponent);
 
 export default FeatureListContainer;

frontend/src/component/feature/metric-component.jsx

@@ -25,7 +25,9 @@ StrategyChipItem.propTypes = {
 const StrategiesList = ({ strategies }) => (
     <div style={{ verticalAlign: 'middle', paddingTop: '14px' }}>
         With {strategies.length > 1 ? 'strategies' : 'strategy'}{' '}
-        {strategies.map((strategy, i) => <StrategyChipItem key={i} strategy={strategy} />)}
+        {strategies.map((strategy, i) => (
+            <StrategyChipItem key={i} strategy={strategy} />
+        ))}
     </div>
 );
 StrategiesList.propTypes = {

frontend/src/component/feature/progress.jsx

@@ -93,7 +93,7 @@ class Progress extends Component {
         const diameter = Math.PI * 2 * radius;
         const progressStyle = {
             strokeDasharray: `${diameter}px ${diameter}px`,
-            strokeDashoffset: `${(100 - this.state.percentage) / 100 * diameter}px`,
+            strokeDashoffset: `${((100 - this.state.percentage) / 100) * diameter}px`,
         };
 
         return isFallback ? (

frontend/src/component/feature/variant/update-variant-component.jsx

@@ -38,7 +38,7 @@ class UpdateVariantComponent extends Component {
     addVariant = (e, variants) => {
         e.preventDefault();
         const size = variants.length + 1;
-        const percentage = parseInt(1 / size * 100);
+        const percentage = parseInt((1 / size) * 100);
         const variant = {
             name: '',
             weight: percentage,
@@ -53,7 +53,7 @@ class UpdateVariantComponent extends Component {
         e.preventDefault();
         const variants = this.props.input.variants;
         const size = variants.length - 1;
-        const percentage = parseInt(1 / size * 100);
+        const percentage = parseInt((1 / size) * 100);
         this.updateWeight(percentage, size);
         this.props.removeVariant(index);
     };

frontend/src/component/feature/variant/update-variant-container.jsx

@@ -64,4 +64,7 @@ const actions = createActions({
     prepare,
 });
 
-export default connect(mapStateToProps, actions)(UpdateFeatureToggleComponent);
+export default connect(
+    mapStateToProps,
+    actions
+)(UpdateFeatureToggleComponent);

frontend/src/component/history/history-container.js

@@ -9,6 +9,9 @@ const mapStateToProps = state => {
     };
 };
 
-const HistoryListContainer = connect(mapStateToProps, { fetchHistory })(HistoryComponent);
+const HistoryListContainer = connect(
+    mapStateToProps,
+    { fetchHistory }
+)(HistoryComponent);
 
 export default HistoryListContainer;

frontend/src/component/history/history-list-container.jsx

@@ -11,8 +11,11 @@ const mapStateToProps = state => {
     };
 };
 
-const HistoryListContainer = connect(mapStateToProps, {
-    updateSetting: updateSettingForGroup('history'),
-})(HistoryListToggleComponent);
+const HistoryListContainer = connect(
+    mapStateToProps,
+    {
+        updateSetting: updateSettingForGroup('history'),
+    }
+)(HistoryListToggleComponent);
 
 export default HistoryListContainer;

frontend/src/component/history/history-list-toggle-container.jsx

@@ -18,8 +18,11 @@ const mapStateToProps = (state, props) => ({
     history: getHistoryFromToggle(state, props.toggleName),
 });
 
-const HistoryListToggleContainer = connect(mapStateToProps, {
-    fetchHistoryForToggle,
-})(HistoryListToggleComponent);
+const HistoryListToggleContainer = connect(
+    mapStateToProps,
+    {
+        fetchHistoryForToggle,
+    }
+)(HistoryListToggleComponent);
 
 export default HistoryListToggleContainer;

frontend/src/component/menu/header.jsx

@@ -49,4 +49,7 @@ class HeaderComponent extends PureComponent {
     }
 }
 
-export default connect(state => ({ uiConfig: state.uiConfig.toJS() }), { fetchUIConfig })(HeaderComponent);
+export default connect(
+    state => ({ uiConfig: state.uiConfig.toJS() }),
+    { fetchUIConfig }
+)(HeaderComponent);

frontend/src/component/strategies/edit-container.js

@@ -57,4 +57,7 @@ const actions = createActions({
     prepare,
 });
 
-export default connect(mapStateToProps, actions)(AddStrategy);
+export default connect(
+    mapStateToProps,
+    actions
+)(AddStrategy);

frontend/src/component/strategies/list-container.jsx

@@ -22,6 +22,9 @@ const mapDispatchToProps = dispatch => ({
     fetchStrategies: () => fetchStrategies()(dispatch),
 });
 
-const StrategiesListContainer = connect(mapStateToProps, mapDispatchToProps)(StrategiesListComponent);
+const StrategiesListContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(StrategiesListComponent);
 
 export default StrategiesListContainer;

frontend/src/component/strategies/strategy-details-container.js

@@ -22,10 +22,13 @@ const mapStateToProps = (state, props) => {
     };
 };
 
-const Constainer = connect(mapStateToProps, {
-    fetchStrategies,
-    fetchApplications: fetchAll,
-    fetchFeatureToggles,
-})(ShowStrategy);
+const Constainer = connect(
+    mapStateToProps,
+    {
+        fetchStrategies,
+        fetchApplications: fetchAll,
+        fetchFeatureToggles,
+    }
+)(ShowStrategy);
 
 export default Constainer;

frontend/src/component/user/authentication-container.jsx

@@ -12,4 +12,7 @@ const mapStateToProps = state => ({
     user: state.user.toJS(),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(AuthenticationComponent);
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(AuthenticationComponent);

frontend/src/component/user/logout-container.jsx

@@ -8,4 +8,7 @@ const mapDispatchToProps = {
 
 const mapStateToProps = () => ({});
 
-export default connect(mapStateToProps, mapDispatchToProps)(LogoutComponent);
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(LogoutComponent);

frontend/src/component/user/show-user-container.jsx

@@ -13,4 +13,7 @@ const mapStateToProps = state => ({
     location: state.settings ? state.settings.toJS().location : {},
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(ShowUserComponent);
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(ShowUserComponent);

frontend/src/jsconfig.json

@@ -1,5 +0,0 @@
-{
-  "compilerOptions": {
-    "experimentalDecorators": true
-  }
-}

frontend/src/page/features/show.js

@@ -9,7 +9,10 @@ export default class Features extends PureComponent {
     };
 
     render() {
-        const { match: { params }, history } = this.props;
+        const {
+            match: { params },
+            history,
+        } = this.props;
         return <ViewFeatureToggle featureToggleName={params.name} activeTab={params.activeTab} history={history} />;
     }
 }

frontend/src/setupTests.js

@@ -2,3 +2,4 @@ import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
 configure({ adapter: new Adapter() });
+process.env.TZ = 'UTC';

frontend/src/store/ui-config/__tests__/ui-config-store.test.js

@@ -1,6 +1,10 @@
 import reducer from '../index';
 import { receiveConfig } from '../actions';
 
+beforeEach(() => {
+    localStorage.clear();
+});
+
 test('should be default state', () => {
     const state = reducer(undefined, {});
     expect(state.toJS()).toMatchSnapshot();