Open
Conversation
Add client-side, debounced API validation for the builder image in AppSource.vue. Introduces validation state (idle/validating/valid/invalid), error and suggestion fields, a 500ms debounce timer, and functions to schedule, clear and call the /api/v1/validate-builder-image endpoint via store.dispatch. Integrates validation into form rules (builderImageRule), prevents submission when invalid, and updates UI: aria attributes, validation status messages, and styling. Also add localized strings for validating/valid/validation errors in en-us.yaml. This improves UX by providing live feedback and suggestions for invalid builder images and handling network errors.
Adjust builder image validation to handle the store.request response shape (body with _status) and avoid race conditions by ignoring out-of-date responses. Set validation status to 'idle' for non-200 responses, clear the validating state once a response arrives, and map 401/403 errors to a distinct auth error message. Add a new i18n key (validationAuthError) for the authentication-specific error text.
Prefer structured API error details when validating builder images by extracting errors[0].title or errors[0].details and falling back to data.message. Renamed local variable and updated both auth and network error branches to use this API-derived message (with existing i18n fallbacks). This yields clearer validation errors from the API response.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR Checklist
Summary
Fixes #
Adds validation for the Paketo Builder Image field in the application source form: the UI calls the Epinio API to validate the builder image before staging. Shows real-time feedback (valid / invalid / validating) and handles auth failures and stale responses.
Occurred changes and/or fixed issues
Custom input for “Paketo Builder Image” with 500ms debounced calls to GET /api/v1/validate-builder-image?image=.
Validation states: “Validating…”, valid (green), invalid (red with message/suggestion), and auth error (“Could not validate. Sign in again.”).
Technical notes summary
The Epinio backend exposes GET /api/v1/validate-builder-image?image=![]()
(format + optional registry check). The UI does not call the new buildpack search/verify APIs; those are for future buildpack selection/validation.
Store returns the API response on the body (with _status), not as { data, status }. The handler uses body._status, body.valid, body.message, body.suggestion and always clears the validating state on completion.
Debounce (500ms) limits API calls while the user types. Only the latest request’s result is applied; older responses are ignored when (builderImage.value || '').trim() !== image.
Areas or cases that should be tested
Happy path:
Open Create/Edit Application → Source (e.g. buildpacks, custom builder).
In “Paketo Builder Image”, enter a valid image (e.g. paketobuildpacks/builder:full).
After ~500ms, “Validating…” appears, then a valid state (e.g. green check).
Invalid image:
Enter an invalid or non-existent image (e.g. invalid/bogus:latest).
After validation, invalid state and message/suggestion are shown.
Areas which could experience regressions
Screenshot/Video