Release to PROD - 1.1.1 (#1594)

* [Files] - Show current bucket decryption key (#1534) * show current bucket decryption key * lingui extract Co-authored-by: GitHub Actions <[email protected]> * [Files] - Get admin public key from the api (#1485) * bump * use api client * merge dev * lingui extract * support several keys * wih scroll because pub/decryption key are long Co-authored-by: GitHub Actions <[email protected]> * Add lint rules for test debug commands (#1535) * prevent double opening (#1538) * Add test coverage for storage summary adjustments (#1536) * Translated using Weblate (French) (#1540) Currently translated at 100.0% (278 of 278 strings) Translation: ChainSafe Files/Chainsafe Files user interface Translate-URL: https://hosted.weblate.org/projects/chainsafe-files/chainsafe-files-user-interface/fr/ Co-authored-by: J. Lavoie <[email protected]> * Better colors for dark mode select and tagsinput components (#1550) * better colors for dark mode * lingui extract * fix typo Co-authored-by: Michael Yankelev <[email protected]> Co-authored-by: GitHub Actions <[email protected]> * Filter out current bucket (#1548) * filter out current bucket * Update packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx * fix color (#1555) * Fix user lookup spamming the api, and throwing (#1553) * oh yeaah * lingui extract * lingui extract * Apply suggestions from code review * lingui extract Co-authored-by: GitHub Actions <[email protected]> Co-authored-by: Tanmoy Basak Anjan <[email protected]> * Upgrade Torus dependencies (#1549) * [wip] update dependencies * Revert "[wip] update dependencies" This reverts commit 04b593b. * update torus dependencies * fix storage test Co-authored-by: Thibaut Sardan <[email protected]> * reset fields for shared folders (#1577) * reset forms and fix a couple error types (#1578) * Translations update from Weblate (#1557) * Translated using Weblate (French) Currently translated at 100.0% (281 of 281 strings) Translation: ChainSafe Files/Chainsafe Files user interface Translate-URL: https://hosted.weblate.org/projects/chainsafe-files/chainsafe-files-user-interface/fr/ * Translated using Weblate (German) Currently translated at 69.7% (196 of 281 strings) Translation: ChainSafe Files/Chainsafe Files user interface Translate-URL: https://hosted.weblate.org/projects/chainsafe-files/chainsafe-files-user-interface/de/ Co-authored-by: J. Lavoie <[email protected]> * hide when ther's no menu item (#1576) * Add "maintenance" label to weblate PRs automatically (#1581) * Upgrade api client and fix issue with shared folder renaming (#1582) * upgrade api client and fix issue * Update packages/files-ui/src/Contexts/FilesContext.tsx * lingui extract Co-authored-by: GitHub Actions <[email protected]> * run lint --fix (#1585) * Gaming dashboard - API keys as cards (#1575) * Dashboard cards done * lingui extract * extra padding * Apply suggestions from code review Co-authored-by: Thibaut Sardan <[email protected]> * lingui extract * Feedback * Removed link * Apply suggestions from code review * Made warning bigger * lingui extract Co-authored-by: GitHub Actions <[email protected]> Co-authored-by: Thibaut Sardan <[email protected]> Co-authored-by: Michael Yankelev <[email protected]> * New navigations buttons (#1574) * wip * lingui extract * center and add posthog * Update .eslintrc.json * Add team feature fake door (#1587) * wip * modal and tracking * use data-posthog instead Co-authored-by: GitHub Actions <[email protected]> * fix tertiary buttons (#1592) * Posthog identify user on login (#1590) * identify user on login * fix effect deps Co-authored-by: Thibaut Sardan <[email protected]> Co-authored-by: GitHub Actions <[email protected]> Co-authored-by: Andrew Snaith <[email protected]> Co-authored-by: Weblate (bot) <[email protected]> Co-authored-by: J. Lavoie <[email protected]> Co-authored-by: Tanmoy Basak Anjan <[email protected]> Co-authored-by: Ryan Noble <[email protected]>
ChainSafe · Sep 28, 2021 · 4c88f09 · 4c88f09
1 parent a33beda
commit 4c88f09
Show file tree

Hide file tree

Showing 94 changed files with 1,840 additions and 1,512 deletions.
diff --git a/.eslintrc.json b/.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,7 +24,8 @@
   },
   "rules": {
     "comma-spacing": ["error", { "before": false, "after": true }],
-    "indent": ["error", 2],
+    "cypress/no-pause": "error",
+    "@typescript-eslint/indent": ["error", 2],
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "double"],
     "semi": ["error", "never"],
@@ -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",

diff --git a/.github/pr-labeler.yml b/.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*']
diff --git a/.github/workflows/test-storage.yml b/.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

diff --git a/package.json b/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",

diff --git a/packages/common-components/src/Button/Button.tsx b/packages/common-components/src/Button/Button.tsx
@@ -7,7 +7,6 @@ import { Typography } from "../Typography"
 const useStyles = makeStyles(
   ({ constants, typography, animation, palette, overrides }: ITheme) =>
     createStyles({
-      // JSS in CSS goes here
       root: {
         ...typography.button,
         borderRadius: `${constants.generalUnit / 4}px`,
@@ -110,6 +109,29 @@ const useStyles = makeStyles(
         },
         ...overrides?.Button?.variants?.secondary?.root
       },
+      tertiary: {
+        backgroundColor: palette.additional["gray"][3],
+        color: palette.common.black.main,
+        "& svg": {
+          fill: palette.common.white.main
+        },
+        "&:hover": {
+          backgroundColor: palette.primary.main,
+          color: palette.common.white.main,
+          ...overrides?.Button?.variants?.tertiary?.hover
+        },
+        "&:focus": {
+          backgroundColor: palette.primary.main,
+          color: palette.common.white.main,
+          ...overrides?.Button?.variants?.tertiary?.focus
+        },
+        "&:active": {
+          backgroundColor: palette.primary.main,
+          color: palette.common.white.main,
+          ...overrides?.Button?.variants?.tertiary?.active
+        },
+        ...overrides?.Button?.variants?.tertiary?.root
+      },
       outline: {
         color: palette.additional["gray"][8],
         backgroundColor: palette.common?.white.main,
@@ -271,7 +293,7 @@ interface IButtonProps extends Omit<ReactButton, "size"> {
   className?: string
   children?: ReactNode | ReactNode[]
   fullsize?: boolean
-  variant?: "link" | "primary" | "secondary" | "outline" | "dashed" | "danger"
+  variant?: "link" | "primary" | "secondary" |"tertiary" | "outline" | "dashed" | "danger"
   iconButton?: boolean
   size?: "large" | "medium" | "small"
   type?: "button" | "submit" | "reset"

diff --git a/packages/common-components/src/CheckboxInput/CheckboxInput.tsx b/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}

diff --git a/packages/common-components/src/FileInput/FileInput.tsx b/packages/common-components/src/FileInput/FileInput.tsx
@@ -265,7 +265,6 @@ const FileInput = ({
       {value?.length > 0 && (
         <div
           className={clsx(classes.addFiles, classNames?.addFiles)}
-          onClick={open}
         >
           <PlusIcon
             fontSize="small"

diff --git a/packages/common-components/src/Icons/types.d.ts b/packages/common-components/src/Icons/types.d.ts
@@ -4,7 +4,7 @@ type fontSizeProp = "inherit" | "small" | "medium" | "large"
 declare module "*.svg" {
   import React = require("react")
   export const ReactComponent: React.FunctionComponent<React.SVGProps<
-    SVGSVGElement
+  SVGSVGElement
   >>
   const src: string
   export default src

diff --git a/packages/common-components/src/MenuDropdown/MenuDropdown.tsx b/packages/common-components/src/MenuDropdown/MenuDropdown.tsx
@@ -162,12 +162,12 @@ interface IMenuDropdownProps {
   indicator?: typeof SvgIcon
   animation?: "rotate" | "flip" | "none"
   anchor?:
-    | "top-left"
-    | "top-center"
-    | "top-right"
-    | "bottom-left"
-    | "bottom-center"
-    | "bottom-right"
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right"
   menuItems: IMenuItem[]
   title?: string
   classNames?: {

diff --git a/packages/common-components/src/SelectInput/SelectInput.tsx b/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
           }
         })}
       />

diff --git a/packages/common-components/src/TagsInput/TagsInput.tsx b/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

diff --git a/packages/common-components/src/TextInput/TextInput.tsx b/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