Merge branch '3.0.0' into HOTFIX/cross-submission-polling

.eslintrc.cjs

@@ -1,4 +1,3 @@
-/* eslint-env node */
 /**
  * @type {import("eslint").Linter.Config}
  */
@@ -10,7 +9,13 @@ const config = {
     "airbnb",
     "airbnb-typescript",
     "prettier",
+    "react-app",
+    "react-app/jest",
   ],
+  globals: {
+    window: true,
+    document: true,
+  },
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaFeatures: {
@@ -29,12 +34,10 @@ const config = {
     },
   },
   root: true,
-  ignorePatterns: ["public/js/*.js"],
   rules: {
     /* base prettier rule */
     "prettier/prettier": "error",
 
-    "import/prefer-default-export": "off",
     "max-len": "off",
     "no-console": "warn",
     "no-param-reassign": "off",
@@ -53,10 +56,7 @@ const config = {
 
     /* react rules */
     "react/prop-types": "off",
-    "react/jsx-filename-extension": [
-      1,
-      { extensions: [".js", ".jsx", ".tsx", ".ts"] },
-    ],
+    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx", ".tsx", ".ts"] }],
     "react/jsx-props-no-spreading": "off",
     "react/react-in-jsx-scope": "off",
     "react/require-default-props": "off",
@@ -76,21 +76,17 @@ const config = {
         warnOnDuplicates: true,
       },
     ],
-    "react/destructuring-assignment": [
-      "error",
-      "always",
-      { destructureInSignature: "always" },
-    ],
+    "react/destructuring-assignment": ["error", "always", { destructureInSignature: "always" }],
 
     /* typescript-eslint rules */
     "@typescript-eslint/no-empty-function": "error",
-    "@typescript-eslint/no-use-before-define": ["error"],
+    "@typescript-eslint/no-use-before-define": "error",
     "@typescript-eslint/no-unused-vars": "warn",
     "@typescript-eslint/no-loss-of-precision": "error",
     "@typescript-eslint/no-redundant-type-constituents": "error",
     "@typescript-eslint/no-non-null-asserted-optional-chain": "error",
-    "@typescript-eslint/no-shadow": ["off"],
-    "@typescript-eslint/dot-notation": ["off"],
+    "@typescript-eslint/no-shadow": "off",
+    "@typescript-eslint/dot-notation": "off",
     "@typescript-eslint/naming-convention": [
       "error",
       {
@@ -99,7 +95,18 @@ const config = {
         leadingUnderscore: "allow",
       },
     ],
-    "@typescript-eslint/ban-ts-comment": ["off"],
+    "@typescript-eslint/ban-ts-comment": "off",
+
+    /* create-react-app rules */
+    "react-hooks/rules-of-hooks": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "import/prefer-default-export": "off",
+
+    /* jest and testing-library rules */
+    "testing-library/prefer-screen-queries": "off",
+    "testing-library/no-wait-for-multiple-assertions": "off",
+    "testing-library/no-node-access": "off",
+    "testing-library/no-container": "off",
   },
 };
 

conf/inject.template.js

