Merge pull request #1537 from ChainSafe/dev

Release to PROD

.github/workflows/lingui-extract-files.yml

@@ -8,9 +8,11 @@ on:
 jobs:
   # extract any new translatable string
   # and commit if there are new ones
+  # and if the user submitting the PR isn't weblate
   extract:
     name: lingui-extract
     runs-on: ubuntu-latest
+    if: ${{ github.actor != 'weblate' }}
     steps:
     - uses: actions/checkout@v2
       with:
@@ -31,7 +33,6 @@ jobs:
       run: yarn install --immutable
 
     - name: lingui-extract and commit
-      if: ${{ github.actor != 'weblate' }}
       run: |
         (cd packages/files-ui && yarn extract --clean)
         git add packages/files-ui/src/locales/*

.github/workflows/lingui-extract-gaming.yml

@@ -8,9 +8,11 @@ on:
 jobs:
   # extract any new translatable string
   # and commit if there are new ones
+  # and if the user submitting the PR isn't weblate
   extract:
     name: lingui-extract
     runs-on: ubuntu-latest
+    if: ${{ github.actor != 'weblate' }}
     steps:
     - uses: actions/checkout@v2
       with:

.github/workflows/lingui-extract-storage.yml

@@ -8,9 +8,11 @@ on:
 jobs:
   # extract any new translatable string
   # and commit if there are new ones
+  # and if the user submitting the PR isn't weblate
   extract:
     name: lingui-extract
     runs-on: ubuntu-latest
+    if: ${{ github.actor != 'weblate' }}
     steps:
     - uses: actions/checkout@v2
       with:

.github/workflows/test-files.yml

@@ -37,12 +37,11 @@ jobs:
           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: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
+          # 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:files-ui
       # store the screenshots if the tests fail

.github/workflows/test-storage.yml

@@ -37,12 +37,11 @@ jobs:
           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 
-          # quote the url to be safe against YML parsing surprises
-          wait-on: 'http://localhost:3000'
-          # wait for max 2 minutes for the storage-ui to respond
-          wait-on-timeout: 120
+          # 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

.gitignore

@@ -56,9 +56,11 @@ storybook-static
 .DS_Store
 
 # test artifacts
+packages/files-ui/cypress/downloads/*
 packages/files-ui/cypress/screenshots/*
 packages/files-ui/cypress/videos/*
 packages/files-ui/cypress/fixtures/storage
+packages/storage-ui/cypress/downloads/*
 packages/storage-ui/cypress/screenshots/*
 packages/storage-ui/cypress/videos/*
 packages/storage-ui/cypress/fixtures/storage

package.json

@@ -23,7 +23,6 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-ternary": "^1.0.4",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^3.0.2",
     "typescript": "^4.0.5",
     "wsrun": "^5.2.4"
   },

packages/common-components/.storybook/contexts.js

@@ -1,4 +1,4 @@
-import { createTheme, ThemeProvider } from "@chainsafe/common-theme"
+import { createTheme, ThemeSwitcher } from "@chainsafe/common-theme"
 
 const lightTheme = createTheme()
 const darkTheme = createTheme()
@@ -7,11 +7,19 @@ export const contexts = [
   {
     icon: "box", // a icon displayed in the Storybook toolbar to control contextual props
     title: "Themes", // an unique name of a contextual environment
-    components: [ThemeProvider],
+    components: [ThemeSwitcher],
     params: [
       // an array of params contains a set of predefined `props` for `components`
-      { name: "Light Theme", props: { theme: lightTheme } },
-      { name: "Dark Theme", props: { theme: darkTheme } },
+      { name: "Light Theme", 
+        props: { 
+          themes: [lightTheme]
+        } 
+      },
+      { name: "Dark Theme", 
+        props: { 
+          themes: [darkTheme]
+        } 
+      },
     ],
     options: {
       deep: true,
@@ -20,4 +28,4 @@ export const contexts = [
     },
   },
   /* ... */ // multiple contexts setups are supported
-]
+]

packages/common-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chainsafe/common-components",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "Chainsafe Common React Components",
   "author": "Chainsafe Products Team",
   "license": "GPL-3.0",

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

@@ -36,7 +36,7 @@ interface IDialogClasses {
 }
 
 interface IDialogProps
