[rnoz] Follow up (#17)

* Audit fixes

* Pre-commit lint hook, docker image, minor fixes

* Validated features working on mac. Sorted the information given in readme

* Add docker section to readme, updated snapshots

* Apply automatic lint fixes. Add .eslintignore

* Include linting into ci

* Simplifty tray setup. Fix icons for macOS

* Replace desktopIdle with default electron powerMonitor

* Minor refactoring for idle timeout logic

* Fix issue with startup on windows when userDir does not yet exists

* Fix hide/show in tray

* Slightly improve the way subtasks are displayed

* Fix the way custom fields are displayed

* Remove unused files

* Fix linting issues

* Update snapshot and add powerMonitor to the electron mock

* Bump dependencies

* stack.yml -> docker-compose.yml

* Unsub from ipc events. Fix bug with timer animation when resumed from tray

* Fix eslint setup. Auto lint fixes

* Update @testing-library. Update snapshots. Fix links on about page

* Fix tests for Copyrights.jsx

* Fix tests for DragArea

* Fix tests for textArea

* Fix tests for DatePicker

* Fix tests for infinitescroll

* Fixed tests for comments section

* Fix tests for AboutPage

* Fix tests for Navbar

* Fix tests for progressbar

* Fix tests for IssuesTable, OptionsBlock

* Fix tests for issues actions

* Fix styles for ColumnHeadersSelect

* Fix tests for Button

* Fix tests for TimeEntries

* Fix tests for SummaryPage

* Fix tests for markdowneditor

* Fix tests for AppView

* Fix tests for LoginView

* Fix tests fro the IssueDetailsPage

* Fix tests for timer

* Small fix for the markdown editor test

* Partially fixed linting errors

* Fix linting issues

* Fix tests

* Fix layout for the custom fields when there are no subtasks

* Fix login view mode checkbox

* Fix timer

* Fix settings event subscription

Author: Spring3

.circleci/config.yml

@@ -1,13 +1,34 @@
 version: 2
 jobs:
-  build:
+  lint:
     working_directory: ~/redshape
     docker:
       - image: circleci/node:10.15.3
     steps:
       - checkout
       - restore_cache:
           key: dependency-cache-{{ .Branch }}-{{ checksum "package.json" }}
+      - run: 'sudo apt install libxss-dev pkg-config'
+      - run:
+          name: Install Dependencies
+          command: 'npm install'
+      - save_cache:
+          key: dependency-cache-{{ .Branch }}-{{ checksum "package.json" }}
+          paths:
+            - ./node_modules
+      - run:
+          name: 'Linting'
+          command: 'npm run lint'
+
+  test:
+    working_directory: ~/redshape
+    docker:
+      - image: circleci/node:10.15.3
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ .Branch }}-{{ checksum "package.json" }}
+      - run: 'sudo apt install libxss-dev libxext-dev libxtst6 libnss3 libgtk-3-0 libgtkextra-dev libasound2'
       - run:
           name: Install Dependencies
           command: 'npm install'
@@ -18,4 +39,10 @@ jobs:
       - run:
           name: Coverage
           command: 'npm test'
