Merge dev into epic/files-billing (#1491)

* [Storage] Copy cid functionality (#1437) * Copy features added, overflow issue still present * Swapped to button * lingui extract * Updated button * lingui extract * Apply suggestions from code review Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * Fixed size * lingui extract * minmax * lingui extract * revert unrelated changes * lingui extract * Apply suggestions from code review Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Co-authored-by: Tanmoy Basak Anjan <tanmoy3399@gmail.com> Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Co-authored-by: Thibaut Sardan <github@thib.top> * [STORAGE] Rename file in bucket (#1471) * formik submit not firing * fix mobile * lingui extract * Update packages/storage-ui/src/Components/Modules/FileSystemItem/FileSystemTableItem.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * make eslint :) Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * 10min timeout for everyone (#1472) * Translated using Weblate (French) (#1478) Currently translated at 100.0% (262 of 262 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 <j.lavoie@net-c.ca> * add ui tests for search (#1479) * bump cypress to v8.3.1 (#1480) * Sharing feature explainer (#1477) * refactor modal * steps logic * image centered * lingui extract * lingui extract * typo * refactor with hook, change icon, ad to share menu * nits * fix storage building Co-authored-by: GitHub Actions <actions@github.com> * Adding multi selects on mobile view with long press (#1470) * using long press * dragg preview problems * typos * events almost ready * resets * long press options * long press updates * formats * dark mode colors * added hover with breakpoints * lingui extract * Apply suggestions from code review Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * curly spacing * borders * clicks proper placement * reverted linting * removed preview on mobile Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Co-authored-by: Ryan Noble <ryanjnoble@gmail.com> Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Tanmoy Basak Anjan <tanmoy3399@gmail.com> Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Co-authored-by: Weblate (bot) <hosted@weblate.org> Co-authored-by: J. Lavoie <j.lavoie@net-c.ca> Co-authored-by: Andrew Snaith <asnaith@users.noreply.github.com>
ChainSafe · Sep 6, 2021 · a440bda · a440bda
1 parent 0795b57
commit a440bda
Show file tree

Hide file tree

Showing 54 changed files with 835 additions and 310 deletions.
diff --git a/.github/workflows/test-storage.yml b/.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

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

diff --git a/packages/common-components/src/Modal/Modal.tsx b/packages/common-components/src/Modal/Modal.tsx
@@ -6,7 +6,6 @@ import { CloseSvg } from "../Icons/icons/Close.icon"
 const useStyles = makeStyles(
   ({ animation, constants, breakpoints, palette, overrides, zIndex }: ITheme) =>
     createStyles({
-      // JSS in CSS goes here
       root: {
         position: "fixed",
         zIndex: zIndex?.layer3,
@@ -23,11 +22,6 @@ const useStyles = makeStyles(
         borderBottomRightRadius: 0,
         transitionDuration: `${animation.transform}ms`,
         transitionProperty: "opacity",
-        "&.closable": {
-          "&:before": {
-            cursor: "pointer"
-          }
-        },
         "&:before": {
           content: "''",
           display: "block",
@@ -97,24 +91,23 @@ const useStyles = makeStyles(
       },
       closeIcon: {
         ...constants.icon,
-        borderRadius: "50%",
+        width: 15,
+        height: 15,
         display: "block",
         top: 0,
-        backgroundColor: palette.common?.white.main,
         cursor: "pointer",
         position: "absolute",
         "& svg": {
-          height: 15,
-          width: 15
+          stroke: palette.common?.black.main
         },
         "&.right": {
-          transform: "translate(50%, -50%)",
+          transform: "translate(-50%, 50%)",
           right: 0,
           ...overrides?.Modal?.closeIcon?.right
         },
         "&.left": {
           left: 0,
-          transform: "translate(-50%, -50%)",
+          transform: "translate(50%, -50%)",
           ...overrides?.Modal?.closeIcon?.left
         },
         "&.none": {
@@ -127,19 +120,20 @@ const useStyles = makeStyles(
 
 interface IModalClasses {
   inner?: string
-  close?: string
+  closeIcon?: string
 }
 
 interface IModalProps {
   className?: string
   active: boolean
-  setActive?: (state: boolean) => void
   injectedClass?: IModalClasses
   closePosition?: "left" | "right" | "none"
   children?: ReactNode | ReactNode[]
   maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | number
   onModalBodyClick?: (e: React.MouseEvent) => void
+  onClickOutside?: (e?: React.MouseEvent) => void
   testId?: string
+  onClose?: () => void
 }
 
 const Modal = ({
@@ -148,66 +142,58 @@ const Modal = ({
   closePosition = "right",
   injectedClass,
   active = false,
-  setActive,
   maxWidth = "sm",
   onModalBodyClick,
-  testId
+  testId,
+  onClose,
+  onClickOutside
 }: IModalProps) => {
   const classes = useStyles()
 
   const ref = useRef(null)
 
   const handleClose = () => {
-    if (active && setActive) {
-      setActive(false)
-    }
+    onClose && onClose()
   }
 
-  useOnClickOutside(ref, () => handleClose())
+  useOnClickOutside(ref, () => onClickOutside && onClickOutside())
 
   if (!active) return null
 
-  return <article
-    className={clsx(
-      classes.root,
-      className,
-      setActive ? "closable" : "",
-      "active"
-    )}
-    onClick={onModalBodyClick}
-  >
-    <section
-      data-testid={`modal-container-${testId}`}
-      ref={ref}
-      style={
-        maxWidth && typeof maxWidth == "number"
-          ? {
-            width: "100%",
-            maxWidth: maxWidth
-          }
-          : {}
-      }
-      className={clsx(
-        classes.inner,
+  return (
+    <article
+      className={clsx(classes.root, className, "active")}
+      onClick={onModalBodyClick}
+    >
+      <section
+        data-testid={`modal-container-${testId}`}
+        ref={ref}
+        style={
+          maxWidth && typeof maxWidth == "number"
+            ? {
+              width: "100%",
+              maxWidth: maxWidth
+            }
+            : {}
+        }
+        className={clsx(
+          classes.inner,
           injectedClass?.inner,
           typeof maxWidth != "number" ? maxWidth : ""
-      )}
-    >
-      {setActive && (
-        <div
-          onClick={() => handleClose()}
-          className={clsx(
-            classes.closeIcon,
-            injectedClass?.close,
-            closePosition
-          )}
-        >
-          <CloseSvg />
-        </div>
-      )}
-      {children}
-    </section>
-  </article>
+        )}
+      >
+        {closePosition !== "none" && (
+          <div
+            onClick={handleClose}
+            className={clsx(classes.closeIcon, injectedClass?.closeIcon, closePosition)}
+          >
+            <CloseSvg />
+          </div>
+        )}
+        {children}
+      </section>
+    </article>
+  )
 }
 
 export default Modal

diff --git a/packages/common-components/src/SearchBar/SearchBar.tsx b/packages/common-components/src/SearchBar/SearchBar.tsx
@@ -194,6 +194,7 @@ export interface SearchBarProps {
   loaderType?: LOADER
   size?: "large" | "medium" | "small"
   onChange: (e: ChangeEvent<HTMLInputElement>) => void
+  testId?: string
 }
 
 const SearchBar: React.FC<SearchBarProps> = ({
@@ -205,7 +206,8 @@ const SearchBar: React.FC<SearchBarProps> = ({
   loaderType = LOADER.PulseLoader,
   size = "large",
   name,
-  onChange
+  onChange,
+  testId
 }: SearchBarProps) => {
   const classes = useStyles()
   const spinnerSize = size === "large" ? 12 : size === "medium" ? 8 : 6
@@ -225,6 +227,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
           value={value}
           placeholder={placeholder}
           onChange={onChange}
+          data-testid={testId}
         />
         <div className={clsx(classes.standardIcon, size, "right")}>
           <Spinner

diff --git a/packages/common-components/src/Table/Table.tsx b/packages/common-components/src/Table/Table.tsx
@@ -3,7 +3,7 @@ import { ITheme, makeStyles, createStyles } from "@chainsafe/common-theme"
 import clsx from "clsx"
 
 const useStyles = makeStyles(
-  ({ animation, constants, palette, overrides }: ITheme) =>
+  ({ animation, constants, palette, overrides, breakpoints }: ITheme) =>
     createStyles({
       root: {
         display: "flex",
@@ -28,17 +28,19 @@ const useStyles = makeStyles(
         ...overrides?.Table?.table?.dense
       },
       hover: {
-        "& tr:hover": {
-          backgroundColor: palette.additional["gray"][2]
-        },
-        "& tr:nth-child(even)": {
-          "&:hover": {
+        [breakpoints.up("md")]: {
+          "& tr:hover": {
             backgroundColor: palette.additional["gray"][2]
-          }
-        },
-        "&.selected": {
-          "&:hover": {
-            backgroundColor: palette.additional["gray"][4]
+          },
+          "& tr:nth-child(even)": {
+            "&:hover": {
+              backgroundColor: palette.additional["gray"][2]
+            }
+          },
+          "&.selected": {
+            "&:hover": {
+              backgroundColor: palette.additional["gray"][4]
+            }
           }
         },
         ...overrides?.Table?.table?.hover

diff --git a/packages/common-components/src/stories/Modal.stories.tsx b/packages/common-components/src/stories/Modal.stories.tsx
@@ -43,9 +43,9 @@ export const ModalStory = (): React.ReactNode => {
       </Button>
       <Modal
         active={active}
-        setActive={setActive}
         maxWidth={select("Max width position", maxWidthOptions, "md")}
         closePosition={select("Close position", closePositionOptions, "left")}
+        onClose={() => setActive(false)}
       >
         <Typography>
           Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas,

diff --git a/packages/common-theme/src/Hooks/index.ts b/packages/common-theme/src/Hooks/index.ts
@@ -1,5 +1,6 @@
 import { useOnClickOutside } from "./useOnClickOutside"
 import { useMediaQuery } from "./useMediaQuery"
 import { useDoubleClick } from "./useDoubleClick"
+import { useLongPress, LongPressEvents } from "./useLongPress"
 
-export { useOnClickOutside, useMediaQuery, useDoubleClick }
+export { useOnClickOutside, useMediaQuery, useDoubleClick, useLongPress, LongPressEvents }
diff --git a/packages/common-theme/src/Hooks/useLongPress.tsx b/packages/common-theme/src/Hooks/useLongPress.tsx
@@ -0,0 +1,66 @@
+import { useCallback, useRef, useState } from "react"
+
+export interface LongPressEvents {
+  onMouseDown: (e: React.MouseEvent) => void
+  onTouchStart: (e: React.TouchEvent) => void
+  onMouseUp: (e: React.MouseEvent) => void
+  onMouseLeave: (e: React.MouseEvent) => void
+  onTouchEnd: (e: React.TouchEvent) => void
+}
+
+export const useLongPress = (
+  onLongPress: ((e?: React.MouseEvent) => void) | null,
+  onClick: ((e?: React.MouseEvent) => void) | null,
+  delay = 300
+): LongPressEvents => {
+  const [longPressTriggered, setLongPressTriggered] = useState(false)
+  const timeout: any = useRef()
+  const target: any = useRef()
+
+  const start = useCallback(
+    (event: any) => {
+      if (event.target) {
+        event.target.addEventListener("touchend", preventDefault, {
+          passive: false
+        })
+        target.current = event.target
+      }
+      timeout.current = setTimeout(() => {
+        onLongPress && onLongPress(event)
+        setLongPressTriggered(true)
+      }, delay)
+
+    }, [onLongPress, delay]
+  )
+
+  const clear = useCallback(
+    (shouldTriggerClick = true) => {
+      timeout.current && clearTimeout(timeout.current)
+      shouldTriggerClick && !longPressTriggered && onClick && onClick()
+      setLongPressTriggered(false)
+      if (target.current) {
+        target.current.removeEventListener("touchend", preventDefault)
+      }
+    }, [onClick, longPressTriggered]
+  )
+
+  return {
+    onMouseDown: (e: React.MouseEvent) => start(e),
+    onTouchStart: (e: React.TouchEvent) => start(e),
+    onMouseUp: (e: React.MouseEvent) => clear(e),
+    onMouseLeave: () => clear(false),
+    onTouchEnd: (e: React.TouchEvent) => clear(e)
+  }
+}
+
+const isTouchEvent = (event: any) => {
+  return "touches" in event
+}
+
+const preventDefault = (event: any) => {
+  if (!isTouchEvent(event)) return
+
+  if (event.touches.length < 2 && event.preventDefault) {
+    event.preventDefault()
+  }
+}
diff --git a/packages/files-ui/cypress/fixtures/filesTestData.ts b/packages/files-ui/cypress/fixtures/filesTestData.ts
@@ -1,2 +1,2 @@
-export const folderName = "Testing"
+export const folderName = "Group"
 export const folderPath = `/${folderName}`
diff --git a/packages/files-ui/cypress/support/page-objects/basePage.ts b/packages/files-ui/cypress/support/page-objects/basePage.ts
@@ -2,6 +2,7 @@
 
 export const basePage = {
   appHeaderLabel: () => cy.get("[data-cy=files-app-header]", { timeout: 20000 }),
+  searchInput: () => cy.get("[data-testid=input-search-bar]"),
   signOutDropdown: () => cy.get("[data-testid=menu-title-sign-out]"),
   signOutMenuOption: () => cy.get("[data-cy=menu-sign-out]"),
   // Mobile view only element

diff --git a/packages/files-ui/cypress/support/page-objects/binPage.ts b/packages/files-ui/cypress/support/page-objects/binPage.ts
@@ -1,18 +1,15 @@
 import { basePage } from "./basePage"
+import { fileBrowser } from "./fileBrowser"
 
 export const binPage = {
   ...basePage,
+  ...fileBrowser,
 
-  // main file browser elements (bin view only)
+  // bin page specific file browser elements
   recoverSelectedButton: () => cy.get("[data-testId=button-recover-selected-file]"),
   deleteSelectedButton: () => cy.get("[data-testId=button-delete-selected-file]"),
 
-  // file browser row elements
-  fileItemRow: () => cy.get("[data-cy=file-item-row]", { timeout: 20000 }),
-  fileItemName: () => cy.get("[data-cy=file-item-name]"),
-  fileItemKebabButton: () => cy.get("[data-testid=menu-title-fileDropdown]"),
-
-  // menu elements (bin view only)
+  // kebab menu elements
   recoverMenuOption: () => cy.get("[data-cy=menu-recover]"),
   deleteMenuOption: () => cy.get("[data-cy=menu-delete]")
 }
diff --git a/packages/files-ui/cypress/support/page-objects/fileBrowser.ts b/packages/files-ui/cypress/support/page-objects/fileBrowser.ts
@@ -0,0 +1,8 @@
+export const fileBrowser = {
+  fileItemKebabButton: () => cy.get("[data-testid=menu-title-fileDropdown]"),
+  fileItemName: () => cy.get("[data-cy=file-item-name]"),
+  fileItemRow: () => cy.get("[data-cy=file-item-row]", { timeout: 20000 }),
+  fileTable: () => cy.get("[data-testid=table-home]"),
+  folderBreadcrumb: () => cy.get("[data-cy=navigation-folder-breadcrumb]"),
+  noDataStateInfo: () => cy.get("[data-cy=data-state-no-files]")
+}