fix(sqllab): Reduce flushing caused by ID updates

[justinpark]

SUMMARY

When using the improved SQLLab persistence mode, an ID value is initially generated to manage the tab in localStorage when the tab is created. After syncing with the server, this ID is immediately replaced with the server’s tabViewId, and subsequent data synchronization uses this new ID. Since this ID serves as the key for the SQLLab tab, updating the value causes React to treat it as a new tab, resulting in the component being re-rendered.
To solve this issue, we now preserve the ID for the duration of the session and additionally store the tabViewId. We have modified the system to use tabViewId specifically for data synchronization, which resolves the problem of tab flushing.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

before-query-editor-id-by-tab-id.mov

After:

after--query-editor-id-sync.mov

TESTING INSTRUCTIONS

Create a new tab, and then observe that the tab is flushed a few seconds later.

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[korbit-ai]

I've completed my review and didn't find any issues.

Files scanned

​

File Path	Reviewed
superset-frontend/src/SqlLab/hooks/useQueryEditor/index.ts	✅
superset-frontend/src/hooks/apiResources/sqlEditorTabs.ts	✅
superset-frontend/src/SqlLab/types.ts	✅
superset-frontend/src/SqlLab/components/QueryHistory/index.tsx	✅
superset-frontend/src/reduxUtils.ts	✅
superset-frontend/src/SqlLab/components/SouthPane/index.tsx	✅
superset-frontend/src/SqlLab/components/EditorAutoSync/index.tsx	✅
superset-frontend/src/SqlLab/reducers/getInitialState.ts	✅
superset-frontend/src/SqlLab/fixtures.ts	✅
superset-frontend/src/SqlLab/reducers/sqlLab.js	✅
superset-frontend/src/SqlLab/actions/sqlLab.js	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X