Merge pull request #2245 from ChainSafe/dev

Release - 2022-08-10

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

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

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

@@ -49,6 +49,7 @@ export { default as FileImageIcon, FileImageSvg } from "./icons/FileImage.icon"
 export { default as FilePdfIcon, FilePdfSvg } from "./icons/FilePdf.icon"
 export { default as FileTextIcon, FileTextSvg } from "./icons/FileText.icon"
 export { default as FileVideoIcon, FileVideoSvg } from "./icons/FileVideo.icon"
+export { default as FileWithImageIcon, FileWithImageSvg } from "./icons/FileWithImage.icon"
 export { default as FolderIcon, FolderSvg } from "./icons/Folder.icon"
 export { default as FolderFilledIcon, FolderFilledSvg } from "./icons/FolderFilled.icon"
 export { default as FullscreenIcon, FullscreenSvg } from "./icons/Fullscreen.icon"

packages/files-ui/cypress/tests/file-management.cy.ts

@@ -225,28 +225,30 @@ describe("File management", () => {
       homePage.fileItemRow().should("have.length", 1)
 
       // ensure an error is displayed if the edited name is blank
-      homePage.fileItemKebabButton().first().click()
+      homePage.fileItemKebabButton().click()
       homePage.renameMenuOption().click()
       homePage.fileRenameInput().type("{selectall}{del}")
       homePage.fileRenameErrorLabel().should("be.visible")
 
-      // rename a file
-      homePage.fileRenameInput().type(`${newName}{enter}`)
-      homePage.fileItemName().contains(newName)
-
       // ensure the original name persists if the rename submission is blank
-      homePage.fileItemKebabButton().first().click()
+      homePage.fileItemKebabButton().click()
       homePage.renameMenuOption().click()
       homePage.fileRenameInput().type("{selectall}{del}{esc}")
       homePage.fileRenameInput().should("not.exist")
+      homePage.fileItemName().contains("text-file.txt")
+
+      // rename a file
+      homePage.fileItemKebabButton().click()
+      homePage.renameMenuOption().click()
+      homePage.fileRenameInput().type(`{selectall}${newName}{enter}`)
       homePage.fileItemName().contains(newName)
 
       // ensure that the name is reset when renaming is canceled
-      homePage.fileItemKebabButton().first().click()
+      homePage.fileItemKebabButton().click()
       homePage.renameMenuOption().click()
-      homePage.fileRenameInput().type("{selectall}abc{del}{esc}")
+      homePage.fileRenameInput().type("{selectall}{del}abc{esc}")
       homePage.fileRenameInput().should("not.exist")
-      homePage.fileItemKebabButton().first().click()
+      homePage.fileItemKebabButton().click()
       homePage.renameMenuOption().click()
       homePage.fileRenameInput().should("have.value", newName)
     })
@@ -607,4 +609,4 @@ describe("File management", () => {
       homePage.fileItemName().eq(2).should("have.text", fileZip)
     })
   })
-})
+})

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

@@ -33,7 +33,7 @@ import { testPrivateKey, localHost } from "../fixtures/loginData"
 import { CustomizedBridge } from "./utils/CustomBridge"
 import "cypress-file-upload"
 import "cypress-pipe"
-import { BucketType } from "@chainsafe/files-api-client"
+import { BucketType, FileSystemType } from "@chainsafe/files-api-client"
 import { navigationMenu } from "./page-objects/navigationMenu"
 
 export type Storage = Record<string, string>[];
@@ -44,6 +44,7 @@ export interface Web3LoginOptions {
   clearPins?: boolean
   deleteFpsBuckets?: boolean
   withNewSession?: boolean
+  createFpsBuckets?: { name: string; type: FileSystemType }[]
 }
 
 Cypress.Commands.add("clearPins", apiTestHelper.clearPins)
