Bump React version to 17

package.json

@@ -10,22 +10,22 @@
     "autosuggest-highlight": "^3.1.1",
     "axios": "^0.21.0",
     "classnames": "^2.2.6",
-    "coveralls": "^3.1.0",
     "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.20",
     "moment": "^2.29.0",
     "moment-range": "^4.0.2",
     "node-sass": "^4.14.1",
     "query-string": "^6.13.2",
-    "react": "^16.14.0",
+    "react": "^17.0.1",
     "react-autosuggest": "10.0.4",
-    "react-dom": "^16.14.0",
-    "react-google-login": "^5.1.21",
+    "react-dom": "^17.0.1",
+    "react-google-login": "^5.2.1",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.4",
+    "react-scripts": "^4.0.1",
     "redux": "^4.0.5",
     "redux-observable": "^1.2.0",
+    "rxjs": "^6.6.3",
     "typescript": "^4.1.3",
     "uuid": "^8.3.2"
   },
@@ -47,6 +47,7 @@
     "@types/react-router-dom": "^5.1.6",
     "@types/uuid": "^3.4.6",
     "axios-mock-adapter": "^1.19.0",
+    "coveralls": "^3.1.0",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "pegjs": "^0.10.0",
     "ts-pegjs": "^0.2.7"

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import { BrowserRouter } from 'react-router-dom'
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { MuiThemeProvider } from "@material-ui/core/styles";

src/AppRouting.tsx

@@ -6,7 +6,6 @@ import { Route, Switch } from 'react-router';
 import { LandingPage } from './components/landingPage/LandingPage';
 import { PrivateRoute } from './components/PrivateRoute';
 import { NotFoundPage } from './components/notFound/NotFoundPage';
-import React from 'react';
 import { isWidthUp } from '@material-ui/core/withWidth';
 import { RegistrationPageDesktop } from './components/registrationPage/RegistrationPage.desktop';
 import { SettingsPageDesktop } from './components/settingsPage/SettingsPage.desktop';

src/components/PrivateRoute.tsx

@@ -1,5 +1,4 @@
 import { Redirect, Route } from 'react-router';
-import React from 'react';
 import { useSelector } from 'react-redux';
 import { userLoggedInSelector } from '../selectors/selectors';
 

src/components/Suggestion.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MenuItem } from '@material-ui/core';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
@@ -27,4 +26,4 @@ export const Suggestion = ({isHighlighted, suggestion, query}: SuggestionProps)
         </div>
       </MenuItem>
   );
-};
+};

src/components/adminPage/AdminPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { OpenTrappState } from '../../redux/root.reducer';
 import './AdminPage.scss';

src/components/adminPage/AuthorizedUserDialog.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface AuthorizedUserDialogProps {
   open: boolean;

src/components/adminPage/ServiceAccountDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Dialog } from '@material-ui/core';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';

src/components/adminPage/ServiceAccountsList.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import TableHead from '@material-ui/core/TableHead';
 import Table from '@material-ui/core/Table';
 import { TableRow } from '@material-ui/core';

src/components/adminPage/UsersList.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AuthorizedUserDTO } from '../../api/dtos';
 import Table from '@material-ui/core/Table';
 import TableHead from '@material-ui/core/TableHead';

src/components/bottomNavigation/BottomNavigation.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useLocation, useHistory } from 'react-router-dom';
 import BottomNavigation from '@material-ui/core/BottomNavigation';
 import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';

src/components/header/AuthorizedUser.tsx

@@ -1,6 +1,5 @@
 import { logoutAction } from '../../actions/authentication.actions';
 import { UserDetails } from './userDetails/UserDetails';
-import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { OpenTrappState } from '../../redux/root.reducer';

src/components/header/Header.desktop.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import Typography from '@material-ui/core/Typography';
 import { useLocation } from 'react-router-dom';

src/components/header/Header.mobile.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import Typography from '@material-ui/core/Typography';
 import { useSelector } from 'react-redux';

src/components/header/UnauthorizedUser.tsx

@@ -1,5 +1,4 @@
 import GoogleLogin, { GoogleLoginResponse, GoogleLoginResponseOffline } from 'react-google-login';
-import React from 'react';
 import { OpenTrappRestAPI } from '../../api/OpenTrappAPI';
 import { loginFailedAction, loginSuccessAction } from '../../actions/authentication.actions';
 import { useDispatch } from 'react-redux';

src/components/header/userDetails/UserDetails.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import MenuItem from '@material-ui/core/MenuItem';
 import Menu from '@material-ui/core/Menu';
 import Avatar from '@material-ui/core/Avatar';

src/components/landingPage/LandingPage.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Divider from '@material-ui/core/Divider';
 import ScheduleIcon from '@material-ui/icons/Schedule';
 import EqualizerIcon from '@material-ui/icons/Equalizer';

