upgrade react-scripts to v4.0.0 (#886)

* upgrade react-scripts to v4.0.0

* fix lint issues

webui/package.json

@@ -19,7 +19,7 @@
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "4.0.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0"
   },
@@ -43,5 +43,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "typescript": "^4.0.5"
   }
 }

webui/src/App.test.js

@@ -1,7 +1,3 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
 test('dummy test', () => {
   expect(true).toBe(true);
 });

webui/src/components/BranchesPage.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from "react";
+import React, {useMemo, useEffect, useRef, useState} from "react";
 
 import ButtonToolbar from "react-bootstrap/ButtonToolbar";
 import {connect} from "react-redux";
@@ -26,7 +26,7 @@ const CreateBranchButton = connect(
     ({ createBranch, resetBranch })
 )(({ repo, status, createBranch, resetBranch }) => {
     const [show, setShow] = useState(false);
-    const defaultBranch = { id: repo.default_branch, type: "branch"};
+    const defaultBranch = useMemo(() => ({ id: repo.default_branch, type: "branch"}), [repo]);
     const [selectedBranch, setSelectedBranch] = useState(defaultBranch);
     const textRef = useRef(null);
 

webui/src/components/ClipboardButton.js

@@ -97,7 +97,7 @@ function useHover() {
     return [ref, value];
 }
 
-export default ({ text, variant, onSuccess, onError, icon = <ClippyIcon/>,  tooltip = "Copy to clipboard"}) => {
+const ClipboardButton = ({ text, variant, onSuccess, onError, icon = <ClippyIcon/>,  tooltip = "Copy to clipboard"}) => {
 
     const [show, setShow] = useState(false);
     const [tooltipText, setTooltipText] = useState(tooltip);
@@ -125,4 +125,6 @@ export default ({ text, variant, onSuccess, onError, icon = <ClippyIcon/>,  tool
             </Button>
         </>
     );
-};
+};
+
+export default ClipboardButton;

webui/src/components/ConfirmationModal.js

@@ -2,7 +2,7 @@ import Modal from "react-bootstrap/Modal";
 import Button from "react-bootstrap/Button";
 import React from "react";
 
-export default ({ show, onHide, msg, onConfirm }) => {
+const ConfirmationModal = ({ show, onHide, msg, onConfirm }) => {
     return (
         <Modal show={show} onHide={onHide}>
             <Modal.Header>
@@ -18,3 +18,5 @@ export default ({ show, onHide, msg, onConfirm }) => {
         </Modal>
     )
 };
+
+export default ConfirmationModal;

webui/src/store/auth.js

@@ -69,8 +69,7 @@ const initialState = {
     groupPoliciesList: async.initialState,
 };
 
-export default (state = initialState, action) => {
-
+const store = (state = initialState, action) => {
     state = {
         ...state,
         usersList: async.reduce(AUTH_LIST_USERS, state.usersList, action),
@@ -131,3 +130,5 @@ export default (state = initialState, action) => {
             return state;
     }
 };
+
+export default store;

webui/src/store/branches.js

@@ -14,7 +14,7 @@ const initialState = {
     revert: async.actionInitialState,
 };
 
-export default  (state = initialState, action) => {
+const store = (state = initialState, action) => {
     state = {
         ...state,
         list: async.reduce(BRANCHES_LIST, state.list, action),
@@ -29,3 +29,5 @@ export default  (state = initialState, action) => {
             return state;
     }
 };
+
+export default store;

webui/src/store/commits.js

@@ -7,7 +7,7 @@ const initialState = {
     commit: async.actionInitialState,
 };
 
-export default (state = initialState, action) => {
+const store = (state = initialState, action) => {
     state = {
         ...state,
         log: async.reduce(COMMITS_LIST, state.log, action),
@@ -16,3 +16,5 @@ export default (state = initialState, action) => {
     state.log = async.reducePaginate(COMMITS_LIST_PAGINATE, state.log, action);
     return state;
 };
+
+export default store;

webui/src/store/config.js

@@ -6,7 +6,7 @@ const initialState = {
   config: async.initialState,
 };
 
-export default (state = initialState, action) => {
+const store = (state = initialState, action) => {
   // register async reducers
   state = {
     ...state,
@@ -20,3 +20,5 @@ export default (state = initialState, action) => {
       return state;
   }
 };
+
+export default store;

webui/src/store/loader.js

@@ -4,7 +4,7 @@ const initialState = {
     inFlight: 0,
 };
 
-export default  (state = initialState, action) => {
+const store = (state = initialState, action) => {
     let inFlight = state.inFlight;
     if (!!action.asyncStart) {
         inFlight = state.inFlight + 1;
@@ -15,4 +15,6 @@ export default  (state = initialState, action) => {
         loading: inFlight > 0,
         inFlight,
     };
-};
+};
+
+export default store;

webui/src/store/objects.js

@@ -14,7 +14,7 @@ const initialState = {
     importDryRun: async.actionInitialState,
 };
 
-export default (state = initialState, action) => {
+const store = (state = initialState, action) => {
     state = {
         ...state,
         list: async.reduce(OBJECTS_LIST_TREE, state.list, action),
@@ -29,3 +29,5 @@ export default (state = initialState, action) => {
             return state;
     }
 };
+
+export default store;

webui/src/store/refs.js

@@ -6,7 +6,7 @@ const initialState = {
     merge: async.initialState,
 };
 
-export default (state = initialState, action) => {
+const store = (state = initialState, action) => {
     state = {
         ...state,
         diff: async.reduce(DIFF_REFS, state.diff, action),
@@ -20,3 +20,5 @@ export default (state = initialState, action) => {
             return state;
     }
 };
+
+export default store;

webui/src/store/repositories.js

@@ -13,7 +13,7 @@ const initialState = {
     repo: async.initialState,
 };
 
-export default  (state = initialState, action) => {
+const store = (state = initialState, action) => {
     // register async reducers
     state = {
         ...state,
@@ -34,4 +34,6 @@ export default  (state = initialState, action) => {
         default:
             return state;
     }
-};
+};
+
+export default store;

webui/src/store/setup.js

@@ -5,9 +5,11 @@ const initialState = {
     setupLakeFS: async.actionInitialState,
 };
 
-export default (state = initialState, action) => {
+const store = (state = initialState, action) => {
     return {
         ...state,
         setupLakeFS: async.reduce(SETUP_LAKEFS, state.setupLakeFS, action),
     };
 };
+
+export default store;