Handle long auto-complete suggests

Fixes #5028

packages/node_modules/@node-red/editor-client/src/js/ui/common/autoComplete.js

@@ -61,7 +61,7 @@
             }
             this.menu = RED.popover.menu({
                 tabSelect: true,
-                width: 300,
+                width: Math.max(300, this.element.width()),
                 maxHeight: 200,
                 class: "red-ui-autoComplete-container",
                 options: completions,

packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js

@@ -63,6 +63,7 @@
             pre: value.substring(0,idx),
             match: value.substring(idx,idx+len),
             post: value.substring(idx+len),
+            exact: idx === 0 && value.length === searchValue.length
         }
     }
     function generateSpans(match) {
@@ -83,7 +84,7 @@
                 const srcMatch = getMatch(optSrc, val);
                 if (valMatch.found || srcMatch.found) {
                     const element = $('<div>',{style: "display: flex"});
-                    const valEl = $('<div/>',{style:"font-family: var(--red-ui-monospace-font); white-space:nowrap; overflow: hidden; flex-grow:1"});
+                    const valEl = $('<div/>',{ class: "red-ui-autoComplete-completion" });
                     valEl.append(generateSpans(valMatch));
                     valEl.appendTo(element);
                     if (optSrc) {
@@ -159,7 +160,7 @@
             if (valMatch.found) {
                 const optSrc = envVarsMap[v]
                 const element = $('<div>',{style: "display: flex"});
-                const valEl = $('<div/>',{style:"font-family: var(--red-ui-monospace-font); white-space:nowrap; overflow: hidden; flex-grow:1"});
+                const valEl = $('<div/>',{ class: "red-ui-autoComplete-completion" });
                 valEl.append(generateSpans(valMatch))
                 valEl.appendTo(element)
 
@@ -201,7 +202,7 @@
         const that = this
         const getContextKeysFromRuntime = function(scope, store, searchKey, done) {
             contextKnownKeys[scope] = contextKnownKeys[scope] || {}
-            contextKnownKeys[scope][store] = contextKnownKeys[scope][store] || new Set()
+            contextKnownKeys[scope][store] = contextKnownKeys[scope][store] || new Map()
             if (searchKey.length > 0) {
                 try {
                     RED.utils.normalisePropertyExpression(searchKey)
@@ -223,11 +224,12 @@
                     const result = data[store] || {}
                     const keys = result.keys || []
                     const keyPrefix = searchKey + (searchKey.length > 0 ? '.' : '')
-                    keys.forEach(key => {
+                    keys.forEach(keyInfo => {
+                        const key = keyInfo.key
                         if (/^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(key)) {
-                            contextKnownKeys[scope][store].add(keyPrefix + key)
+                            contextKnownKeys[scope][store].set(keyPrefix + key, keyInfo)
                         } else {
-                            contextKnownKeys[scope][store].add(searchKey + "[\""+key.replace(/"/,"\\\"")+"\"]")
+                            contextKnownKeys[scope][store].set(searchKey + "[\""+key.replace(/"/,"\\\"")+"\"]", keyInfo)
                         }                        
                     })
                     done()
@@ -242,14 +244,14 @@
                 // Get the flow id of the node we're editing
                 const editStack = RED.editor.getEditStack()
                 if (editStack.length === 0) {
-                    done([])
+                    done(new Map())
                     return
                 }
                 const editingNode = editStack.pop()
                 if (editingNode.z) {
                     scope = `${scope}/${editingNode.z}`
                 } else {
-                    done([])
+                    done(new Map())
                     return
                 }
             }
@@ -269,17 +271,29 @@
         return function(val, done) {
             getContextKeys(val, function (keys) {
                 const matches = []
-                keys.forEach(v => {
+                keys.forEach((keyInfo, v) => {
                     let optVal = v
                     let valMatch = getMatch(optVal, val);
-                    if (!valMatch.found && val.length > 0 && val.endsWith('.')) {
+                    if (!valMatch.found && val.length > 0) {
+                        if (val.endsWith('.')) {
                             // Search key ends in '.' - but doesn't match. Check again
                             // with [" at the end instead so we match bracket notation
                             valMatch = getMatch(optVal, val.substring(0, val.length - 1) + '["')
+                        // } else if (val.endsWith('[') && /^array/.test(keyInfo.format)) {
+                        //     console.log('this case')
+                        }
                     }
                     if (valMatch.found) {
                         const element = $('<div>',{style: "display: flex"});
-                        const valEl = $('<div/>',{style:"font-family: var(--red-ui-monospace-font); white-space:nowrap; overflow: hidden; flex-grow:1"});
+                        const valEl = $('<div/>',{ class: "red-ui-autoComplete-completion" });
+                        // if (keyInfo.format) {
+                        //     valMatch.post += ' ' + keyInfo.format
+                        // }
+                        if (valMatch.exact && /^array/.test(keyInfo.format)) {
+                            valMatch.post += `[0-${keyInfo.length}]`
+                            optVal +=  '['
+
+                        }
                         valEl.append(generateSpans(valMatch))
                         valEl.appendTo(element)
                         matches.push({

packages/node_modules/@node-red/editor-client/src/sass/ui/common/autoComplete.scss

@@ -2,4 +2,15 @@
     &.red-ui-popover-panel {
         border-top: none;
     }
+
+
+}
+.red-ui-autoComplete-completion {
+    font-family: var(--red-ui-monospace-font);
+    white-space: nowrap;
+    overflow: hidden;
+    flex-grow: 1;
+    text-overflow: ellipsis;
+    direction: rtl;
+    text-align: left;
 }

packages/node_modules/@node-red/runtime/lib/api/context.js

@@ -104,13 +104,25 @@ var api = module.exports = {
                     store = store || availableStores.default;
                     ctx.get(key,store,function(err, v) {
                         if (opts.keysOnly) {
+                            const result = {}
                             if (Array.isArray(v)) {
-                                resolve({ [store]: { format: `array[${v.length}]`}})
+                                result.format = `array[${v.length}]`
                             } else if (typeof v === 'object') {
-                                resolve({ [store]: { keys: Object.keys(v), format: 'Object' } })
+                                result.keys = Object.keys(v).map(k => {
+                                    if (Array.isArray(v[k])) {
+                                        return { key: k, format: `array[${v[k].length}]`, length: v[k].length }
+                                    } else if (typeof v[k] === 'object') {
+                                        return { key: k, format: 'object' }
                                     } else {
-                                resolve({ [store]: { keys: [] }})
+                                        return { key: k }
                                     }
+                                })
+                                result.format = 'object'
+                            } else {
+                                result.keys = []
+                            }
+                            resolve({ [store]: result })
+                            return
                         }
                         var encoded = util.encodeObject({msg:v});
                         if (store !== availableStores.default) {
@@ -147,7 +159,7 @@ var api = module.exports = {
                                     }
                                     return
                                 }
-                                result[store] = { keys }
+                                result[store] = { keys: keys.map(key => { return { key }}) }
                                 c--;
                                 if (c === 0) {
                                     if (!errorReported) {