completion items exclude matches on parameter names (#455)

chore: completion items exclude parameters.

[work
item](https://msazure.visualstudio.com/One/_workitems/edit/27571291)

- use match text as the filter text - which exclude the parameters names
- improve vite local env and design

package/src/languageServiceManager/kustoLanguageService.ts

@@ -435,7 +435,7 @@ class KustoLanguageService implements LanguageService {
                     kItem.DisplayText
                 );
                 const helpTopic: k.CslTopicDocumentation = this.getTopic(v1CompletionOption);
-                // If we have AfterText it means that the cursor should no be placed at end of suggested text.
+                // If we have AfterText it means that the cursor should not be placed at end of suggested text.
                 // In that case we switch to snippet format and represent the point where the cursor should be as
                 // as '\$0'
                 const { textToInsert, format } =
@@ -463,7 +463,7 @@ class KustoLanguageService implements LanguageService {
                 lsItem.textEdit = ls.TextEdit.replace(ls.Range.create(startPosition, endPosition), textToInsert);
                 lsItem.sortText = this.getSortText(sortTextPrefix + i + 1);
                 // Changing the first letter to be lower case, to ignore case-sensitive matching
-                lsItem.filterText = lsItem.label.charAt(0).toLowerCase() + lsItem.label.slice(1);
+                lsItem.filterText = kItem.MatchText.charAt(0).toLowerCase() + kItem.MatchText.slice(1);
                 lsItem.kind = this.kustoKindToLsKindV2(kItem.Kind);
                 lsItem.insertTextFormat = format;
                 lsItem.detail = helpTopic ? helpTopic.ShortDescription : undefined;

package/src/monaco.contribution.ts

@@ -194,6 +194,8 @@ monaco.editor.onDidCreateEditor((editor) => {
     }
 
     triggerSuggestDialogWhenCompletionItemSelected(editor);
+
+    // editor.updateOptions({ suggest: { filterGraceful: false } });
 });
 
 function triggerSuggestDialogWhenCompletionItemSelected(editor: monaco.editor.ICodeEditor) {

package/test/test.js

@@ -33,9 +33,16 @@ fetch('./test/mode.txt')
                 selectionHighlight: false,
                 theme: 'kusto-light',
                 folding: true,
+                selectOnLineNumbers: true,
+                automaticLayout: true,
+                minimap: {
+                    enabled: false,
+                },
+                fixedOverflowWidgets: true,
                 suggest: {
                     selectionMode: 'whenQuickSuggestion',
                 },
+                copyWithSyntaxHighlighting: true,
             });
 
             applyDefaultsOnDomElements();

package/tests/completion-items.spec.ts

@@ -2,23 +2,30 @@ import { test, expect } from '@playwright/test';
 import { loadPageAndWait } from './testkit';
 import { IntelliSenseDriver, EditorDriver } from './testkit/drivers';
 
-const initialValue = 'StormEvents \n| take 10 ';
-
 test.describe('Completion items tests', () => {
     let editor: EditorDriver;
     let intellisense: IntelliSenseDriver;
 
     test.beforeEach(async ({ page }) => {
         await loadPageAndWait(page);
+
         editor = new EditorDriver(page);
+        const initialValue = 'StormEvents \n';
         await editor.fill(initialValue);
         intellisense = new IntelliSenseDriver(page);
     });
 
     test('trigger completion on "("', async () => {
         await editor.type('| where StartTime > ago(');
 
-        const option = await intellisense.getOptionByIndex(0);
-        expect(option).toBe('1d');
+        const option = intellisense.getOptionByIndex(0);
+        await expect(option).toHaveText('1d');
+    });
+
+    test('match with exact substring and exclude parameters', async ({ page }) => {
+        await editor.type('| where StartTime > ago');
+
+        const options = intellisense.getAllOptions();
+        await expect(options).toHaveCount(2);
     });
 });

package/tests/env/index.css

@@ -1,7 +1,7 @@
-html,
-body,
 #root,
 .editor {
-    height: 100%;
-    margin: 0;
+    width: 800px;
+    height: 600px;
+    border: 1px solid grey;
+    border-radius: 4px;
 }

package/tests/env/main.ts

@@ -1,6 +1,7 @@
 import * as monaco from 'monaco-editor/esm/vs/editor/edcore.main';
 import { getKustoWorker } from '../../release/esm/monaco.contribution';
 import './index.css';
+import debounce from 'lodash/debounce';
 
 // Vite doesn't let us directly import files in dependencies as url's for some
 // reason. Instead, we'll import local files as url's, and they'll import what
@@ -51,12 +52,32 @@ const schema = {
     },
 };
 
+function getEditorValue(): string {
+    const defaultValue = '';
+    const storageValue = localStorage.getItem('dev-kusto-query');
+    return storageValue?.trim().length ? storageValue : defaultValue;
+}
+
 const editor = monaco.editor.create(document.getElementById('root'), {
-    value: '',
+    value: getEditorValue(),
     language: 'kusto',
     theme: 'kusto-light',
+    selectOnLineNumbers: true,
+    automaticLayout: true,
+    minimap: {
+        enabled: false,
+    },
+    fixedOverflowWidgets: true,
+    suggest: {
+        selectionMode: 'whenQuickSuggestion',
+    },
+    copyWithSyntaxHighlighting: true,
 });
 
+const updateEditorValueInLocalStorage = () => localStorage.setItem('dev-kusto-query', editor.getValue());
+const debouncedUpdateEditorValueInLocalStorage = debounce(updateEditorValueInLocalStorage, 1000);
+editor.onDidChangeModelContent(debouncedUpdateEditorValueInLocalStorage);
+
 window.addEventListener('resize', () => {
     editor.layout();
 });

package/tests/playwright.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
     retries: process.env.CI ? 2 : 0,
     workers: process.env.CI ? 1 : undefined,
     timeout: 60_000,
-    expect: { timeout: 10_000 },
+    expect: { timeout: 5_000 },
     reporter: 'line',
     use: {
         trace: 'on-first-retry',

package/tests/testkit/drivers/intellisense.ts

@@ -1,4 +1,5 @@
-import { ElementHandle, Page } from '@playwright/test';
+import { Page } from '@playwright/test';
+import { Locator } from 'playwright';
 
 export class IntelliSenseDriver {
     private page: Page;
@@ -7,15 +8,11 @@ export class IntelliSenseDriver {
         this.page = page;
     }
 
-    async getAllOptions(): Promise<string[]> {
-        const options = await this.page.$$eval('[role="option"]', (options) =>
-            options.map((option) => option.textContent || '')
-        );
-        return options;
+    getAllOptions(): Locator {
+        return this.page.getByRole('option');
     }
 
-    async getOptionByIndex(index: number): Promise<string | null> {
-        const option = this.page.getByRole('option').nth(index);
-        return option.textContent();
+    getOptionByIndex(index: number): Locator {
+        return this.page.getByRole('option').nth(index);
     }
 }