feat: native app params use tunnel selector flow#80
Conversation
There was a problem hiding this comment.
Pull request overview
Updates the native plugin “App Parameters” tunneling UI to use the same tunnel selector / generation workflow as generic apps, removing the manual token entry path and adding a deterministic Playwright preview harness for this UI.
Changes:
- Added
allowManualTunnelTokentoAppParametersSectionto optionally remove the “Custom” (manual token) option from the tunnel selector. - Updated native plugin inputs to use tunnel selector + generation flow (and disallow manual token entry).
- Added a dev-only Playwright preview component/page content for the native App Parameters tunneling UI.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/components/playwright-preview/NativeAppParametersPreview.tsx | Adds a deterministic preview harness rendering AppParametersSection with the native-plugin tunneling configuration. |
| src/components/create-job/sections/AppParametersSection.tsx | Adds allowManualTunnelToken and adjusts selector behavior when manual token entry is disallowed. |
| src/components/create-job/plugins/NativeInputsSection.tsx | Switches native plugin app parameters to use tunnel selector + generation and disables manual token entry. |
| app/(public)/playwright-preview/page.tsx | Renders the new native app parameters preview component in the dev-only Playwright preview route. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/components/playwright-preview/NativeAppParametersPreview.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| {allowManualTunnelToken === false && | ||
| !!tunnelingSecrets && | ||
| !isFetchingTunnels && |
There was a problem hiding this comment.
The "No tunnels found. Generate one to continue." info tag can appear before the initial fetch runs (brief flicker) and also on fetch errors, since it only checks existingTunnels.length === 0 and not whether the tunnels list was successfully fetched. Consider gating this message on hasFetchedTunnelsSuccessfully (and/or adding a distinct error state) so users aren’t told there are no tunnels when the request failed or hasn’t completed yet.
| !isFetchingTunnels && | |
| !isFetchingTunnels && | |
| hasFetchedTunnelsSuccessfully && |
| isCreatingTunnel={isCreatingTunnel} | ||
| enableTunnelSelector | ||
| allowManualTunnelToken={false} | ||
| onGenerateTunnel={onGenerateTunnel} | ||
| isTunnelGenerationDisabled={!tunnelingSecrets} |
There was a problem hiding this comment.
allowManualTunnelToken={false} disables manual tunnel token entry for generic plugins as well. The PR description calls out removing the manual insertion path for the native plugin App Parameters specifically—please confirm this broader behavior change is intended, or update the PR description / set allowManualTunnelToken appropriately for generic plugins.
| const onGenerateTunnel = async () => { | ||
| if (!tunnelingSecrets) { | ||
| toast.error('Missing Cloudflare secrets.'); | ||
| return; | ||
| } | ||
|
|
||
| setFormSubmissionDisabled(true); | ||
| setCreatingTunnel(true); | ||
|
|
||
| try { | ||
| const projectName = projectHash ? getProjectName(projectHash) : ''; | ||
| const pluginAliasSuffix = stripToAlphanumeric(pluginName || deploymentAlias || 'plugin').toLowerCase(); | ||
| const tunnelAlias = projectName | ||
| ? `${stripToAlphanumeric(projectName).toLowerCase()}-${pluginAliasSuffix}` | ||
| : pluginAliasSuffix; | ||
|
|
||
| const response = await createTunnel(tunnelAlias, tunnelingSecrets); | ||
|
|
There was a problem hiding this comment.
The onGenerateTunnel implementation here is essentially duplicated in multiple places (e.g. NativeInputsSection, GenericDeployment, ServiceDeployment). To avoid these flows drifting (alias formatting, error handling, disabled-state management), consider extracting a shared helper/hook for tunnel creation that takes the suffix inputs and returns the {token, url} result.
Summary
Validation
npm run lintNEXT_PUBLIC_ENVIRONMENT=devnet NEXT_PUBLIC_API_URL=https://example.com npm run build.playwright/native-app-parameters-tunnel-selector.pngCI
lint,build).