@@ -59,7 +60,8 @@ Cypress.Commands.add(
     clearPins = false,
     withNewUser = true,
     deleteFpsBuckets = false,
-    withNewSession = false
+    withNewSession = false,
+    createFpsBuckets
   }: Web3LoginOptions = {}) => {
 
     cy.on("window:before:load", (win) => {
@@ -109,6 +111,12 @@ Cypress.Commands.add(
     if (deleteFpsBuckets) {
       apiTestHelper.deleteBuckets("fps")
     }
+
+    if(createFpsBuckets != null) {
+      createFpsBuckets.forEach((bucket) => {
+        apiTestHelper.createBucket(bucket.name, bucket.type)
+      })
+    }
   }
 )
 

packages/storage-ui/cypress/support/page-objects/bucketContentsPage.ts

@@ -1,4 +1,7 @@
 import { basePage } from "./basePage"
+import { createFolderModal } from "./modals/createFolderModal"
+import { deleteFileModal } from "./modals/deleteFileModal"
+import { fileUploadModal } from "./modals/fileUploadModal"
 
 export const bucketContentsPage = {
   ...basePage,
@@ -9,9 +12,12 @@ export const bucketContentsPage = {
   uploadButton: () => cy.get("[data-testid=button-upload-file]"),
 
   // file or folder browser row elements
-  fileItemKebabButton: () => cy.get("[data-testid=icon-file-item-kebab]"),
+  fileItemKebabButton: () => cy.get("[data-testid=dropdown-title-file-item-kebab]"),
   fileItemName: () => cy.get("[data-cy=label-file-item-name]"),
+  fileItemCid: () => cy.get("[data-cy=label-file-item-cid]"),
   fileItemRow: () => cy.get("[data-cy=row-file-item]"),
+  fileRenameInput: () => cy.get("[data-cy=input-rename-file-or-folder]"),
+  fileRenameErrorLabel: () => cy.get("[data-cy=form-rename] span.minimal.error"),
 
   // kebab menu elements
   downloadMenuOption: () => cy.get("[data-cy=menu-download]"),
@@ -23,5 +29,35 @@ export const bucketContentsPage = {
   awaitBucketRefresh() {
     cy.intercept("POST", "**/bucket/*/ls").as("refresh")
     cy.wait("@refresh")
+  },
+
+  uploadFileToBucket(filePath: string) {
+    this.uploadButton().click()
+    fileUploadModal.body().attachFile(filePath)
+    fileUploadModal.fileList().should("have.length", 1)
+    fileUploadModal.uploadButton().safeClick()
+    fileUploadModal.body().should("not.exist")
+    this.awaitBucketRefresh()
+  },
+
+  createNewFolder(folderName: string) {
+    this.newFolderButton().click()
+    createFolderModal.body().should("exist")
+    createFolderModal.folderNameInput().type(folderName)
+    createFolderModal.createButton().click()
+    createFolderModal.body().should("not.exist")
+  },
+
+  renameFileOrFolder(newName: string) {
+    bucketContentsPage.fileItemKebabButton().click()
+    bucketContentsPage.renameMenuOption().click()
+    bucketContentsPage.fileRenameInput().type(newName)
+  },
+
+  deleteFileOrFolder(){
+    bucketContentsPage.fileItemKebabButton().click()
+    bucketContentsPage.deleteMenuOption().click()
+    deleteFileModal.body().should("be.visible")
+    deleteFileModal.confirmButton().click()
   }
 }

packages/storage-ui/cypress/support/page-objects/bucketsPage.ts

@@ -1,8 +1,6 @@
 // Only add things here that could be applicable to the bucket page
 
-import { FILE_SYSTEM_TYPES } from "../utils/TestConstants"
 import { basePage } from "./basePage"
-import { createBucketModal } from "./modals/createBucketModal"
 
 export const bucketsPage = {
   ...basePage,
@@ -24,19 +22,8 @@ export const bucketsPage = {
   deleteBucketMenuOption: () => cy.get("[data-cy=menu-delete-bucket]"),
 
   // helpers and convenience functions
-  createBucket(bucketName: string, bucketType: FILE_SYSTEM_TYPES) {
-    this.createBucketButton().click()
-    createBucketModal.body().should("be.visible")
-    createBucketModal.bucketNameInput().type(bucketName)
-    switch (bucketType) {
-      case FILE_SYSTEM_TYPES.IPFS:
-        createBucketModal.ipfsRadioInput().click()
-        break
-      case FILE_SYSTEM_TYPES.CHAINSAFE:
-        createBucketModal.chainsafeRadioInput().click()
-        break
-    }
-    createBucketModal.submitButton().click()
-    createBucketModal.body().should("not.exist")
+  awaitBucketRefresh() {
+    cy.intercept("GET", "**/buckets/summary").as("refresh")
+    cy.wait("@refresh")
   }
 }

packages/storage-ui/cypress/support/page-objects/modals/createFolderModal.ts

@@ -0,0 +1,7 @@
+export const createFolderModal = {
+  body: () => cy.get("[data-cy=modal-create-folder]", { timeout: 10000 }),
+  cancelButton: () => cy.get("[data-cy=button-cancel-create-folder]"),
+  createButton: () => cy.get("[data-cy=button-create-folder]", { timeout: 10000 }),
+  errorLabel: () => cy.get("[data-cy=form-folder-creation] span.default.error"),
+  folderNameInput: () => cy.get("[data-cy=input-folder-name]")
+}

packages/storage-ui/cypress/support/page-objects/modals/deleteFileModal.ts

@@ -0,0 +1,5 @@
+export const deleteFileModal = {
+  body: () => cy.get("[data-testid=modal-container-file-deletion]"),
+  cancelButton: () => cy.get("[data-testid=button-reject-file-deletion]"),
+  confirmButton: () => cy.get("[data-testid=button-confirm-file-deletion]", { timeout: 10000 })
+}

packages/storage-ui/cypress/support/page-objects/toasts/deletionCompleteToast.ts

@@ -0,0 +1,4 @@
+export const deletionCompleteToast = {
+  body: () => cy.get("[data-testid=toast-deletion-complete]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-deletion-complete]")
+}

packages/storage-ui/cypress/support/page-objects/toasts/downloadCompleteToast.ts

@@ -0,0 +1,4 @@
+export const downloadCompleteToast = {
+  body: () => cy.get("[data-testid=toast-download-complete]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-download-complete]")
+}

packages/storage-ui/cypress/support/utils/apiTestHelper.ts

@@ -1,5 +1,5 @@
 import axios from "axios"
-import { FilesApiClient } from "@chainsafe/files-api-client"
+import { FilesApiClient, FileSystemType } from "@chainsafe/files-api-client"
 import { BucketType } from "@chainsafe/files-api-client"
 
 const REFRESH_TOKEN_KEY = "css.refreshToken"
@@ -14,6 +14,26 @@ const getApiClient = () => {
 }
 
 export const apiTestHelper = {
+  createBucket(name: string, fileSystemType: FileSystemType) {
+    const apiClient = getApiClient()
+    return new Cypress.Promise(async (resolve, reject) => {
+      cy.window().then(async (win) => {
+        try {
+          cy.log("creating bucket", name)
+          const tokens = await apiClient.getRefreshToken({ refresh: win.localStorage.getItem(REFRESH_TOKEN_KEY) || "" })
+          apiClient.setToken(tokens.access_token.token)
+          await apiClient.createBucket({ name: name, file_system_type: fileSystemType, type: "fps", encryption_key: "" })
+          cy.log("done with creating bucket")
+          resolve()
+          cy.reload()
+        } catch (e: any) {
+          cy.log(e)
+          reject(e)
+          throw new Error("Something wrong happened during the bucket creation")
+        }
+      })
+    })
+  },
   clearPins() {
     const apiClient = getApiClient()