-      
+
+workflows:
+  version: 2
+  test:
+    jobs:
+      - lint
+      - test

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+    "parser": "babel-eslint",
     "env": {
         "browser": true,
         "es6": true,
@@ -27,9 +28,48 @@
         "no-underscore-dangle": [ "error", {
             "allow": ["__initialize", "__reset"]
         }],
+        "max-len": ["error", { "code": 120, "ignoreComments": true }],
+        "no-restricted-syntax": "off",
         "camelcase": [ "error", {
-            "allow": ["api_key"]
+            "allow": [
+                "api_key",
+                "time_entry",
+                "spent_on",
+                "issue_id",
+                "activity_id",
+                "user_id",
+                "spent_hours",
+                "total_spent_hours",
+                "time_entries",
+                "project_id",
+                "tracker_id",
+                "status_id",
+                "assigned_to_id",
+                "author_id",
+                "due_date",
+                "created_on",
+                "priority_id",
+                "private_notes",
+                "total_count",
+                "estimated_duration",
+                "estimated_hours",
+                "done_ratio",
+                "assigned_to",
+                "start_date",
+                "custom_fields",
+                "closed_on",
+                "progress_info"
+            ]
         }],
+        "jsx-a11y/label-has-associated-control": "off",
+        "jsx-a11y/anchor-is-valid": "off",
+        "react/no-array-index-key": "off",
+        "no-mixed-operators": "off",
+        "react/forbid-prop-types": "off",
+        "react/require-default-props": "off",
+        "react/jsx-props-no-spreading": "off",
+        "max-classes-per-file": "off",
+        "no-use-before-define": "off",
         "jsx-a11y/label-has-for": [ 2, {
             "required": {
                 "every": [ "nesting", "id" ]

README.md

@@ -5,17 +5,11 @@
 
 A time tracker for [Redmine](https://www.redmine.org) built on [Electron](https://github.com/electron/electron).
 
-> This repo is a fork of the original project. Have a look to the section `rNoz changes` to see the new features.
->
-> I would like to integrate these changes in the original one, but until then, I use my own repo.
->
-> Acknowledgements: Daniyil Vasylenko and Group4Layers (see the section `Acknowledgements`)
-
 Re-designs the way tasks, task info, tracked time and communication is done on redmine.
 
 The project was originally developed for a MVP portfolio showcase, but there is some roadmap planned with new features that might be added once I find enough of free time.
 
-Thanks for using, or considering to use this project. I would love to hear some feedback as well as your suggestions and thoughts about what could be improved. If you have something to say, don't hesitate to [send me an email](mailto:redshape.app@gmail.com).
+Thanks for using, or considering to use this project.
 
 ![Redshape Screenshot](https://user-images.githubusercontent.com/4171202/58926139-bbd6df00-8752-11e9-92bb-ddfdb5bce33d.png)
 
@@ -41,14 +35,17 @@ Download the latest [Redshape release](https://github.com/Spring3/redshape/relea
 
 The application will automatically update when a new release is available.
 
-## License
-[GPL-3.0](https://github.com/Spring3/redshape/blob/master/LICENSE.md)
+## Development
 
-Created by [Daniyil Vasylenko](https://github.com/Spring3)
+If you don't have access to a deployed instance of redmine, you can now run it in docker
 
-## Contributors
+Unfortuantely, you will have to configure it then yourself
 
-rNoz <rnoz.commits@gmail.com> (Group4Layers member).
+```
+docker-compose -f docker-compose.yml up
+```
+
+Then after you run the project with `npm run dev`, use `http://localhost` as redmine endpoint on the login form and provide the credentials or the API token 
 
 ## FAQ
 
@@ -61,155 +58,29 @@ Please ask your Redmine admin user to check if it's enabled in `Administration -
 #### - My antivirus / Defender / Mac OS warns that it's not safe to run this app
 Mac OS build was signed by a **self-signed certificate**, while Windows and Linux builds **were not signed at all**. In such case, you will see this warnings upon download or running the application / installation, saying that this app is not safe to run or that it was provided by an unknown developer and is not safe to run.
 
-## rNoz changes
-
-### Auth
-
-- Login accepts both API or Username+Password as login method:
-
-  ![](docs/changes/login_mode_api.png)
-
-### Durations
-
-- Duration: you can use hours, and it is rounded as it will be used in Redmine
-
-  ![](docs/changes/accept_hours.png)
-
-- Duration: hours are not positive enough (15s rounded => 0)
-
-  ![](docs/changes/error_nonpositive_enough.png)
-
-- Duration: empty
-
-  ![](docs/changes/error_empty.png)
-
-- Duration: negative
-
-  ![](docs/changes/error_negative.png)
-
-- Duration: duration formats (2 examples)
-
-  ![](docs/changes/accept_duration_1.png)
-
-  ![](docs/changes/accept_duration_2.png)
-
-- Time Entries are casted to duration formats when editing. For example, this:
-
-  ![](docs/changes/timeentries.png)
-
-  When it is clicked, it is automatically converted to the most comfortable duration format:
-
-  ![](docs/changes/timeentries_modal_duration.png)
-
-- When tracking an issue:
-
-  ![](docs/changes/timer.png)
-
-  When it is stopped, it is properly filled:
-
-  ![](docs/changes/timer_stop_modal_duration.png)
-
-- Added info tooltip for the duration field:
-
-  ![](docs/changes/tooltip.png)
-
-### TimeEntryModal
-
-- When closing the modal of a modified entry or non saved entry (stopped), we need to confirm:
-
-  ![](docs/changes/timeentreymodal_confirm_modified.png)
-
-- Validations in TimeEntryModal are performed per field (onBlur), to avoid annoying errors in fields we didn't modify yet.
-
-### Tray
-
-- Added tray, allowing to hide in tray/show window, because most of the time the Redshape window is not needed.
+#### - How to use timer controls
 
-- Tray with pause/resume button of current timer (long/short issue subject):
+Timer controls allow to manually modify the time for the timer by (1 or 5 minutes back and forth) as well as write temporary comments. Using these, we can directly modify the time after the pause in the task. To enable it, toggle the "Use advanced timer controls" item in the Settings menu
 
-  ![](docs/changes/tray_pause_long.png)
-  ![](docs/changes/tray_resume_short.png)
+#### - Idle behavior
 
-- Tick optimizations when using Redshape in tray. This are debug messages not present in the app. They are just printed here to show
-  the optimization. We reduce the CPU usage.
+Redshape can pause the timer if it detects the system is idle for a range of times (5, 10 o 15 minutes). It will warn with notifications (15s. warning time before pausing).
 
-  ![](docs/changes/tracker_optimization.png)
+Optionally, it can automatically discard the idle time from the current timer when it is paused.
 
-- New icons are provided for the tray, showing when it is tracking an issue (play, pause) or not.
+#### - More accurate progressbar
 
-### Advanced Timer Controls
+Issue progress slider can be changed with 1% step if configured (by default is 10%). 
+Enable this if you have support in the server side (ruby, redmine) to use every percentage (33%, 81%, etc).
 
-- The view can be advanced or simple. When using advanced view, we can use new buttons to modify the current time (1 or 5 minutes) and write temporary comments. Using these, we can directly modify the time in case we were interrupted in the task (avoid remembering those changes until the end). Also, the comments help us in workflows where our time entry can be hours long.
-
-  ![](docs/changes/advanced_timer_controls_long.png)
-
-  ![](docs/changes/advanced_timer_controls_short.png)
-
-  When we finish, we have updated our TimeEntryModal:
-
-  ![](docs/changes/advanced_timer_controls_to_time_entry.png)
-
-### Idle behavior
-
-- Redshape can pause the timer if it detects the system is idle for a range of times (5, 10 o 15 minutes). It will warn with notifications (15s. warning time before pausing).
-
-- Optionally, it can automatically discard the idle time from the current timer when it is paused.
-
-### Settings
-
-- New settings menu to be used per user/redmine host.
-
-  ![](docs/changes/settings_menu.png)
-
-### Minor bugfixes
-
-- There are other minor bugfixes and features not listed but can be read in the git log. Those are usually related with UX, propagating correctly the state, etc.
-
-### Issue progress bars
-
-- Progress (done ratio) shows a gradient of 5 colors between red-yellow-green (0, 20, 40, 60, 80, 100%).
-
-  Time cap shows a green bar between 0-80% and yellow-green in the last 20%. When it is overtime (eg. 150%), a red bar is shown with the overtime proportion (eg. 50/150).
-
-  Tooltips added showing the specific percentage value.
-
-  ![](docs/changes/progressbars.png)
-
-### Custom fields
-
-- Custom fields are shown in the issue details page (if available).
-
-  ![](docs/changes/custom_fields.png)
-
-### Edit issue
-
-- Progress (done ratio) can be edited in a new modal. It supports an input range to slide the percetage of progress (0 to 100). 
-
-  ![](docs/changes/edit_issue_progress.png)
-
-- Estimation (hours) and Due date can also be edited. 
-
-  ![](docs/changes/edit_issue_estimation_due_date.png) 
-
-- If editing a parent task, some non-editable fields are omitted.
-
-  ![](docs/changes/edit_issue_parent.png)
-
-### Issue fields
-
-- If is a parent task, it shows links to each of its subtasks.
-
-  If is a parent task, it shows the totals (estimated and spent time).
-
-  ![](docs/changes/issue_subtasks.png)
-
-### More settings
+## License
+[GPL-3.0](https://github.com/Spring3/redshape/blob/master/LICENSE.md)
 
-- Issue progress slider can be changed with 1% step if configured (by default is 10%). 
-  Enable this if you have support in the server side (ruby, redmine) to use every percentage (33%, 81%, etc).
+Created by [Daniyil Vasylenko](https://github.com/Spring3)
 
-  ![](docs/changes/settings_progress.png)
+## Contributors
 
+[rNoz](https://github.com/rnoz) from [Group4Layers](https://www.group4layers.com)
 
 ### AUR package
 
@@ -234,12 +105,5 @@ The second target (`pkgbuild`) will update the version and md5sums of the PKGBUI
 
 ### Known issues
 
-- Tray new icons should be ported for Mac (png to icns; png2icns gives black background).
-- Changes not tested in Mac or Windows.
 - One test is omitted from the original repo (TimeEntryModal, it should match the snapshot) because it never finishes (throws JS heap out of memory).
 - As soon as Electron v8 is stable, it should be used (package.json). Redshape is prepared for future features (timeoutType), keeping the notification when the timer is paused due to system idle.
-
-## Acknowledgements
-
-- [Daniyil Vasylenko](redshape.app@gmail.com): original author of this interesting and useful project.
-- [Group4Layers](https://www.group4layers.com): it is possible to contribute to this repository and achieve the new features provided here thanks to this company and its efforts to promote and work with open source. The two weeks of dedication have been given in hours assigned by the company.

__mocks__/electron-store.js

@@ -14,21 +14,24 @@ class Store {
   }
 
   get = (key) => {
+    // eslint-disable-next-line
     console.log('[electron-store] Using mocked get function');
     return values[key];
   }
 
   has = (key) => {
+    // eslint-disable-next-line
     console.log('[electron-store] Using mocked has function');
     return Object.hasOwnProperty.call(values, key);
   }
 
   set = (key, value) => {
+    // eslint-disable-next-line
     console.log('[electron-store] Using mocked set function');
     values[key] = value;
   }
 
-  delete = (key) => delete values[key]; 
+  delete = (key) => delete values[key];
 
   clear = () => Store.__reset();
 }

__mocks__/electron.js

@@ -4,6 +4,10 @@ const shell = {
   openExternal: () => {}
 };
 
+const powerMonitor = {
+  getSystemIdleTime: jest.fn()
+};
+
 const remote = {
   shell,
   process: {
@@ -17,16 +21,20 @@ const remote = {
     if (path.includes('/common/request')) {
       return require('../common/request'); // eslint-disable-line
     }
+    if (path.includes('electron')) {
+      return { powerMonitor };
+    }
     return undefined;
   }
 };
 
 const ipcRenderer = {
   on: jest.fn(),
   send: jest.fn(),
+  removeListener: jest.fn()
 };
 
 module.exports = {
   remote,
-  ipcRenderer,
+  ipcRenderer
 };

__mocks__/image-mock.js

@@ -1 +1,4 @@
+import React from 'react';
+
+// eslint-disable-next-line react/jsx-filename-extension
 export default () => (<div className="image" />);