fix: remove auto-reload config and default to true

src/pages/config.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import Header from '../components/Header.jsx'
 import { Collapsible } from '../components/collapsible.jsx'
 import LocalStorageInput from '../components/local-storage-input.jsx'
-import { LocalStorageToggle } from '../components/local-storage-toggle.jsx'
+// import { LocalStorageToggle } from '../components/local-storage-toggle.jsx'
 import { ServiceWorkerReadyButton } from '../components/sw-ready-button.jsx'
 import { ConfigProvider } from '../context/config-context.jsx'
 import { RouteContext } from '../context/router-context.jsx'
@@ -179,15 +179,15 @@ function ConfigPage (): React.JSX.Element | null {
           resetKey={resetKey}
         />
 
-        <div className='f5 ma0 pt3 teal fw4 db'>Interstitials</div>
+        {/* <div className='f5 ma0 pt3 teal fw4 db'>Interstitials</div>
         <span className="charcoal-muted f6 fw1 db pt1 pb1 lh-copy">Control if visiting a new origin should display interstitial pages or automatically load the content using existing configuration.</span>
         <LocalStorageToggle
           className="e2e-config-page-input e2e-config-page-input-autoreload"
           localStorageKey={LOCAL_STORAGE_KEYS.config.autoReload}
           onLabel='Auto Reload'
           offLabel='Show Config'
           resetKey={resetKey}
-        />
+        /> */}
 
         <LocalStorageInput
           className="e2e-config-page-input"

src/pages/redirect-page.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import Header from '../components/Header.jsx'
-import { ServiceWorkerReadyButton } from '../components/sw-ready-button.jsx'
 import { ConfigProvider } from '../context/config-context.jsx'
 import { ServiceWorkerContext, ServiceWorkerProvider } from '../context/service-worker-context.jsx'
 import { HeliaServiceWorkerCommsChannel } from '../lib/channel.js'
@@ -11,6 +10,7 @@ import { getUiComponentLogger, uiLogger } from '../lib/logger.js'
 import { translateIpfsRedirectUrl } from '../lib/translate-ipfs-redirect-url.js'
 import './default-page-styles.css'
 import LoadingPage from './loading.jsx'
+import './loading.css'
 
 const uiComponentLogger = getUiComponentLogger('redirect-page')
 const log = uiLogger.forComponent('redirect-page')
@@ -36,7 +36,7 @@ const ConfigIframe = (): JSX.Element => {
 const channel = new HeliaServiceWorkerCommsChannel('WINDOW', uiComponentLogger)
 
 function RedirectPage ({ showConfigIframe = true }: { showConfigIframe?: boolean }): React.JSX.Element {
-  const [isAutoReloadEnabled, setIsAutoReloadEnabled] = useState(false)
+  const [isAutoReloadEnabled] = useState(true)
   const { isServiceWorkerRegistered } = useContext(ServiceWorkerContext)
   const [reloadUrl, setReloadUrl] = useState(translateIpfsRedirectUrl(window.location.href).href)
   const [isLoadingContent, setIsLoadingContent] = useState(false)
@@ -58,9 +58,9 @@ function RedirectPage ({ showConfigIframe = true }: { showConfigIframe?: boolean
         log.error('redirect-page: error setting config on subdomain', err)
       }
 
-      if (config.autoReload) {
-        setIsAutoReloadEnabled(config.autoReload)
-      }
+      // if (config.autoReload) {
+      //   setIsAutoReloadEnabled(config.autoReload)
+      // }
     }
     const listener = (event: MessageEvent): void => {
       if (event.data?.source === 'helia-sw-config-iframe') {
@@ -88,17 +88,17 @@ function RedirectPage ({ showConfigIframe = true }: { showConfigIframe?: boolean
     return 'Click below to load the content with the specified config.'
   }, [isAutoReloadEnabled, isServiceWorkerRegistered])
 
-  useEffect(() => {
-    if (isAutoReloadEnabled && isServiceWorkerRegistered && !isConfigPage(window.location.hash)) {
-      window.location.reload()
-    }
-  }, [isAutoReloadEnabled, isServiceWorkerRegistered])
-
   const loadContent = useCallback(() => {
     setIsLoadingContent(true)
     window.location.href = reloadUrl
   }, [reloadUrl])
 
+  useEffect(() => {
+    if (isAutoReloadEnabled && isServiceWorkerRegistered && !isConfigPage(window.location.hash)) {
+      loadContent()
+    }
+  }, [isAutoReloadEnabled, isServiceWorkerRegistered, loadContent])
+
   if (isLoadingContent) {
     return <LoadingPage />
   }
@@ -109,7 +109,6 @@ function RedirectPage ({ showConfigIframe = true }: { showConfigIframe?: boolean
       <div className="redirect-page">
         <div className="pa4-l mw7 mv5 center pa4">
           <h3 className="mt5">{displayString}</h3>
-          <ServiceWorkerReadyButton className="w-100" id="load-content" label='Load content' waitingLabel='Waiting for service worker registration...' onClick={loadContent} />
         </div>
         {showConfigIframe && <ConfigIframe />}
       </div>

test-e2e/byte-range.test.ts

@@ -3,21 +3,25 @@ import { doRangeRequest } from './fixtures/do-range-request.js'
 
 test.describe('byte-ranges', () => {
   test('should be able to get a single character', async ({ page }) => {
+    test.setTimeout(60000)
     const { text, byteSize, statusCode } = await doRangeRequest({ page, range: 'bytes=1-2', path: '/ipfs/bafkqaddimvwgy3zao5xxe3debi' })
 
     expect(statusCode).toBe(206)
     expect(byteSize).toBe(2)
     expect(text).toBe('el')
   })
 
-  test('can get 0-0 byte range from car with missing data', async ({ page, request }) => {
-    const { text, byteSize, statusCode } = await doRangeRequest({ page, range: 'bytes=0-0', path: '/ipfs/QmYhmPjhFjYFyaoiuNzYv8WGavpSRDwdHWe5B4M5du5Rtk' })
+  test('can get 0-0 byte range from car with missing data', async ({ page }) => {
+    test.setTimeout(60000)
+    const result = await doRangeRequest({ page, range: 'bytes=0-0', path: '/ipfs/QmYhmPjhFjYFyaoiuNzYv8WGavpSRDwdHWe5B4M5du5Rtk' })
+    const { text, byteSize, statusCode } = result
     expect(statusCode).toBe(206)
     expect(byteSize).toBe(1)
     expect(text).toBe('+')
   })
 
   test('can get trailing byte range from car with missing data', async ({ page }) => {
+    test.setTimeout(60000)
     const { bytes, byteSize, statusCode } = await doRangeRequest({ page, range: 'bytes=2200-', path: '/ipfs/QmYhmPjhFjYFyaoiuNzYv8WGavpSRDwdHWe5B4M5du5Rtk' })
     // TODO: do we need to check the full 872 bytes...?
     const tailBytes = [254, 0, 186, 192, 51, 66, 190, 27, 53, 147, 195, 115, 213, 65, 50, 246, 231, 155, 151, 106, 247, 199, 27, 193, 30, 214, 167, 87, 207, 246, 215, 109, 7, 72, 10, 217, 255, 62, 162, 153, 179, 12, 120, 75, 156, 74, 249, 212, 63, 218, 127, 121, 88, 111, 51, 172, 189, 176, 104, 4, 120, 182, 106, 44, 86, 33, 15, 120, 106, 126, 239, 188, 14, 190, 138, 125, 146, 14, 169, 101, 236, 250, 12, 210, 47, 145, 81, 104, 102, 153, 36, 245, 127, 60, 229, 121, 91, 204, 159, 235, 148, 44, 156, 193, 4, 59, 49, 124, 43, 30, 173, 26, 189, 95, 48, 35, 48, 91, 178, 43, 176, 171, 211, 145, 160, 251, 124, 201, 201, 29, 94, 70, 105, 216, 83, 99, 107, 86, 53, 157, 254, 16, 141, 147, 175, 2, 180, 137, 55, 174, 125, 172, 217, 214, 114, 46, 220, 23, 45, 81, 204, 215, 51, 114, 7, 115, 223, 226, 73, 114, 105, 6, 208, 213, 74, 116, 24, 98, 243, 201, 254, 195, 40, 227, 127, 14, 158, 125, 162, 150, 25, 15, 68, 101, 217, 162, 37, 253, 252, 79, 13, 33, 115, 57, 136, 0, 222, 45, 45, 105, 30, 245, 189, 133, 13, 14, 123, 15, 232, 237, 37, 8, 84, 212, 21, 233, 46, 136, 38, 236, 239, 216, 186, 175, 188, 165, 168, 69, 223, 159, 33, 96, 240, 68, 134, 121, 122, 4, 125, 16, 190, 105, 139, 78, 40, 86, 4, 125, 198, 224, 86, 198, 20, 47, 12, 207, 170, 127, 227, 92, 152, 37, 117, 137, 86, 85, 56, 67, 118, 157, 45, 31, 217, 81, 207, 129, 195, 28, 10, 238, 91, 142, 208, 116, 37, 28, 140, 161, 212, 45, 10, 208, 12, 37, 102, 165, 5, 65, 36, 153, 160, 100, 252, 115, 39, 47, 99, 24, 70, 90, 36, 190, 138, 186, 156, 30, 216, 238, 168, 207, 6, 28, 224, 108, 8, 249, 18, 143, 177, 198, 200, 189, 184, 33, 139, 249, 40, 56, 173, 235, 245, 84, 66, 123, 133, 195, 118, 145, 168, 2, 36, 118, 243, 195, 128, 234, 100, 105, 180, 141, 195, 9, 31, 204, 33, 83, 245, 138, 93, 20, 136, 151, 153, 188, 92, 65, 204, 254, 187, 69, 122, 26, 147, 86, 141, 41, 160, 75, 15, 136, 44, 186, 129, 176, 23, 87, 108, 217, 91, 195, 156, 7, 222, 74, 109, 209, 226, 15, 0, 190, 80, 194, 209, 51, 76, 5, 94, 95, 40, 206, 124, 251, 139, 162, 142, 142, 180, 4, 30, 213, 5, 44, 156, 227, 233, 80, 224, 74, 225, 6, 72, 129, 38, 11, 104, 166, 184, 225, 174, 152, 76, 206, 117, 64, 158, 252, 221, 11, 148, 24, 250, 171, 89, 117, 252, 126, 95, 169, 74, 133, 20, 180, 160, 209, 104, 31, 220, 179, 238, 33, 85, 234, 190, 30, 149, 15, 190, 57, 248, 134, 57, 26, 176, 175, 237, 133, 238, 151, 27, 135, 111, 167, 217, 12, 149, 173, 36, 34, 102, 50, 197, 17, 209, 164, 15, 61, 182, 195, 48, 56, 112, 143, 91, 210, 122, 240, 191, 144, 53, 246, 164, 169, 21, 119, 94, 235, 249, 131, 231, 162, 226, 61, 23, 81, 203, 253, 120, 160, 106, 41, 22, 70, 11, 149, 140, 231, 53, 149, 91, 197, 118, 210, 133, 206, 232, 188, 103, 61, 130, 28, 158, 104, 210, 20, 239, 143, 47, 30, 51, 127, 7, 23, 123, 55, 90, 133, 81, 40, 235, 70, 247, 0, 217, 174, 10, 190, 210, 104, 45, 121, 8, 201, 246, 180, 74, 210, 59, 145, 181, 196, 243, 192, 243, 62, 17, 57, 30, 215, 171, 186, 1, 193, 143, 94, 79, 215, 170, 79, 8, 38, 138, 138, 107, 145, 58, 122, 165, 144, 92, 179, 109, 115, 111, 122, 125, 7, 128, 112, 215, 115, 138, 93, 77, 163, 11, 144, 235, 41, 78, 22, 130, 204, 25, 33, 6, 236, 142, 250, 25, 20, 241, 220, 244, 90, 54, 149, 18, 5, 179, 175, 77, 130, 156, 97, 197, 68, 146, 235, 129, 53, 39, 33, 33, 156, 91, 176, 239, 247, 142, 203, 102, 10, 24, 227, 204, 20, 3, 55, 126, 73, 249, 152, 220, 163, 3, 251, 48, 251, 209, 182, 194, 65, 44, 40, 201, 27, 67, 64, 174, 252, 115, 139, 85, 181, 161, 214, 88, 103, 222, 188, 17, 198, 112, 123, 59, 138, 107, 173, 51, 212, 154, 189, 35, 214, 151, 82, 15, 26, 198, 39, 88, 241, 57, 58, 77, 113, 9, 74, 133, 101, 197, 12, 24, 121, 159, 87, 46, 44, 165, 83, 148, 13, 152, 175, 255, 240, 49, 110, 36, 124, 211, 219, 86, 232, 198, 153, 118, 221, 175, 139, 215, 45, 217, 101, 246, 101, 34, 154, 41, 179, 113, 48, 131, 146, 31, 226, 215, 119, 65, 97, 35, 136, 72, 179, 2, 146, 187, 120, 175, 229, 11, 143, 132, 151, 217, 134, 136, 54, 5, 211, 242, 70, 250, 210, 238, 151, 68, 63, 195, 112, 59, 179, 213, 163, 35, 28, 226, 35, 160, 44, 195, 31]

test-e2e/first-hit.test.ts

@@ -1,5 +1,4 @@
 import { test, expect } from './fixtures/config-test-fixtures.js'
-import { waitForServiceWorker } from './fixtures/wait-for-service-worker.js'
 
 test.describe('first-hit ipfs-hosted', () => {
   /**
@@ -22,22 +21,11 @@ test.describe('first-hit ipfs-hosted', () => {
 
       expect(headers?.['content-type']).toContain('text/html')
 
-      // then we should be redirected to the IPFS path
-      const bodyTextLocator = page.locator('body')
-      await expect(bodyTextLocator).toContainText('Click below to load the content with the specified config')
-      // and then the normal redirectPage logic:
-      await waitForServiceWorker(page)
-
-      // it should render the config iframe
-      await expect(page.locator('#redirect-config-iframe')).toBeAttached({ timeout: 1 })
-
-      // wait for the service worker to be registered, and click load content.
-      const loadContent = await page.waitForSelector('#load-content', { state: 'visible' })
-      await loadContent.click()
+      // wait for loading page to finish '.loading-page' to be removed
+      await page.waitForSelector('.loading-page', { state: 'detached' })
 
       // and we verify the content was returned
-      const text = await page.innerText('body')
-      expect(text).toBe('hello')
+      await page.waitForSelector('text=hello', { timeout: 25000 })
     })
   })
 
@@ -52,22 +40,13 @@ test.describe('first-hit ipfs-hosted', () => {
       const headers = await response?.allHeaders()
 
       expect(headers?.['content-type']).toContain('text/html')
+      await expect(page).toHaveURL('http://bafkqablimvwgy3y.ipfs.localhost:3334', { timeout: 10000 })
 
-      // then we should be redirected to the IPFS path
-      const bodyTextLocator = page.locator('body')
-      await page.waitForURL('http://bafkqablimvwgy3y.ipfs.localhost:3334')
-
-      await waitForServiceWorker(page)
-      await expect(bodyTextLocator).toContainText('Click below to load the content with the specified config')
-
-      // it should render the config iframe
-      await expect(page.locator('#redirect-config-iframe')).toBeAttached({ timeout: 1 })
-
-      await page.reload()
+      // wait for loading page to finish '.loading-page' to be removed
+      await page.waitForSelector('.loading-page', { state: 'detached' })
 
       // and we verify the content was returned
-      const text = await page.innerText('body')
-      expect(text).toBe('hello')
+      await page.waitForSelector('text=hello', { timeout: 25000 })
     })
   })
 })
@@ -93,20 +72,11 @@ test.describe('first-hit direct-hosted', () => {
 
       expect(headers?.['content-type']).toContain('text/html')
 
-      await waitForServiceWorker(page)
-      const bodyTextLocator = page.locator('body')
-      await expect(bodyTextLocator).toContainText('Click below to load the content with the specified config')
-
-      // it should render the config iframe
-      await expect(page.locator('#redirect-config-iframe')).toBeAttached({ timeout: 1 })
-
-      // wait for the service worker to be registered, and click load content.
-      const loadContent = await page.waitForSelector('#load-content', { state: 'visible' })
-      await loadContent.click()
+      // wait for loading page to finish '.loading-page' to be removed
+      await page.waitForSelector('.loading-page', { state: 'detached' })
 
       // and we verify the content was returned
-      const text = await page.innerText('body')
-      expect(text).toBe('hello')
+      await page.waitForSelector('text=hello', { timeout: 25000 })
     })
   })
 
@@ -121,22 +91,13 @@ test.describe('first-hit direct-hosted', () => {
       expect(headers?.['content-type']).toContain('text/html')
 
       // then we should be redirected to the IPFS path
-      await page.waitForURL(`${protocol}//bafkqablimvwgy3y.ipfs.${rootDomain}`)
-
-      const bodyTextLocator = page.locator('body')
-
-      await waitForServiceWorker(page)
-      await expect(bodyTextLocator).toContainText('Click below to load the content with the specified config')
-
-      // it should render the config iframe
-      await expect(page.locator('#redirect-config-iframe')).toBeAttached({ timeout: 1 })
+      await expect(page).toHaveURL(`${protocol}//bafkqablimvwgy3y.ipfs.${rootDomain}`, { timeout: 10000 })
 
-      const loadContent = await page.waitForSelector('#load-content', { state: 'visible' })
-      await loadContent.click()
+      // wait for loading page to finish '.loading-page' to be removed
+      await page.waitForSelector('.loading-page', { state: 'detached' })
 
       // and we verify the content was returned
-      const text = await page.innerText('body')
-      expect(text).toBe('hello')
+      await page.waitForSelector('text=hello', { timeout: 25000 })
     })
   })
 })

test-e2e/layout.test.ts

@@ -31,7 +31,7 @@ test.describe('smoketests', () => {
       const inputLocator = getConfigPageInput(page)
       // see https://playwright.dev/docs/locators#strictness
       await inputLocator.first().waitFor()
-      expect(await inputLocator.count()).toEqual(5)
+      expect(await inputLocator.count()).toEqual(4)
       const submitButton = getConfigPageSaveButton(page)
       await expect(submitButton).toBeVisible()
     })

test-e2e/subdomain-detection.test.ts

@@ -26,9 +26,6 @@ test.describe('subdomain-detection', () => {
     const bodyTextLocator = page.locator('body')
 
     await waitForServiceWorker(page)
-    await expect(bodyTextLocator).toContainText('Click below to load the content with the specified config')
-
-    await page.reload()
 
     await expect(bodyTextLocator).toContainText('hello')
   })