merge latest 'origin/dev' into 'epic/files-billing'

.eslintrc.json

@@ -7,7 +7,7 @@
       "jsx": true // Allows for the parsing of JSX
     }
   },
-  "plugins": ["@typescript-eslint", "cypress", "ternary"],
+  "plugins": ["@typescript-eslint", "cypress", "no-only-tests", "ternary"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
@@ -24,6 +24,7 @@
   },
   "rules": {
     "comma-spacing": ["error", { "before": false, "after": true }],
+    "cypress/no-pause": "error",
     "indent": ["error", 2],
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "double"],
@@ -46,6 +47,7 @@
     "space-infix-ops": "error",
     "no-trailing-spaces": ["error", { "ignoreComments": true }],
     "comma-dangle": ["error", "never"],
+    "no-only-tests/no-only-tests": "error",
     "object-curly-spacing": ["error", "always"],
     "space-in-parens": ["error", "never"],
     "ternary/no-unreachable": "off",

.github/pr-labeler.yml

@@ -1,3 +1,3 @@
 "Type: Feature": ['feature/*', 'feat/*']
 "Type: Bug Fix": fix/*
-"Type: Maintenance": ['chore/*', 'mnt/*']
+"Type: Maintenance": ['chore/*', 'mnt/*', 'weblate*']

.github/workflows/test-storage.yml

@@ -11,7 +11,7 @@ on:
 jobs:
   cypress-run:
     runs-on: ubuntu-latest
-    container: cypress/browsers:node14.16.0-chrome90-ff88
+    container: cypress/browsers:node14.17.0-chrome91-ff89
     steps:
       - name: Checkout
         uses: actions/checkout@v2

package.json

@@ -19,6 +19,7 @@
     "chalk": "^4.1.0",
     "eslint": "^6.8.0",
     "eslint-plugin-cypress": "^2.11.3",
+    "eslint-plugin-no-only-tests": "^2.6.0",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-ternary": "^1.0.4",

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

@@ -99,14 +99,14 @@ const useStyles = makeStyles(
     })
 )
 
-interface ICheckboxProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, "value" | "label"> {
+interface ICheckboxProps extends Omit<React.HTMLProps<HTMLInputElement>, "value" | "label"> {
   className?: string
   label?: string | ReactNode
   error?: string
   value: boolean
   indeterminate?: boolean
-  onChange(event: FormEvent<HTMLInputElement>): void
+  onChange: (event: FormEvent<HTMLInputElement>) => void
+  testId?: string
 }
 
 const CheckboxInput: React.FC<ICheckboxProps> = ({
@@ -117,6 +117,7 @@ const CheckboxInput: React.FC<ICheckboxProps> = ({
   indeterminate = false,
   value,
   error,
+  testId,
   ...props
 }) => {
   const classes = useStyles(props)
@@ -126,7 +127,10 @@ const CheckboxInput: React.FC<ICheckboxProps> = ({
   }
 
   return (
-    <label className={clsx(classes.root, className)}>
+    <label
+      className={clsx(classes.root, className)}
+      data-testid={`checkbox-${testId}`}
+    >
       <input
         type="checkbox"
         {...props}

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"
@@ -260,7 +265,6 @@ const FileInput = ({
       {value?.length > 0 && (
         <div
           className={clsx(classes.addFiles, classNames?.addFiles)}
-          onClick={open}
         >
           <PlusIcon
             fontSize="small"

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

@@ -1,10 +1,5 @@
 import React, { CSSProperties, ReactNode } from "react"
-import {
-  makeStyles,
-  createStyles,
-  ITheme,
-  useTheme
-} from "@chainsafe/common-theme"
+import { makeStyles, createStyles, ITheme, useTheme } from "@chainsafe/common-theme"
 import clsx from "clsx"
 import Select, { Styles } from "react-select"
 import { Typography } from "../Typography"
@@ -62,7 +57,7 @@ interface ISelectInputProps {
   styles?: Partial<Styles>
 }
 
-const SelectInput: React.FC<ISelectInputProps> = ({
+const SelectInput = ({
   className,
   size = "medium",
   disabled = false,
@@ -77,7 +72,7 @@ const SelectInput: React.FC<ISelectInputProps> = ({
   name,
   isClearable = false,
   styles
-}) => {
+}: ISelectInputProps) => {
   const classes = useStyles()
   const { palette, animation, typography, overrides }: ITheme = useTheme()
   const handleChange = (value: any) => {
@@ -105,9 +100,9 @@ const SelectInput: React.FC<ISelectInputProps> = ({
   //       ...overrides?.SelectInput?.indicatorsContainer
   //     }, state) : overrides?.SelectInput?.indicatorsContainer)
   //   }),
-  const selectOverides: Partial<Styles> = {}
+  const selectOverrides: Partial<Styles> = {}
   overrideKeys.map(key => {
-    selectOverides[key] = (provided: CSSProperties, state: any): CSSProperties => ({
+    selectOverrides[key] = (provided: CSSProperties, state: any): CSSProperties => ({
       ...(
         styles && styles[key]
           ? styles[key]({
@@ -121,7 +116,8 @@ const SelectInput: React.FC<ISelectInputProps> = ({
       )
     })
   })
-  selectOverides.container = (provided, state) => ({
+
+  selectOverrides.container = (provided, state) => ({
     ...provided,
     outline: "none",
     border: `1px solid ${palette.additional["gray"][5]}`,
@@ -145,7 +141,7 @@ const SelectInput: React.FC<ISelectInputProps> = ({
     )
   })
 
-  selectOverides.control = (provided, state) => ({
+  selectOverrides.control = (provided, state) => ({
     ...provided,
     outline: "none",
     border: "none",
@@ -163,7 +159,7 @@ const SelectInput: React.FC<ISelectInputProps> = ({
     )
   })
 
-  selectOverides.menu = (provided, state) => ({
+  selectOverrides.menu = (provided, state) => ({
     ...provided,
     marginTop: 2,
     marginBottom: 0,
@@ -180,7 +176,7 @@ const SelectInput: React.FC<ISelectInputProps> = ({
     )
   })
 
-  selectOverides.dropdownIndicator = (provided, state) => ({
+  selectOverrides.dropdownIndicator = (provided, state) => ({
     ...provided,
     transform: state.selectProps.menuIsOpen && "rotate(180deg)",
     transitionProperty: "transform",
@@ -198,7 +194,7 @@ const SelectInput: React.FC<ISelectInputProps> = ({
     )
   })
 
-  selectOverides.singleValue = (provided, state) => ({
+  selectOverrides.singleValue = (provided, state) => ({
     ...provided,
     ...typography.body2,
     color: !state.isDisabled
@@ -217,7 +213,7 @@ const SelectInput: React.FC<ISelectInputProps> = ({
     )
   })
 
-  selectOverides.placeholder = (provided, state) => ({
+  selectOverrides.placeholder = (provided, state) => ({
     ...provided,
     color: !state.isDisabled
       ? palette.additional["gray"][8]
@@ -235,7 +231,7 @@ const SelectInput: React.FC<ISelectInputProps> = ({
     )
   })
 
-  selectOverides.option = (provided, state) => ({
+  selectOverrides.option = (provided, state) => ({
     ...provided,
     ...typography.body2,
     backgroundColor: state.isSelected && palette.additional["gray"][3],
@@ -257,7 +253,7 @@ const SelectInput: React.FC<ISelectInputProps> = ({
     )
   })
 
-  selectOverides.valueContainer = (provided, state) => ({
+  selectOverrides.valueContainer = (provided, state) => ({
     ...provided,
     ...typography.body2,
     paddingTop: 0,
@@ -275,7 +271,7 @@ const SelectInput: React.FC<ISelectInputProps> = ({
     )
   })
 
-  selectOverides.indicatorsContainer = (provided, state) => ({
+  selectOverrides.indicatorsContainer = (provided, state) => ({
     ...provided,
     "& > div": {
       paddingTop: 0,
@@ -314,12 +310,16 @@ const SelectInput: React.FC<ISelectInputProps> = ({
         value={selectValue}
         isMulti={isMulti}
         name={name}
-        styles={selectOverides}
+        styles={selectOverrides}
         theme={(selectTheme) => ({
           ...selectTheme,
           spacing: {
             ...selectTheme.spacing,
-            controlHeight: size === "large" ? 40 : size === "medium" ? 32 : 24
+            controlHeight: size === "large"
+              ? 40
+              : size === "medium"
+                ? 32
+                : 24
           }
         })}
       />

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

@@ -3,7 +3,8 @@ import {
   makeStyles,
   createStyles,
   ITheme,
-  useTheme
+  useTheme,
+  debounce
 } from "@chainsafe/common-theme"
 import clsx from "clsx"
 import AsyncSelect from "react-select/async"
@@ -63,6 +64,8 @@ interface ITagsInputProps {
   fetchTags: (searchValue: string) => Promise<Array<ITagOption>>
   onChange: (value: ValueType<ITagOption, true>, action: ActionMeta<ITagOption>) => void
   styles?: Partial<Styles>
+  loadingMessage?: string
+  noOptionsMessage? : string
 }
 
 const TagsInput = ({
@@ -75,7 +78,9 @@ const TagsInput = ({
   fetchTags,
   disabled = false,
   onChange,
-  styles
+  styles,
+  loadingMessage = "Loading...",
+  noOptionsMessage = "No options found."
 }: ITagsInputProps) => {
   const classes = useStyles()
 
@@ -111,6 +116,10 @@ const TagsInput = ({
     })
   })
 
+  const loadOptions = debounce((inputText, callback) => {
+    fetchTags(inputText).then((options) => callback(options))
+  }, 300)
+
   return (
     <label className={clsx(classes.root, className)}>
       {label && label.length > 0 && (
@@ -127,18 +136,17 @@ const TagsInput = ({
         isMulti
         cacheOptions={false}
         value={value}
-        loadOptions={fetchTags}
-        onInputChange={(inputVal) => fetchTags(inputVal)}
+        loadOptions={loadOptions}
         isClearable={false}
-        getOptionLabel={(option) => option.label}
-        getOptionValue={(option) => option.value}
         onChange={onChange}
         openMenuOnClick={false}
         openMenuOnFocus={false}
         placeholder={placeholder}
         isDisabled={disabled}
         components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}
         styles={selectOverides as Partial<Styles>}
+        loadingMessage={() => loadingMessage}
+        noOptionsMessage={() => noOptionsMessage}
       />
       {caption && (
         <Typography

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

@@ -381,10 +381,7 @@ const useStyles = makeStyles(
 export type InputState = "normal" | "warning" | "success" | "error"
 
 export interface ITextInputProps
-  extends Omit<
-    React.HTMLProps<HTMLInputElement>,
-    "onChange" | "label" | "size" | "value"
-  > {
+  extends Omit<React.HTMLProps<HTMLInputElement>, "onChange" | "label" | "size" | "value"> {
   className?: string
   label?: string
   labelClassName?: string

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

@@ -8,6 +8,8 @@ export const binPage = {
   // bin page specific file browser elements
   recoverSelectedButton: () => cy.get("[data-testId=button-recover-selected-file]"),
   deleteSelectedButton: () => cy.get("[data-testId=button-delete-selected-file]"),
+  permanentDeleteSuccessToast: () => cy.get("[data-testId=toast-deletion-success]", { timeout: 10000 }),
+  selectAllCheckbox: () => cy.get("[data-testId=checkbox-select-all]"),
 
   // kebab menu elements
   recoverMenuOption: () => cy.get("[data-cy=menu-recover]"),