Copy CID to clipboard tests

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

@@ -13,6 +13,7 @@ export const bucketContentsPage = {
   // file or folder browser row elements
   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"),

packages/storage-ui/cypress/tests/bucket-management.cy.ts

@@ -399,5 +399,37 @@ describe("Bucket management", () => {
           .should("eq", fileContent)
       })
     })
+
+    it("can copy to clipboard the cid inside the ipfs bucket", () => {
+      const ipfsBucketName = `ipfs bucket ${Date.now()}`
+
+      cy.web3Login({ deleteFpsBuckets: true, createFpsBuckets: [{ name: ipfsBucketName, type: "ipfs" }] })
+      // upload a file to the bucket
+      navigationMenu.bucketsNavButton().click()
+      bucketsPage.bucketItemName().dblclick()
+      bucketContentsPage.uploadFileToBucket("../fixtures/uploadedFiles/text-file.txt")
+
+      // ensure the correct cid is being copied to the clipboard
+      bucketContentsPage.fileItemCid().click()
+      cy.window().its("navigator.clipboard").invoke("readText").then((text) => {
+        bucketContentsPage.fileItemCid().should("have.text", text)
+      })
+    })
+
+    it("can copy to clipboard the cid inside the chainsafe bucket", () => {
+      const chainsafeBucketName = `chainsafe bucket ${Date.now()}`
+
+      cy.web3Login({ deleteFpsBuckets: true, createFpsBuckets: [{ name: chainsafeBucketName, type: "chainsafe" }] })
+      // upload a file to the bucket
+      navigationMenu.bucketsNavButton().click()
+      bucketsPage.bucketItemName().dblclick()
+      bucketContentsPage.uploadFileToBucket("../fixtures/uploadedFiles/text-file.txt")
+
+      // ensure the correct cid is being copied to the clipboard
+      bucketContentsPage.fileItemCid().click()
+      cy.window().its("navigator.clipboard").invoke("readText").then((text) => {
+        bucketContentsPage.fileItemCid().should("have.text", text)
+      })
+    })
   })
 })

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

@@ -358,7 +358,9 @@ const FileSystemTableItem = React.forwardRef(
                     </Trans>
                   </span>
                 </div>
-                <Typography component="p">
+                <Typography
+                  data-cy="label-file-item-cid"
+                  component="p">
                   { cid }
                 </Typography>
                 <CopySvg className={clsx(classes.copyIcon, { "active": copied })} />