src/components/monthlyReport/MonthlyReport.spec.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, RenderResult, within, fireEvent } from '@testing-library/react';
 import { MonthlyReport } from "./MonthlyReport";
 

src/components/monthlyReport/MonthlyReport.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import './MonthlyReport.scss';
 import { MonthlyReportDay, WorkLog } from "./MonthlyReport.model";
 import { Table } from "@material-ui/core";

src/components/monthlyReport/ReportCell.spec.tsx

@@ -1,4 +1,4 @@
-import React, {ReactElement} from 'react';
+import {ReactElement} from 'react';
 import { ReportWorkloadCell } from './ReportCell';
 import { render } from '@testing-library/react';
 import moment from 'moment';

src/components/monthlyReport/ReportCell.tsx

@@ -1,4 +1,4 @@
-import React, {FunctionComponent} from 'react';
+import {FunctionComponent} from 'react';
 import classNames from 'classnames';
 import moment from 'moment';
 import { isNil } from 'lodash';

src/components/notFound/NotFoundPage.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import './NotFoundPage.scss'
 
 export const NotFoundPage = () => (

src/components/notifications/Notifications.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { OpenTrappState } from '../../redux/root.reducer';
 import { Snackbar } from '@material-ui/core';

src/components/registrationPage/RegistrationPage.desktop.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import './RegistrationPage.desktop.scss'
 import Divider from "@material-ui/core/Divider";
 import { WorkLogInput } from "./workLogInput/WorkLogInput";

src/components/registrationPage/RegistrationPage.mobile.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { isNil } from 'lodash';
 import { OpenTrappState } from '../../redux/root.reducer';

src/components/registrationPage/confirmNewTagsDialog/ConfirmNewTagsDialog.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ParsedWorkLog } from '../../../workLogExpressionParser/ParsedWorkLog';
 import { Dialog } from '@material-ui/core';
 import DialogTitle from '@material-ui/core/DialogTitle';

src/components/registrationPage/createWorkLogDialog/CreateWorkLogDialog.spec.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { noop } from 'lodash';
 import { CreateWorkLogDialog } from './CreateWorkLogDialog';
 import { fireEvent, render, RenderResult } from '@testing-library/react';

src/components/registrationPage/createWorkLogDialog/CreateWorkLogDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Dialog from '@material-ui/core/Dialog';
 import DialogContent from '@material-ui/core/DialogContent';

src/components/registrationPage/daySelector/DaySelector.spec.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import moment from 'moment';
 import { fireEvent, render } from '@testing-library/react';
 import { noop } from 'lodash';

src/components/registrationPage/daySelector/DaySelector.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import moment from 'moment';
 import { Fab } from '@material-ui/core';
 import ArrowBack from '@material-ui/icons/ArrowBackIos';

src/components/registrationPage/rulesDialog/RulesDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';

src/components/registrationPage/workLogHelpDialog/WorkLogHelpDialog.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';

src/components/registrationPage/workLogInput/ValidationStatus.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState, Fragment } from 'react';
 import { isEmpty } from 'lodash';
 import ErrorIcon from '@material-ui/icons/Error';
 import './ValidationStatus.scss'
@@ -23,7 +23,7 @@ export const ValidationStatus = ({workLog}: ValidationStatusProps) => {
     )
   } else if (!isEmpty(workLog.expression)) {
     return (
-        <React.Fragment>
+        <Fragment>
           <IconButton aria-label='Help' onClick={handleClick} data-testid='error-indicator'>
             <ErrorIcon color='error'/>
           </IconButton>
@@ -39,7 +39,7 @@ export const ValidationStatus = ({workLog}: ValidationStatusProps) => {
               )
             }
           </Popover>
-        </React.Fragment>
+        </Fragment>
     )
   }
   return null;

src/components/registrationPage/workLogInput/WorkLogInput.spec.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import moment from 'moment';
 import { fireEvent, render, RenderResult } from '@testing-library/react';
 import { noop } from 'lodash';

src/components/registrationPage/workLogInput/WorkLogInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Paper } from '@material-ui/core';
 import InputBase from '@material-ui/core/InputBase';
 import IconButton from '@material-ui/core/IconButton';

src/components/registrationPage/workLogs/WorkLogs.spec.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { fireEvent, render, RenderResult } from '@testing-library/react';
 import { WorkLogs } from './WorkLogs';
 import { noop } from 'lodash';

src/components/registrationPage/workLogs/WorkLogs.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ReportingWorkLogDTO } from '../../../api/dtos';
 import './WorkLogs.scss';
 import List from '@material-ui/core/List';

src/components/registrationPage/workload/Workload.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Slider } from "@material-ui/core";
 import './Workload.scss';
 

src/components/registrationPage/workloadDialog/WorkloadDialog.spec.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { fireEvent, render, RenderResult } from '@testing-library/react';
 import { noop } from 'lodash';
 import { WorkloadDialog } from './WorkloadDialog';

