Merge origin/dev 2021-11-25

.github/pull_request_template.md

@@ -0,0 +1,19 @@
+closes #
+
+---
+
+Submission checklist: 
+
+> Remove anything below that is not applicable 
+
+- [x] Functionality
+- - [x] Feature works as intended after change
+- - [x] Applicable dependancies have been deployed 
+
+- [x] Layout
+- - [x] Change looks good in the desktop web ui
+- - [x] Change looks good in the mobile web ui
+
+- [x] Theme
+- - [x] Components / elements inspected in light mode 
+- - [x] Components / elements inspected in dark mode 

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

@@ -0,0 +1,62 @@
+name: Cypress tests - Files (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-files-build-${{ 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_API_URL: ${{ secrets.GH_REACT_APP_API_URL }}
+          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:files-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:files-ui
+      # store the screenshots if the tests fail
+      - name: Store screenshots 
+        uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: packages/files-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/files-ui/cypress/videos
+
+      - name: Slack Notification
+        uses: rtCamp/action-slack-notify@v2.2.0
+        env:
+          SLACK_TITLE: 'Files 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/src/Button/Button.tsx

@@ -93,7 +93,7 @@ const useStyles = makeStyles(
           fill: palette.common.white.main
         },
         "&:hover": {
-          backgroundColor: palette.primary.main,
+          backgroundColor: palette.primary.hover,
           color: palette.common.white.main,
           ...overrides?.Button?.variants?.secondary?.hover
         },
@@ -109,6 +109,20 @@ const useStyles = makeStyles(
         },
         ...overrides?.Button?.variants?.secondary?.root
       },
+      text: {
+        backgroundColor: "transparent",
+        color: palette.additional["gray"][9],
+        "&:hover": {
+          ...overrides?.Button?.variants?.text?.hover
+        },
+        "&:focus": {
+          ...overrides?.Button?.variants?.text?.focus
+        },
+        "&:active": {
+          ...overrides?.Button?.variants?.text?.active
+        },
+        ...overrides?.Button?.variants?.text?.root
+      },
       tertiary: {
         backgroundColor: palette.additional["gray"][3],
         color: palette.common.black.main,
@@ -293,7 +307,7 @@ interface IButtonProps extends Omit<ReactButton, "size"> {
   className?: string
   children?: ReactNode | ReactNode[]
   fullsize?: boolean
-  variant?: "link" | "primary" | "secondary" |"tertiary" | "outline" | "dashed" | "danger"
+  variant?: "link" | "primary" | "secondary" |"tertiary" | "outline" | "dashed" | "danger" | "text"
   iconButton?: boolean
   size?: "large" | "medium" | "small"
   type?: "button" | "submit" | "reset"

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

@@ -10,6 +10,7 @@ const useStyles = makeStyles(
       root: {
         cursor: "pointer",
         display: "flex",
+        alignItems: "center",
         ...overrides?.CheckboxInput?.root
       },
       checkbox: {

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

@@ -7,13 +7,10 @@ import { Button, IButtonProps } from "../Button"
 
 const useStyles = makeStyles(({ breakpoints, constants }: ITheme) =>
   createStyles({
-    // JSS in CSS goes here
     root: {},
     inner: {
       padding: constants.generalUnit * 2,
       borderRadius: 2,
-      transform: "translate(-50%, 0)",
-      top: constants.generalUnit * 2,
       [breakpoints.down("sm")]: {
         maxWidth: `calc(100% - ${constants.generalUnit * 3}px) !important`
       }

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

@@ -1,9 +1,10 @@
-import React, { ReactNode, useRef, useState } from "react"
+import React, { ReactNode, useCallback, useRef, useState } from "react"
 import { makeStyles, createStyles, ITheme, useOnClickOutside } from "@chainsafe/common-theme"
 import { Typography } from "../Typography"
 import clsx from "clsx"
 import { DirectionalDownIcon, SvgIcon } from "../Icons"
 import { Paper } from "../Paper"
+import { useOnScroll } from "../Scroll/useOnScroll.hook"
 
 const useStyles = makeStyles(
   ({ constants, animation, typography, palette, overrides }: ITheme) =>
@@ -83,34 +84,64 @@ const useStyles = makeStyles(
         zIndex: 1000,
         padding: 0,
         "&.top-left": {
-          top: 0,
+          "&.up": {
+            bottom: 0
+          },
+          "&.down": {
+            top: 0
+          },
           left: 0,
           ...overrides?.MenuDropdown?.options?.position?.topLeft
         },
         "&.top-center": {
-          top: 0,
+          "&.up": {
+            bottom: 0
+          },
+          "&.down": {
+            top: 0
+          },
           left: "50%",
           transform: "translateX(-50%)",
           ...overrides?.MenuDropdown?.options?.position?.topCenter
         },
         "&.top-right": {
-          top: 0,
+          "&.up": {
+            bottom: 0
+          },
+          "&.down": {
+            top: 0
+          },
           right: 0,
           ...overrides?.MenuDropdown?.options?.position?.topRight
         },
         "&.bottom-left": {
-          top: "100%",
+          "&.up": {
+            bottom: "100%"
+          },
+          "&.down": {
+            top: "100%"
+          },
           left: 0,
           ...overrides?.MenuDropdown?.options?.position?.bottomLeft
         },
         "&.bottom-center": {
-          top: "100%",
+          "&.up": {
+            bottom: "100%"
+          },
+          "&.down": {
+            top: "100%"
+          },
           left: "50%",
           transform: "translateX(-50%)",
           ...overrides?.MenuDropdown?.options?.position?.bottomCenter
         },
         "&.bottom-right": {
-          top: "100%",
+          "&.up": {
+            bottom: "100%"
+          },
+          "&.down": {
+            top: "100%"
+          },
           right: 0,
           ...overrides?.MenuDropdown?.options?.position?.bottomRight
         },
@@ -168,7 +199,8 @@ interface IMenuDropdownProps {
   | "bottom-left"
   | "bottom-center"
   | "bottom-right"
-  menuItems?: IMenuItem[]
+  dynamicAnchor?: boolean
+  menuItems: IMenuItem[]
   title?: string
   classNames?: {
     icon?: string
@@ -208,6 +240,24 @@ const MenuDropdown = ({
     }
   })
 
+  const [dropDirection, setDropDirection] = useState<"up" | "down">("down")
+
+  const managePosition = useCallback(() => {
+    // TODO: Debounce
+    const { offsetTop } = ref.current as unknown as HTMLDivElement
+
+    if (offsetTop < window.pageYOffset + (window.innerHeight / 2)) {
+      setDropDirection("down")
+    } else {
+      setDropDirection("up")
+    }
+  }, [ref])
+
+
+  useOnScroll({
+    onScroll: managePosition
+  })
+
   return (
     <div
       ref={ref}
@@ -239,7 +289,7 @@ const MenuDropdown = ({
       </section>
       <Paper
         shadow="shadow2"
-        className={clsx(classes.options, classNames?.options, anchor, {
+        className={clsx(classes.options, classNames?.options, anchor, dropDirection, {
           ["open"]: open
         })}
       >