fix: diagnostics tab urls electron (#2481)

* fix: remove hyphens from diagnostics tab URLs

Electron's `webui://` protocol truncates hash fragments at hyphens,
causing blank screens on Retrieval Check and DHT Provide tabs.

- src/diagnostics/diagnostics-content.tsx: rename tab URL segments
  `retrieval-check` -> `retrieval`, `dht-provide` -> `provider`,
  remove unused imports and dead code
- src/files/FilesPage.js: update retrieval diagnostics link
- src/files/file-not-found/index.tsx: update retrieval diagnostics link
- src/settings/SettingsPage.js: update retrieval diagnostics link
- src/components/unsupported-kubo-version/unsupported-kubo-version.tsx:
  show loading text instead of blank when agent version is not yet known
- src/contexts/ProvideStat/provide-context.tsx: reorder deps array

* chore: update package-lock.json

* fix(test): update e2e test to use new diagnostics tab URL

update `/#/diagnostics/dht-provide` -> `/#/diagnostics/provider`
in playwright e2e test to match the URL rename from prior commit

Author: lidel

package-lock.json

@@ -26,7 +26,7 @@ const UnsupportedKuboVersion: React.FC<UnsupportedKuboVersionProps> = () => {
   }, [agentVersionObject])
 
   if (agentVersionObject == null) {
-    return null
+    return <div className='pa4'>{t('dhtProvide.screen.loading')}</div>
   }
 
   return (

src/components/unsupported-kubo-version/unsupported-kubo-version.tsx

@@ -99,7 +99,7 @@ export const ProvideProvider: React.FC<{ children: React.ReactNode }> = ({ child
     autoRefreshEnabled,
     setAutoRefreshEnabled,
     isAgentVersionSupported
-  }), [data, loading, error, lastUpdated, refresh, autoRefreshEnabled, isAgentVersionSupported, setAutoRefreshEnabled])
+  }), [data, loading, error, lastUpdated, refresh, autoRefreshEnabled, setAutoRefreshEnabled, isAgentVersionSupported])
 
   return (
     <ProvideContext.Provider value={value}>

src/contexts/ProvideStat/provide-context.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import LogsScreen from './logs-screen/logs-screen.js'
 import { LogsProvider } from '../contexts/logs/index'
@@ -8,10 +8,7 @@ import { useBridgeSelector } from '../helpers/context-bridge'
 import { RouteInfo } from '../bundles/routes-types'
 import { ProvideProvider } from '../contexts/ProvideStat'
 
-interface DiagnosticsContentProps {
-}
-
-type TabKey = 'logs' | 'retrieval-check' | 'dht-provide'
+type TabKey = 'logs' | 'retrieval' | 'provider'
 
 function getTabKeyFromUrl (path: string): { tab: TabKey, remainder?: string } {
   const parts = path.split('/').filter(p => p) // Remove empty strings
@@ -57,32 +54,21 @@ const TabButton = ({ tabKey, label, active }: TabButtonProps) => (
   </a>
 )
 
-const DiagnosticsContent: React.FC<DiagnosticsContentProps> = () => {
+const DiagnosticsContent: React.FC = () => {
   const { t } = useTranslation('diagnostics')
   const routeInfo = useBridgeSelector<RouteInfo>('selectRouteInfo')
-  const path = routeInfo?.params.path ?? ''
+  const path = routeInfo?.params?.path ?? ''
   const { tab: activeTab, remainder } = getTabKeyFromUrl(path)
 
   // Redirect from /diagnostics or /diagnostics/ to /diagnostics/logs
   useEffect(() => {
-    // Check if we're still loading route info
     if (!routeInfo) return
-
-    // Only redirect from true root paths
     const isRootDiagnostics = routeInfo.url === '/diagnostics' || routeInfo.url === '/diagnostics/'
     if (isRootDiagnostics && (path === '' || path === '/')) {
       window.location.replace('#/diagnostics/logs')
     }
   }, [path, routeInfo])
 
-  const isMounted = useRef(false)
-  useEffect(() => {
-    isMounted.current = true
-    return () => {
-      isMounted.current = false
-    }
-  }, [])
-
   const renderTabContent = () => {
     switch (activeTab) {
       case 'logs':
@@ -93,12 +79,11 @@ const DiagnosticsContent: React.FC<DiagnosticsContentProps> = () => {
             </LogsProvider>
           </IdentityProvider>
         )
-      case 'retrieval-check':
+      case 'retrieval':
         return (
           <CheckScreen cid={remainder} />
         )
-      case 'dht-provide': {
-        // Lazy-load the DHT provide screen to keep bundle size small
+      case 'provider': {
         const DhtProvideScreen = require('./dht-provide/dht-provide-screen').default
         return (
           <IdentityProvider>
@@ -119,8 +104,8 @@ const DiagnosticsContent: React.FC<DiagnosticsContentProps> = () => {
       <div className='mb4 pb2' style={{ borderBottom: '1px solid #e1e5eb' }}>
         <nav className='flex items-center'>
           <TabButton tabKey='logs' label={t('tabs.logs')} active={activeTab === 'logs'} />
-          <TabButton tabKey='retrieval-check' label={t('tabs.retrieval-check')} active={activeTab === 'retrieval-check'} />
-          <TabButton tabKey='dht-provide' label={t('tabs.dht-provide')} active={activeTab === 'dht-provide'} />
+          <TabButton tabKey='retrieval' label={t('tabs.retrieval-check')} active={activeTab === 'retrieval'} />
+          <TabButton tabKey='provider' label={t('tabs.dht-provide')} active={activeTab === 'provider'} />
         </nav>
       </div>
 

src/diagnostics/diagnostics-content.tsx

@@ -161,7 +161,7 @@ const FilesPage = ({
   const onInspect = (cid) => doUpdateHash(`/explore/${cid}`)
   const onCheckRetrieval = (cid) => {
     doFilesCidProvide(cid) // Trigger background provide
-    doUpdateHash(`/diagnostics/retrieval-check/${cid}`)
+    doUpdateHash(`/diagnostics/retrieval/${cid}`)
   }
   const showModal = (modal, files = null) => setModals({ show: modal, files })
   const hideModal = () => setModals({})

src/files/FilesPage.js

@@ -38,7 +38,7 @@ const FileNotFound = ({ path, error }: FileNotFoundProps) => {
         </li>
         <li className='mb2'>
           <Trans i18nKey='previewNotFound.helpListItemRetrieval' t={t}>
-            If you have a CID you believe should work, <a className='link blue' href='#/diagnostics/retrieval-check'>run Retrieval Diagnostics</a>.
+            If you have a CID you believe should work, <a className='link blue' href='#/diagnostics/retrieval'>run Retrieval Diagnostics</a>.
           </Trans>
         </li>
         <li className='mb2'>

src/files/file-not-found/index.tsx

@@ -105,7 +105,7 @@ export const SettingsPage = ({
       <p className='ma0 mr2 lh-copy charcoal f6'>
         <Trans i18nKey='retrievalDiagnosticService.description' t={t}>
           <a className='link blue' href='https://github.com/ipfs/ipfs-check' target='_blank' rel='noopener noreferrer'>ipfs-check</a>
-          <a className='link blue' href='#/diagnostics/retrieval-check'>retrieval diagnostics</a>
+          <a className='link blue' href='#/diagnostics/retrieval'>retrieval diagnostics</a>
         </Trans>
       </p>
       <IpfsCheckForm/>

src/settings/SettingsPage.js

@@ -19,7 +19,7 @@ const dhtProvide = {
 
 test.describe('DHT Provide diagnostics page', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('/#/diagnostics/dht-provide')
+    await page.goto('/#/diagnostics/provider')
     // wait for the stats grid to appear (indicates data has loaded)
     await expect(dhtProvide.grid(page)).toBeVisible({ timeout: 15000 })
   })