Updates packages that have vulnerability

This patch updates vulnerable packages and enforces following changes

- Modifies few tests
- Adds prettier rule for endOfLine as auto to resolve prettier errors
- Moves global variable declaration into a `.d.ts` file
to resolve eslint errors
- Adds `.eslintcache` in the gitignore which is generated by
latest version of react-scripts

Signed-off-by:Shiv Verma <shverma@redhat.com>

ui/.eslintrc.json

@@ -13,6 +13,7 @@
     "jest": true
   },
   "rules": {
+    "prettier/prettier": ["error", { "endOfLine": "auto" }],
     "no-console": "warn",
     "@typescript-eslint/explicit-module-boundary-types": "off"
   },

ui/.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+#eslint
+.eslintcache

ui/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@patternfly/patternfly": "^4.80.3",
     "@patternfly/react-core": "^4.47.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
@@ -15,20 +16,19 @@
     "@types/react-router-dom": "^5.1.6",
     "@types/react-syntax-highlighter": "^13.5.0",
     "@types/react-test-renderer": "^16.9.3",
-    "axios": "^0.19.2",
+    "axios": "^0.21.1",
     "fuzzysort": "^1.1.4",
     "mobx": "^5.15.6",
     "mobx-react": "^6.3.0",
     "mobx-state-tree": "^3.17.2",
     "moment": "^2.29.1",
     "mst-persist": "^0.1.3",
-    "patternfly": "^3.59.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-github-login": "^1.0.3",
     "react-markdown": "^5.0.3",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
+    "react-scripts": "^4.0.1",
     "react-syntax-highlighter": "^15.3.1",
     "remark-gfm": "^1.0.0",
     "typescript": "^3.7.5"

ui/src/config/constant.d.ts

@@ -0,0 +1,10 @@
+interface API_CONFIG {
+  API_URL: string;
+  GH_CLIENT_ID: string;
+}
+
+export declare global {
+  interface Window {
+    config: API_CONFIG;
+  }
+}

ui/src/config/constants.tsx

@@ -1,14 +1,3 @@
-interface API_CONFIG {
-  API_URL: string;
-  GH_CLIENT_ID: string;
-}
-
-declare global {
-  interface Window {
-    config: API_CONFIG;
-  }
-}
-
 window.config = window.config || {
   API_URL: 'no API_URL  set',
   GH_CLIENT_ID: 'no GH_CLIENT_ID set'

ui/src/containers/App/App.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import renderer from 'react-test-renderer';
 import { FakeHub } from '../../api/testutil';
 import { createProviderAndStore, createProvider } from '../../store/root';
 import LeftPane from '../../components/LeftPane';
@@ -12,13 +11,13 @@ const { Provider } = createProviderAndStore(api);
 
 describe('App', () => {
   it('should render the component correctly and match the snapshot', (done) => {
-    const app = renderer.create(
+    const app = mount(
       <Provider>
         <App />
       </Provider>
     );
 
-    expect(app.toJSON()).toMatchSnapshot();
+    expect(app.debug()).toMatchSnapshot();
     done();
   });
 
@@ -29,7 +28,6 @@ describe('App', () => {
         <App />
       </Provider>
     );
-
     expect(component.find(LeftPane).length).toEqual(1);
   });
 });