@@ -1,11 +1,11 @@
-/* eslint-disable */
+/* eslint-disable no-template-curly-in-string */
 window.injectedEnv = {
-    REACT_APP_BACKEND_API: '${REACT_APP_BACKEND_API}',
-    REACT_APP_FE_VERSION: '${REACT_APP_FE_VERSION}',
-    REACT_APP_GA_TRACKING_ID: '${REACT_APP_GA_TRACKING_ID}',
-    REACT_APP_NIH_CLIENT_ID: '${REACT_APP_NIH_CLIENT_ID}',
-    REACT_APP_NIH_AUTHORIZE_URL: '${NIH_AUTHORIZE_URL}',
-    REACT_APP_NIH_REDIRECT_URL: '${REACT_APP_NIH_REDIRECT_URL}',
-    REACT_APP_DEV_TIER: '${DEV_TIER}',
-    REACT_APP_UPLOADER_CLI: '${REACT_APP_UPLOADER_CLI}',
+  REACT_APP_BACKEND_API: "${REACT_APP_BACKEND_API}",
+  REACT_APP_FE_VERSION: "${REACT_APP_FE_VERSION}",
+  REACT_APP_GA_TRACKING_ID: "${REACT_APP_GA_TRACKING_ID}",
+  REACT_APP_NIH_CLIENT_ID: "${REACT_APP_NIH_CLIENT_ID}",
+  REACT_APP_NIH_AUTHORIZE_URL: "${NIH_AUTHORIZE_URL}",
+  REACT_APP_NIH_REDIRECT_URL: "${REACT_APP_NIH_REDIRECT_URL}",
+  REACT_APP_DEV_TIER: "${DEV_TIER}",
+  REACT_APP_UPLOADER_CLI: "${REACT_APP_UPLOADER_CLI}",
 };

package.json

