Rename folder and file in Storage test

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)
     })

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

@@ -1,4 +1,6 @@
 import { basePage } from "./basePage"
+import { createFolderModal } from "./modals/createFolderModal"
+import { fileUploadModal } from "./modals/fileUploadModal"
 
 export const bucketContentsPage = {
   ...basePage,
@@ -9,9 +11,11 @@ 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]"),
   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 +27,28 @@ 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)
   }
 }

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

@@ -1,6 +1,5 @@
 // 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"
 
@@ -24,19 +23,22 @@ export const bucketsPage = {
   deleteBucketMenuOption: () => cy.get("[data-cy=menu-delete-bucket]"),
 
   // helpers and convenience functions
-  createBucket(bucketName: string, bucketType: FILE_SYSTEM_TYPES) {
+  awaitBucketRefresh() {
+    cy.intercept("GET", "**/buckets/summary").as("refresh")
+    cy.wait("@refresh")
+  },
+
+  createBucket(bucketName: string, bucketType: "ipfs" | "chainsafe") {
     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
+    if (bucketType == "ipfs") {
+      createBucketModal.ipfsRadioInput().click()
+    } else {
+      createBucketModal.chainsafeRadioInput().click()
     }
     createBucketModal.submitButton().click()
     createBucketModal.body().should("not.exist")
+    this.awaitBucketRefresh()
   }
 }

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/tests/bucket-management.cy.ts

@@ -5,7 +5,6 @@ import { navigationMenu } from "../support/page-objects/navigationMenu"
 import { fileUploadModal } from "../support/page-objects/modals/fileUploadModal"
 import { deleteBucketModal } from "../support/page-objects/modals/deleteBucketModal"
 import { uploadCompleteToast } from "../support/page-objects/toasts/uploadCompleteToast"
-import { FILE_SYSTEM_TYPES } from "../support/utils/TestConstants"
 
 describe("Bucket management", () => {
 
@@ -115,9 +114,9 @@ describe("Bucket management", () => {
       cy.web3Login({ deleteFpsBuckets: true })
       navigationMenu.bucketsNavButton().click()
 
-      bucketsPage.createBucket(chainSafeBucketName, FILE_SYSTEM_TYPES.CHAINSAFE)
+      bucketsPage.createBucket(chainSafeBucketName, "chainsafe")
       bucketsPage.bucketItemRow().should("have.length", 1)
-      bucketsPage.createBucket(ipfsBucketName, FILE_SYSTEM_TYPES.IPFS)
+      bucketsPage.createBucket(ipfsBucketName, "ipfs")
       bucketsPage.bucketItemRow().should("have.length", 2)
 
       // by default should be sort by date uploading in ascending order (oldest first)
@@ -144,5 +143,151 @@ describe("Bucket management", () => {
       bucketsPage.bucketItemName().eq(0).should("have.text", chainSafeBucketName)
       bucketsPage.bucketItemName().eq(1).should("have.text", ipfsBucketName)
     })
+
+    it("can rename a folder inside the ipfs bucket", () => {
+      const ipfsBucketName = `ipfs bucket ${Date.now()}`
+      const folderName = `folder ${Date.now()}`
+      const newFolderName = `new folder name ${Date.now()}`
+
+      cy.web3Login({ deleteFpsBuckets: true })
+      navigationMenu.bucketsNavButton().click()
+
+      // create a new bucket and go inside the bucket
+      bucketsPage.createBucket(ipfsBucketName, "ipfs")
+      bucketsPage.bucketItemRow().should("have.length", 1)
+      bucketsPage.bucketItemName().dblclick()
+
+      // create a folder inside the bucket
+      bucketContentsPage.createNewFolder(folderName)
+
+      // ensure an error is displayed if the edited name of the folder is blank
+      bucketContentsPage.renameFileOrFolder("{selectall}{del}")
+      bucketContentsPage.fileRenameErrorLabel().should("be.visible")
+
+      // ensure the original name of the folder persists if the rename submission is blank
+      bucketContentsPage.renameFileOrFolder("{selectall}{del}{esc}")
+      bucketContentsPage.fileRenameInput().should("not.exist")
+      bucketContentsPage.fileItemName().contains(folderName)
+
+      // rename a folder
+      bucketContentsPage.renameFileOrFolder(`{selectall}${newFolderName}{enter}`)
+      bucketContentsPage.fileItemName().contains(newFolderName)
+
+      // ensure that the name of the folder is reset when renaming is canceled
+      bucketContentsPage.renameFileOrFolder("{selectall}{del}}abc{esc}")
+      bucketContentsPage.fileRenameInput().should("not.exist")
+      bucketContentsPage.fileItemKebabButton().click()
+      bucketContentsPage.renameMenuOption().click()
+      bucketContentsPage.fileRenameInput().should("have.value", newFolderName)
+    })
+
+    it("can rename a folder inside the chainsafe bucket", () => {
+      const chainsafeBucketName = `chainsafe bucket ${Date.now()}`
+      const folderName = `folder ${Date.now()}`
+      const newFolderName = `new folder name ${Date.now()}`
+
+      cy.web3Login({ deleteFpsBuckets: true })
+      navigationMenu.bucketsNavButton().click()
+
+      // create a new bucket and go inside the bucket
+      bucketsPage.createBucket(chainsafeBucketName, "chainsafe")
+      bucketsPage.bucketItemRow().should("have.length", 1)
+      bucketsPage.bucketItemName().dblclick()
+
+      // create a folder inside the bucket
+      bucketContentsPage.createNewFolder(folderName)
+
+      // ensure an error is displayed if the edited name of the folder is blank
+      bucketContentsPage.renameFileOrFolder("{selectall}{del}")
+      bucketContentsPage.fileRenameErrorLabel().should("be.visible")
+
+      // ensure the original name of the folder persists if the rename submission is blank
+      bucketContentsPage.renameFileOrFolder("{selectall}{del}{esc}")
+      bucketContentsPage.fileRenameInput().should("not.exist")
+      bucketContentsPage.fileItemName().contains(folderName)
+
+      // rename a folder
+      bucketContentsPage.renameFileOrFolder(`{selectall}${newFolderName}{enter}`)
+      bucketContentsPage.fileItemName().contains(newFolderName)
+
+      // ensure that the name of the folder is reset when renaming is canceled
+      bucketContentsPage.renameFileOrFolder("{selectall}{del}abc{esc}")
+      bucketContentsPage.fileRenameInput().should("not.exist")
+      bucketContentsPage.fileItemKebabButton().click()
+      bucketContentsPage.renameMenuOption().click()
+      bucketContentsPage.fileRenameInput().should("have.value", newFolderName)
+    })
+
+    it("can rename a file inside the ipfs bucket", () => {
+      const ipfsBucketName = `ipfs bucket ${Date.now()}`
+      const newFileName = `new file name ${Date.now()}`
+
+      cy.web3Login({ deleteFpsBuckets: true })
+      navigationMenu.bucketsNavButton().click()
+
+      // create a new bucket and go inside the bucket
+      bucketsPage.createBucket(ipfsBucketName, "ipfs")
+      bucketsPage.bucketItemRow().should("have.length", 1)
+      bucketsPage.bucketItemName().dblclick()
+
+      // upload a file
+      bucketContentsPage.uploadFileToBucket("../fixtures/uploadedFiles/logo.png")
+
+      // ensure an error is displayed if the edited name of the file is blank
+      bucketContentsPage.renameFileOrFolder("{selectall}{del}")
+      bucketContentsPage.fileRenameErrorLabel().should("be.visible")
+
+      // ensure the original name of the file persists if the rename submission is blank
+      bucketContentsPage.renameFileOrFolder("{selectall}{del}{esc}")
+      bucketContentsPage.fileRenameInput().should("not.exist")
+      bucketContentsPage.fileItemName().contains("logo.png")
+
+      // rename the file
+      bucketContentsPage.renameFileOrFolder(`{selectall}${newFileName}{enter}`)
+      bucketContentsPage.fileItemName().contains(newFileName)
+
+      // ensure that the name of the file is reset when renaming is canceled
+      bucketContentsPage.renameFileOrFolder("{selectall}{del}abc{esc}")
+      bucketContentsPage.fileRenameInput().should("not.exist")
+      bucketContentsPage.fileItemKebabButton().click()
+      bucketContentsPage.renameMenuOption().click()
+      bucketContentsPage.fileRenameInput().should("have.value", newFileName)
+    })
+
+    it("can rename a file inside the chainsafe bucket", () => {
+      const chainsafeBucketName = `chainsafe bucket ${Date.now()}`
+      const newFileName = `new file name ${Date.now()}`
+
+      cy.web3Login({ deleteFpsBuckets: true })
+      navigationMenu.bucketsNavButton().click()
+
+      // create a new bucket and go inside the bucket
+      bucketsPage.createBucket(chainsafeBucketName, "chainsafe")
+      bucketsPage.bucketItemRow().should("have.length", 1)
+      bucketsPage.bucketItemName().dblclick()
+
+      // upload a file
+      bucketContentsPage.uploadFileToBucket("../fixtures/uploadedFiles/logo.png")
+
+      // ensure an error is displayed if the edited name of the file is blank
+      bucketContentsPage.renameFileOrFolder("{selectall}{del}")
+      bucketContentsPage.fileRenameErrorLabel().should("be.visible")
+
+      // ensure the original name of the file persists if the rename submission is blank
+      bucketContentsPage.renameFileOrFolder("{selectall}{del}{esc}")
+      bucketContentsPage.fileRenameInput().should("not.exist")
+      bucketContentsPage.fileItemName().contains("logo.png")
+
+      // rename the file
+      bucketContentsPage.renameFileOrFolder(`{selectall}${newFileName}{enter}`)
+      bucketContentsPage.fileItemName().contains(newFileName)
+
+      // ensure that the name of the file is reset when renaming is canceled
+      bucketContentsPage.renameFileOrFolder("{selectall}{del}abc{esc}")
+      bucketContentsPage.fileRenameInput().should("not.exist")
+      bucketContentsPage.fileItemKebabButton().click()
+      bucketContentsPage.renameMenuOption().click()
+      bucketContentsPage.fileRenameInput().should("have.value", newFileName)
+    })
   })
 })

packages/storage-ui/src/Components/Layouts/AppNav.tsx

@@ -303,6 +303,7 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
           {desktop && (
             <div>
               <Link
+                data-cy="home-nav"
                 className={classes.logo}
                 to={ROUTE_LINKS.Buckets}
               >

packages/storage-ui/src/Components/Modules/CreateFolderModal/CreateFolderModal.tsx

@@ -107,8 +107,11 @@ const CreateFolderModal = ({ modalOpen, close }: ICreateFolderModalProps) => {
         }}
         enableReinitialize
       >
-        <Form>
-          <div className={classes.root}>
+        <Form data-cy='form-folder-creation'>
+          <div
+            className={classes.root}
+            data-cy="modal-create-folder"
+          >
             {!desktop && (
               <Grid
                 item
@@ -131,6 +134,7 @@ const CreateFolderModal = ({ modalOpen, close }: ICreateFolderModalProps) => {
               className={classes.input}
             >
               <FormikTextInput
+                data-cy="input-folder-name"
                 name="name"
                 size="large"
                 placeholder={t`Name`}
@@ -145,6 +149,7 @@ const CreateFolderModal = ({ modalOpen, close }: ICreateFolderModalProps) => {
               justifyContent="flex-end"
             >
               <CustomButton
+                data-cy="button-cancel-create-folder"
                 onClick={() => close()}
                 size="medium"
                 variant={"outline"}
@@ -153,6 +158,7 @@ const CreateFolderModal = ({ modalOpen, close }: ICreateFolderModalProps) => {
                 <Trans>Cancel</Trans>
               </CustomButton>
               <Button
+                data-cy="button-create-folder"
                 size={desktop ? "medium" : "large"}
                 variant="primary"
                 type="submit"

packages/storage-ui/src/Components/Modules/FileSystemItem/FileSystemTableItem.tsx

@@ -311,6 +311,7 @@ const FileSystemTableItem = React.forwardRef(
                 ref={formRef}
               >
                 <FormikTextInput
+                  data-cy="input-rename-file-or-folder"
                   className={classes.renameInput}
                   name="name"
                   inputVariant="minimal"