Tech 93/tweak eslint configuration (#522)

* Extend react-app and prettier ESLint settings instead of dhis2

* Specify React version for ESLint to prevent false lint warnings reg. deprecated methods

* Remove previous eslint config package

* Added more dependencies that were needed by `yarn lint`

* Added prettier dependency and config

* Switched to older version of ESLint plugin to fix incompatibility issues

* ESLint autofix

* Disabled ESLint rules that have debatable merit

* Allow fallthrough cases in switch because this is common practice in Redux

* Fixed straightforward lint errors:
- Removed unused variables
- Added React to scope where needed
- Fixed eqeqeq problems ( == instead of === )
- Removed useless escape character

* Removed redundant optionSet field-override
- All variables in the file were undefined so the code would not run
- The file was not being imported by the field-overrides index so it was not being used

* Added ESLint ignore instructions to files calling restricted global function "confirm"

* Switched to using the default switch case to return the default state
fixes "default-case" lint errors

* Added rel="noreferrer noopener" to link with target blank to fix "react/jsx-no-target-blank"

* Switched to static message because d2 is not in scope, so translation will fail

* Fixes react/no-direct-mutation-state error
- this.state.programRule action is a d2 model instance
- I tried creating a shallow copy and setting that as state but this gave problems with saving. It seems the model really does need to be mutated in-place for this to work.
- So in the end we now have code that is actually mutating state directly, but in a way the linter doesn't trip over

* Removed unused variables and tested functionality
- Removed a lot from this file
- So tested the app to see if the functionallity was not broken

* Restored no-param-reassign rule and placed eslint ignore comments
This was done after discussions with John Melin. It makes sense to have the rule in place because most of the time parameter re-assignment is a bad idea. For the few times, it is a good idea we can place eslint ignore comments.

* Prevent commits with lint errors

NOTE: I monkey tested all list and add/edit screens before merging and encountered no errors

.eslintrc

@@ -1,11 +1,21 @@
 {
-    "extends": "dhis2",
+    "extends": [
+        "react-app",
+        "prettier"
+    ],
+    "settings": {
+        "react": {
+            "version": "^15.3.1"
+        }
+    },
     "env": {
         "browser": true,
         "jest": true
     },
     "rules": {
         "no-param-reassign": [2, { "props": false }],
+        "no-fallthrough": "off",
+        "array-callback-return": "off",
         "import/no-extraneous-dependencies": 0,
         "no-unused-expressions": ["error", {
             "allowTernary": true,

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "es5"
+}

package.json

@@ -45,7 +45,13 @@
     "d3-scale": "^1.0.3",
     "enzyme": "^3.0.0",
     "enzyme-adapter-react-15": "^1.0.0",
-    "eslint-config-dhis2": "3.0.7",
+    "eslint": "^5.0.1",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-config-react-app": "^2.1.0",
+    "eslint-plugin-flowtype": "^2.49.3",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-jsx-a11y": "^5.0.1",
+    "eslint-plugin-react": "^7.10.0",
     "fbjs": "^0.8.8",
     "glob": "^7.1.1",
     "html-webpack-plugin": "^2.26.0",
@@ -61,6 +67,7 @@
     "node-pre-gyp": "^0.6.30",
     "node-sass": "4.9.0",
     "precommit-hook": "^3.0.0",
+    "prettier": "^1.13.7",
     "recompose": "^0.23.1",
     "redux-logger": "^3.0.6",
     "sass-loader": "^6.0.5",
@@ -101,6 +108,7 @@
   },
   "pre-commit": [
     "validate",
+    "lint",
     "test"
   ],
   "manifest.webapp": {

src/App/appStateStore.js

@@ -3,7 +3,7 @@ import { getInstance } from 'd2/lib/d2';
 import camelCaseToUnderscores from 'd2-utilizr/lib/camelCaseToUnderscores';
 import isObject from 'd2-utilizr/lib/isObject';
 import snackActions from '../Snackbar/snack.actions';
-import { curry, map, contains, __, compose, get, filter, uniq, keys } from 'lodash/fp';
+import { curry, map, contains, __, uniq, keys } from 'lodash/fp';
 import maintenanceModels from '../config/maintenance-models';
 import systemSettingsStore from './systemSettingsStore';
 

src/EditModel/BackButton.component.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import IconButton from 'material-ui/IconButton/IconButton';
 import addD2Context from 'd2-ui/lib/component-helpers/addD2Context';
-import { config } from 'd2/lib/d2';
 import modelToEditStore from '../EditModel/modelToEditStore';
 
 function BackButton(props, context) {
@@ -11,7 +10,10 @@ function BackButton(props, context) {
 
         if (!isDirty) {
             onClick(...params);
-        } else if (confirm(context.d2.i18n.getTranslation('abandon_unsaved_changes'))) {
+        } else if (
+            // eslint-disable-next-line no-restricted-globals
+            confirm(context.d2.i18n.getTranslation('abandon_unsaved_changes'))
+        ) {
             onClick(...params);
         }
     };

src/EditModel/CancelButton.component.js

@@ -19,6 +19,7 @@ function CancelButton(
         if (!shouldConfirm) {
             onClick(...params);
         } else if (
+            // eslint-disable-next-line no-restricted-globals
             confirm(context.d2.i18n.getTranslation('abandon_unsaved_changes'))
         ) {
             onClick(...params);

src/EditModel/SharingNotification.component.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import Translate from 'd2-ui/lib/i18n/Translate.mixin';
-import { config } from 'd2/lib/d2';
 import FontIcon from 'material-ui/FontIcon/FontIcon';
 import Paper from 'material-ui/Paper/Paper';
 import { withAuth } from "../utils/Auth";

src/EditModel/SingleModelStore.js

@@ -115,8 +115,9 @@ function cloneHandlerByObjectType(objectType, model) {
             }))
             break;
         }
+        default: 
+            return model;
     }
-    return model;
 }
 
 function loadModelFromD2(objectType, objectId) {
@@ -146,6 +147,7 @@ const singleModelStoreConfig = {
                 model.uuid = undefined;
                 //let server handle created date
                 model.created = undefined;
+                // eslint-disable-next-line no-param-reassign
                 model = cloneHandlerByObjectType(objectType, model);
                 this.setState(model);
             });

src/EditModel/event-program/EventActionButtons.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { bindActionCreators } from 'redux';
 import { saveEventProgram } from './actions';
 import { createConnectedFormActionButtonsForSchema } from '../FormActionButtons';

src/EditModel/event-program/EventProgramStepperContent.js

@@ -1,7 +1,8 @@
+import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import mapPropsStream from 'recompose/mapPropsStream';
-import { first, get, compose } from 'lodash/fp';
+import { first, compose } from 'lodash/fp';
 import { createStepperContentFromConfig } from '../stepper/stepper';
 import { activeStepSelector } from './selectors';
 import eventProgramStore from './eventProgramStore';

src/EditModel/event-program/assign-data-elements/AssignDataElements.js

@@ -4,7 +4,7 @@ import compose from 'recompose/compose';
 import GroupEditor from 'd2-ui/lib/group-editor/GroupEditor.component';
 import Paper from 'material-ui/Paper/Paper';
 import mapPropsStream from 'recompose/mapPropsStream';
-import { get, noop, first, getOr, __ } from 'lodash/fp';
+import { get, first, getOr, __ } from 'lodash/fp';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import withHandlers from 'recompose/withHandlers';
@@ -30,15 +30,11 @@ import {
 } from './actions';
 
 import programStore from '../eventProgramStore';
-import { withProgramStageFromProgramStage$ } from '../tracker-program/program-stages/utils';
 import { withRouter } from 'react-router';
-import { getProgramStage$ById } from '../tracker-program/program-stages/utils';
 import RenderTypeSelectField, { getRenderTypeOptions, DATA_ELEMENT_CLAZZ, MOBILE, DESKTOP } from '../render-types';
 
 const getFirstProgramStage = compose(first, get('programStages'));
 
-const firstProgramStage$ = programStore.map(getFirstProgramStage);
-
 // Use programStage$ prop if present, else use first programStage
 const programStage$ = props$ =>
     props$

src/EditModel/event-program/assign-data-elements/epics.js

@@ -9,7 +9,6 @@ import { combineEpics } from 'redux-observable';
 import {
     getOr,
     get,
-    set,
     map,
     find,
     compose,
@@ -20,7 +19,6 @@ import {
     __,
 } from 'lodash/fp';
 import { generateUid } from 'd2/lib/uid';
-import programStore from '../eventProgramStore';
 
 // getProgramStageToModify :: String -> ProgramStage[] -> ProgramStage
 export const getProgramStageToModify = (
@@ -96,7 +94,6 @@ const removeDataElementFromStage = store => action$ =>
     action$
         .ofType(PROGRAM_STAGE_DATA_ELEMENTS_REMOVE)
         .map(action => {
-            const state = store.getState();
             const programStageToEdit = getProgramStageByIdFromAction(
                 store,
                 action

src/EditModel/event-program/create-data-entry-form/Section.component.js

@@ -4,16 +4,13 @@ import { SortableElement } from 'react-sortable-hoc';
 import Heading from 'd2-ui/lib/headings/Heading.component';
 
 import FlatButton from 'material-ui/FlatButton';
-import TextField from 'material-ui/TextField';
 import Dialog from 'material-ui/Dialog';
 import IconButton from 'material-ui/IconButton';
 import FontIcon from 'material-ui/FontIcon';
 
 import DragHandle from './DragHandle.component';
 import SortableSectionDataList from './SortableSectionDataList.component';
 
-const maxNameLength = 230;
-
 const styles = {
     sectionContainer: {
         width: '100%',

src/EditModel/event-program/create-data-entry-form/SectionForm.component.js

@@ -1,23 +1,11 @@
 import React, { Component, PropTypes } from 'react';
-import FontIcon from 'material-ui/FontIcon';
-import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
-import { concat, sortBy, find, isEqual, get, getOr, pull, without, flatten, filter, findIndex, negate, difference } from 'lodash/fp';
-import DragHandle from './DragHandle.component';
-import IconButton from 'material-ui/IconButton';
-import TextField from 'material-ui/TextField';
-import FlatButton from 'material-ui/FlatButton';
-import Dialog from 'material-ui/Dialog';
+import { arrayMove } from 'react-sortable-hoc';
+import { sortBy, find, isEqual, getOr, pull, flatten, filter, findIndex, negate, difference } from 'lodash/fp';
 import Snackbar from 'material-ui/Snackbar';
 
-import Section from './Section.component';
 import SectionList from './SectionList.component';
-import SortableSectionDataList from './SortableSectionDataList.component';
 import AddOrEditSection from './AddOrEditSection.component';
-import Heading from 'd2-ui/lib/headings/Heading.component';
 import DataElementPicker from './DataElementPicker.component';
-import { grey300, grey800 } from 'material-ui/styles/colors';
-
-const maxNameLength = 230;
 
 const styles = {
     sectionForm: {

src/EditModel/event-program/create-data-entry-form/SectionList.component.js

@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import { SortableContainer } from 'react-sortable-hoc';
 import { isEqual } from 'lodash/fp';
 

src/EditModel/event-program/create-data-entry-form/epics.js

@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 import { combineEpics } from 'redux-observable';
-import { get, getOr, compose, isEqual, find, findIndex, maxBy, filter, entries, sortBy, map } from 'lodash/fp';
+import { get, getOr, compose, isEqual, findIndex, maxBy, filter, sortBy } from 'lodash/fp';
 import { generateUid } from 'd2/lib/uid';
 import { getInstance } from 'd2/lib/d2';
 import { getProgramStageToModify } from '../assign-data-elements/epics';

src/EditModel/event-program/data-entry-form/EditCustomFormProgramStage.js

@@ -1,26 +1,23 @@
 import React from 'react';
 import { Observable } from 'rxjs';
-import log from 'loglevel';
 import FlatButton from 'material-ui/FlatButton/FlatButton';
 import SelectField from 'material-ui/SelectField/SelectField';
 import MenuItem from 'material-ui/MenuItem/MenuItem';
 import Paper from 'material-ui/Paper/Paper';
 import TextField from 'material-ui/TextField/TextField';
 import LoadingMask from 'd2-ui/lib/loading-mask/LoadingMask.component';
 import Action from 'd2-ui/lib/action/Action';
-import pure from 'recompose/pure';
 import mapPropsStream from 'recompose/mapPropsStream';
-import { get, compose, first, getOr, noop, isEqual, find, curry } from 'lodash/fp';
+import { compose, getOr, noop, curry } from 'lodash/fp';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { dataEntryFormChanged, dataEntryFormRemove } from './actions';
-import snackActions from '../../../Snackbar/snack.actions';
 import eventProgramStore from '../eventProgramStore';
 import CKEditor from './CKEditor';
 import '../../../../scss/EditModel/EditDataEntryFormProgramStage.scss';
 import { getProgramStageDataElementsByStageId } from "../notifications/selectors";
 import PaletteSection from './PaletteSection';
-import { bindFuncsToKeys, moveEditorSelection, processFormData, insertElement as insElem } from "./dataEntryFormUtils";
+import { bindFuncsToKeys, processFormData, insertElement as insElem } from "./dataEntryFormUtils";
 import PropTypes from 'prop-types';
 
 const programStageDataElementWithProgramStageId = programStageId => programStageDataElement => ({

src/EditModel/event-program/data-entry-form/EditCustomRegistrationForm.js

@@ -1,24 +1,19 @@
 import React from 'react';
-import { Observable } from 'rxjs';
-import log from 'loglevel';
 import FlatButton from 'material-ui/FlatButton/FlatButton';
 import SelectField from 'material-ui/SelectField/SelectField';
 import MenuItem from 'material-ui/MenuItem/MenuItem';
 import Paper from 'material-ui/Paper/Paper';
 import TextField from 'material-ui/TextField/TextField';
 import LoadingMask from 'd2-ui/lib/loading-mask/LoadingMask.component';
 import Action from 'd2-ui/lib/action/Action';
-import pure from 'recompose/pure';
 import mapPropsStream from 'recompose/mapPropsStream';
-import { get, compose, first, getOr, noop, isEqual, find, curry } from 'lodash/fp';
+import { compose, getOr, noop, curry } from 'lodash/fp';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { programDataEntryFormChanged, programDataEntryFormRemove } from './actions';
-import snackActions from '../../../Snackbar/snack.actions';
 import eventProgramStore from '../eventProgramStore';
 import CKEditor from './CKEditor';
 import '../../../../scss/EditModel/EditDataEntryFormProgramStage.scss';
-import { getProgramStageDataElementsByStageId } from "../notifications/selectors";
 import PaletteSection from './PaletteSection';
 import { bindFuncsToKeys, processFormData, insertElement as insElem } from "./dataEntryFormUtils";
 import PropTypes from 'prop-types';

src/EditModel/event-program/data-entry-form/__tests__/dataEntryFormUtils.spec.js

@@ -1,13 +1,6 @@
 import * as utils from '../dataEntryFormUtils';
 
 describe('dataEntryFormUtils', () => {
-    let editor = {
-        insertHtml: jest.fn(),
-        getSelection: jest.fn(() => ({getRanges: jest.fn(() => ([{
-            moveToElementEditablePosition: jest.fn(),
-            endContainer: {}
-        }]))}))
-    }
     let elements;
     const initialHTML =
         '<p><input id="ZzYYXq4fJie-FqlgKAG8HOu-val" name="entryfield" title="MCH Measles dose" value="[ MCH Measles dose ]"/><input id="ZzYYXq4fJie-hDZbpskhqDd-val" name="entryfield" title="MCH HIV Test Type" value="[ MCH HIV Test Type ]"/><input id="ZzYYXq4fJie-BeynU4L6VCQ-val" name="entryfield" title="MCH Results given to caretaker" value="[ MCH Results given to caretaker ]"/></p>';
@@ -33,7 +26,7 @@ describe('dataEntryFormUtils', () => {
     describe('processForm()', () => {
         test('it should work with empty formData', () => {
             const dataEntryForm = initialHTML;
-            const { usedIds, outHtml } = utils.processFormData(
+            const { outHtml } = utils.processFormData(
                 dataEntryForm,
                 elements,
                 utils.elementPatterns.combinedIdPattern

src/EditModel/event-program/data-entry-form/dataEntryFormUtils.js

@@ -1,5 +1,3 @@
-import log from 'loglevel';
-
 const inputPattern = /<input.*?\/>/gi;
 
 /* AttributeIdPattern is used in tracker-programs Custom registration forms

src/EditModel/event-program/eventProgramStore.js

@@ -1,12 +1,10 @@
 import Store from 'd2-ui/lib/store/Store';
-import { equals, first, negate, some, get, compose, find, identity, map, __, concat, includes, reduce, findIndex, isObject, keys, values, flatten } from 'lodash/fp';
+import { equals, some, get, compose, identity, map, __, concat, isObject, values, flatten } from 'lodash/fp';
 import { getOwnedPropertyJSON } from 'd2/lib/model/helpers/json';
 
 // ___ programSelector :: StoreState -> Model<Program>
 const programSelector = get('program');
 
-const progamDataEntrySelector = get('program.dataEntryForm');
-
 // ___ programStagesSelector :: StoreState -> Array<Model<ProgramStage>>
 const programStagesSelector = get('programStages');
 
@@ -30,9 +28,6 @@ const modelToJson = getOwnedPropertyJSON;
 // ___ isProgramStageDirty :: Object<StoreState> -> Object<{programStages}> -> Boolean
 const isProgramStageDirty = compose(some(checkIfDirty), programStagesSelector);
 
-// ___ getIdForFirstProgramStage : Object<StoreState> -> Object<{programStages}> -> String
-const getIdForFirstProgramStage = compose(get('id'), first, programStagesSelector);
-
 // ___ hasDirtyProgramStageSections :: Object<StoreState> -> Boolean
 //const hasDirtyProgramStageSections = compose(some(checkIfDirty), programStageSectionsSelector);
 const hasDirtyProgramStageSections = compose(some(checkIfDirty), flatten, values, programStageSectionsSelector)

src/EditModel/event-program/metadataimport-helpers.js

@@ -1,4 +1,4 @@
-import { get, getOr, first, map, compose, groupBy, concat, reduce, flatten, filter, identity } from 'lodash/fp';
+import { get, getOr, first, map, compose, groupBy, flatten, filter } from 'lodash/fp';
 
 const importStatus = {
     OK: 'OK',

src/EditModel/event-program/notifications/EventProgramNotifications.js

@@ -1,7 +1,6 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { __, first, get } from 'lodash/fp';
 import withState from 'recompose/withState';
 import compose from 'recompose/compose';
 import withHandlers from 'recompose/withHandlers';

src/EditModel/event-program/notifications/NotificationDialog.js

@@ -1,7 +1,6 @@
-import React, { PropTypes, Component } from 'react';
+import React, { PropTypes } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { get } from 'lodash/fp';
 import branch from 'recompose/branch';
 import renderNothing from 'recompose/renderNothing';
 import { modelToEditSelector } from './selectors';

src/EditModel/event-program/notifications/NotificationList.js

@@ -5,7 +5,6 @@ import AddIcon from 'material-ui/svg-icons/content/add';
 import getContext from 'recompose/getContext';
 import compose from 'recompose/compose';
 import branch from 'recompose/branch';
-import withContext from 'recompose/withContext';
 import renderNothing from 'recompose/renderNothing';
 
 function AddButton({ onAddClick }) {