Merge pull request #229 from FNNDSC/next

[Next] Major Refactoring, Bug fixes and UI Overhaul
FNNDSC · Jul 21, 2021 · 38f9b37 · 38f9b37
2 parents 61958c2 + 122e760
commit 38f9b37
Show file tree

Hide file tree

Showing 151 changed files with 4,049 additions and 7,626 deletions.
diff --git a/.env b/.env
@@ -1,4 +1,6 @@
 REACT_APP_STORE_URL="http://localhost:8010/api/v1/"
+# Ensure the trailing / at the end of the STORE_URL
+
 REACT_APP_STORE_USERS_URL="${REACT_APP_STORE_URL}users/"
 REACT_APP_STORE_AUTH_URL="${REACT_APP_STORE_URL}auth-token/"
 

diff --git a/.eslintrc b/.eslintrc
@@ -1,13 +1,42 @@
 {
-  "extends": "react-app",
+  "extends": [
+    "plugin:react/recommended",
+    "airbnb",
+    "prettier"
+  ],
   "env": {
     "node": true,
     "jest": true,
     "browser": true,
     "es6": true
   },
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "requireConfigFile": false,
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "babelOptions": {
+      "presets": ["@babel/preset-react"],
+      "plugins": ["@babel/plugin-proposal-class-properties"]
+    }
+  },
+  "plugins": [
+    "react",
+    "prettier"
+  ],
   "rules": {
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*.test.js", "**/*.spec.js", "./src/setupTests.js"]}]
+    "react/jsx-filename-extension": [1, { "extensions": [".jsx"] }],
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*.test.js", "**/*.spec.js", "./src/setupTests.js"]}],
+    "react/state-in-constructor": "off",
+    "react/prop-types": "off",
+    "react/require-default-props": "off",
+    "react/jsx-props-no-spreading": "off"
   }
-}
+}
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "singleQuote": true
+}
diff --git a/package.json b/package.json
@@ -6,8 +6,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
-    "lint": "eslint ./src/components",
-    "lint:fix": "eslint --fix ./src/components",
+    "lint": "eslint src/**/*.{jsx,js}",
+    "lint:fix": "eslint --fix src/**/*.{jsx,js}",
     "ci": "concurrently --kill-others-on-fail \"yarn:test\" \"yarn:lint\"",
     "serve": "sirv build --cors --single --host --port 3000",
     "deploy": "yarn run build && yarn run serve",
@@ -20,47 +20,39 @@
     ]
   },
   "dependencies": {
+    "@babel/eslint-parser": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
     "@fnndsc/chrisstoreapi": "^2.0.2",
     "@patternfly/patternfly": "^4.59.1",
     "@patternfly/react-core": "^4.75.2",
     "@patternfly/react-icons": "^4.7.16",
+    "@patternfly/react-table": "^4.27.7",
     "classnames": "^2.2.6",
+    "concurrently": "^4.1.0",
     "core-js": "^2.5.7",
+    "cross-env": "^5.2.0",
     "dompurify": "^2.2.7",
     "email-validator": "^2.0.4",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "husky": "^0.14.3",
+    "lint-staged": "^7.2.0",
     "lodash": "^4.17.21",
     "marked": "^2.0.3",
     "moment": "^2.22.2",
-    "patternfly": "^3.58.0",
-    "patternfly-react": "^2.24.0",
     "prop-types": "^15.6.2",
-    "react": "^16.8.0",
+    "react": "^17.0.2",
     "react-bootstrap": "^0.32.1",
-    "react-clipboard.js": "^2.0.0",
-    "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^16.8.0",
+    "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
+    "react-test-renderer": "^16.4.1",
     "rxjs": "^6.3.3",
     "sirv-cli": "^1.0.8",
     "sortabular": "^1.6.0",
     "table-resolver": "^4.1.1",
     "undux": "^5.0.0-beta.18"
   },
