feat: Add autocomplete for header names

Closes: usebruno#3776 Closes: usebruno#1141
Its-treason · Jan 11, 2025 · b3e620c · b3e620c
1 parent ad9cd00
commit b3e620c
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 7 deletions.
diff --git a/packages/bruno-app/src/components/CodeEditor/Monaco/MonacoSingleline.tsx b/packages/bruno-app/src/components/CodeEditor/Monaco/MonacoSingleline.tsx
@@ -13,6 +13,7 @@ import { CodeEditorVariableContext } from '../CodeEditorVariableContext';
 import { addMonacoCommands, addMonacoSingleLineActions, BrunoEditorCallbacks } from '../utils/monocoInit';
 
 type MonacoSinglelineProps = {
+  mode?: string;
   readOnly?: boolean;
   value?: string;
   defaultValue?: string;
@@ -30,6 +31,7 @@ export const MonacoSingleline: React.FC<MonacoSinglelineProps> = ({
   onChange,
   onRun,
   onSave,
+  mode = 'plaintext',
   readOnly = false,
   value,
   defaultValue,
@@ -122,7 +124,7 @@ export const MonacoSingleline: React.FC<MonacoSinglelineProps> = ({
           className={classes.editor}
           theme={displayedTheme === 'dark' ? 'bruno-dark' : 'bruno-light'}
           loading={null} // Loading looks weird with singeline editor
-          language={'plaintext'}
+          language={mode}
           value={value}
           defaultValue={defaultValue}
           onMount={onMount}

diff --git a/packages/bruno-app/src/components/CodeEditor/utils/monocoInit.ts b/packages/bruno-app/src/components/CodeEditor/utils/monocoInit.ts
@@ -4,6 +4,7 @@
  */
 import { Monaco } from '@monaco-editor/react';
 import { editor } from 'monaco-editor';
+import { headers } from 'know-your-http-well';
 
 type MonacoEditor = editor.IStandaloneCodeEditor;
 
@@ -338,12 +339,41 @@ export const initMonaco = (monaco: Monaco) => {
     }
   });
 
-  // monaco.languages.registerCompletionItemProvider('typescript', {
-  //   provideCompletionItems: () => ({
-  //     // @ts-expect-error `range` is missing here, but is still works
-  //     suggestions: buildSuggestions(monaco)
-  //   })
-  // });
+  monaco.languages.registerCompletionItemProvider('typescript', {
+    provideCompletionItems: () => ({
+      // @ts-expect-error `range` is missing here, but is still works
+      suggestions: buildSuggestions(monaco)
+    })
+  });
+
+  // This is used for Header name inputs
+  monaco.languages.register({ id: 'headers' });
+  monaco.languages.registerCompletionItemProvider('headers', {
+    provideCompletionItems: (model, position) => {
+      const word = model.getWordUntilPosition(position);
+      const range = {
+        startLineNumber: position.lineNumber,
+        endLineNumber: position.lineNumber,
+        startColumn: word.startColumn,
+        endColumn: word.endColumn
+      };
+
+      return {
+        suggestions: headers.map((header: { header: string; description: string }) => ({
+          label: header.header,
+          kind: monaco.languages.CompletionItemKind.Text,
+          insertText: header.header,
+          documentation: {
+            value: header.description,
+            isTrusted: true,
+            supportThemeIcons: true
+          },
+          preselect: true,
+          range
+        }))
+      };
+    }
+  });
 
   // javascript is solely used for the query editor
   // Reference for all codes: https://raw.githubusercontent.com/microsoft/TypeScript/refs/tags/v5.6.2/src/compiler/diagnosticMessages.json

diff --git a/packages/bruno-app/src/components/CollectionSettings/Headers/index.js b/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
@@ -95,6 +95,7 @@ const Headers = ({ collection }) => {
                           )
                         }
                         autocomplete={headerAutoCompleteList}
+                        mode={'headers'}
                         singleLine
                         withVariables
                       />

diff --git a/packages/bruno-app/src/components/FolderSettings/Headers/index.js b/packages/bruno-app/src/components/FolderSettings/Headers/index.js
@@ -93,6 +93,7 @@ const Headers = ({ collection, folder }) => {
                           )
                         }
                         autocomplete={headerAutoCompleteList}
+                        mode="headers"
                         singleLine
                         withVariables
                       />

diff --git a/packages/bruno-app/src/components/RequestPane/RequestHeaders/HeaderTableRow.tsx b/packages/bruno-app/src/components/RequestPane/RequestHeaders/HeaderTableRow.tsx
@@ -48,6 +48,7 @@ export const HeaderTableRow: React.FC<EnvironmentTableRowProps> = ({
               name
             });
           }}
+          mode={'headers'}
           withVariables
           singleLine
           asInput
-Original file line number
+Diff line change
@@ Expand Up @@
                   name
                 });
               }}
+              mode={'headers'}
               withVariables
               singleLine
               asInput
@@ Expand Down @@