Merge pull request #2126 from ChainSafe/dev

Release - 2022-05-19

.github/workflows/test-storage-on-demand.yml

@@ -0,0 +1,61 @@
+name: Cypress tests - Storage (On Demand)
+on: [workflow_dispatch]
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    container: cypress/browsers:node14.17.0-chrome91-ff89
+    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-storage-${{ 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:
+          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'
+          DEBUG: '@cypress/github-action'
+        with:
+          start: yarn start:storage-ui
+          # wait for 10min for the server to be ready
+          wait-on: 'npx wait-on --timeout 600000 http://localhost:3000'
+          # custom test command to run
+          command: yarn test:ci:storage-ui
+      # store the screenshots if the tests fail
+      - name: Store screenshots 
+        uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: packages/storage-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/storage-ui/cypress/videos
+
+      - name: Slack Notification
+        uses: rtCamp/action-slack-notify@v2.2.0
+        env:
+          SLACK_TITLE: 'Storage UI Test Suite On-Demand Result:'
+          SLACK_MESSAGE: ${{ job.status }}
+          SLACK_COLOR: ${{ job.status }}
+          MSG_MINIMAL: actions url
+          SLACK_WEBHOOK: ${{ secrets.SLACK_UI_WEBHOOK }}
+          SLACK_FOOTER: 'Test run ${{ github.run_number }} was executed on branch: ${{ github.ref }}'

packages/common-components/package.json

@@ -37,8 +37,7 @@
     "@material-ui/styles": ">4.0.0",
     "formik": "^2.2.5",
     "react": ">16.8.0",
-    "react-dom": ">16.8.0",
-    "react-toast-notifications": ">2.4.0"
+    "react-dom": ">16.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -56,15 +55,13 @@
     "@svgr/webpack": "^5.5.0",
     "@types/react-blockies": "^1.4.0",
     "@types/react-router-dom": "^5.1.6",
-    "@types/react-toast-notifications": "^2.4.0",
     "babel-loader": "8.1.0",
     "fork-ts-checker-webpack-plugin": "^6.0.5",
     "formik": "^2.2.5",
     "react": "16.14.0",
     "react-blockies": "^1.4.1",
     "react-dom": "16.14.0",
     "react-router-dom": "^5.2.0",
-    "react-toast-notifications": "^2.4.0",
     "rollup": "2.34.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^3.1.8",

packages/common-components/rollup.config.js

@@ -39,7 +39,6 @@ export default {
     "react-dom",
     "@material-ui/styles",
     "formik",
-    "react-toast-notifications",
     "@chainsafe/common-theme"
   ]
 }

packages/common-components/src/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from "react"
+import React, { Fragment, useMemo } from "react"
 import clsx from "clsx"
 import { ITheme, makeStyles, createStyles } from "@chainsafe/common-theme"
 import { HomeIcon } from "../Icons"
@@ -22,6 +22,7 @@ export type BreadcrumbProps = {
   homeActive?: boolean
   className?: string
   showDropDown?: boolean
+  maximumCrumbs?: number
 }
 
 const useStyles = makeStyles(
@@ -88,6 +89,9 @@ const useStyles = makeStyles(
       menuTitle: {
         padding: `0px ${constants.generalUnit * 1.5}px 0px ${constants.generalUnit * 0.5}px`
       },
+      menuOptions: {
+        zIndex: zIndex?.layer1
+      },
       menuIcon: {
         width: 12,
         height: 12,
@@ -137,10 +141,13 @@ const Breadcrumb = ({
   homeRef,
   homeActive,
   className,
-  showDropDown
+  showDropDown,
+  maximumCrumbs
 }: BreadcrumbProps) => {
   const classes = useStyles()
 
+  const maximumCrumbsBeforeCollapse = useMemo(() => maximumCrumbs || 3, [maximumCrumbs])
+
   const generateFullCrumbs = (crumbs: Crumb[]) => {
     return crumbs.map((crumb: Crumb, index: number) => (
       <Fragment key={`crumb-${index}`}>
@@ -158,6 +165,7 @@ const Breadcrumb = ({
         animation="rotate"
         classNames={{
           item: classes.menuItem,
+          options: classes.menuOptions,
           title: classes.menuTitle,
           icon: classes.menuIcon,
           titleText: classes.menuTitleText
@@ -170,16 +178,16 @@ const Breadcrumb = ({
   }
 
   const generateCrumbs = () => {
-    if (crumbs.length < 3 || !showDropDown) {
+    if (crumbs.length < (maximumCrumbs || 3) || !showDropDown) {
       return generateFullCrumbs(crumbs)
     } else {
-      const dropdownCrumbs = crumbs.slice(0, crumbs.length - 1)
-      const lastCrumb = crumbs[crumbs.length - 1]
+      const dropdownCrumbs = crumbs.slice(0, crumbs.length - (maximumCrumbsBeforeCollapse - 2))
+      const lastCrumbs = crumbs.slice(crumbs.length - (maximumCrumbsBeforeCollapse - 2), crumbs.length)
       return (
         <>
           {generateDropdownCrumb(dropdownCrumbs)}
           <div className={clsx(classes.separator)} />
-          <CrumbComponent crumb={lastCrumb} />
+          {generateFullCrumbs(lastCrumbs)}
         </>
       )
     }

packages/common-components/src/CheckboxInput/CheckboxInput.tsx

@@ -106,14 +106,16 @@ interface ICheckboxProps extends Omit<React.HTMLProps<HTMLInputElement>, "value"
   error?: string
   value: boolean
   indeterminate?: boolean
-  onChange: (event: FormEvent<HTMLInputElement>) => void
+  onChange?: (event: FormEvent<HTMLInputElement>) => void
+  onClick?: (event: React.MouseEvent) => void
   testId?: string
 }
 
 const CheckboxInput: React.FC<ICheckboxProps> = ({
   className,
   label,
   onChange,
+  onClick,
   disabled,
   indeterminate = false,
   value,
@@ -124,7 +126,7 @@ const CheckboxInput: React.FC<ICheckboxProps> = ({
   const classes = useStyles(props)
 
   const handleChange = (event: any) => {
-    !disabled && onChange(event)
+    !disabled && onChange && onChange(event)
   }
 
   return (
@@ -145,6 +147,7 @@ const CheckboxInput: React.FC<ICheckboxProps> = ({
           ["disabled"]: disabled,
           ["indeterminate"]: indeterminate
         })}
+        onClick={onClick}
       >
         <CheckIcon />
       </div>

packages/common-components/src/CheckboxInput/FormikCheckboxInput.tsx

@@ -3,13 +3,14 @@ import { useField } from "formik"
 import CheckboxInput from "./CheckboxInput"
 
 interface IFormikCheckboxProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, "label"> {
+  extends Omit<React.HTMLProps<HTMLInputElement>, "label" | "onClick"> {
   className?: string
   name: string
   label?: string | ReactNode
+  onClick?: (event: React.MouseEvent) => void
 }
 
-const FormikCheckboxInput: React.FC<IFormikCheckboxProps> = ({ name, onChange, ...props }) => {
+const FormikCheckboxInput: React.FC<IFormikCheckboxProps> = ({ name, onChange, onClick, ...props }) => {
   const [field, meta, helpers] = useField<boolean>(name)
 
   const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
@@ -20,6 +21,7 @@ const FormikCheckboxInput: React.FC<IFormikCheckboxProps> = ({ name, onChange, .
   return (
     <CheckboxInput
       onChange={handleChange}
+      onClick={onClick}
       error={meta.touched ? meta.error : undefined}
       {...props}
       value={field.value}

packages/common-components/src/FileInput/FileInput.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useEffect, ReactNode } from "react"
 import { useField } from "formik"
-import { useDropzone, DropzoneOptions, FileRejection } from "react-dropzone"
+import { useDropzone, DropzoneOptions, FileRejection, FileWithPath } from "react-dropzone"
 import clsx from "clsx"
 import { ITheme, makeStyles, createStyles } from "@chainsafe/common-theme"
 import { Button } from "../Button"
@@ -101,10 +101,6 @@ const useStyles = makeStyles(({ constants, palette, overrides }: ITheme) =>
   })
 )
 
-interface FileWithPath extends File {
-  path?: string
-}
-
 interface IFileInputProps extends DropzoneOptions {
   className?: string
   variant?: "dropzone" | "filepicker"
@@ -143,14 +139,14 @@ const FileInput = ({
   const classes = useStyles()
   const [previews, setPreviews] = useState<any[]>([])
   const [errors, setErrors] = useState<any[]>([])
-  const [{ value }, meta, helpers] = useField<Array<FileWithPath>>(name)
+  const [{ value }, meta, helpers] = useField<FileWithPath[]>(name)
 
   useEffect(() => {
     onFileNumberChange && onFileNumberChange(value.length)
   }, [onFileNumberChange, value.length])
 
   const onDrop = useCallback(
-    async (acceptedFiles: Array<FileWithPath>, fileRejections: FileRejection[]) => {
+    async (acceptedFiles: FileWithPath[], fileRejections: FileRejection[]) => {
       const filtered = acceptedFiles.filter((file) =>
         maxFileSize ? file.size <= maxFileSize : true
       )
@@ -165,6 +161,7 @@ const FileInput = ({
           )
         )
       }
+
       helpers.setValue([...value, ...filtered])
 
       if (fileRejections.length > 0) {
@@ -277,11 +274,17 @@ const FileInput = ({
       )}
       {(meta.error || errors.length > 0) && (
         <ul className={classNames?.error}>
-          <li className={classes.error}>{meta.error}</li>
+          <li
+            data-testid={`meta-error-message-${testId}`}
+            className={classes.error}
+          >
+            {meta.error}
+          </li>
           {errors.map((error, i) => (
             <li
               key={i}
               className={classes.error}
+              data-testid={`error-message-${testId}`}
             >
               {error}
             </li>

packages/common-components/src/Pagination/Pagination.tsx

@@ -0,0 +1,86 @@
+import React from "react"
+import { createStyles, makeStyles } from "@chainsafe/common-theme"
+import { CaretLeftIcon, CaretRightIcon } from "../Icons"
+import { ITheme } from "@chainsafe/common-theme"
+import { Button } from "../Button"
+import { Typography } from "../Typography"
+
+const useStyles = makeStyles(({ constants, palette }: ITheme) => {
+  return createStyles({
+    root: {
+      display: "flex",
+      alignItems: "center",
+      margin: `${constants.generalUnit}px 0`
+    },
+    nextButton: {
+      marginLeft: constants.generalUnit * 1.5
+    },
+    previousButton: {
+      marginRight: constants.generalUnit * 1.5
+    },
+    icons: {
+      fill: palette.additional["gray"][9]
+    }
+  })
+})
+
+export interface IPaginationProps {
+  pageNo?: number
+  totalPages?: number
+  onNextClick?: () => void
+  onPreviousClick?: () => void
+  loadingNext?: boolean
+  loadingPrevious?: boolean
+  showPageNumbers?: boolean
+  isNextDisabled?: boolean
+  isPreviousDisabled?: boolean
+}
+
+const Pagination: React.FC<IPaginationProps> = ({
+  pageNo,
+  totalPages,
+  onNextClick,
+  onPreviousClick,
+  loadingNext,
+  loadingPrevious,
+  showPageNumbers,
+  isNextDisabled,
+  isPreviousDisabled
+}) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root}>
+      <Button
+        variant="outline"
+        loading={loadingPrevious}
+        onClick={onPreviousClick}
+        size="medium"
+        disabled={isPreviousDisabled || (showPageNumbers && !!pageNo && pageNo <= 1)}
+        className={classes.previousButton}
+      >
+        <CaretLeftIcon className={classes.icons} />
+      </Button>
+      {!!showPageNumbers && pageNo &&
+        <Typography
+          component="p"
+          variant="body1"
+        >
+          {`Page ${pageNo} ${totalPages ? `of ${totalPages}` : "" }`}
+        </Typography>
+      }
+      <Button
+        variant="outline"
+        loading={loadingNext}
+        size="medium"
+        disabled={isNextDisabled || (showPageNumbers && pageNo === totalPages)}
+        onClick={onNextClick}
+        className={classes.nextButton}
+      >
+        <CaretRightIcon className={classes.icons} />
+      </Button>
+    </div>
+  )
+}
+
+export default Pagination

packages/common-components/src/Pagination/index.ts

@@ -0,0 +1 @@
+export { default as Pagination, IPaginationProps } from "./Pagination"