-  "devDependencies": {
-    "concurrently": "^4.1.0",
-    "cross-env": "^5.2.0",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^6.6.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.21.2",
-    "husky": "^0.14.3",
-    "lint-staged": "^7.2.0",
-    "react-test-renderer": "^16.4.1"
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -72,5 +64,15 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^2.3.2",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0"
   }
 }
diff --git a/src/components/App/App.css b/src/components/App/App.css
@@ -1,6 +1,8 @@
 /* CSS variables */
 
 :root {
+  --pf-global--FontSize--md: 14px !important;
+
   /* PRIMARY COLORS */
 
   /* black */
@@ -48,6 +50,52 @@
 /* ---------- GLOBAL CSS -------- */
 /* ============================== */
 
+article {
+  margin: auto;
+  margin-bottom: 4em;
+  max-width: 1200px;
+}
+
+section { 
+  margin: 2em auto;
+  padding: 1em;
+}
+
+/* Typography */
+h1, h2, h3 {
+  font-size: 2.5em !important;
+  margin-top: 0.25em !important;
+  margin-bottom: 0.5em !important;
+}
+
+h2 {
+  font-size: 1.75em !important;
+}
+h1 + h2 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+
+h3 {
+  font-weight: 500 !important;
+  font-size: 1.25em !important;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  font-weight: bolder;
+  position: relative;
+
+  /* Remove blue highlight in mobile */
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 /* ============================== */
 /* ---------- HELPER CSS -------- */
 /* ============================== */
@@ -81,4 +129,4 @@
 
 .margin-right-sm {
     margin-right: 5px;
-}
+}
diff --git a/src/components/App/App.js → src/components/App/App.jsx b/src/components/App/App.js → src/components/App/App.jsx
@@ -6,10 +6,10 @@ import ChrisStore from '../../store/ChrisStore';
 import './App.css';
 
 // import the patternfly CSS globally
-import '../../../node_modules/patternfly/dist/css/patternfly.min.css';
-import '../../../node_modules/patternfly/dist/css/patternfly-additions.min.css';
-import '../../../node_modules/@patternfly/patternfly/patternfly-no-reset.css';
+import '../../../node_modules/@patternfly/patternfly/patternfly.min.css';
+import '../../../node_modules/@patternfly/patternfly/patternfly-base.css';
 import '../../../node_modules/@patternfly/patternfly/patternfly-addons.css';
+import '../../../node_modules/@patternfly/patternfly/patternfly-no-reset.css';
 
 /*
  * The router here serves pages which replace the entire document,
@@ -20,7 +20,7 @@ const App = () => (
   <ChrisStore.Container>
     <div className="App">
       <BrowserRouter>
-        <Switch> 
+        <Switch>
           <Route path="/signin" component={ConnectedSignIn} />
           <Route path="/" component={Router} />
         </Switch>

diff --git a/src/components/App/App.test.js → src/components/App/App.test.jsx b/src/components/App/App.test.js → src/components/App/App.test.jsx
diff --git a/...onents/App/__snapshots__/App.test.js.snap → ...nents/App/__snapshots__/App.test.jsx.snap b/...onents/App/__snapshots__/App.test.js.snap → ...nents/App/__snapshots__/App.test.jsx.snap
diff --git a/src/components/AppLayout/AppLayout.js → src/components/AppLayout/AppLayout.jsx b/src/components/AppLayout/AppLayout.js → src/components/AppLayout/AppLayout.jsx
@@ -1,16 +1,14 @@
-// based on
-// https://github.com/patternfly/patternfly-react-seed/blob/2195cdb69c4a82b64b4cf6870a67750cc1896ef2/src/app/AppLayout/AppLayout.tsx
-
 import React, { useCallback, useState } from 'react';
 import { Page, SkipToContent } from '@patternfly/react-core';
+import { useHistory } from 'react-router-dom';
+import Client from '@fnndsc/chrisstoreapi';
 import ConnectedNavbar from '../Navbar/Navbar';
 import Footer from '../Footer/Footer';
-import './applayout.css'
+import './applayout.css';
 import Search from '../Navbar/components/Search/Search';
-import { useHistory } from 'react-router-dom';
-import Client from "@fnndsc/chrisstoreapi";
 import { debounce } from '../../utils/common';
 import ChrisStore from '../../store/ChrisStore';
+
 const PageSkipToContent = (
   <SkipToContent href="#primary-app-container">
     Skip to Content
@@ -21,34 +19,36 @@ const AppLayout = ({ store, children }) => {
   const [searchKey, setSearchKey] = useState('');
 
   const [autoCompleteData, setAutoCompleteData] = useState(null);
-  const auth = { token: store.get("authToken") };
+  const auth = { token: store.get('authToken') };
 
   const history = useHistory();
   const storeURL = process.env.REACT_APP_STORE_URL;
   const client = new Client(storeURL, auth);
 
-  const debounceSearch = useCallback(debounce(function(value) {onSearch(value)}, 250),[])
-
-  const onSearch = async (value, MODE='AUTO') => {
-    const body =  {
+  // eslint-disable-next-line consistent-return
+  const onSearch = async (value, MODE = 'AUTO') => {
+    const body = {
       limit: 20,
       offset: 0,
       name_title_category: value,
     };
     try {
-      if(MODE === 'ENTER') {
+      if (MODE === 'ENTER') {
         history.push({
           pathname: '/plugins',
-          search: `q=${value}`
+          search: `q=${value}`,
         });
-      } else if(MODE === 'AUTO') {
+      } else if (MODE === 'AUTO') {
         const searchResults = await client.getPlugins(body);
         setAutoCompleteData(searchResults.data);
+        return searchResults.data;
       }
     } catch (error) {
-      console.error(error.message);
+      return error;
     }
-  }
+  };
+
+  const debounceSearch = useCallback(debounce((value) => { onSearch(value); }, 250), []);
   const searchComponent = (
     <Search
       autoCompleteData={autoCompleteData}
@@ -57,27 +57,27 @@ const AppLayout = ({ store, children }) => {
       history={history}
       onChange={(value) => {
         setSearchKey(value);
-        if(value.length >= 3)
-        debounceSearch(value);
+        if (value.length >= 3) debounceSearch(value);
       }}
       onBlur={() => {
-        setSearchKey('')
+        setSearchKey('');
         setAutoCompleteData(null);
       }}
       onClear={() => setSearchKey('')}
       onSearch={onSearch}
     />
-  )
+  );
   return (
     <Page
       header={<ConnectedNavbar searchComponent={searchComponent} />}
       mainContainerId="primary-app-container"
       skipToContent={PageSkipToContent}
       additionalGroupedContent={<div className="searchbar">{searchComponent}</div>}
-      >
+    >
       {children}
       <Footer />
     </Page>
-)};
+  );
+};
 
 export default ChrisStore.withStore(AppLayout);
diff --git a/src/components/Button/index.js → src/components/Button/index.jsx b/src/components/Button/index.js → src/components/Button/index.jsx
@@ -1,20 +1,21 @@
-import React from "react";
-import { Button } from "@patternfly/react-core";
-import PropTypes from "prop-types";
-import { useHistory } from "react-router-dom";
-import "./button.css";
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import './button.css';
+
 const ButtonComponent = ({
   variant,
   onClick,
   loading,
   toRoute,
   children,
   type,
-  ...otherProps
 }) => {
   const history = useHistory();
+  window.scrollTo(0, 0);
   return (
-    <div  {...otherProps}>
+    <div>
       <Button
         isLoading={loading}
         variant={variant}
@@ -30,8 +31,8 @@ const ButtonComponent = ({
 ButtonComponent.propTypes = {
   variant: PropTypes.string,
   onClick: PropTypes.func,
-  icon: PropTypes.object,
   loading: PropTypes.bool,
-  };
+  toRoute: PropTypes.string
+};
 
 export default ButtonComponent;