@@ -1,7 +1,6 @@
 {
   "name": "crdc-datahub-ui",
-  "version": "0.1.0",
-  "private": true,
+  "version": "3.0.0",
   "dependencies": {
     "@apollo/client": "^3.9.8",
     "@axe-core/react": "^4.9.0",
@@ -56,12 +55,6 @@
     "typecheck": "tsc --noEmit",
     "prepare": "husky install"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",

public/js/injectEnv.js

@@ -1,10 +1,10 @@
 window.injectedEnv = {
-  REACT_APP_NIH_AUTHORIZE_URL: '',
-  REACT_APP_NIH_CLIENT_ID: '',
-  REACT_APP_NIH_REDIRECT_URL: '',
-  REACT_APP_DEV_TIER: '',
-  REACT_APP_UPLOADER_CLI: '',
-  REACT_APP_GA_TRACKING_ID: '',
-  REACT_APP_FE_VERSION: '',
-  REACT_APP_BACKEND_API: '',
+  REACT_APP_NIH_AUTHORIZE_URL: "",
+  REACT_APP_NIH_CLIENT_ID: "",
+  REACT_APP_NIH_REDIRECT_URL: "",
+  REACT_APP_DEV_TIER: "",
+  REACT_APP_UPLOADER_CLI: "",
+  REACT_APP_GA_TRACKING_ID: "",
+  REACT_APP_FE_VERSION: "",
+  REACT_APP_BACKEND_API: "",
 };

public/js/session.js

@@ -4,31 +4,31 @@ const sessionStorageTransfer = (event) => {
     $event = window.event;
   } // ie suq
   if (!$event.newValue) return; // do nothing if no value to work with
-  if ($event.key === 'getSessionStorage') {
+  if ($event.key === "getSessionStorage") {
     // another tab asked for the sessionStorage -> send it
-    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
+    localStorage.setItem("sessionStorage", JSON.stringify(sessionStorage));
     // the other tab should now have it, so we're done with it.
-    localStorage.removeItem('sessionStorage'); // <- could do short timeout as well.
-  } else if ($event.key === 'sessionStorage' && !sessionStorage.length) {
+    localStorage.removeItem("sessionStorage"); // <- could do short timeout as well.
+  } else if ($event.key === "sessionStorage" && !sessionStorage.length) {
     // another tab sent data <- get it
     const data = JSON.parse($event.newValue);
     Object.keys(data).forEach((key) => {
       sessionStorage.setItem(key, data[key]);
     });
-  } else if ($event.key === 'logout') {
+  } else if ($event.key === "logout") {
     sessionStorage.clear();
   }
 };
 
 // listen for changes to localStorage
 if (window.addEventListener) {
-  window.addEventListener('storage', sessionStorageTransfer, false);
+  window.addEventListener("storage", sessionStorageTransfer, false);
 } else {
-  window.addEventListener('onstorage', sessionStorageTransfer);
+  window.addEventListener("onstorage", sessionStorageTransfer);
 }
 
 // Ask other tabs for session storage (this is ONLY to trigger 'storage' event)
 if (!sessionStorage.length) {
-  localStorage.setItem('getSessionStorage', 'true');
-  localStorage.removeItem('getSessionStorage');
+  localStorage.setItem("getSessionStorage", "true");
+  localStorage.removeItem("getSessionStorage");
 }

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "CRDC DataHub",
+  "name": "CRDC DataHub",
   "icons": [
     {
       "src": "favicon.ico",

src/components/Carousel/index.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import { styled } from "@mui/material";
 import Carousel, { CarouselProps } from "react-multi-carousel";
 import "react-multi-carousel/lib/styles.css";
@@ -7,6 +7,10 @@ import CustomRightArrow from "./CustomRightArrow";
 
 type Props = {
   children: React.ReactNode;
+  /**
+   * If true, will disable any user interaction with the carousel.
+   */
+  locked?: boolean;
 } & Partial<CarouselProps>;
 
 const sizing = {
@@ -16,7 +20,9 @@ const sizing = {
   },
 };
 
-const StyledWrapper = styled("div")({
+const StyledWrapper = styled("div", {
+  shouldForwardProp: (p) => p !== "showLeftFade" && p !== "showRightFade",
+})<{ showLeftFade: boolean; showRightFade: boolean }>(({ showLeftFade, showRightFade }) => ({
   maxWidth: "700px",
   minWidth: "464px", // NOTE: Without a min-width, the carousel collapses to 0px wide
   width: "100%",
@@ -37,7 +43,7 @@ const StyledWrapper = styled("div")({
     left: "calc(100% - 162px)",
     top: "0",
     bottom: "0",
-    width: "162px",
+    width: showRightFade ? "162px" : "0px",
     background: "linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%)",
     zIndex: 9,
   },
@@ -47,11 +53,11 @@ const StyledWrapper = styled("div")({
     right: "calc(100% - 162px)",
     top: "0",
     bottom: "0",
-    width: "162px",
+    width: showLeftFade ? "162px" : "0px",
     background: "linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%)",
     zIndex: 9,
   },
-});
+}));
 
 const removeAriaHidden = () => {
   const elements = document.querySelectorAll(".react-multi-carousel-item");
@@ -65,22 +71,29 @@ const removeAriaHidden = () => {
  * @param Props
  * @returns {JSX.Element}
  */
-const ContentCarousel: FC<Props> = ({ children, ...props }: Props) => (
-  <StyledWrapper>
-    <Carousel
-      responsive={sizing}
-      swipeable
-      draggable
-      arrows
-      afterChange={removeAriaHidden}
-      itemClass="custom-carousel-item"
-      customLeftArrow={<CustomLeftArrow />}
-      customRightArrow={<CustomRightArrow />}
-      {...props}
-    >
-      {children}
-    </Carousel>
-  </StyledWrapper>
-);
+const ContentCarousel: FC<Props> = ({ children, locked, ...props }: Props) => {
+  const [activeSlide, setActiveSlide] = useState<number>(0);
+
+  const handleBeforeChange = (nextSlide: number) => setActiveSlide(nextSlide);
+
+  return (
+    <StyledWrapper showLeftFade={activeSlide !== 0 && !locked} showRightFade={!locked}>
+      <Carousel
+        responsive={sizing}
+        swipeable={!locked}
+        draggable={!locked}
+        arrows={!locked}
+        beforeChange={handleBeforeChange}
+        afterChange={removeAriaHidden}
+        itemClass="custom-carousel-item"
+        customLeftArrow={<CustomLeftArrow />}
+        customRightArrow={<CustomRightArrow />}
+        {...props}
+      >
+        {children}
+      </Carousel>
+    </StyledWrapper>
+  );
+};
 
 export default ContentCarousel;