fix(explore): browsing chunked files and inspecting via context menu (#2305)

* fix(explore): chunked files

This includes latest ipld-explorer-components with fix from
ipfs/ipld-explorer-components#462

also bumped kubo and caniuse and non-breaking audit suggestions

* fix(files): Inspect via context menu

Closes #2306

Author: lidel

package-lock.json

@@ -66,7 +66,7 @@
     "ipfs-css": "^1.4.0",
     "ipfs-geoip": "^9.1.0",
     "ipfs-provider": "^2.1.0",
-    "ipld-explorer-components": "^8.1.0",
+    "ipld-explorer-components": "^8.1.2",
     "is-ipfs": "^8.0.1",
     "istextorbinary": "^6.0.0",
     "it-all": "^1.0.5",
@@ -165,7 +165,7 @@
     "ipfsd-ctl": "^14.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "kubo": "^0.30.0",
+    "kubo": "^0.32.1",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "os-browserify": "^0.3.0",

package.json

@@ -73,7 +73,7 @@ const FilesPage = ({
   }
 
   const onAddByPath = (path, name) => doFilesAddPath(files.path, path, name)
-  const onInspect = (cid) => doUpdateHash(`/explore/ipfs/${cid}`)
+  const onInspect = (cid) => doUpdateHash(`/explore/${cid}`)
   const showModal = (modal, files = null) => setModals({ show: modal, files })
   const hideModal = () => setModals({})
   const handleContextMenu = (ev, clickType, file, pos) => {

src/files/FilesPage.js

@@ -62,4 +62,37 @@ test.describe('Files screen', () => {
       await page.waitForSelector(`text=${human(file.size)}`)
     }
   })
+
+  test('should have active Context menu that allows Inspection of the DAG', async ({ page }) => {
+    // dedicated test file to make this isolated from the rest
+    const testFilename = 'explorer-context-menu-test.txt'
+    const testCid = 'bafkqaddjnzzxazldoqwxizltoq'
+
+    // first: create a test file
+    const button = 'button[id="import-button"]'
+    await page.waitForSelector(button, { state: 'visible' })
+    await page.click(button)
+    await page.waitForSelector('#add-by-path', { state: 'visible' })
+    page.click('button[id="add-by-path"]')
+    await page.waitForSelector('div[role="dialog"] input[name="name"]')
+    await page.fill('div[role="dialog"] input[name="path"]', `/ipfs/${testCid}`)
+    await page.fill('div[role="dialog"] input[name="name"]', testFilename)
+    await page.keyboard.press('Enter')
+    // expect file with matching filename to be added to the file list
+    await page.waitForSelector(`.File:has-text("${testFilename}")`)
+
+    // open context menu
+    const cbutton = `button[aria-label="View more options for ${testFilename}"]`
+    await page.waitForSelector(cbutton, { state: 'visible' })
+    await page.click(cbutton, { force: true })
+    await page.waitForSelector('text=Inspect', { state: 'visible' })
+
+    // click on Inspect option
+    await page.waitForSelector('text=Inspect', { state: 'visible' })
+    await page.locator('button:has-text("Inspect"):enabled').click({ force: true })
+
+    // confirm Explore screen was opened with correct CID
+    await page.waitForURL(`/#/explore/${testCid}`)
+    await page.waitForSelector('text="CID info"')
+  })
 })