Merge remote-tracking branch 'origin/dev' into prod

ChainSafe · Oct 19, 2021 · 9a3e0a4 · 9a3e0a4
2 parents 4c88f09 + d23d305
commit 9a3e0a4
Show file tree

Hide file tree

Showing 42 changed files with 823 additions and 679 deletions.
diff --git a/packages/common-components/rollup.config.js b/packages/common-components/rollup.config.js
@@ -20,7 +20,7 @@ export default {
   plugins: [
     peerDepsExternal(),
     image(),
-    resolve(),
+    resolve({ browser: true }),
     commonjs(),
     typescript(),
     postcss({

diff --git a/packages/common-components/src/TextInput/TextInput.tsx b/packages/common-components/src/TextInput/TextInput.tsx
@@ -72,6 +72,7 @@ const useStyles = makeStyles(
         "&.disabled": {
           "& input": {
             color: palette.additional["gray"][6],
+            "-webkit-text-fill-color": palette.additional["gray"][6],
             backgroundColor: palette.additional["gray"][3],
             ...overrides?.TextInput?.input?.disabled
           },

diff --git a/packages/common-components/src/Toasts/ToastContent.tsx b/packages/common-components/src/Toasts/ToastContent.tsx
@@ -7,7 +7,7 @@ import { CheckCircleIcon, CloseCircleIcon, CloseCirceSvg, CrossSvg } from "../Ic
 import { ProgressBar } from "../ProgressBar"
 import { Loading } from "../Spinner"
 
-const useStyles = makeStyles(({ constants, palette, animation, overrides }: ITheme) => {
+const useStyles = makeStyles(({ constants, palette, overrides }: ITheme) => {
   return createStyles({
     root: {
       backgroundColor: palette.additional["gray"][3],
@@ -16,10 +16,6 @@ const useStyles = makeStyles(({ constants, palette, animation, overrides }: IThe
       padding: constants.generalUnit * 2,
       borderRadius: 4,
       position: "relative",
-      "&:hover $closeIcon": {
-        visibility: "visible",
-        opacity: 1
-      },
       ...overrides?.Toasts?.root
     },
     progressBox: {
@@ -66,9 +62,6 @@ const useStyles = makeStyles(({ constants, palette, animation, overrides }: IThe
       backgroundColor: palette.additional["gray"][1],
       border: "1px solid",
       borderColor: palette.additional["gray"][9],
-      opacity: 0,
-      visibility: "hidden",
-      transition: `opacity ${animation.transform}ms`,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -147,6 +140,7 @@ const ToastContent = ({ toast, onClose }: ToastContentProps) => {
       }
       {isClosable &&
         <div
+          data-testid={`button-close-toast-${toast.testId}`}
           className={classes.closeIcon}
           onClick={onClose}
         >

diff --git a/packages/files-ui/cypress/support/page-objects/binPage.ts b/packages/files-ui/cypress/support/page-objects/binPage.ts
@@ -8,7 +8,6 @@ export const binPage = {
   // bin page specific file browser elements
   recoverSelectedButton: () => cy.get("[data-testId=button-recover-selected-file]"),
   deleteSelectedButton: () => cy.get("[data-testId=button-delete-selected-file]"),
-  permanentDeleteSuccessToast: () => cy.get("[data-testId=toast-deletion-success]", { timeout: 10000 }),
   selectAllCheckbox: () => cy.get("[data-testId=checkbox-select-all]"),
 
   // kebab menu elements

diff --git a/packages/files-ui/cypress/support/page-objects/homePage.ts b/packages/files-ui/cypress/support/page-objects/homePage.ts
@@ -1,6 +1,7 @@
 import { basePage } from "./basePage"
 import { fileBrowser } from "./fileBrowser"
 import { fileUploadModal } from "./modals/fileUploadModal"
+import { uploadCompleteToast } from "./toasts/uploadCompleteToast"
 
 export const homePage = {
   ...basePage,
@@ -12,8 +13,6 @@ export const homePage = {
   moveSelectedButton: () => cy.get("[data-testId=button-move-selected-file]"),
   deleteSelectedButton: () => cy.get("[data-testId=button-delete-selected-file]"),
   selectAllCheckbox: () => cy.get("[data-testId=checkbox-select-all]"),
-  uploadStatusToast: () => cy.get("[data-testId=toast-upload-status]", { timeout: 10000 }),
-  deleteSuccessToast: () => cy.get("[data-testId=toast-deletion-success]", { timeout: 10000 }),
   fileRenameInput: () => cy.get("[data-cy=rename-form] input"),
   fileRenameSubmitButton: () => cy.get("[data-cy=rename-submit-button]"),
   fileRenameErrorLabel: () => cy.get("[data-cy=rename-form] span.minimal.error"),
@@ -36,7 +35,8 @@ export const homePage = {
 
     // ensure upload is complete before proceeding
     fileUploadModal.body().should("not.exist")
-    this.uploadStatusToast().should("not.exist")
+    uploadCompleteToast.body().should("be.visible")
+    uploadCompleteToast.closeButton().click()
   }
 
 }

diff --git a/packages/files-ui/cypress/support/page-objects/toasts/deleteSuccessToast.ts b/packages/files-ui/cypress/support/page-objects/toasts/deleteSuccessToast.ts
@@ -0,0 +1,4 @@
+export const deleteSuccessToast = {
+  body: () => cy.get("[data-testId=toast-deletion-success]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-deletion-success]")
+}
diff --git a/packages/files-ui/cypress/support/page-objects/toasts/moveSuccessToast.ts b/packages/files-ui/cypress/support/page-objects/toasts/moveSuccessToast.ts
@@ -0,0 +1,4 @@
+export const moveSuccessToast = {
+  body: () => cy.get("[data-testId=toast-move-success]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-move-success]")
+}
diff --git a/packages/files-ui/cypress/support/page-objects/toasts/uploadCompleteToast.ts b/packages/files-ui/cypress/support/page-objects/toasts/uploadCompleteToast.ts
@@ -0,0 +1,4 @@
+export const uploadCompleteToast = {
+  body: () => cy.get("[data-testId=toast-upload-complete]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-upload-complete]")
+}
diff --git a/packages/files-ui/cypress/tests/file-management-spec.ts b/packages/files-ui/cypress/tests/file-management-spec.ts
@@ -9,6 +9,9 @@ import { deleteFileModal } from "../support/page-objects/modals/deleteFileModal"
 import { fileUploadModal } from "../support/page-objects/modals/fileUploadModal"
 import { moveItemModal } from "../support/page-objects/modals/moveItemModal"
 import { recoverItemModal } from "../support/page-objects/modals/recoverItemModal"
+import { deleteSuccessToast } from "../support/page-objects/toasts/deleteSuccessToast"
+import { moveSuccessToast } from "../support/page-objects/toasts/moveSuccessToast"
+import { uploadCompleteToast } from "../support/page-objects/toasts/uploadCompleteToast"
 
 describe("File management", () => {
 
@@ -81,6 +84,8 @@ describe("File management", () => {
         homePage.moveSelectedButton().click()
         moveItemModal.folderList().contains("Home").click()
         moveItemModal.moveButton().safeClick()
+        moveSuccessToast.body().should("be.visible")
+        moveSuccessToast.closeButton().click()
 
         // ensure the home root now has the folder and file
         navigationMenu.homeNavButton().click()
@@ -174,6 +179,8 @@ describe("File management", () => {
       fileUploadModal.removeFileButton().should("have.length", 2)
       fileUploadModal.uploadButton().safeClick()
       fileUploadModal.body().should("not.exist")
+      uploadCompleteToast.body().should("be.visible")
+      uploadCompleteToast.closeButton().click()
       homePage.fileItemRow().should("have.length", 2)
     })
 
@@ -229,6 +236,8 @@ describe("File management", () => {
       deleteFileModal.body().should("be.visible")
       deleteFileModal.confirmButton().safeClick()
       deleteFileModal.body().should("not.exist")
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       homePage.fileItemRow().should("not.exist")
 
       // confirm the deleted file is moved to the bin
@@ -267,10 +276,14 @@ describe("File management", () => {
       homePage.fileItemKebabButton().first().click()
       homePage.deleteMenuOption().click()
       deleteFileModal.confirmButton().safeClick()
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       navigationMenu.binNavButton().click()
       binPage.fileItemKebabButton().first().click()
       binPage.deleteMenuOption().click()
       deleteFileModal.confirmButton().safeClick()
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       binPage.fileItemRow().should("not.exist")
       navigationMenu.homeNavButton().click()
       homePage.fileItemRow().should("not.exist")
@@ -288,6 +301,8 @@ describe("File management", () => {
       deleteFileModal.body().should("be.visible")
       deleteFileModal.confirmButton().safeClick()
       deleteFileModal.body().should("not.exist")
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       homePage.fileItemRow().should("not.exist")
 
       // confirm the deleted folder is moved to the bin
@@ -312,10 +327,14 @@ describe("File management", () => {
       homePage.fileItemKebabButton().first().click()
       homePage.deleteMenuOption().click()
       deleteFileModal.confirmButton().safeClick()
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       navigationMenu.binNavButton().click()
       binPage.fileItemKebabButton().first().click()
       binPage.deleteMenuOption().click()
       deleteFileModal.confirmButton().safeClick()
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       binPage.fileItemRow().should("not.exist")
       navigationMenu.homeNavButton().click()
       homePage.fileItemRow().should("not.exist")
@@ -366,12 +385,15 @@ describe("File management", () => {
       homePage.fileItemKebabButton().click()
       homePage.deleteMenuOption().click()
       deleteFileModal.confirmButton().safeClick()
-      homePage.deleteSuccessToast().should("not.exist")
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
+
       navigationMenu.binNavButton().click()
       binPage.fileItemKebabButton().click()
       binPage.deleteMenuOption().click()
       deleteFileModal.confirmButton().safeClick()
-      binPage.permanentDeleteSuccessToast().should("not.exist")
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       navigationMenu.spaceUsedLabel().should("contain.text", "0 Bytes")
     })
 
@@ -391,7 +413,8 @@ describe("File management", () => {
       homePage.selectAllCheckbox().click()
       homePage.deleteSelectedButton().click()
       deleteFileModal.confirmButton().safeClick()
-      homePage.deleteSuccessToast().should("not.exist")
+      deleteSuccessToast.body().should("be.visible")
+      deleteSuccessToast.closeButton().click()
       homePage.fileItemRow().should("have.length", 0)
 
       // recover both of the files in the same action

diff --git a/packages/files-ui/cypress/tests/file-preview-spec.ts b/packages/files-ui/cypress/tests/file-preview-spec.ts
@@ -72,7 +72,6 @@ describe("File Preview", () => {
         homePage.fileItemName().dblclick()
         previewModal.unsupportedFileLabel().should("exist")
         previewModal.downloadUnsupportedFileButton().should("be.visible")
-
         // ensure the download request contains the correct file
         cy.get("@downloadRequest").its("request.body").should("contain", {
           path: "/file.zip"

diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json
@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "^1.18.10",
+    "@chainsafe/files-api-client": "1.18.15",
     "@chainsafe/web3-context": "1.1.4",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",
@@ -70,7 +70,7 @@
     "@types/yup": "^0.29.9",
     "@types/zxcvbn": "^4.4.0",
     "babel-plugin-macros": "^2.8.0",
-    "cypress": "^8.4",
+    "cypress": "^8.6",
     "cypress-file-upload": "^5.0.8",
     "cypress-pipe": "^2.0.0"
   },