From 1a2b59c24418efe5906af404a2c4aa0781c5c578 Mon Sep 17 00:00:00 2001
From: Sherfin Shamsudeen <sherfin94@gmail.com>
Date: Wed, 15 Jan 2025 15:14:13 +0530
Subject: [PATCH] Displayed suggestion labels should start from the depth of
 the typed in string

---
 .../CodeEditor/autocompleteExtensionConfig.js | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/AppBuilder/CodeEditor/autocompleteExtensionConfig.js b/frontend/src/AppBuilder/CodeEditor/autocompleteExtensionConfig.js
index e8df4290f0..c244cd1dde 100644
--- a/frontend/src/AppBuilder/CodeEditor/autocompleteExtensionConfig.js
+++ b/frontend/src/AppBuilder/CodeEditor/autocompleteExtensionConfig.js
@@ -67,7 +67,8 @@ export const getAutocompletion = (input, fieldType, hints, totalReferences = 1,
     originalQueryInput,
     searchInput
   );
-  return orderSuggestions(suggestions, fieldType);
+
+  return suggestions;
 };
 
 function orderSuggestions(suggestions, validationType) {
@@ -90,10 +91,18 @@ export const generateHints = (hints, totalReferences = 1, input, searchText) =>
     const hasDepth = currentWord.includes('.');
     const lastDepth = getLastSubstring(currentWord);
 
-    const displayLabel = getLastDepth(displayedHint);
+    let displayLabel = getLastDepth(displayedHint);
+
+    if (type != 'js_method') {
+      const currentWordDepth = currentWord.split('.').length;
+      displayLabel = hint
+        .split('.')
+        .slice(currentWordDepth - 1)
+        .join('.');
+    }
 
     return {
-      displayLabel: lastDepth === '' ? displayedHint : displayLabel,
+      displayLabel,
       label: displayedHint,
       info: displayedHint,
       type: type === 'js_method' ? 'js_methods' : type?.toLowerCase(),
@@ -157,13 +166,23 @@ function filterHintsByDepth(input, hints) {
   if (input === '') return hints;
 
   const inputParts = input.split('.');
+  const inputDepth = inputParts.length + 1;
 
-  const filteredHints = hints.filter((hint) => {
+  const hintsWithDepth = hints.map((hint) => {
     const hintParts = hint.hint.split('.');
-    return hintParts.length <= inputParts.length + 1;
+    return {
+      ...hint,
+      depth: hintParts.length,
+    };
   });
 
-  return filteredHints;
+  const filteredHints = hintsWithDepth.filter((hint) => {
+    return hint.depth <= inputDepth;
+  });
+
+  const sortedHints = filteredHints.sort((hint1, hint2) => hint1.depth - hint2.depth);
+
+  return sortedHints;
 }
 
 export function findNearestSubstring(inputStr, currentCurosorPos) {