diff --git a/packages/storage-ui/cypress/support/page-objects/cidsPage.ts b/packages/storage-ui/cypress/support/page-objects/cidsPage.ts
index 3d17b8143b..b921632b54 100644
--- a/packages/storage-ui/cypress/support/page-objects/cidsPage.ts
+++ b/packages/storage-ui/cypress/support/page-objects/cidsPage.ts
@@ -13,10 +13,11 @@ export const cidsPage = {
// cid browser row elements
searchCidInput: () => cy.get("[data-testid=input-search-cid]"),
- cidTableHeader: () => cy.get("[data-cy=table-header-cid]"),
- createdTableHeader: () => cy.get("[data-cy=table-header-created]"),
- sizeTableHeader: () => cy.get("[data-cy=table-header-size]"),
- statusTableHeader: () => cy.get("[data-cy=table-header-status]"),
+ cidsTableHeaderName: () => cy.get("[data-cy=cids-table-header-name]"),
+ cidsTableHeaderCid: () => cy.get("[data-cy=cids-table-header-cid]"),
+ cidsTableHeaderCreated: () => cy.get("[data-cy=cids-table-header-created]"),
+ cidsTableHeaderSize: () => cy.get("[data-cy=cids-table-header-size]"),
+ cidsTableHeaderStatus: () => cy.get("[data-cy=cids-table-header-status]"),
cidItemRow: () => cy.get("[data-cy=row-cid-item]", { timeout: 20000 }),
cidNameCell: () => cy.get("[data-cy=cell-pin-name]"),
cidCell: () => cy.get("[data-cy=cell-pin-cid]"),
diff --git a/packages/storage-ui/cypress/tests/cid-management.cy.ts b/packages/storage-ui/cypress/tests/cid-management.cy.ts
index 794f36c0cf..c7080ff414 100644
--- a/packages/storage-ui/cypress/tests/cid-management.cy.ts
+++ b/packages/storage-ui/cypress/tests/cid-management.cy.ts
@@ -103,5 +103,35 @@ describe("CID management", () => {
cidsPage.searchCidInput().clear()
cidsPage.cidItemRow().should("have.length", 2)
})
+
+ it("can sort by name or created at in cids table", () => {
+ cy.web3Login({ withNewSession: true })
+ navigationMenu.cidsNavButton().click()
+
+ const pin1 = "Pin 1"
+ const pin2 = "Pin 2"
+ cidsPage.addPinnedCid({ name: pin1 })
+ cidsPage.addPinnedCid({ name: pin2, cid: testCidAlternative })
+ cidsPage.cidItemRow().should("have.length", 2)
+
+ // by default should be sort by date uploading in descending order (newest first)
+ cidsPage.cidNameCell().eq(0).should("have.text", pin2)
+ cidsPage.cidNameCell().eq(1).should("have.text", pin1)
+
+ // ensure sort by created in descending order (oldest first)
+ cidsPage.cidsTableHeaderCreated().click()
+ cidsPage.cidNameCell().eq(0).should("have.text", pin1)
+ cidsPage.cidNameCell().eq(1).should("have.text", pin2)
+
+ // ensure sort by name in descending order (Z-A)
+ cidsPage.cidsTableHeaderName().click()
+ cidsPage.cidNameCell().eq(0).should("have.text", pin2)
+ cidsPage.cidNameCell().eq(1).should("have.text", pin1)
+
+ // ensure sort by name in ascending order (A-Z)
+ cidsPage.cidsTableHeaderName().click()
+ cidsPage.cidNameCell().eq(0).should("have.text", pin1)
+ cidsPage.cidNameCell().eq(1).should("have.text", pin2)
+ })
})
})
\ No newline at end of file
diff --git a/packages/storage-ui/src/Components/Pages/CidsPage.tsx b/packages/storage-ui/src/Components/Pages/CidsPage.tsx
index e41df0ebe3..bd6ba5c990 100644
--- a/packages/storage-ui/src/Components/Pages/CidsPage.tsx
+++ b/packages/storage-ui/src/Components/Pages/CidsPage.tsx
@@ -216,7 +216,7 @@ const CidsPage = () => {
className={classes.tableRow}
>
handleSortToggle("name")}
@@ -226,7 +226,7 @@ const CidsPage = () => {
Name
@@ -234,7 +234,7 @@ const CidsPage = () => {
{desktop && <>
handleSortToggle("date_uploaded")}
sortDirection={sortColumn === "date_uploaded" ? sortDirection : undefined}
@@ -244,7 +244,7 @@ const CidsPage = () => {
Created
handleSortToggle("size")}
sortDirection={sortColumn === "size" ? sortDirection : undefined}
@@ -254,7 +254,7 @@ const CidsPage = () => {
Size