CB-5383 fix: query highlighting

webapp/packages/core-authentication/src/UsersResource.ts

@@ -218,13 +218,13 @@ export class UsersResource extends CachedMapResource<string, AdminUser, UserReso
     await this.refresh(userId);
   }
 
-  async delete(key: ResourceKeySimple<string>): Promise<void> {
+  async deleteUsers(key: ResourceKeySimple<string>): Promise<void> {
     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);
     });
   }
 

webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/DeleteUserDialog.tsx

@@ -38,7 +38,7 @@ export const DeleteUserDialog: DialogComponent<IPayload> = 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) {

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 {

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: [

webapp/packages/plugin-sql-editor/src/SQLParser.ts

@@ -82,19 +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;
-    }
-
-    const closestScripts = this._scripts.filter(script => script.begin <= position);
-
-    if (closestScripts.length > 0) {
-      return closestScripts[closestScripts.length - 1];
-    }
-
-    return undefined;
+    return this._scripts.find(script => script.begin <= position && script.end >= position);
   }
 
   setScript(script: string): void {

webapp/packages/plugin-sql-editor/src/SqlEditor/ISQLEditorData.ts

@@ -54,6 +54,7 @@ export interface ISQLEditorData {
   switchEditing(): Promise<void>;
   getHintProposals(position: number, simple: boolean): Promise<SQLProposal[]>;
   getResolvedSegment(): Promise<ISQLScriptSegment | undefined>;
+  getLastResolvedSegment(begin: number, end: number): ISQLScriptSegment | undefined;
   executeQueryAction<T>(
     segment: ISQLScriptSegment | undefined,
     action: (query: ISQLScriptSegment) => Promise<T>,

webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts

@@ -432,27 +432,21 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
       },
 
       async getResolvedSegment(): Promise<ISQLScriptSegment | undefined> {
-        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();
         }
 
         if (this.activeSegmentMode.activeSegmentMode) {
           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 {

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,