feat!: config is always visible on landing page

.github/workflows/main.yml

@@ -18,7 +18,7 @@ jobs:
     - uses: actions/setup-node@v4
       with:
         node-version: lts/*
-    - uses: ipfs/aegir/actions/cache-node-modules@master
+    - uses: ipfs/aegir/actions/cache-node-modules@main
     - name: Save ./dist output for later
       uses: actions/upload-artifact@v4
       with:
@@ -33,7 +33,7 @@ jobs:
     - uses: actions/setup-node@v4
       with:
         node-version: lts/*
-    - uses: ipfs/aegir/actions/cache-node-modules@master
+    - uses: ipfs/aegir/actions/cache-node-modules@main
     - run: npm run --if-present lint
     - run: npm run --if-present dep-check
     - run: npm run --if-present doc-check
@@ -51,7 +51,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-      - uses: ipfs/aegir/actions/cache-node-modules@master
+      - uses: ipfs/aegir/actions/cache-node-modules@main
       - run: npm run --if-present test:node
       - uses: codecov/codecov-action@b9fd7d16f6d7d1b5d2bec1a2887e65ceed900238 # v4.6.0
         with:
@@ -66,7 +66,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
-      - uses: ipfs/aegir/actions/cache-node-modules@master
+      - uses: ipfs/aegir/actions/cache-node-modules@main
       - run: npx playwright install --with-deps
       - run: npm run --if-present test:chrome
       - uses: codecov/codecov-action@b9fd7d16f6d7d1b5d2bec1a2887e65ceed900238 # v4.6.0
@@ -82,7 +82,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
-      - uses: ipfs/aegir/actions/cache-node-modules@master
+      - uses: ipfs/aegir/actions/cache-node-modules@main
       - run: npm run --if-present test:chrome-webworker
       - uses: codecov/codecov-action@b9fd7d16f6d7d1b5d2bec1a2887e65ceed900238 # v4.6.0
         with:
@@ -97,7 +97,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
-      - uses: ipfs/aegir/actions/cache-node-modules@master
+      - uses: ipfs/aegir/actions/cache-node-modules@main
       - run: npx playwright install --with-deps
       - run: npm run --if-present test:firefox
       - uses: codecov/codecov-action@b9fd7d16f6d7d1b5d2bec1a2887e65ceed900238 # v4.6.0
@@ -113,7 +113,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
-      - uses: ipfs/aegir/actions/cache-node-modules@master
+      - uses: ipfs/aegir/actions/cache-node-modules@main
       - run: npm run --if-present test:firefox-webworker
       - uses: codecov/codecov-action@b9fd7d16f6d7d1b5d2bec1a2887e65ceed900238 # v4.6.0
         with:
@@ -128,7 +128,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
-      - uses: ipfs/aegir/actions/cache-node-modules@master
+      - uses: ipfs/aegir/actions/cache-node-modules@main
       - run: npm run --if-present test:webkit
       - uses: codecov/codecov-action@b9fd7d16f6d7d1b5d2bec1a2887e65ceed900238 # v4.6.0
         with:
@@ -143,7 +143,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
-      - uses: ipfs/aegir/actions/cache-node-modules@master
+      - uses: ipfs/aegir/actions/cache-node-modules@main
       - run: npx xvfb-maybe npm run --if-present test:electron-main
       - uses: codecov/codecov-action@b9fd7d16f6d7d1b5d2bec1a2887e65ceed900238 # v4.6.0
         with:
@@ -158,7 +158,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
-      - uses: ipfs/aegir/actions/cache-node-modules@master
+      - uses: ipfs/aegir/actions/cache-node-modules@main
       - run: npx xvfb-maybe npm run --if-present test:electron-renderer
       - uses: codecov/codecov-action@b9fd7d16f6d7d1b5d2bec1a2887e65ceed900238 # v4.6.0
         with:

src/components/About.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 export default function About (): JSX.Element {
   return (
-        <aside className='mw7 lb-snow center w-100 lh-copy pa2'>
+        <aside className='mw7 lb-snow center w-100 lh-copy pa2 e2e-section-about'>
           <h1 className='pa0 f3 ma0 mb4 teal tc'>About the IPFS Gateway and Service Worker</h1>
           <p>This page runs an IPFS gateway within a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="_blank">Service Worker</a>. It uses <a href="https://github.com/ipfs/helia" target="_blank">Helia</a> (IPFS implementation in JS) and the <a href="https://github.com/ipfs/helia-verified-fetch" target="_blank">@helia/verified-fetch</a> library (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank">Fetch API</a> for IPFS) to facilitate direct verified retrieval of <a href="https://docs.ipfs.tech/concepts/content-addressing/" target="_blank">content-addressed</a> data.</p>
           <p><strong>Why?</strong> It improves decentralization, offers enhanced security (CID verification happens on end user's machine) and reliability (ability to do retrieval from multiple sources without reliance on a single HTTP server).</p>

src/components/Header.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
-import { RouteContext } from '../context/router-context.jsx'
-import gearIcon from '../gear-icon.svg'
+import React, { type FunctionComponent } from 'react'
 import ipfsLogo from '../ipfs-logo.svg'
 
-export default function Header ({ showConfigIcon = false }: { showConfigIcon?: boolean }): JSX.Element {
-  const { gotoPage } = React.useContext(RouteContext)
+export interface HeaderProps extends React.HTMLProps<HTMLElement> {
+
+}
+
+export const Header: FunctionComponent<HeaderProps> = () => {
   return (
     <header className='e2e-header flex items-center pa2 bg-navy bb bw3 b--aqua tc justify-between'>
       <div>
@@ -14,16 +15,8 @@ export default function Header ({ showConfigIcon = false }: { showConfigIcon?: b
       </div>
       <div className='pb1 ma0 inline-flex items-center'>
         <h1 className='e2e-header-title f3 fw2 aqua ttu sans-serif'>Service Worker Gateway <small className="gray">(beta)</small></h1>
-        {showConfigIcon && <button className='e2e-header-config-button pl3'
-            onClick={() => {
-              gotoPage('/ipfs-sw-config')
-            }}
-            style={{ border: 'none', background: 'none', cursor: 'pointer' }}
-        >
-            <img alt='Config gear icon' src={gearIcon} style={{ height: 50 }} className='v-top' />
-        </button>}
       </div>
-
     </header>
   )
 }
+export default Header

src/context/config-context.tsx

@@ -1,21 +1,15 @@
 import React, { createContext, useCallback, useEffect, useState } from 'react'
 import { defaultDebug, defaultDnsJsonResolvers, defaultEnableGatewayProviders, defaultEnableRecursiveGateways, defaultEnableWebTransport, defaultEnableWss, defaultGateways, defaultRouters, getConfig, resetConfig, type ConfigDb } from '../lib/config-db.js'
-import { isConfigPage } from '../lib/is-config-page.js'
 import { getUiComponentLogger } from '../lib/logger.js'
 import type { ComponentLogger } from '@libp2p/logger'
 
-const isLoadedInIframe = window.self !== window.top
-
 type ConfigKey = keyof ConfigDb
 export interface ConfigContextType extends ConfigDb {
-  isConfigExpanded: boolean
-  setConfigExpanded(value: boolean): void
   setConfig(key: ConfigKey, value: any): void
   resetConfig(logger?: ComponentLogger): Promise<void>
 }
 
 export const ConfigContext = createContext<ConfigContextType>({
-  isConfigExpanded: isLoadedInIframe,
   setConfigExpanded: (value: boolean) => {},
   setConfig: (key, value) => {},
   resetConfig: async () => Promise.resolve(),
@@ -30,7 +24,6 @@ export const ConfigContext = createContext<ConfigContextType>({
 })
 
 export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Element, expanded?: boolean }): JSX.Element => {
-  const [isConfigExpanded, setConfigExpanded] = useState(isConfigPage(window.location.hash))
   const [gateways, setGateways] = useState<string[]>(defaultGateways)
   const [routers, setRouters] = useState<string[]>(defaultRouters)
   const [dnsJsonResolvers, setDnsJsonResolvers] = useState<Record<string, string>>(defaultDnsJsonResolvers)
@@ -39,7 +32,6 @@ export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Ele
   const [enableGatewayProviders, setEnableGatewayProviders] = useState(defaultEnableGatewayProviders)
   const [enableRecursiveGateways, setEnableRecursiveGateways] = useState(defaultEnableRecursiveGateways)
   const [debug, setDebug] = useState(defaultDebug)
-  const isExplicitlyLoadedConfigPage = isConfigPage(window.location.hash)
   const logger = getUiComponentLogger('config-context')
   const log = logger.forComponent('main')
 
@@ -103,16 +95,8 @@ export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Ele
     await loadConfig()
   }
 
-  const setConfigExpandedWrapped = (value: boolean): void => {
-    if (isLoadedInIframe || isExplicitlyLoadedConfigPage) {
-      // ignore it
-    } else {
-      setConfigExpanded(value)
-    }
-  }
-
   return (
-    <ConfigContext.Provider value={{ isConfigExpanded, setConfigExpanded: setConfigExpandedWrapped, setConfig: setConfigLocal, resetConfig: resetConfigLocal, gateways, routers, dnsJsonResolvers, enableWss, enableWebTransport, enableGatewayProviders, enableRecursiveGateways, debug }}>
+    <ConfigContext.Provider value={{ setConfig: setConfigLocal, resetConfig: resetConfigLocal, gateways, routers, dnsJsonResolvers, enableWss, enableWebTransport, enableGatewayProviders, enableRecursiveGateways, debug }}>
       {children}
     </ConfigContext.Provider>
   )

src/lib/is-config-page.ts

@@ -1,3 +1,9 @@
+/**
+ * As of https://github.com/ipfs/service-worker-gateway/issues/486, we no longer have a singular page at
+ * /#/ipfs-sw-config unless loaded directly from a subdomain. The configuration section is now on the main page (helper-ui.tsx)
+ *
+ * We still use /#/ipfs-sw-config to allow subdomain users to change config and we need to detect that.
+ */
 export function isConfigPage (hash: string): boolean {
   const isConfigHashPath = hash.startsWith('#/ipfs-sw-config') // needed for _redirects and IPFS hosted sw gateways
   return isConfigHashPath

src/lib/routing-render-checks.ts

@@ -21,9 +21,10 @@ export async function shouldRenderRedirectPage (): Promise<boolean> {
 
 export async function shouldRenderConfigPage (): Promise<boolean> {
   const { isConfigPage } = await import('../lib/is-config-page.js')
+  const { isSubdomainGatewayRequest } = await import('./path-or-subdomain.js')
 
   const isRequestToViewConfigPage = isConfigPage(window.location.hash)
-  return isRequestToViewConfigPage
+  return isRequestToViewConfigPage && isSubdomainGatewayRequest(window.location)
 }
 
 export function shouldRenderRedirectsInterstitial (): boolean {

src/pages/config.tsx

@@ -1,6 +1,5 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useState, type FunctionComponent } from 'react'
 import Header from '../components/Header.jsx'
-import { Collapsible } from '../components/collapsible.jsx'
 import { InputSection } from '../components/input-section.jsx'
 import { InputToggle } from '../components/input-toggle.jsx'
 import { ServiceWorkerReadyButton } from '../components/sw-ready-button.jsx'
@@ -10,6 +9,7 @@ import { RouteContext } from '../context/router-context.jsx'
 import { ServiceWorkerProvider } from '../context/service-worker-context.jsx'
 import { setConfig as storeConfig } from '../lib/config-db.js'
 import { convertDnsResolverInputToObject, convertDnsResolverObjectToInput, convertUrlArrayToInput, convertUrlInputToArray } from '../lib/input-helpers.js'
+import { isConfigPage } from '../lib/is-config-page.js'
 import { getUiComponentLogger, uiLogger } from '../lib/logger.js'
 import './default-page-styles.css'
 import { tellSwToReloadConfig } from '../lib/sw-comms.js'
@@ -75,7 +75,11 @@ const dnsJsonValidationFn = (value: string): Error | null => {
   }
 }
 
-function ConfigPage (): React.JSX.Element | null {
+export interface ConfigPageProps extends React.HTMLProps<HTMLElement> {
+
+}
+
+const ConfigPage: FunctionComponent<ConfigPageProps> = () => {
   const { gotoPage } = useContext(RouteContext)
   const { setConfig, resetConfig, gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport } = useContext(ConfigContext)
   const [isSaving, setIsSaving] = useState(false)
@@ -140,9 +144,9 @@ function ConfigPage (): React.JSX.Element | null {
 
   return (
     <>
-    {!isLoadedInIframe && <Header /> }
-    <main className='e2e-config-page pa4-l bg-snow mw7 center pa4'>
-      <Collapsible collapsedLabel="View config" expandedLabel='Hide config' collapsed={isLoadedInIframe}>
+      {isConfigPage(window.location.hash) ? <Header /> : null}
+      <section className='e2e-config-page pa4-l bg-snow mw7 center pa4'>
+        <h1 className='pa0 f3 ma0 mb4 teal tc'>Configure your IPFS Gateway</h1>
         <InputSection label='Direct Retrieval'>
           <InputToggle
             className="e2e-config-page-input"
@@ -224,8 +228,7 @@ function ConfigPage (): React.JSX.Element | null {
           <ServiceWorkerReadyButton className="e2e-config-page-button white w-100 pa3" id="save-config" label={isSaving ? 'Saving...' : 'Save Config'} waitingLabel='Waiting for service worker registration...' onClick={() => { void saveConfig() }} />
         </div>
         {error != null && <span style={{ color: 'red' }}>{error.message}</span>}
-      </Collapsible>
-    </main>
+      </section>
     </>
   )
 }

src/pages/helper-ui.tsx

@@ -7,6 +7,7 @@ import { ConfigProvider } from '../context/config-context.jsx'
 import { ServiceWorkerProvider } from '../context/service-worker-context.jsx'
 import { LOCAL_STORAGE_KEYS } from '../lib/local-storage.js'
 import './default-page-styles.css'
+import Config from './config.js'
 
 function HelperUi (): React.JSX.Element {
   const [requestPath, setRequestPath] = useState(localStorage.getItem(LOCAL_STORAGE_KEYS.forms.requestPath) ?? '')
@@ -21,8 +22,8 @@ function HelperUi (): React.JSX.Element {
 
   return (
     <>
-      <Header showConfigIcon={true} />
-      <main className='pa2 pa4-l bg-snow mw7 mv5-l center'>
+      <Header />
+      <main className='pa2 pa4-l bg-snow mw7 mv5-l center e2e-helper-ui'>
         <h1 className='pa0 f3 ma0 mb4 teal tc'>Fetch & Verify IPFS Content in Browser</h1>
         <Form
           handleSubmit={handleSubmit}
@@ -37,6 +38,7 @@ function HelperUi (): React.JSX.Element {
       </main>
 
       <About />
+      <Config/>
     </>
   )
 }

test-e2e/config-loading.test.ts

@@ -3,7 +3,7 @@ import { getConfig, setConfig } from './fixtures/set-sw-config.js'
 import { waitForServiceWorker } from './fixtures/wait-for-service-worker.js'
 import type { ConfigDb } from '../src/lib/config-db'
 
-test.describe('/#/ipfs-sw-config', () => {
+test.describe('ipfs-sw configuration', () => {
   const testConfig: ConfigDb = {
     gateways: [process.env.KUBO_GATEWAY as string, 'http://example.com'],
     routers: [process.env.KUBO_GATEWAY as string, 'http://example.com/routing/v1'],

test-e2e/fixtures/locators.ts

@@ -12,7 +12,6 @@ export interface GetFrameLocator {
  */
 export const getHeader: GetLocator = (page) => page.locator('.e2e-header')
 export const getHeaderTitle: GetLocator = (page) => page.locator('.e2e-header-title')
-export const getConfigButton: GetLocator = (page) => page.locator('.e2e-header-config-button')
 export const getConfigPage: GetLocator = (page) => page.locator('.e2e-config-page')
 export const getConfigPageInput: GetLocator = (page) => page.locator('.e2e-config-page-input')
 export const getConfigPageSaveButton: GetLocator = (page) => page.locator('.e2e-config-page-button#save-config')
@@ -23,6 +22,9 @@ export const getConfigAutoReloadInput: GetLocator = (page) => page.locator('.e2e
 
 export const getNoServiceWorkerError: GetLocator = (page) => page.locator('.e2e-no-service-worker-error')
 
+export const getHelperUi: GetLocator = (page) => page.locator('.e2e-helper-ui')
+export const getAboutSection: GetLocator = (page) => page.locator('.e2e-about-section')
+
 /**
  * Iframe page parts
  */

test-e2e/fixtures/set-sw-config.ts

@@ -4,7 +4,7 @@
  *
  * Note that this was only tested and confirmed working for subdomain pages.
  */
-import { getConfigAutoReloadInputIframe, getConfigButton, getConfigButtonIframe, getConfigGatewaysInput, getConfigGatewaysInputIframe, getConfigPage, getConfigPageSaveButton, getConfigPageSaveButtonIframe, getConfigRoutersInput, getConfigRoutersInputIframe } from './locators.js'
+import { getConfigAutoReloadInputIframe, getConfigButtonIframe, getConfigGatewaysInput, getConfigGatewaysInputIframe, getConfigPage, getConfigPageSaveButton, getConfigPageSaveButtonIframe, getConfigRoutersInput, getConfigRoutersInputIframe } from './locators.js'
 import { waitForServiceWorker } from './wait-for-service-worker.js'
 import type { ConfigDb } from '../../src/lib/config-db.js'
 import type { Page } from '@playwright/test'
@@ -31,8 +31,6 @@ export async function setConfigViaUiSubdomain ({ page, config }: { page: Page, c
 export async function setConfigViaUi ({ page, config }: { page: Page, config: Partial<ConfigDb> }): Promise<void> {
   await waitForServiceWorker(page)
 
-  await getConfigButton(page).isVisible()
-  await getConfigButton(page).click()
   await getConfigPage(page).isVisible()
 
   await getConfigGatewaysInput(page).locator('input').fill(JSON.stringify([process.env.KUBO_GATEWAY]))