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

@@ -88,6 +88,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,
@@ -158,6 +161,7 @@ const Breadcrumb = ({
         animation="rotate"
         classNames={{
           item: classes.menuItem,
+          options: classes.menuOptions,
           title: classes.menuTitle,
           icon: classes.menuIcon,
           titleText: classes.menuTitleText

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

@@ -277,11 +277,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"

packages/common-components/src/RadioInput/FormikRadioInput.tsx

@@ -7,13 +7,15 @@ interface IFormikRadioInputProps extends React.HTMLProps<HTMLInputElement> {
   name: string
   label?: string
   id: string
+  testId: string
 }
 
 const FormikRadioInput: React.FC<IFormikRadioInputProps> = ({
   name,
   onChange,
   id,
   label,
+  testId,
   ...props
 }) => {
   const [field, meta, helpers] = useField<string>(name)
@@ -32,6 +34,7 @@ const FormikRadioInput: React.FC<IFormikRadioInputProps> = ({
       value={id}
       checked={field.value === id}
       label={label}
+      testId={testId}
     />
   )
 }

packages/common-components/src/Toasts/ToastContext.tsx

@@ -88,12 +88,11 @@ interface ToastContext {
   addToast: (toastParams: ToastParams) => string
   updateToast: (toastId: string, toastParams: ToastParams, startDismissal?: boolean) => void
   removeToast: (toastId: string) => void
+  removeAllToasts: () => void
   toasts: Toast[]
 }
 
-const ToastContext = React.createContext<ToastContext | undefined>(
-  undefined
-)
+const ToastContext = React.createContext<ToastContext | undefined>(undefined)
 
 const ToastProvider = ({
   children,
@@ -111,6 +110,16 @@ const ToastProvider = ({
     setToastQueue(toasts.current)
   }, [toasts])
 
+  const removeAllToasts = useCallback(() => {
+    // cancel any pending progress such as upload/downloads etc.. 
+    toasts.current.forEach((toast) => {
+      toast.onProgressCancel && toast.onProgressCancel()
+    })
+
+    toasts.current = []
+    setToastQueue(toasts.current)
+  }, [toasts])
+
   const addToast = useCallback((toastParams: ToastParams) => {
     const id = uuidv4()
     toasts.current = [
@@ -159,6 +168,7 @@ const ToastProvider = ({
         addToast,
         updateToast,
         removeToast,
+        removeAllToasts,
         toasts: toastQueue
       }}
     >
@@ -184,8 +194,7 @@ const ToastProvider = ({
             ))}
           </div>
         )
-      ))
-      }
+      ))}
       {children}
     </ToastContext.Provider>
   )

packages/common-components/src/index.ts

@@ -20,6 +20,7 @@ export * from "./Icons"
 export * from "./Modal"
 export * from "./NumberInput"
 export * from "./MenuDropdown"
+export * from "./Pagination"
 export * from "./Paper"
 export * from "./ProgressBar"
 export * from "./RadioInput"

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

@@ -0,0 +1,23 @@
+import React from "react"
+import { withKnobs, boolean, number } from "@storybook/addon-knobs"
+import { Pagination } from "../Pagination"
+
+export default {
+  title: "Pagination",
+  component: Pagination,
+  decorators: [withKnobs]
+}
+
+export const PaginationDemo = (): React.ReactNode => {
+  return (
+    <Pagination
+      showPageNumbers={boolean("Show page numbers", true)}
+      pageNo={number("page number", 1)}
+      totalPages={number("total pages", 5)}
+      isNextDisabled={boolean("next disabled", false)}
+      isPreviousDisabled={boolean("previous disabled", false)}
+      loadingNext={boolean("next loading", false)}
+      loadingPrevious={boolean("previous loading", false)}
+    />
+  )
+}

packages/files-ui/.env.example

@@ -6,7 +6,6 @@ REACT_APP_API_URL=https://stage-api.chainsafe.io/api/v1
 REACT_APP_STRIPE_PK=
 REACT_APP_SENTRY_DSN_URL=
 REACT_APP_SENTRY_ENV=development
-REACT_APP_HOTJAR_ID=
 # Get your ID on Blocknative: https://explorer.blocknative.com/account
 REACT_APP_BLOCKNATIVE_ID=
 REACT_APP_GOOGLE_CLIENT_ID=939164021653-lb5eiquuatf877em98bpi8v360p5vcs4.apps.googleusercontent.com

packages/files-ui/cypress/support/commands.ts

@@ -147,15 +147,18 @@ Cypress.Commands.add(
   }
 )
 
-Cypress.Commands.add("safeClick", { prevSubject: "element" }, ($element?: JQuery<HTMLElement>) => {
+Cypress.Commands.add("safeClick", { prevSubject: "element" }, ($element, _, expectDisable = false) => {
   const click = ($el: JQuery<HTMLElement>) => $el.trigger("click")
 
   return cy
     .wrap($element)
     .should("be.visible")
     .should("be.enabled")
     .pipe(click)
-    .should($el => expect($el).to.not.be.visible)
+    .should($el => expectDisable
+      ? expect($el).to.be.disabled
+      : expect($el).to.not.be.visible
+    )
 })
 
 Cypress.Commands.add("iframeLoaded", { prevSubject: "element" }, ($iframe?: JQuery<HTMLElement>): any => {
@@ -235,7 +238,7 @@ declare global {
        * https://github.com/cypress-io/cypress/issues/7306
        * 
        */
-      safeClick: ($element?: JQuery<HTMLElement>) => Chainable
+      safeClick: ($element?: JQuery<HTMLElement>, expectDisable?: boolean) => Chainable
 
       /**
        * Clear a bucket.

packages/files-ui/cypress/support/page-objects/authenticationPage.ts

@@ -13,6 +13,9 @@ export const authenticationPage = {
   showMoreButton: () => cy.get("div.svelte-q1527 > .bn-onboard-custom"),
   detectedWallet: () => cy.get(":nth-child(3) > .bn-onboard-custom > span.svelte-1799bj2"),
   web3SignInButton: () => cy.get("[data-cy=button-sign-in-with-web3]"),
+  privacyPolicyLink: () => cy.get("[data-cy=link-privacy-policy]"),
+  termsAndConditionsLink: () => cy.get("[data-cy=link-terms-and-conditions]"),
+  learnMoreAboutChainsafeLink: () => cy.get("[data-cy=link-learn-more-about-chainsafe]"),
 
   // sign in section elements
   loginPasswordButton: () => cy.get("[data-cy=button-login-password]", { timeout: 20000 }),