fix(files): not found page (#2455)

* fix the file not found page

* fix the header for file not found

Signed-off-by: Chayan Das <01chayandas@gmail.com>

* test(e2e): add test for file-not-found error page

verify that browsing to a non-existing path shows the
"Unable to load this path" error page with a working
"Go to Files" button

also fix flakiness by waiting for buttons to be enabled
before clicking, and fix selector in invalid IPNS test

---------

Signed-off-by: Chayan Das <01chayandas@gmail.com>
Co-authored-by: Marcin Rataj <lidel@lidel.org>

Author: ChayanDass

src/files/FilesPage.js

@@ -197,12 +197,14 @@ const FilesPage = ({
     , [files?.content, files?.pins, selected])
 
     if (!files || files.type === 'file') return null
-
+    // if file not found
+    if (files.type === 'not-found') {
+      return <FileNotFound path={files.path} error={files.error} />
+    }
     // Don't render stale content during navigation
     if (files.path && filesPathInfo.path && files.path !== filesPathInfo.path) {
       return null
     }
-
     if (files.type === 'unknown') {
       // Show error page if there's an error, otherwise show inspect suggestion
       if (files.error) {
@@ -217,9 +219,6 @@ const FilesPage = ({
         </div>
       )
     }
-    if (files.type === 'not-found') {
-      return <FileNotFound path={files.path} error={files.error} />
-    }
 
     const commonProps = {
       updateSorting: doFilesUpdateSorting,

src/files/header/Header.js

@@ -57,12 +57,12 @@ class Header extends React.Component {
     } = this.props
 
     const pinsInQueue = pendingPins.length + failedPins.length + completedPins.length
-
+    const filefound = files && files.type !== 'not-found'
     return (
       <div className='db flex-l justify-between items-center mb3'>
         <div className='flex items-center w-100 justify-between mr3'>
           <div className='breadheader overflow-hidden mr1'>
-            <Breadcrumbs className="joyride-files-breadcrumbs" path={files ? files.path : '/404'}
+            <Breadcrumbs className="joyride-files-breadcrumbs" path={filefound ? files.path : '/404'}
             onClick={onNavigate} onContextMenuHandle={(...args) => this.handleBreadCrumbsContextMenu(...args)}
             onAddFiles={this.props.onAddFiles} onMove={this.props.onMove}/>
         </div>

test/e2e/explore.test.js

@@ -44,6 +44,7 @@ const createCID = async (value, codec, hasher, version = 1) => {
 async function testExploredCid ({ cid, type, humanReadableCID, page, fillOutForm = true }) {
   if (fillOutForm) {
     await explore.cidInput(page).fill(cid)
+    await expect(explore.inspectButton(page)).toBeEnabled()
     await explore.inspectButton(page).press('Enter')
   }
 
@@ -96,6 +97,7 @@ test.describe('Explore screen', () => {
     test('Inspect button opens DAG Explorer and shows Raw Block', async ({ page }) => {
       // enter the inlined "hello world" CID in the explore form
       await explore.cidInput(page).fill(INLINED_HELLO_WORLD_CID)
+      await expect(explore.inspectButton(page)).toBeEnabled()
       await explore.inspectButton(page).click()
 
       // should navigate to Explore screen with the CID

test/e2e/files.test.js

@@ -1,6 +1,6 @@
 import { test, expect } from './setup/coverage.js'
 import { fixtureData } from './fixtures/index.js'
-import { files } from './setup/locators.js'
+import { files, explore } from './setup/locators.js'
 import all from 'it-all'
 import filesize from 'filesize'
 import * as kuboRpcModule from 'kubo-rpc-client'
@@ -112,4 +112,28 @@ test.describe('Files screen', () => {
     await page.waitForURL(`/#/explore/${testCid}`)
     await expect(page.getByText('CID info')).toBeVisible()
   })
+
+  test('should show error page when navigating to non-existing path', async ({ page }) => {
+    // bafyaabakaieac is CIDv1 of an empty directory, so /404 inside it does not exist
+    const nonExistingPath = '/ipfs/bafyaabakaieac/404'
+
+    // enter the path in the explore form input and click Browse
+    await explore.cidInput(page).fill(nonExistingPath)
+    await expect(explore.browseButton(page)).toBeEnabled()
+    await explore.browseButton(page).click()
+
+    // expect error page to be displayed with the correct title
+    await expect(page.getByRole('heading', { name: 'Unable to load this path' })).toBeVisible()
+
+    // expect the path to be displayed in the error message area (below the heading)
+    await expect(page.locator('p.truncate').filter({ hasText: 'bafyaabakaieac/404' })).toBeVisible()
+
+    // expect the "Go to Files" button to be present and working
+    const goToFilesButton = page.getByRole('link', { name: 'Go to Files' })
+    await expect(goToFilesButton).toBeVisible()
+    await goToFilesButton.click()
+
+    // confirm navigation back to files root
+    await page.waitForURL('/#/files')
+  })
 })

test/e2e/status.test.js

@@ -41,6 +41,7 @@ test.describe('Status page', () => {
 
       // enter the inlined "hello world" CID
       await explore.cidInput(page).fill(INLINED_HELLO_WORLD_CID)
+      await expect(explore.browseButton(page)).toBeEnabled()
       await explore.browseButton(page).click()
 
       // should display the file content "hello world"
@@ -56,6 +57,7 @@ test.describe('Status page', () => {
 
       // enter the inlined "hello world" CID
       await explore.cidInput(page).fill(INLINED_HELLO_WORLD_CID)
+      await expect(explore.inspectButton(page)).toBeEnabled()
       await explore.inspectButton(page).click()
 
       // should display "Raw Block" in DAG Explorer
@@ -88,16 +90,14 @@ test.describe('Status page', () => {
 
       // enter an IPNS path that will fail DNSLink resolution
       await explore.cidInput(page).fill('/ipns/invalid-dnslink.example.com')
+      await expect(explore.browseButton(page)).toBeEnabled()
       await explore.browseButton(page).click()
 
       // wait for navigation to the IPNS path
       await expect(page).toHaveURL(/invalid-dnslink/, { timeout: 10000 })
 
-      // should show error state - either 404 badge or error page
-      // (depends on how quickly the DNS lookup fails)
-      const error404 = page.getByText('404')
-      const errorPage = page.locator('h1.red')
-      await expect(error404.or(errorPage)).toBeVisible({ timeout: 30000 })
+      // should show error page with "Unable to load this path" heading
+      await expect(page.getByRole('heading', { name: 'Unable to load this path' })).toBeVisible({ timeout: 30000 })
     })
 
     test('ipfs:// protocol URL is accepted and normalized', async ({ page }) => {