Merge pull request #2070 from ChainSafe/dev

Release - 2022-04-04
ChainSafe · Apr 5, 2022 · 1bf5b21 · 1bf5b21
2 parents c4e0b7a + 1ef3ddb
commit 1bf5b21
Show file tree

Hide file tree

Showing 105 changed files with 1,999 additions and 744 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -66,7 +66,8 @@
             "delimiter": "semi",
             "requireLast": false
         }
-    }]
+    }],
+    "@typescript-eslint/no-loss-of-precision": "off"
   },
   "ignorePatterns": [
     ".github/**",

diff --git a/.github/workflows/test-files-on-demand.yml b/.github/workflows/test-files-on-demand.yml
@@ -24,7 +24,6 @@ jobs:
       - 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'

diff --git a/.github/workflows/test-files.yml b/.github/workflows/test-files.yml
@@ -33,7 +33,6 @@ jobs:
       - 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'

diff --git a/.github/workflows/test-storage.yml b/.github/workflows/test-storage.yml
@@ -33,7 +33,6 @@ jobs:
       - 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'

diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {},
   "devDependencies": {
     "@sentry/cli": "1.60.1",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
     "@typescript-eslint/parser": "^4.15.2",
     "chalk": "^4.1.0",
     "eslint": "^6.8.0",

diff --git a/packages/common-components/src/FileInput/FileInput.tsx b/packages/common-components/src/FileInput/FileInput.tsx
@@ -51,6 +51,8 @@ const useStyles = makeStyles(({ constants, palette, overrides }: ITheme) =>
     },
     error: {
       color: palette.error.main,
+      backgroundColor: palette.additional["gray"][3],
+      padding: "4px 40px",
       ...overrides?.FileInput?.error
     },
     item: {

diff --git a/packages/common-components/src/SearchBar/SearchBar.tsx b/packages/common-components/src/SearchBar/SearchBar.tsx
@@ -83,17 +83,15 @@ const useStyles = makeStyles(
           "& input": {
             fontSize: 16,
             lineHeight: "24px",
-            padding: `${constants.generalUnit}px ${
-              constants.generalUnit * 1.5
-            }px`
+            padding: `${constants.generalUnit}px ${constants.generalUnit * 1.5}px`,
+            paddingRight: constants.generalUnit * 4.25
           },
           ...overrides?.SearchBar?.inputArea?.large
         },
         "&.medium": {
           "& input": {
-            padding: `${constants.generalUnit * 0.625}px ${
-              constants.generalUnit * 1.5
-            }px`
+            padding: `${constants.generalUnit * 0.625}px ${constants.generalUnit * 1.5}px`,
+            paddingRight: constants.generalUnit * 4.25
           },
           ...overrides?.SearchBar?.inputArea?.medium
         },

diff --git a/packages/files-ui/.env.example b/packages/files-ui/.env.example
@@ -1,7 +1,7 @@
 PORT=3000
 HTTPS=false
 
-REACT_APP_API_URL=https://stage.imploy.site/api/v1
+REACT_APP_API_URL=https://stage-api.chainsafe.io/api/v1
 
 REACT_APP_STRIPE_PK=
 REACT_APP_SENTRY_DSN_URL=

diff --git a/packages/files-ui/cypress/fixtures/cardData.ts b/packages/files-ui/cypress/fixtures/cardData.ts
@@ -1,3 +1,5 @@
+import dayjs from "dayjs"
+
 export const visaNumber = "4242424242424242"
 export const visaCvc = "123"
 export const visaExpiry = "12/30"
@@ -6,4 +8,5 @@ export const mastercardCvc = "456"
 export const mastercardExpiry = "01/31"
 export const invalidCardNumber = "6242424242424255"
 export const invalidCvc = "11"
-export const invalidExpiry = "02/21"
+export const invalidExpiry = "02/21"
+export const currentDateExpiry = dayjs().format("MM/YY")
diff --git a/packages/files-ui/cypress/support/commands.ts b/packages/files-ui/cypress/support/commands.ts
@@ -46,6 +46,7 @@ export interface Web3LoginOptions {
   clearCSFBucket?: boolean
   clearTrashBucket?: boolean
   deleteShareBucket?: boolean
+  withNewSession?: boolean
   withNewUser?: boolean
   deleteCreditCard? : boolean
   resetToFreePlan?: boolean
@@ -60,6 +61,7 @@ Cypress.Commands.add(
     clearTrashBucket = false,
     deleteShareBucket = false,
     withNewUser = true,
+    withNewSession = false,
     deleteCreditCard = false,
     resetToFreePlan = false
   }: Web3LoginOptions = {}) => {
@@ -78,8 +80,9 @@ Cypress.Commands.add(
       })
     })
 
-    if (withNewUser){
-      cy.session("web3loginNewUser", () => {
+    if (withNewUser || withNewSession){
+      const sessionName = `web3loginNewUser-${withNewSession ? new Date().toString() : "0"}`
+      cy.session(sessionName, () => {
         cy.visit(url)
         authenticationPage.web3Button().click()
         authenticationPage.showMoreButton().click()
@@ -213,6 +216,7 @@ declare global {
        * @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.
+       * @param {Boolean} options.withNewSession - (default: false) - whether to create a new session.
        * @param {Boolean} options.deleteCreditCard - (default: false) - whether to delete the default credit card associate to the account.
        * @param {Boolean} options.resetToFreePlan - (default false) - whether to cancel any plan to make sure the user is on the free one.
        * @example cy.web3Login({saveBrowser: true, url: 'http://localhost:8080'})

diff --git a/packages/files-ui/cypress/support/index.ts b/packages/files-ui/cypress/support/index.ts
@@ -16,11 +16,8 @@
 // Import commands.js using ES2015 syntax:
 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
+// returning false prevents Cypress from failing the test automatically
 Cypress.on("uncaught:exception", () => {
-  /* returning false here prevents Cypress from failing the test */
   return false
 })
 

diff --git a/packages/files-ui/cypress/support/page-objects/basePage.ts b/packages/files-ui/cypress/support/page-objects/basePage.ts
@@ -5,6 +5,14 @@ export const basePage = {
   searchInput: () => cy.get("[data-testid=input-search-bar]"),
   signOutDropdown: () => cy.get("[data-testid=dropdown-title-sign-out-dropdown]"),
   signOutMenuOption: () => cy.get("[data-cy=menu-sign-out]"),
+  notificationButton: () => cy.get("[data-testid=dropdown-title-notifications]"),
+  notificationsHeader: () => cy.get("[data-cy=label-notifications-header]"),
+  notificationsThisWeekHeader: () => cy.get("[data-cy=label-notifications-this-week]"),
+  notificationsOlderHeader: () => cy.get("[data-cy=label-notifications-older]"),
+  notificationContainer: () => cy.get("[data-cy=container-notification]"),
+  notificationTitle: () => cy.get("[data-cy=label-notification-title]"),
+  notificationTime: () => cy.get("[data-cy=label-notification-time]"),
+
   // Mobile view only element
   hamburgerMenuButton: () => cy.get("[data-testid=icon-hamburger-menu]"),
 

diff --git a/packages/files-ui/cypress/support/page-objects/homePage.ts b/packages/files-ui/cypress/support/page-objects/homePage.ts
@@ -25,6 +25,7 @@ export const homePage = {
   renameMenuOption: () => cy.get("[data-cy=menu-rename]"),
   moveMenuOption: () => cy.get("[data-cy=menu-move]"),
   deleteMenuOption: () => cy.get("[data-cy=menu-delete]"),
+  shareMenuOption: () => cy.get("[data-cy=menu-share]"),
 
   // helpers and convenience functions
   uploadFile(filePath: string) {

diff --git a/packages/files-ui/cypress/support/page-objects/modals/editSharedFolderModal.ts b/packages/files-ui/cypress/support/page-objects/modals/editSharedFolderModal.ts
@@ -1,6 +1,6 @@
 export const editSharedFolderModal = {
   body: () => cy.get("[data-testid=modal-container-edit-shared-folder]", { timeout: 10000 }),
-  cancelButton: () => cy.get("[data-cy=button-cancel-create-shared-folder]"),
+  closeButton: () => cy.get("[data-cy=button-close-manage-shared-folder]"),
   createButton: () => cy.get("[data-cy=button-create-shared-folder]", { timeout: 10000 }),
   editPermissionInput: () => cy.get("[data-cy=input-edit-permission]"),
   folderNameInput: () => cy.get("[data-cy=input-shared-folder-name]"),

diff --git a/packages/files-ui/cypress/support/page-objects/modals/shareFileModal.ts b/packages/files-ui/cypress/support/page-objects/modals/shareFileModal.ts
@@ -0,0 +1,10 @@
+export const shareFileModal = {
+  body: () => cy.get("[data-testid=modal-container-share-file]", { timeout: 10000 }),
+  shareNameInput: () => cy.get("[data-cy=input-new-share-name]"),
+  selectFolderInput: () => cy.get("[data-cy=input-select-existing-folder]"),
+  existingFolderInputOption: () => cy.get("[data-cy=input-select-existing-folder-option]"),
+  keepOriginalFilesCheckbox: () => cy.get("[data-testid=checkbox-keep-original-files]"),
+  cancelButton: () => cy.get("[data-testid=button-cancel-share-file]"),
+  copyOverButton: () => cy.get("[data-testid=button-copy-over]"),
+  moveOverButton: () => cy.get("[data-testid=button-move-over]")
+}
diff --git a/packages/files-ui/cypress/support/page-objects/settingsPage.ts b/packages/files-ui/cypress/support/page-objects/settingsPage.ts
@@ -1,5 +1,5 @@
 import { basePage } from "./basePage"
-import { visaNumber, visaExpiry, visaCvc } from "../../fixtures/cardData"
+import { visaNumber, visaExpiry, visaCvc, currentDateExpiry } from "../../fixtures/cardData"
 import { cardAddedToast } from "../../support/page-objects/toasts/cardAddedToast"
 import { selectPlanModal } from "../../support/page-objects/modals/billing/selectPlanModal"
 import { planDetailsModal } from "../../support/page-objects/modals/billing/planDetailsModal"
@@ -40,8 +40,9 @@ export const settingsPage = {
   payNowButton: () => cy.get("[data-testid=button-pay-invoice]"),
 
   // use this convenience function when an upgraded account is required as a test requisite
-  upgradeSubscription(plan: "pro" | "max") {
-    const planContainer = plan === "pro" ? "@filesProBox" : "@filesMaxBox"
+  upgradeSubscription(subDetails: {plan: "pro"|"max"; isCardExpiring?: boolean}) {
+    const planContainer = subDetails.plan === "pro" ? "@filesProBox" : "@filesMaxBox"
+    const cardExpiry = subDetails.isCardExpiring === true ? currentDateExpiry : visaExpiry
 
     this.subscriptionTabButton().click()
     this.changePlanButton().click()
@@ -57,7 +58,7 @@ export const settingsPage = {
       .click()
     cy.awaitStripeElementReady()
     selectPaymentMethodModal.cardNumberInput().type(visaNumber)
-    selectPaymentMethodModal.expiryDateInput().type(visaExpiry)
+    selectPaymentMethodModal.expiryDateInput().type(cardExpiry)
     selectPaymentMethodModal.cvcNumberInput().type(visaCvc)
     selectPaymentMethodModal.useThisCardButton().click()
     cy.awaitStripeConfirmation()

diff --git a/packages/files-ui/cypress/support/page-objects/sharedPage.ts b/packages/files-ui/cypress/support/page-objects/sharedPage.ts
@@ -11,7 +11,7 @@ export const sharedPage = {
   createSharedFolderButton: () => cy.get("[data-cy=button-create-a-shared-folder]"),
   sharedFolderItemRow: () => cy.get("[data-cy=row-shared-folder-item]", { timeout: 20000 }),
   sharedFolderIcon: () => cy.get("[data-cy=cell-shared-folder-icon]"),
-  sharedFolderItemName: () => cy.get("[data-cy=cell-shared-folder-item-name]"),
+  sharedFolderItemName: () => cy.get("[data-cy=cell-shared-folder-item-name]", { timeout: 10000 }),
   shareOwnerCell: () => cy.get("[data-cy=cell-share-owner]"),
   sharedWithCell: () => cy.get("[data-cy=cell-shared-with]"),
   sharedFolderSizeCell: () => cy.get("[data-cy=cell-shared-folder-size]"),
@@ -30,7 +30,7 @@ export const sharedPage = {
     createSharedFolderModal.body().should("be.visible")
     createSharedFolderModal.folderNameInput().type(sharedFolderName)
     createSharedFolderModal.createButton().safeClick()
-    editSharedFolderModal.cancelButton().safeClick()
+    editSharedFolderModal.closeButton().safeClick()
     editSharedFolderModal.body().should("not.exist")
     sharedPage.sharedFolderItemRow().should("have.length", 1)
   }

diff --git a/packages/files-ui/cypress/support/page-objects/toasts/shareSuccessToast.ts b/packages/files-ui/cypress/support/page-objects/toasts/shareSuccessToast.ts
@@ -0,0 +1,4 @@
+export const shareSuccessToast = {
+  body: () => cy.get("[data-testid=toast-share-success]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-share-success]")
+}
diff --git a/packages/files-ui/cypress/support/page-objects/toasts/sharingProgressToast.ts b/packages/files-ui/cypress/support/page-objects/toasts/sharingProgressToast.ts
@@ -0,0 +1,4 @@
+export const sharingProgressToast = {
+  body: () => cy.get("[data-testid=toast-sharing-progress]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-sharing-progress]")
+}
diff --git a/packages/files-ui/cypress/support/utils/apiTestHelper.ts b/packages/files-ui/cypress/support/utils/apiTestHelper.ts
@@ -4,7 +4,7 @@ import { BucketType } from "@chainsafe/files-api-client"
 import { navigationMenu } from "../page-objects/navigationMenu"
 import { homePage } from "../page-objects/homePage"
 
-const API_BASE_URL = "https://stage.imploy.site/api/v1"
+const API_BASE_URL = "https://stage-api.chainsafe.io/api/v1"
 const REFRESH_TOKEN_KEY = "csf.refreshToken"
 const FREE_PLAN_ID = "prod_JwRu6Ph25b1f2O"
 
@@ -55,10 +55,10 @@ export const apiTestHelper = {
             }
 
             resolve()
-          } catch (e){
-            cy.log("Something wrong happened during the subscription cancelation")
-            console.log(e)
+          } catch (e: any){
+            console.error(e)
             reject(e)
+            throw new Error("Something wrong happened during the subscription cancelation")
           }
         })
     })
@@ -132,6 +132,7 @@ export const apiTestHelper = {
         } catch(e){
           console.error(e)
           reject(e)
+          throw new Error("Something wrong happened when creating a folder")
         }
 
         navigationMenu.binNavButton().click()
@@ -141,7 +142,5 @@ export const apiTestHelper = {
         homePage.fileItemName().contains(firstFolderName)
       })
     })
-
-
   }
 }
diff --git a/packages/files-ui/cypress/tests/file-management-spec.ts b/packages/files-ui/cypress/tests/file-management-spec.ts
@@ -50,17 +50,17 @@ describe("File management", () => {
     it("can move a file in and out of a folder", () => {
       cy.web3Login({ clearCSFBucket: true })
 
-      // upload a file and save it's name as a cypress alias
+      // upload a file and save its name as a cypress alias
       homePage.uploadFile("../fixtures/uploadedFiles/text-file.txt")
       homePage.fileItemRow().should("have.length", 1)
       homePage.fileItemName().invoke("text").as("fileName")
 
       // create a folder 
       apiTestHelper.createFolder(folderPath)
 
-      cy.get("@fileName").then(($fileName) => {
+      cy.get<string>("@fileName").then((fileName) => {
         // select the file and move it to the folder
-        homePage.fileItemName().contains(`${$fileName}`)
+        homePage.fileItemName().contains(fileName)
           .should("be.visible")
           .click()
         homePage.moveSelectedButton().click()
@@ -79,10 +79,10 @@ describe("File management", () => {
           .should("be.visible")
           .dblclick()
         homePage.fileItemRow().should("have.length", 1)
-        homePage.fileItemName().should("contain.text", $fileName)
+        homePage.fileItemName().should("contain.text", fileName)
 
         // move the file back to the home root
-        homePage.fileItemName().contains(`${$fileName}`)
+        homePage.fileItemName().contains(fileName)
           .should("be.visible")
           .click()
         homePage.moveSelectedButton().click()
@@ -98,10 +98,10 @@ describe("File management", () => {
           .should("be.visible")
           .should("have.length", 2)
         homePage.fileItemName().should("contain.text", folderName)
-        homePage.fileItemName().should("contain.text", $fileName)
+        homePage.fileItemName().should("contain.text", fileName)
 
         // ensure file already in the root cannot be moved to Home
-        homePage.fileItemName().contains(`${$fileName}`)
+        homePage.fileItemName().contains(fileName)
           .should("be.visible")
           .click()
         homePage.moveSelectedButton().click()
@@ -259,8 +259,8 @@ describe("File management", () => {
       binPage.fileItemName().invoke("text").as("binFile")
 
       // ensure file in bin matches the name of the deleted file
-      cy.get("@originalFile").then(($originalFile) => {
-        cy.get("@binFile").should("equals", $originalFile)
+      cy.get<string>("@originalFile").then((originalFile) => {
+        cy.get("@binFile").should("equals", originalFile)
       })
 
       // recover the file via the menu option
@@ -281,8 +281,8 @@ describe("File management", () => {
       binPage.fileItemRow().should("have.length", 1)
 
       // ensure file moved from the bin matches the name of the recovered file
-      cy.get("@recoveredFile").then(($recoveredFile) => {
-        cy.get("@binFile").should("equals", $recoveredFile)
+      cy.get<string>("@recoveredFile").then((recoveredFile) => {
+        cy.get("@binFile").should("equals", recoveredFile)
       })
 
       // permanently delete the file
@@ -437,12 +437,12 @@ describe("File management", () => {
       // return home and ensure both of the files were recovered
       navigationMenu.homeNavButton().click()
 
-      cy.get("@fileNameA").then(($fileNameA) => {
-        homePage.fileItemName().should("contain.text", $fileNameA)
+      cy.get<string>("@fileNameA").then((fileNameA) => {
+        homePage.fileItemName().should("contain.text", fileNameA)
       })
 
-      cy.get("@fileNameB").then(($fileNameB) => {
-        homePage.fileItemName().should("contain.text", $fileNameB)
+      cy.get<string>("@fileNameB").then((fileNameB) => {
+        homePage.fileItemName().should("contain.text", fileNameB)
       })
     })
   })