-  extends Omit<IModalProps, "setActive" | "closePosition" | "children"> {
+  extends Omit<IModalProps, "closePosition" | "children"> {
   accept: () => void
   reject: () => void
   injectedClass?: IDialogClasses

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

@@ -99,6 +99,10 @@ const useStyles = makeStyles(({ constants, palette, overrides }: ITheme) =>
   })
 )
 
+interface FileWithPath extends File {
+  path?: string
+}
+
 interface IFileInputProps extends DropzoneOptions {
   className?: string
   variant?: "dropzone" | "filepicker"
@@ -137,21 +141,22 @@ const FileInput = ({
   const classes = useStyles()
   const [previews, setPreviews] = useState<any[]>([])
   const [errors, setErrors] = useState<any[]>([])
-  const [{ value }, meta, helpers] = useField(name)
+  const [{ value }, meta, helpers] = useField<Array<FileWithPath>>(name)
 
   useEffect(() => {
     onFileNumberChange && onFileNumberChange(value.length)
   }, [onFileNumberChange, value.length])
 
   const onDrop = useCallback(
-    async (acceptedFiles: File[], fileRejections: FileRejection[]) => {
+    async (acceptedFiles: Array<FileWithPath>, fileRejections: FileRejection[]) => {
       const filtered = acceptedFiles.filter((file) =>
         maxFileSize ? file.size <= maxFileSize : true
       )
+
       setErrors([])
       if (showPreviews) {
         setPreviews(
-          filtered.map((file: any) =>
+          filtered.map((file) =>
             Object.assign(file, {
               preview: URL.createObjectURL(file)
             })
@@ -188,7 +193,7 @@ const FileInput = ({
   })
 
   const removeItem = (i: number) => {
-    const items = value as any[]
+    const items = value
     items.splice(i, 1)
     helpers.setValue(items)
   }
@@ -220,12 +225,12 @@ const FileInput = ({
           >
             <ScrollbarWrapper className={clsx("scrollbar")}>
               <ul>
-                {value.map((file: any, i: any) => (
+                {value.map((file: any, i: number) => (
                   <li
                     className={clsx(classes.item, classNames?.item)}
                     key={i}
                   >
-                    <span className={classes.itemText}>{file.name}</span>
+                    <span className={classes.itemText}>{file.path}</span>
                     <Button
                       testId="remove-from-file-list"
                       className={clsx(classes.crossIcon, classNames?.closeIcon)}
@@ -246,9 +251,9 @@ const FileInput = ({
         )
       ) : (
         <>
-          {value.value?.length === 0
+          {value?.length === 0
             ? "No files selected"
-            : `${value.value?.length} file(s) selected`}
+            : `${value?.length} file(s) selected`}
           <Button
             onClick={open}
             size="small"

packages/common-components/src/Icons/icons/Document.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as DocumentSvg } from "../svgs/document.svg"
+
+export { DocumentSvg }
+
+export default createSvgIcon(<DocumentSvg />)

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

@@ -22,6 +22,7 @@ export { default as DinersclubCardIcon, DinersclubCardSvg } from "./icons/Diners
 export { default as DirectionalDownIcon, DirectionalDownSvg } from "./icons/DirectionalDown.icon"
 export { default as DirectionalRightIcon, DirectionalRightSvg } from "./icons/DirectionalRight.icon"
 export { default as DiscoverCardIcon, DiscoverCardSvg } from "./icons/DiscoverCard.icon"
+export { default as DocumentIcon, DocumentSvg } from "./icons/Document.icon"
 export { default as DownloadIcon, DownloadSvg } from "./icons/Download.icon"
 export { default as EditIcon, EditSvg } from "./icons/Edit.icon"
 export { default as EthereumLogoIcon, EthereumLogoSvg } from "./icons/EthereumLogo.icon"

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

@@ -1,10 +1,5 @@
 import React, { ReactNode, useRef, useState } from "react"
-import {
-  makeStyles,
-  createStyles,
-  ITheme,
-  useOnClickOutside
-} from "@chainsafe/common-theme"
+import { makeStyles, createStyles, ITheme, useOnClickOutside } from "@chainsafe/common-theme"
 import { Typography } from "../Typography"
 import clsx from "clsx"
 import { DirectionalDownIcon, SvgIcon } from "../Icons"