Merge pull request #1059 from ChainSafe/dev

* Fix upload (#1010) * Bulk operations for Bin (#1017) * Set the base for Cypress tests and automation (#1016) * Update Send Feedback Link (#1024) * only enable logging in non-mainnet env (#1020) * Optimize tests (#1027) * fix (#1030) * File browser context provider (#1026) * work on selections (#1029) * Remove release drafter for now (#1038) * Update Readme for tests (#1036) * Delete release_drafter.yml (#1039) * Bulk DND Move files (#1028) * Test file upload (#1035) * Selection removal preventions (#1037) * Theme selection UI fix (#1033) * Update API client (#1032) * make it light and the files blue (#1049) * React-PDF Worker fixes (#1052) * Store screenshots and video of failing tests (#1054) * fix test classes and add rename test (#1055) * Hide date for folders (#1060) * s/testId/testid (#1064) * folder path in route fixed (#1066) * Resolve File Browser race condition (#1069)
ChainSafe · May 31, 2021 · 530b582 · 530b582
2 parents 75bbbd0 + bdce8a7
commit 530b582
Show file tree

Hide file tree

Showing 95 changed files with 3,760 additions and 61,476 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -7,13 +7,14 @@
       "jsx": true // Allows for the parsing of JSX
     }
   },
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "cypress"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
-    "plugin:react-hooks/recommended"
+    "plugin:react-hooks/recommended",
+    "plugin:cypress/recommended"
   ],
   "settings": {
     "react": {

diff --git a/.github/release_drafter.yml → .github/release-drafter.yml b/.github/release_drafter.yml → .github/release-drafter.yml
@@ -1,18 +1,19 @@
 name-template: "v$RESOLVED_VERSION 🌈"
 tag-template: "v$RESOLVED_VERSION"
-references:
-  - dev
+# references:
+#   - dev
 categories:
   - title: "🚀 Features"
     labels:
-      - "Type: Feature"
-      - "Type: Enhancement"
+      - "Feature"
+      - "Enhancement"
   - title: "🐛 Bug Fixes"
     labels:
-      - "Type: Bug"
+      - "Bug"
+      - "Bugfix"
+      - "fix" 
   - title: "🧰 Maintenance"
-    label:
-      - "Type: Maintenance"
+    label: "Maintenance"
 change-template: "- $TITLE @$AUTHOR (#$NUMBER)"
 change-title-escapes: '\<*_&' # You can add # and @ to disable mentions, and add ` to disable code blocks.
 version-resolver:
@@ -30,9 +31,6 @@ exclude-labels:
   - "skip-changelog"
 template: |
   ## Changelog
-
   $CHANGES
-
   🙏 A big thank you to all the contributors to this release:
-
   $CONTRIBUTORS
diff --git a/.github/workflows/release-drafter.yml b/.github/workflows/release-drafter.yml
@@ -0,0 +1,16 @@
+name: Release Drafter
+on:
+  push:
+    branches:
+      - "dev"
+
+jobs:
+  build:
+    name:  Release Drafter
+    runs-on: ubuntu-20.04
+    steps:
+
+      - name: Release Drafter
+        uses: release-drafter/release-drafter@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/release_drafter.yml b/.github/workflows/release_drafter.yml
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,54 @@
+name: Cypress tests
+on: pull_request
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    container: cypress/browsers:node12.18.3-chrome87-ff82
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - uses: actions/cache@v2
+        id: yarn-build-cache
+        with:
+          path: |
+            **/node_modules
+            ~/.cache/Cypress
+            **/build
+          key: ${{ runner.os }}-node_modules-build-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node_modules-build-
+
+      # Install NPM dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        env:
+          GITHUB_PACKAGES_AUTH_TOKEN: ${{ secrets.GH_PKG_AUTH_TOKEN }}
+          REACT_APP_API_URL: ${{ secrets.GH_REACT_APP_API_URL }}
+          REACT_APP_BLOCKNATIVE_ID: ${{ secrets.GH_REACT_APP_BLOCKNATIVE_ID }}
+          REACT_APP_FILES_VERIFIER_NAME: ${{ secrets.GH_REACT_APP_FILES_VERIFIER_NAME }}
+          REACT_APP_FILES_UUID_VERIFIER_NAME: 'chainsafe-uuid-testnet'
+          REACT_APP_TEST: 'true'
+        with:
+          start: yarn start:files-ui
+          # quote the url to be safe against YML parsing surprises
+          wait-on: 'http://localhost:3000'
+          # wait for max 2 minutes for the files-ui to respond
+          wait-on-timeout: 120
+          # custom test command to run
+          command: yarn test:ci:files-ui
+      # store the screenshots if the tests fail
+      - name: Store screenshots 
+        uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: packages/files-ui/cypress/screenshots
+      # store the videos if the tests fail
+      # - name: Store videos 
+      #   uses: actions/upload-artifact@v1
+      #   if: failure()
+      #   with:
+      #     name: cypress-videos
+      #     path: packages/files-ui/cypress/videos
diff --git a/.gitignore b/.gitignore
@@ -53,4 +53,9 @@ storybook-static
 .vscode
 .idea
 .env
-.DS_Store
+.DS_Store
+
+# test artifacts
+packages/files-ui/cypress/screenshots/*
+packages/files-ui/cypress/videos/*
+packages/files-ui/cypress/fixtures/storage
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@sentry/cli": "1.60.1",
     "chalk": "^4.1.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "npm-run-all": "^4.1.5",
     "typescript": "^4.0.5",
     "wsrun": "^5.2.4"
   },
@@ -37,7 +38,10 @@
     "clean:dist": "rm -rf ./*/**/dist && rm -rf ./*/**/build && rm -rf ./*/**/storybook-static",
     "clean": "yarn clean:dependencies && yarn clean:dist",
     "start:tunnel": "./ngrok http https://localhost:3000",
-    "lint": "eslint 'packages/**/src/**/*.{js,jsx,ts,tsx}'"
+    "lint": "eslint 'packages/**/{src, cypress}/**/*.{js,jsx,ts,tsx}'",
+    "serve:files-ui": "npx serve packages/files-ui/build -p 3000",
+    "test:files-ui": "yarn wsrun -p files-ui -c test",
+    "test:ci:files-ui": "yarn wsrun -p files-ui -c test:ci"
   },
   "workspaces": {
     "packages": [

diff --git a/packages/common-components/src/FileInput/FileInput.tsx b/packages/common-components/src/FileInput/FileInput.tsx
@@ -117,9 +117,10 @@ interface IFileInputProps extends DropzoneOptions {
   }
   onFileNumberChange: (filesNumber: number) => void
   moreFilesLabel: string
+  testId?: string
 }
 
-const FileInput: React.FC<IFileInputProps> = ({
+const FileInput = ({
   className,
   variant = "dropzone",
   showPreviews = false,
@@ -130,6 +131,7 @@ const FileInput: React.FC<IFileInputProps> = ({
   classNames,
   onFileNumberChange,
   moreFilesLabel,
+  testId,
   ...props
 }: IFileInputProps) => {
   const classes = useStyles()
@@ -194,6 +196,7 @@ const FileInput: React.FC<IFileInputProps> = ({
   return (
     <div
       {...getRootProps()}
+      data-testid={`file-input-dropzone-${testId}`}
       className={clsx(classes.root, className)}
     >
       <input {...getInputProps()} />
@@ -213,7 +216,10 @@ const FileInput: React.FC<IFileInputProps> = ({
             )}
           </div>
         ) : (
-          <div className={clsx(classes.root, classNames?.filelist)}>
+          <div
+            data-testid={`file-list-${testId}`}
+            className={clsx(classes.root, classNames?.filelist)}
+          >
             <ScrollbarWrapper className={clsx("scrollbar")}>
               <ul>
                 {value.map((file: any, i: any) => (
@@ -223,6 +229,7 @@ const FileInput: React.FC<IFileInputProps> = ({
                   >
                     <span className={classes.itemText}>{file.name}</span>
                     <Button
+                      data-testid={`file-list-close-button-${testId}`}
                       className={clsx(classes.crossIcon, classNames?.closeIcon)}
                       type="button"
                       onClick={(e) => {

diff --git a/packages/common-components/src/HamburgerMenu/HamburgerMenu.tsx b/packages/common-components/src/HamburgerMenu/HamburgerMenu.tsx
@@ -97,18 +97,21 @@ const useStyles = makeStyles(
 export interface IHamburgerMenu extends React.HTMLProps<HTMLDivElement> {
   variant: "default" | "active"
   className?: string
+  testId?: string
 }
 
-const HamburgerMenu: React.FC<IHamburgerMenu> = ({
+const HamburgerMenu = ({
   variant = "default",
   onClick,
-  className
+  className,
+  testId
 }: IHamburgerMenu) => {
   const classes = useStyles()
   return (
     <section
       onClick={onClick}
       className={clsx(classes.root, variant, className)}
+      data-testid={testId}
     >
       <div className={classes.inner}>
         <span></span>

diff --git a/packages/common-components/src/MenuDropdown/MenuDropdown.tsx b/packages/common-components/src/MenuDropdown/MenuDropdown.tsx
@@ -182,17 +182,19 @@ interface IMenuDropdownProps {
     title?: string
     titleText?: string
   }
+  testId?: string
 }
 
-const MenuDropdown: React.FC<IMenuDropdownProps> = ({
+const MenuDropdown = ({
   className,
   menuItems,
   autoclose = true,
   anchor = "bottom-center",
   indicator = DirectionalDownIcon,
   animation = "flip",
   title,
-  classNames
+  classNames,
+  testId
 }: IMenuDropdownProps) => {
   const Icon = indicator
   const classes = useStyles()
@@ -210,6 +212,7 @@ const MenuDropdown: React.FC<IMenuDropdownProps> = ({
       className={clsx(classes.root, className)}
     >
       <section
+        data-testid={`drowpdown-title-${testId}`}
         onClick={() => setOpen(!open)}
         className={clsx(classes.title, classNames?.title, {
           ["open"]: open
@@ -238,6 +241,7 @@ const MenuDropdown: React.FC<IMenuDropdownProps> = ({
       >
         {menuItems.map((item: IMenuItem, index: number) => (
           <div
+            data-testid={`drowpdown-item-${testId}`}
             key={`menu-${index}`}
             className={clsx(classes.item, classNames?.item)}
             onClick={() => {

diff --git a/packages/common-components/src/Modal/Modal.tsx b/packages/common-components/src/Modal/Modal.tsx
@@ -138,6 +138,7 @@ interface IModalProps {
   closePosition?: "left" | "right" | "none"
   children?: ReactNode | ReactNode[]
   maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | number
+  onModalBodyClick?: (e: React.MouseEvent) => void
 }
 
 const Modal: React.FC<IModalProps> = ({
@@ -147,7 +148,8 @@ const Modal: React.FC<IModalProps> = ({
   injectedClass,
   active = false,
   setActive,
-  maxWidth = "sm"
+  maxWidth = "sm",
+  onModalBodyClick
 }: IModalProps) => {
   const classes = useStyles()
 
@@ -169,6 +171,7 @@ const Modal: React.FC<IModalProps> = ({
         setActive ? "closable" : "",
         active ? "active" : "closed"
       )}
+      onClick={onModalBodyClick}
     >
       <section
         ref={ref}

diff --git a/packages/common-components/src/RadioInput/RadioInput.tsx b/packages/common-components/src/RadioInput/RadioInput.tsx
@@ -57,7 +57,8 @@ const useStyles = makeStyles(
             left: "50%",
             transitionDuration: `${animation.transform}ms`,
             transform: "translate(-50%,-50%)",
-            borderRadius: "50%"
+            borderRadius: "50%",
+            ...overrides?.RadioInput?.radio?.checkedBefore
           }
         },
         "&.disabled": {

diff --git a/packages/common-components/src/Router/ConditionalRoute.tsx b/packages/common-components/src/Router/ConditionalRoute.tsx
@@ -1,23 +1,30 @@
 import React from "react"
-import { Route, Redirect } from "react-router-dom"
+import { Route, Redirect, useLocation } from "react-router-dom"
 
-interface IProps {
+interface IConditionalRouteProps {
   component: React.ElementType
-  isAuthorized: boolean | undefined
+  isAuthorized?: boolean
   path: string
-  redirectPath?: string
+  // The path the user should be redirected to if the condition is not met
+  redirectPath: string
+  // This flag will ignore the redirect path and redirect the user to where they were originally going
+  redirectToSource?: boolean
   exact?: boolean
 }
 
-const ConditionalRoute: React.FC<IProps> = ({
+const ConditionalRoute: React.FC<IConditionalRouteProps> = ({
   component: Component,
   isAuthorized,
-  redirectPath = "/403",
+  redirectPath,
+  redirectToSource,
   path,
   exact,
   ...rest
-}) => (
-  <Route
+}) => {
+  const { state, pathname } = useLocation<{from?: string} | undefined>()
+  const from = (state as any)?.from
+
+  return <Route
     path={path}
     exact={exact}
     render={() => {
@@ -26,14 +33,14 @@ const ConditionalRoute: React.FC<IProps> = ({
       ) : isAuthorized === false ? (
         <Redirect
           to={{
-            pathname: `${redirectPath}`,
-            state: { from: path }
+            pathname: redirectToSource && from ? from : redirectPath,
+            state: { from: pathname }
           }}
         />
       ) : // this may be converted into loading
         null
     }}
   />
-)
+}
 
 export default ConditionalRoute
diff --git a/packages/common-components/src/Table/TableCell.tsx b/packages/common-components/src/Table/TableCell.tsx
@@ -29,7 +29,7 @@ export interface ITableCellProps {
   className?: string
   children?: ReactNode | ReactNode[]
   align?: AlignOption
-  onClick?: () => void
+  onClick?: (e?: React.MouseEvent) => void
 }
 const TableCell = React.forwardRef(
   (
@@ -46,7 +46,7 @@ const TableCell = React.forwardRef(
 
     return (
       <td
-        onClick={() => (onClick ? onClick() : null)}
+        onClick={onClick}
         className={clsx(
           className,
           classes.root,