src/components/registrationPage/workloadDialog/WorkloadDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
 import Dialog from '@material-ui/core/Dialog';

src/components/registrationPageMonth/RegistrationPageMonth.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MonthlyReport } from '../monthlyReport/MonthlyReport';
 import Button from '@material-ui/core/Button';
 import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';

src/components/reportingPage/ReportingPage.desktop.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { OpenTrappState } from '../../redux/root.reducer';
 import Divider from '@material-ui/core/Divider';

src/components/reportingPage/ReportingPage.mobile.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { groupBy } from 'lodash';
 import { OpenTrappState } from '../../redux/root.reducer';

src/components/reportingPage/bulkEditDialog/BulkEditDialog.spec.tsx

@@ -5,10 +5,6 @@ import MockAdapter from 'axios-mock-adapter';
 import { ignoreHtmlTags } from '../../../utils/testUtils';
 import { OpenTrappRestAPI } from '../../../api/OpenTrappAPI';
 
-const workLogResponse = [
-  {id: 'jd1', employee: 'john.doe', projectNames: ['projects', 'nvm'], workload: 480, day: '2019/03/01'},
-];
-
 describe('Bulk edit dialog', () => {
   let httpMock: MockAdapter;
 
@@ -30,7 +26,7 @@ describe('Bulk edit dialog', () => {
 
   it('by default displays and validates query for selected tags and users', async () => {
     const {getByText, getByDisplayValue} = render(
-          <BulkEditDialog userTags={['projects', 'nvm']} selection={selection()} onEdit={() => {}} />
+          <BulkEditDialog userTags={['projects', 'nvm']} selection={selection()} onEdit={() => {}} username='tom'/>
     );
     fireEvent.click(getByText('Bulk edit'));
     await waitFor(() => {});
@@ -41,7 +37,7 @@ describe('Bulk edit dialog', () => {
 
   it('validates query on change', async () => {
     const container = render(
-          <BulkEditDialog userTags={['projects', 'nvm']} selection={selection()} onEdit={() => {}}/>
+          <BulkEditDialog userTags={['projects', 'nvm']} selection={selection()} onEdit={() => {}} username='tom'/>
     );
     fireEvent.click(container.getByText('Bulk edit'));
 
@@ -54,7 +50,7 @@ describe('Bulk edit dialog', () => {
   it('updates entries on UPDATE button click', async () => {
     const onEdit = jest.fn();
     const container = render(
-          <BulkEditDialog userTags={['projects', 'nvm']} selection={selection()} onEdit={onEdit} />
+          <BulkEditDialog userTags={['projects', 'nvm']} selection={selection()} onEdit={onEdit} username='tom'/>
     );
     fireEvent.click(container.getByText('Bulk edit'));
 

src/components/reportingPage/bulkEditDialog/BulkEditDialog.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import { Button } from '@material-ui/core';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';

src/components/reportingPage/bulkEditDialog/BulkEditHint.spec.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { BulkEditHint } from './BulkEditHint';
 import { ignoreHtmlTags } from '../../../utils/testUtils';

src/components/reportingPage/bulkEditDialog/BulkEditHint.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { isNil } from 'lodash';
 import './BulkEditHint.scss';
 
@@ -30,4 +29,4 @@ export const BulkEditHint = ({entriesAffected, className}: BulkEditHintProps) =>
         }
       </div>
   );
-};
+};

src/components/reportingPage/dayCard/DayCard.spec.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { DayCard } from './DayCard';
 import { noop } from 'lodash';

src/components/reportingPage/dayCard/DayCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Card } from '@material-ui/core';
 import CardContent from '@material-ui/core/CardContent';
 import CardHeader from '@material-ui/core/CardHeader';

src/components/reportingPage/editWorkLogDialog/EditWorkLogDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';

src/components/reportingPage/editWorkLogDialog/tagsAutocompleteInput/TagsAutocompleteInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autosuggest from 'react-autosuggest';
 import { Suggestion, SuggestionItem } from '../../../Suggestion';

src/components/reportingPage/monthSelector/MonthSelector.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Fab } from '@material-ui/core';
 import ArrowBack from '@material-ui/icons/ArrowBackIos';
 import ArrowForward from '@material-ui/icons/ArrowForwardIos';

src/components/reportingPage/projectsReport/ProjectsReport.spec.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, RenderResult } from '@testing-library/react';
 import { ProjectsReport } from './ProjectsReport';
 import { ReportingWorkLog } from '../reporting.model';

src/components/reportingPage/projectsReport/ProjectsReport.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ReportingWorkLog } from '../reporting.model';
 import { Table } from '@material-ui/core';
 import TableHead from '@material-ui/core/TableHead';

src/components/reportingPage/reportingFilters/ReportingFilters.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MonthSelector } from './monthSelector/MonthSelector';
 import { WorkLogSelector } from './workLogSelector/WorkLogSelector';
 import { ReportingWorkLog } from '../reporting.model';