Fix unsaved-edit loss on tab switch, editor indentation, Resource Browser search jitter - #123
Merged
Merged
Conversation
Returning to the browser tab silently discarded unsaved editor changes. The QueryClient had no defaultOptions, so refetchOnWindowFocus was on and staleTime was 0: every visibilitychange refetched the resource query. A successful fetch always bumps dataUpdatedAt, even when the response is byte-identical, and ResourceEditorPage is keyed by `type/id@dataUpdatedAt` — so the page remounted and useState(initialResource) re-initialized from the server copy. useUnsavedChangesBlocker cannot catch this: a remount is not a navigation. Hitting Save afterwards wrote the rolled-back version back to Aidbox. Turn both automatic refetches off globally. Nothing overrides them to true, so the editor now remounts only where it was intended to — after Save invalidates its query key.
Picks up react-components 484b967: the editor's indentUnit was a tab, so auto-indent produced 4 columns against content pretty-printed with 2 spaces — Enter inside a JSON object left the caret one level too deep. Tab now uses indentMore instead of inserting a literal "\t", which is invalid indentation in YAML.
…he list The scroll container is overflow-y-auto and everything inside it is centered with `mx-auto max-w-[990px]`. Typing changes the virtualizer's total size, so around ~5 results the classic 8px scrollbar (from the ::-webkit-scrollbar rules in index.css) keeps appearing and disappearing. Each toggle resizes the content box by 8px and moves the centered column by 4px, which reads as the list jumping left and right while searching. scrollbar-gutter: stable reserves the gutter in both states.
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
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.
Three independent fixes found while chasing the first one.
1. Returning to the browser tab discarded unsaved editor changes (
cdd1d32)QueryClienthad nodefaultOptions, sorefetchOnWindowFocuswas on andstaleTimewas0: everyvisibilitychangerefetched the resource query. A successful fetch always bumpsdataUpdatedAt— even when the response is byte-identical — andResourceEditorPageis keyed by`type/id@dataUpdatedAt`(ResourceEditor/page.tsx:124), so the page remounted anduseState(initialResource)re-initialized from the server copy.useUnsavedChangesBlockercannot catch this: a remount is not a navigation, so no "Unsaved changes" dialog appears andisDirtydies with the component. Hitting Save afterwards wrote the rolled-back version back to Aidbox.Fix:
refetchOnWindowFocus: falseandrefetchOnReconnect: falseon theQueryClient. Nothing overrides them totrue, so the editor now remounts only where intended — after Save invalidates its query key.2. Enter put the caret one indent level too deep (
f1141d3→ submodule484b967)indentUnitinCodeEditorwas"\t", sogetIndentUnit()resolved totabSize(4) while every document is pretty-printed with 2 spaces —JSON.stringify(x, null, 2),YAML.dump({indent: 2}).continuedIndent()asked for 4 columns andindentString()materialized them as a literal tab:Fix:
indentUnit.of(" ").Tabhad the same problem viainsertTab, which always inserts"\t"— invalid indentation in YAML — so it now usesindentMore, matchingEnterand the existingShift-Tab(indentLess).The submodule change lives in
aidbox-ts-sdkondevelopment; this PR carries it as a gitlink bump6e75111 → 484b967. Review the actual diff here: react-components: code-editor indent.3. Resource Browser list jumped left and right while searching (
c300492)The scroll container is
overflow-y-autoand everything inside is centered withmx-auto max-w-[990px]. Typing changes the virtualizer's total size, so around ~5 results the classic 8px scrollbar (from the::-webkit-scrollbarrules inindex.css) keeps appearing and disappearing. Each toggle resizes the content box by 8px and moves the centered column by 4px.Fix:
scrollbar-gutter: stableon the scroll container.Verification
pnpm typecheck,biome check,vite build, pluslint:check/tsc:checkinreact-components— all clean. Confirmedscrollbar-gutter:stableandindentUnit.of(" ")land in the production bundle. Submoduledevelopmentis pushed, so the gitlink resolves. Not verified in a browser.