Merge dev to epic/files-billing 7/12/2021

.github/pull_request_template.md

@@ -4,16 +4,12 @@ closes #
 
 Submission checklist: 
 
-> Remove anything below that is not applicable 
+<!-- Remove anything below that is not applicable -->   
 
-- [x] Functionality
-- - [x] Feature works as intended after change
-- - [x] Applicable dependancies have been deployed 
+#### Layout
+- [] Change looks good in the desktop web ui
+- - [] Change looks good in the mobile web ui
 
-- [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 
+#### Theme
+- [] Components / elements inspected in light mode 
+- [] Components / elements inspected in dark mode 

README.md

@@ -20,10 +20,6 @@ Theme context and other utilities for generating and using the theming capabilit
 
 The UI for Chainsafe Files
 
-#### **`packages/gaming-ui`**
-
-The UI for Chainsafe Gaming
-
 #### **`packages/storage-ui`**
 
 The UI for Chainsafe Storage

package.json

@@ -38,9 +38,6 @@
     "build:files-ui": "yarn wsrun -p files-ui -c build",
     "release:files-ui": "yarn wsrun -p files-ui -c release",
     "start:files-ui": "yarn wsrun -p files-ui -c start",
-    "build:gaming-ui": "yarn wsrun -p gaming-ui -c build",
-    "release:gaming-ui": "yarn wsrun -p gaming-ui -c release",
-    "start:gaming-ui": "yarn wsrun -p gaming-ui -c start",
     "build:storage-ui": "yarn wsrun -p storage-ui -c build",
     "release:storage-ui": "yarn wsrun -p storage-ui -c release",
     "start:storage-ui": "yarn wsrun -p storage-ui -c start",

packages/common-components/package.json

@@ -10,7 +10,7 @@
   },
   "scripts": {
     "storybook": "start-storybook -p 6006",
-    "build:storybook": "build-storybook",
+    "build:storybook": "(export NODE_OPTIONS=--openssl-legacy-provider; build-storybook)",
     "build": "rollup -c",
     "start": "rollup -c -w",
     "lint": "eslint './{src, cypress}/**/*.{js,jsx,ts,tsx}'"

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

@@ -361,7 +361,7 @@ const Button: React.FC<IButtonProps> = ({
       {loading && (
         <>
           <Loading
-            type="inherit"
+            type="initial"
             size={16}
           />
         </>

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

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

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

@@ -67,6 +67,7 @@ export { default as SearchIcon, SearchSvg } from "./icons/Search.icon"
 export { default as SettingIcon, SettingSvg } from "./icons/Setting.icon"
 export { default as ShareAltIcon, ShareAltSvg } from "./icons/ShareAlt.icon"
 export { default as StarIcon, StarSvg } from "./icons/Star.icon"
+export { default as SortIcon, SortSvg } from "./icons/Sort.icon"
 export { default as SunIcon, SunSvg } from "./icons/Sun.icon"
 export { default as SubscriptionPlanIcon, SubscriptionSvg } from "./icons/SubscriptionPlan.icon"
 export { default as TableIcon, TableSvg } from "./icons/Table.icon"

packages/common-components/src/Spinner/Loading.tsx

@@ -1,8 +1,8 @@
-import React from "react"
+import React, { useMemo } from "react"
 import { ITheme, useTheme } from "@chainsafe/common-theme"
 
 export interface ILoadingProps {
-  type?: "inherit" | "primary" | "dark" | "light"
+  type?: "initial" | "primary" | "dark" | "light"
   size?: number
   className?: string
 }
@@ -13,6 +13,42 @@ const Loading: React.FC<ILoadingProps> = ({
   className
 }) => {
   const theme: ITheme = useTheme()
+
+  const uniqueKey = `${Math.random()}-${Math.random()}`
+
+  const {
+    start,
+    end
+  } = useMemo(() => {
+    switch (type) {
+      case "primary":
+        return {
+          start: theme.palette.primary.main,
+          end: "transparent"
+        }
+      case "light":
+        return {
+          start: theme.palette.common.white.main,
+          end: "transparent"
+        }
+      case "dark":
+        return {
+          start: theme.palette.common.black.main,
+          end: "transparent"
+        }
+      case "initial":
+        return {
+          start: "#FFFFFF",
+          end: "transparent"
+        }
+      default:
+        return {
+          start: "#FFFFFF",
+          end: "transparent"
+        }
+    }
+  }, [type, theme.palette])
+
   return (
     <svg
       width={size}
@@ -22,35 +58,27 @@ const Loading: React.FC<ILoadingProps> = ({
     >
       <defs>
         <linearGradient
-          id="gradient"
+          id={`gradient-${uniqueKey}`}
           x1="0%"
           y1="0%"
           x2="0%"
           y2="100%"
         >
           <stop
             offset="0%"
-            stopColor={
-              type === "primary"
-                ? theme.palette.primary.main
-                : type === "dark"
-                  ? theme.palette.common.black.main
-                  : theme.palette.additional["gray"][5]
-            }
+            stopColor={start}
           />
           <stop
             offset="100%"
-            stopColor={
-              type === "light" ? theme.palette.common.white.main : "transparent"
-            }
+            stopColor={end}
           />
         </linearGradient>
       </defs>
       <circle
         cx="50"
         cy="50"
         r="47"
-        stroke="url(#gradient)"
+        stroke={`url(#gradient-${uniqueKey})`}
         strokeWidth="6"
         fill="none"
         transform="rotate(90 50 50)"

packages/files-ui/cypress/support/commands.ts

@@ -26,17 +26,16 @@
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
 import { authenticationPage } from "./page-objects/authenticationPage"
-import { apiTestHelper } from "./utils/apiTestHelper"
+import { apiTestHelper, ClearBucketType } from "./utils/apiTestHelper"
 import { ethers, Wallet } from "ethers"
 import { homePage } from "./page-objects/homePage"
 import { testPrivateKey, testAccountPassword, localHost } from "../fixtures/loginData"
 import { CustomizedBridge } from "./utils/CustomBridge"
 import "cypress-file-upload"
 import "cypress-pipe"
-import { BucketType } from "@chainsafe/files-api-client"
 import { navigationMenu } from "./page-objects/navigationMenu"
 
-Cypress.Commands.add("clearBucket", (bucketType: BucketType) => {
+Cypress.Commands.add("clearBucket", (bucketType: ClearBucketType) => {
   apiTestHelper.clearBucket(bucketType)
 })
 
@@ -47,6 +46,7 @@ export interface Web3LoginOptions {
   clearCSFBucket?: boolean
   clearTrashBucket?: boolean
   deleteShareBucket?: boolean
+  withNewUser?: boolean
 }
 
 Cypress.Commands.add(
@@ -56,40 +56,58 @@ Cypress.Commands.add(
     url = localHost,
     clearCSFBucket = false,
     clearTrashBucket = false,
-    deleteShareBucket = false
+    deleteShareBucket = false,
+    withNewUser = true
   }: Web3LoginOptions = {}) => {
 
     cy.on("window:before:load", (win) => {
       const provider = new ethers.providers.JsonRpcProvider(
         "https://rinkeby.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847",
         4
       )
-      const signer = new Wallet(testPrivateKey, provider)
+      const signer = withNewUser
+        ? Wallet.createRandom()
+        : new Wallet(testPrivateKey, provider)
       // inject ethereum object in the global window
       Object.defineProperty(win, "ethereum", {
-        get: () => new CustomizedBridge(signer as any, provider as any)
+        get: () => new CustomizedBridge(signer as any, signer.address, provider as any)
       })
     })
 
-    // with nothing in localstorage (and in session storage)
-    // the whole login flow should kick in
-    cy.session("web3login", () => {
-      cy.visit(url)
-      authenticationPage.web3Button().click()
-      authenticationPage.showMoreButton().click()
-      authenticationPage.detectedWallet().click()
-      authenticationPage.web3SignInButton().safeClick()
-      authenticationPage.loginPasswordButton().click()
-      authenticationPage.loginPasswordInput().type(`${testAccountPassword}{enter}`)
-
-      if (saveBrowser) {
-        // this is taking forever for test accounts
-        authenticationPage.saveBrowserButton().click()
-      } else {
-        authenticationPage.doNotSaveBrowserButton().click()
-      }
-      homePage.appHeaderLabel().should("be.visible")
-    })
+    if (withNewUser){
+      cy.session("web3loginNewUser", () => {
+        cy.visit(url)
+        authenticationPage.web3Button().click()
+        authenticationPage.showMoreButton().click()
+        authenticationPage.detectedWallet().click()
+        authenticationPage.web3SignInButton().safeClick()
+        authenticationPage.signInExplainerContinueButton().safeClick()
+        // we are using the testAccount password here, but we could input anything
+        authenticationPage.signInSetupPasswordInput().type(`${testAccountPassword}`)
+        authenticationPage.signInSetupPasswordVerificationInput().type(`${testAccountPassword}{enter}`)
+
+        homePage.appHeaderLabel().should("be.visible")
+      })
+    } else {
+      cy.session("web3loginTestUser", () => {
+        cy.visit(url)
+        authenticationPage.web3Button().click()
+        authenticationPage.showMoreButton().click()
+        authenticationPage.detectedWallet().click()
+        authenticationPage.web3SignInButton().safeClick()
+        authenticationPage.loginPasswordButton().click()
+        authenticationPage.loginPasswordInput().type(`${testAccountPassword}{enter}`)
+
+        if (saveBrowser) {
+          // this is taking forever for test accounts
+          authenticationPage.saveBrowserButton().click()
+        } else {
+          authenticationPage.doNotSaveBrowserButton().click()
+        }
+        homePage.appHeaderLabel().should("be.visible")
+      })
+    }
+
 
     cy.visit(url)
     homePage.appHeaderLabel().should("be.visible")
@@ -115,7 +133,7 @@ Cypress.Commands.add(
   }
 )
 
-Cypress.Commands.add("safeClick", { prevSubject: "element" }, $element => {
+Cypress.Commands.add("safeClick", { prevSubject: "element" }, ($element?: JQuery<HTMLElement>) => {
   const click = ($el: JQuery<HTMLElement>) => $el.trigger("click")
   return cy
     .wrap($element)
@@ -137,9 +155,10 @@ declare global {
        * @param {Boolean} options.clearCSFBucket - (default: false) - whether any file in the csf bucket should be deleted.
        * @param {Boolean} options.clearTrashBucket - (default: false) - whether any file in the trash bucket should be deleted.
        * @param {Boolean} options.deleteShareBucket - (default: false) - whether any shared bucket should be deleted.
+       * @param {Boolean} options.withNewUser - (default: true) - whether to create a new user for this session.
        * @example cy.web3Login({saveBrowser: true, url: 'http://localhost:8080'})
        */
-      web3Login: (options?: Web3LoginOptions) => Chainable
+      web3Login: (options?: Web3LoginOptions) => void
 
       /**
        * Use this when encountering race condition issues resulting in
@@ -153,8 +172,14 @@ declare global {
        * https://github.com/cypress-io/cypress/issues/7306
        * 
        */
-      safeClick: () => Chainable
+      safeClick: ($element?: JQuery<HTMLElement>) => Chainable
 
+      /**
+       * Clear a bucket.
+       * @param {BucketType} - what bucket type to clear for this user.
+       * @example cy.clearBucket("csf")
+       */
+      clearBucket: (bucketType: ClearBucketType) => void
     }
   }
 }

packages/files-ui/cypress/support/index.ts

@@ -19,13 +19,9 @@ import "./commands"
 // the following gets rid of the exception "ResizeObserver loop limit exceeded"
 // which someone on the internet says we can safely ignore
 // source https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded
-Cypress.on("uncaught:exception", (err) => {
+Cypress.on("uncaught:exception", () => {
   /* returning false here prevents Cypress from failing the test */
-  if (err.message.includes("ResizeObserver loop limit exceeded")) {
-    // returning false here prevents Cypress from
-    // failing the test
-    return false
-  }
+  return false
 })
 
 // Hide fetch/XHR requests

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

@@ -12,6 +12,10 @@ export const authenticationPage = {
   // sign in section elements
   loginPasswordButton: () => cy.get("[data-cy=login-password-button]", { timeout: 20000 }),
   loginPasswordInput: () => cy.get("[data-cy=login-password-input]"),
+  signInExplainerContinueButton: () => cy.get("[data-cy=button-sign-in-explainer-continue]", { timeout: 20000 }),
+  signInSetupPasswordInput: () => cy.get("[data-cy=input-sign-in-password]"),
+  signInSetupPasswordVerificationInput: () => cy.get("[data-cy=input-sign-in-password-verification]"),
+  signInSetupPasswordSubmitButton: () => cy.get("[data-cy=button-sign-in-password]"),
 
   // save browser section elements
   saveBrowserButton: () => cy.get("[data-cy=save-browser-button]"),