diff --git a/src/context/config-context.tsx b/src/context/config-context.tsx index d67396ac..290812d1 100644 --- a/src/context/config-context.tsx +++ b/src/context/config-context.tsx @@ -1,5 +1,5 @@ import React, { createContext, useCallback, useEffect, useState } from 'react' -import { defaultDebug, defaultDnsJsonResolvers, defaultEnableGatewayProviders, defaultEnableRecursiveGateways, defaultEnableWebTransport, defaultEnableWss, defaultFetchTimeout, defaultGateways, defaultRouters, defaultSupportsSubdomains, getConfig, resetConfig } from '../lib/config-db.js' +import { defaultDebug, defaultDnsJsonResolvers, defaultEnableGatewayProviders, defaultEnableProviderQueryParameter, defaultEnableRecursiveGateways, defaultEnableWebTransport, defaultEnableWss, defaultFetchTimeout, defaultGateways, defaultRouters, defaultSupportsSubdomains, getConfig, resetConfig } from '../lib/config-db.js' import { getUiComponentLogger } from '../lib/logger.js' import type { ConfigDb } from '../lib/config-db.js' import type { ComponentLogger } from '@libp2p/logger' @@ -23,6 +23,7 @@ export const ConfigContext = createContext({ enableWebTransport: defaultEnableWebTransport, enableGatewayProviders: defaultEnableGatewayProviders, enableRecursiveGateways: defaultEnableRecursiveGateways, + enableProviderQueryParameter: defaultEnableProviderQueryParameter, debug: defaultDebug(), fetchTimeout: defaultFetchTimeout, _supportsSubdomains: defaultSupportsSubdomains, @@ -38,6 +39,7 @@ export const ConfigProvider: React.FC<{ children: ReactElement[] | ReactElement, const [enableWebTransport, setEnableWebTransport] = useState(defaultEnableWebTransport) const [enableGatewayProviders, setEnableGatewayProviders] = useState(defaultEnableGatewayProviders) const [enableRecursiveGateways, setEnableRecursiveGateways] = useState(defaultEnableRecursiveGateways) + const [enableProviderQueryParameter, setEnableProviderQueryParameter] = useState(defaultEnableProviderQueryParameter) const [debug, setDebug] = useState(defaultDebug()) const [fetchTimeout, setFetchTimeout] = useState(defaultFetchTimeout) const [_supportsSubdomains, setSupportsSubdomains] = useState(defaultSupportsSubdomains) @@ -53,6 +55,7 @@ export const ConfigProvider: React.FC<{ children: ReactElement[] | ReactElement, setEnableWebTransport(config.enableWebTransport) setEnableGatewayProviders(config.enableGatewayProviders) setEnableRecursiveGateways(config.enableRecursiveGateways) + setEnableProviderQueryParameter(config.enableProviderQueryParameter) setDebug(config.debug) setFetchTimeout(config.fetchTimeout) } @@ -93,6 +96,9 @@ export const ConfigProvider: React.FC<{ children: ReactElement[] | ReactElement, case 'enableRecursiveGateways': setEnableRecursiveGateways(value) break + case 'enableProviderQueryParameter': + setEnableProviderQueryParameter(value) + break case 'debug': setDebug(value) break @@ -123,6 +129,7 @@ export const ConfigProvider: React.FC<{ children: ReactElement[] | ReactElement, enableWebTransport, enableGatewayProviders, enableRecursiveGateways, + enableProviderQueryParameter, fetchTimeout, debug, _supportsSubdomains, diff --git a/src/lib/config-db.ts b/src/lib/config-db.ts index e2940749..289ca4a0 100644 --- a/src/lib/config-db.ts +++ b/src/lib/config-db.ts @@ -11,6 +11,7 @@ export interface ConfigDbWithoutPrivateFields extends BaseDbConfig { enableWebTransport: boolean enableGatewayProviders: boolean enableRecursiveGateways: boolean + enableProviderQueryParameter: boolean debug: string /** @@ -37,6 +38,7 @@ export const defaultEnableWss = true export const defaultEnableWebTransport = false export const defaultEnableGatewayProviders = true export const defaultSupportsSubdomains: null | boolean = null +export const defaultEnableProviderQueryParameter = false /** * The default fetch timeout for the gateway, in seconds. @@ -61,6 +63,7 @@ export async function resetConfig (logger: ComponentLogger): Promise { await configDb.put('enableWebTransport', defaultEnableWebTransport) await configDb.put('enableRecursiveGateways', defaultEnableRecursiveGateways) await configDb.put('enableGatewayProviders', defaultEnableGatewayProviders) + await configDb.put('enableProviderQueryParameter', defaultEnableProviderQueryParameter) await configDb.put('debug', defaultDebug()) await configDb.put('fetchTimeout', defaultFetchTimeout * 1000) // leave private/app-only fields as is @@ -85,6 +88,7 @@ export async function setConfig (config: ConfigDbWithoutPrivateFields, logger: C await configDb.put('enableWss', config.enableWss) await configDb.put('enableWebTransport', config.enableWebTransport) await configDb.put('enableGatewayProviders', config.enableGatewayProviders) + await configDb.put('enableProviderQueryParameter', config.enableProviderQueryParameter) await configDb.put('debug', config.debug ?? defaultDebug()) await configDb.put('fetchTimeout', config.fetchTimeout ?? (defaultFetchTimeout * 1000)) // ignore private/app-only fields @@ -116,6 +120,7 @@ export async function getConfig (logger: ComponentLogger): Promise { let enableWss let enableWebTransport let enableGatewayProviders + let enableProviderQueryParameter let fetchTimeout let debug = '' let _supportsSubdomains = defaultSupportsSubdomains @@ -139,6 +144,7 @@ export async function getConfig (logger: ComponentLogger): Promise { enableWss = config.enableWss ?? defaultEnableWss enableWebTransport = config.enableWebTransport ?? defaultEnableWebTransport enableGatewayProviders = config.enableGatewayProviders ?? defaultEnableGatewayProviders + enableProviderQueryParameter = config.enableProviderQueryParameter ?? defaultEnableProviderQueryParameter fetchTimeout = config.fetchTimeout ?? (defaultFetchTimeout * 1000) _supportsSubdomains ??= config._supportsSubdomains } catch (err) { @@ -167,6 +173,7 @@ export async function getConfig (logger: ComponentLogger): Promise { enableWss, enableWebTransport, enableGatewayProviders, + enableProviderQueryParameter, debug, fetchTimeout, _supportsSubdomains diff --git a/src/pages/config.tsx b/src/pages/config.tsx index 0d0250fc..db6da313 100644 --- a/src/pages/config.tsx +++ b/src/pages/config.tsx @@ -85,7 +85,7 @@ export interface ConfigPageProps extends React.HTMLProps { // Config Page can be loaded either as a page or as a component in the landing helper-ui page const ConfigPage: FunctionComponent = () => { const { gotoPage } = useContext(RouteContext) - const { setConfig, resetConfig, gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout, _supportsSubdomains, isLoading: isConfigDataLoading } = useContext(ConfigContext) + const { setConfig, resetConfig, gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, enableProviderQueryParameter, fetchTimeout, _supportsSubdomains, isLoading: isConfigDataLoading } = useContext(ConfigContext) const [isSaving, setIsSaving] = useState(false) const [error, setError] = useState(null) const [resetKey, setResetKey] = useState(0) @@ -98,7 +98,7 @@ const ConfigPage: FunctionComponent = () => { } // we get the iframe origin from a query parameter called 'origin', if this is loaded in an iframe const targetOrigin = decodeURIComponent(window.location.hash.split('@origin=')[1]) - const config = { gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout, _supportsSubdomains } + const config = { gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, enableProviderQueryParameter, fetchTimeout, _supportsSubdomains } log.trace('config-page: postMessage config to origin ', JSON.stringify(config), targetOrigin) /** * The reload page in the parent window is listening for this message, and then it passes a RELOAD_CONFIG message to the service worker @@ -107,7 +107,7 @@ const ConfigPage: FunctionComponent = () => { targetOrigin }) log.trace('config-page: RELOAD_CONFIG sent to parent window') - }, [gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout]) + }, [gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout, enableProviderQueryParameter]) useEffect(() => { if (!isConfigDataLoading) { @@ -120,7 +120,7 @@ const ConfigPage: FunctionComponent = () => { const saveConfig = useCallback(async () => { try { - const config = { gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout } + const config = { gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout, enableProviderQueryParameter } setIsSaving(true) await storeConfig(config, uiComponentLogger) log.trace('config-page: sending RELOAD_CONFIG to service worker') @@ -139,7 +139,7 @@ const ConfigPage: FunctionComponent = () => { } finally { setIsSaving(false) } - }, [gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout]) + }, [gateways, routers, dnsJsonResolvers, debug, enableGatewayProviders, enableRecursiveGateways, enableWss, enableWebTransport, fetchTimeout, enableProviderQueryParameter]) const doResetConfig = useCallback(async () => { // we need to clear out the localStorage items and make sure default values are set, and that all of our inputs are updated @@ -183,6 +183,14 @@ const ConfigPage: FunctionComponent = () => { onChange={(value) => { setConfig('enableWebTransport', value) }} resetKey={resetKey} /> + { setConfig('enableProviderQueryParameter', value) }} + resetKey={resetKey} + /> { enableWebTransport: true, enableRecursiveGateways: false, enableGatewayProviders: false, + enableProviderQueryParameter: false, fetchTimeout: 29 * 1000 } test.beforeAll(async () => { diff --git a/test-e2e/fixtures/locators.ts b/test-e2e/fixtures/locators.ts index 19c54027..f110c457 100644 --- a/test-e2e/fixtures/locators.ts +++ b/test-e2e/fixtures/locators.ts @@ -19,6 +19,7 @@ export const getIframeLocator: GetFrameLocator = (page) => page.frameLocator('if export const getConfigEnableGatewayProviders: GetLocator = (page) => page.locator('.e2e-config-page-input-enableGatewayProviders') export const getConfigEnableWss: GetLocator = (page) => page.locator('.e2e-config-page-input-enableWss') export const getConfigEnableWebTransport: GetLocator = (page) => page.locator('.e2e-config-page-input-enableWebTransport') +export const getConfigEnableProviderQueryParameter: GetLocator = (page) => page.locator('.e2e-config-page-input-enableProviderQueryParameter') export const getConfigRoutersInput: GetLocator = (page) => page.locator('.e2e-config-page-input-routers') export const getConfigEnableRecursiveGateways: GetLocator = (page) => page.locator('.e2e-config-page-input-enableRecursiveGateways') export const getConfigGatewaysInput: GetLocator = (page) => page.locator('.e2e-config-page-input-gateways') diff --git a/test-e2e/fixtures/set-sw-config.ts b/test-e2e/fixtures/set-sw-config.ts index 20409458..f50fc77e 100644 --- a/test-e2e/fixtures/set-sw-config.ts +++ b/test-e2e/fixtures/set-sw-config.ts @@ -4,7 +4,7 @@ * * Note that this was only tested and confirmed working for subdomain pages. */ -import { getConfigDebug, getConfigDnsJsonResolvers, getConfigEnableGatewayProviders, getConfigEnableRecursiveGateways, getConfigEnableWebTransport, getConfigEnableWss, getConfigFetchTimeout, getConfigGatewaysInput, getConfigGatewaysInputIframe, getConfigPage, getConfigPageSaveButton, getConfigPageSaveButtonIframe, getConfigRoutersInput, getConfigRoutersInputIframe } from './locators.js' +import { getConfigDebug, getConfigDnsJsonResolvers, getConfigEnableGatewayProviders, getConfigEnableRecursiveGateways, getConfigEnableWebTransport, getConfigEnableWss, getConfigEnableProviderQueryParameter, getConfigFetchTimeout, getConfigGatewaysInput, getConfigGatewaysInputIframe, getConfigPage, getConfigPageSaveButton, getConfigPageSaveButtonIframe, getConfigRoutersInput, getConfigRoutersInputIframe } from './locators.js' import { waitForServiceWorker } from './wait-for-service-worker.js' import type { ConfigDb, ConfigDbWithoutPrivateFields } from '../../src/lib/config-db.js' import type { Page } from '@playwright/test' @@ -23,6 +23,10 @@ export async function setConfigViaUiSubdomain ({ page, config, expectedSwScope } await getConfigEnableWss(page).locator('input').setChecked(config.enableWss) } + if (config.enableProviderQueryParameter != null) { + await getConfigEnableProviderQueryParameter(page).locator('input').setChecked(config.enableProviderQueryParameter) + } + if (config.enableWebTransport != null) { await getConfigEnableWebTransport(page).locator('input').setChecked(config.enableWebTransport) } @@ -73,6 +77,11 @@ export async function setConfigViaUi ({ page, config, expectedSwScope }: { page: await getConfigEnableWss(page).locator('input').setChecked(config.enableWss) } + if (config.enableProviderQueryParameter != null) { + await getConfigEnableProviderQueryParameter(page).scrollIntoViewIfNeeded() + await getConfigEnableProviderQueryParameter(page).locator('input').setChecked(config.enableProviderQueryParameter) + } + if (config.enableWebTransport != null) { await getConfigEnableWebTransport(page).scrollIntoViewIfNeeded() await getConfigEnableWebTransport(page).locator('input').setChecked(config.enableWebTransport) @@ -115,6 +124,7 @@ export async function getConfigUi ({ page, expectedSwScope }: { page: Page, expe const enableGatewayProviders = await getConfigEnableGatewayProviders(page).locator('input').isChecked() const enableWss = await getConfigEnableWss(page).locator('input').isChecked() + const enableProviderQueryParameter = await getConfigEnableProviderQueryParameter(page).locator('input').isChecked() const enableWebTransport = await getConfigEnableWebTransport(page).locator('input').isChecked() const routers = (await getConfigRoutersInput(page).locator('textarea').inputValue()).split('\n') const enableRecursiveGateways = await getConfigEnableRecursiveGateways(page).locator('input').isChecked() @@ -133,6 +143,7 @@ export async function getConfigUi ({ page, expectedSwScope }: { page: Page, expe enableGatewayProviders, enableWss, enableWebTransport, + enableProviderQueryParameter, routers, enableRecursiveGateways, gateways, @@ -215,6 +226,7 @@ export async function getConfig ({ page }: { page: Page }): Promise { routers: await get('routers'), dnsJsonResolvers: await get('dnsJsonResolvers'), enableWss: await get('enableWss'), + enableProviderQueryParameter: await get('enableProviderQueryParameter'), enableWebTransport: await get('enableWebTransport'), enableRecursiveGateways: await get('enableRecursiveGateways'), enableGatewayProviders: await get('enableGatewayProviders'), diff --git a/test-e2e/layout.test.ts b/test-e2e/layout.test.ts index 607b8669..79cf1509 100644 --- a/test-e2e/layout.test.ts +++ b/test-e2e/layout.test.ts @@ -28,7 +28,7 @@ test.describe('smoketests', () => { const inputLocator = getConfigPageInput(page) // see https://playwright.dev/docs/locators#strictness await inputLocator.first().waitFor() - expect(await inputLocator.count()).toEqual(9) + expect(await inputLocator.count()).toEqual(10) const submitButton = getConfigPageSaveButton(page) await expect(submitButton).toBeVisible() })