fix(sqllab): Skip AceEditor in inactive tabs (#30171)

This commit is contained in:
JUST.in DO IT 2024-09-06 09:58:59 -07:00 committed by GitHub
parent 6294e339e2
commit 4d1db9e32c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 9 deletions

View File

@ -189,6 +189,18 @@ describe('SqlEditor', () => {
expect(await findByTestId('react-ace')).toBeInTheDocument();
});
it('skip rendering an AceEditorWrapper when the current tab is inactive', async () => {
const { findByTestId, queryByTestId } = setup(
{
...mockedProps,
queryEditor: initialState.sqlLab.queryEditors[1],
},
store,
);
expect(await findByTestId('mock-sql-editor-left-bar')).toBeInTheDocument();
expect(queryByTestId('react-ace')).not.toBeInTheDocument();
});
it('avoids rerendering EditorLeftBar and ResultSet while typing', async () => {
const { findByTestId } = setup(mockedProps, store);
const editor = await findByTestId('react-ace');

View File

@ -880,15 +880,17 @@ const SqlEditor: FC<Props> = ({
startQuery={startQuery}
/>
)}
<AceEditorWrapper
autocomplete={autocompleteEnabled}
onBlur={onSqlChanged}
onChange={onSqlChanged}
queryEditorId={queryEditor.id}
onCursorPositionChange={handleCursorPositionChange}
height={`${aceEditorHeight}px`}
hotkeys={hotkeys}
/>
{isActive && (
<AceEditorWrapper
autocomplete={autocompleteEnabled}
onBlur={onSqlChanged}
onChange={onSqlChanged}
queryEditorId={queryEditor.id}
onCursorPositionChange={handleCursorPositionChange}
height={`${aceEditorHeight}px`}
hotkeys={hotkeys}
/>
)}
{renderEditorBottomBar(showEmptyState)}
</div>
<SouthPane