From cde40a51b5bb7200d693cf77d8438929252f2924 Mon Sep 17 00:00:00 2001 From: Aleksei Potsetsuev Date: Thu, 22 Aug 2024 15:03:28 +0800 Subject: [PATCH 1/2] CB-5383 fix: query highlighting --- .../core-authentication/src/UsersResource.ts | 4 ++-- .../src/queries/sql-editor/parseSQLQuery.gql | 16 ---------------- .../Users/UserForm/DeleteUserDialog.tsx | 2 +- .../src/theme/_base-code-editor.scss | 19 ++++++++++++++----- .../useSQLCodeEditorPanel.ts | 10 +++++++--- .../plugin-sql-editor/src/SQLParser.ts | 8 +------- .../src/SqlEditor/ISQLEditorData.ts | 1 + .../src/SqlEditor/useSqlEditor.ts | 18 ++++++------------ .../plugin-sql-editor/src/SqlEditorService.ts | 11 ----------- 9 files changed, 32 insertions(+), 57 deletions(-) delete mode 100644 webapp/packages/core-sdk/src/queries/sql-editor/parseSQLQuery.gql diff --git a/webapp/packages/core-authentication/src/UsersResource.ts b/webapp/packages/core-authentication/src/UsersResource.ts index 8155178da0..a28b2571aa 100644 --- a/webapp/packages/core-authentication/src/UsersResource.ts +++ b/webapp/packages/core-authentication/src/UsersResource.ts @@ -218,13 +218,13 @@ export class UsersResource extends CachedMapResource): Promise { + async deleteUsers(key: ResourceKeySimple): Promise { await ResourceKeyUtils.forEachAsync(key, async key => { if (this.isActiveUser(key)) { throw new Error("You can't delete current logged user"); } await this.graphQLService.sdk.deleteUser({ userId: key }); - super.delete(key); + this.delete(key); }); } diff --git a/webapp/packages/core-sdk/src/queries/sql-editor/parseSQLQuery.gql b/webapp/packages/core-sdk/src/queries/sql-editor/parseSQLQuery.gql deleted file mode 100644 index 16adc3a104..0000000000 --- a/webapp/packages/core-sdk/src/queries/sql-editor/parseSQLQuery.gql +++ /dev/null @@ -1,16 +0,0 @@ -query parseSQLQuery( - $projectId: ID! - $connectionId: ID! - $script: String! - $position: Int! -) { - queryInfo: sqlParseQuery( - projectId: $projectId - connectionId: $connectionId - script: $script - position: $position - ) { - start - end - } -} diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/DeleteUserDialog.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/DeleteUserDialog.tsx index 014ddfc926..e402d4bea2 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/DeleteUserDialog.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/DeleteUserDialog.tsx @@ -38,7 +38,7 @@ export const DeleteUserDialog: DialogComponent = function DeleteUserDi async function deleteUser() { try { - await usersResource.resource.delete(props.payload.userId); + await usersResource.resource.deleteUsers(props.payload.userId); notificationService.logSuccess({ title: 'authentication_administration_users_delete_user_success', message: props.payload.userId }); props.resolveDialog(); } catch (exception: any) { diff --git a/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor.scss b/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor.scss index 68ee4ae329..b181bef31f 100644 --- a/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor.scss +++ b/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor.scss @@ -86,11 +86,20 @@ } .editor .active-query { - /* disable because look too ugly */ - /* - display: inline-block; - @include mdc-theme-prop(background, secondary, false); - */ + position: relative; + &::before { + content: ''; + display: block; + position: absolute; + top: 0; + left: -2px; + z-index: -1; + width: 100%; + height: 100%; + padding: 0 2px; + @include mdc-theme-prop(background, secondary, false); + border-radius: var(--theme-group-element-radius); + } } .editor .cm-content ::selection { diff --git a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/useSQLCodeEditorPanel.ts b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/useSQLCodeEditorPanel.ts index 313ad44b18..ff7d4b5a72 100644 --- a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/useSQLCodeEditorPanel.ts +++ b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/useSQLCodeEditorPanel.ts @@ -25,8 +25,7 @@ export function useSQLCodeEditorPanel(data: ISQLEditorData, editor: IEditor) { () => ({ highlightActiveQuery() { this.editor.clearActiveQueryHighlight(); - - const segment = this.data.activeSegment; + const segment = this.data.getLastResolvedSegment(this.data.cursor.begin, this.data.cursor.end); if (segment) { this.editor.highlightActiveQuery(segment.begin, segment.end); @@ -44,7 +43,7 @@ export function useSQLCodeEditorPanel(data: ISQLEditorData, editor: IEditor) { ); const updateHighlight = useCallback( - throttle(() => state.highlightActiveQuery(), 1000), + throttle(() => state.highlightActiveQuery(), 300), [state], ); @@ -53,6 +52,11 @@ export function useSQLCodeEditorPanel(data: ISQLEditorData, editor: IEditor) { handlers: [updateHighlight], }); + useExecutor({ + executor: data.dataSource?.onUpdate, + handlers: [updateHighlight], + }); + useExecutor({ executor: data.onExecute, handlers: [ diff --git a/webapp/packages/plugin-sql-editor/src/SQLParser.ts b/webapp/packages/plugin-sql-editor/src/SQLParser.ts index 4bad699980..6c8fe5f56a 100644 --- a/webapp/packages/plugin-sql-editor/src/SQLParser.ts +++ b/webapp/packages/plugin-sql-editor/src/SQLParser.ts @@ -82,18 +82,12 @@ export class SQLParser { } getQueryAtPos(position: number): ISQLScriptSegment | undefined { - const script = this._scripts.find(script => script.begin <= position && script.end > position); + const script = this._scripts.find(script => script.begin <= position && script.end >= position); if (script) { return script; } - const closestScripts = this._scripts.filter(script => script.begin <= position); - - if (closestScripts.length > 0) { - return closestScripts[closestScripts.length - 1]; - } - return undefined; } diff --git a/webapp/packages/plugin-sql-editor/src/SqlEditor/ISQLEditorData.ts b/webapp/packages/plugin-sql-editor/src/SqlEditor/ISQLEditorData.ts index 185938782d..aacf8b13a8 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlEditor/ISQLEditorData.ts +++ b/webapp/packages/plugin-sql-editor/src/SqlEditor/ISQLEditorData.ts @@ -54,6 +54,7 @@ export interface ISQLEditorData { switchEditing(): Promise; getHintProposals(position: number, simple: boolean): Promise; getResolvedSegment(): Promise; + getLastResolvedSegment(begin: number, end: number): ISQLScriptSegment | undefined; executeQueryAction( segment: ISQLScriptSegment | undefined, action: (query: ISQLScriptSegment) => Promise, diff --git a/webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts b/webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts index 4370dd7fe3..0b632b0dd6 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts +++ b/webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts @@ -432,12 +432,13 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData { }, async getResolvedSegment(): Promise { - const projectId = this.dataSource?.executionContext?.projectId; - const connectionId = this.dataSource?.executionContext?.connectionId; - await data.updateParserScripts(); - if (!projectId || !connectionId || this.cursor.begin !== this.cursor.end) { + return this.getLastResolvedSegment(this.cursor.begin, this.cursor.end); + }, + + getLastResolvedSegment(begin: number, end: number): ISQLScriptSegment | undefined { + if (begin !== end) { return this.getSubQuery(); } @@ -445,14 +446,7 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData { return this.activeSegment; } - const result = await this.sqlEditorService.parseSQLQuery(projectId, connectionId, this.value, this.cursor.begin); - - if (result.end === 0 && result.start === 0) { - return; - } - - const segment = this.parser.getSegment(result.start, result.end); - return segment; + return this.parser.getSegment(begin, end); }, getSubQuery(): ISQLScriptSegment | undefined { diff --git a/webapp/packages/plugin-sql-editor/src/SqlEditorService.ts b/webapp/packages/plugin-sql-editor/src/SqlEditorService.ts index ec92bbcff0..8138753919 100644 --- a/webapp/packages/plugin-sql-editor/src/SqlEditorService.ts +++ b/webapp/packages/plugin-sql-editor/src/SqlEditorService.ts @@ -82,17 +82,6 @@ export class SqlEditorService { return result.scriptInfo; } - async parseSQLQuery(projectId: string, connectionId: string, script: string, position: number) { - const result = await this.graphQLService.sdk.parseSQLQuery({ - projectId, - connectionId, - script, - position, - }); - - return result.queryInfo; - } - async getAutocomplete( projectId: string, connectionId: string, From 2d2b9e0f595a22f701fda4b4b69e62e4cd0cf7c8 Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Thu, 22 Aug 2024 12:04:45 +0200 Subject: [PATCH 2/2] chore: refactor SQLParser getQueryAtPos method --- webapp/packages/plugin-sql-editor/src/SQLParser.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/webapp/packages/plugin-sql-editor/src/SQLParser.ts b/webapp/packages/plugin-sql-editor/src/SQLParser.ts index 6c8fe5f56a..4b13053edd 100644 --- a/webapp/packages/plugin-sql-editor/src/SQLParser.ts +++ b/webapp/packages/plugin-sql-editor/src/SQLParser.ts @@ -82,13 +82,7 @@ export class SQLParser { } getQueryAtPos(position: number): ISQLScriptSegment | undefined { - const script = this._scripts.find(script => script.begin <= position && script.end >= position); - - if (script) { - return script; - } - - return undefined; + return this._scripts.find(script => script.begin <= position && script.end >= position); } setScript(script: string): void {