update tab completion to prefill the longest common prefix of matches

Fixes #814

Author: starpit

app/plugins/ui/commands/tab-completion.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017 IBM Corporation
+ * Copyright 2017-18 IBM Corporation
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -20,49 +20,54 @@ const fs = require('fs'),
       path = require('path'),
       expandHomeDir = require('expand-home-dir')
 
+/**
+ * Return partial updated with the given match; there may be some
+ * overlap at the beginning.
+ *
+ */
+const completeWith = (partial, match, addSpace=false) => {
+    const partialIdx = match.indexOf(partial)
+    return (partialIdx >= 0 ? match.substring(partialIdx + partial.length) : match) + (addSpace ? ' ' : '')
+}
+
 /**
  * We've found a match. Add this match to the given partial match,
  * located in the given dirname'd directory, and update the given
  * prompt, which is an <input>.
-*
-*/
+ *
+ */
 const complete = (match, prompt, { temporaryContainer, partial=temporaryContainer.partial, dirname=temporaryContainer.dirname, addSpace=false }) => {
     debug('completion', match, partial, dirname)
 
     // in case match includes partial as a prefix
-    const partialIdx = match.indexOf(partial),
-          completion = (partialIdx >= 0 ? match.substring(partialIdx + partial.length) : match) + (addSpace ? ' ' : '')
+    const completion = completeWith(partial, match, addSpace)
 
     if (temporaryContainer) {
         temporaryContainer.cleanup()
     }
 
-    if (completion) {
-        if (dirname) {
-            // see if we need to add a trailing slash
-            fs.lstat(expandHomeDir(path.join(dirname, match)), (err, stats) => {
-                if (!err) {
-                    if (stats.isDirectory()) {
-                        // add a trailing slash if the dirname/match is a directory
-                        debug('complete as directory')
-                        prompt.value = prompt.value + completion + '/'
-                    } else {
-                        // otherwise, dirname/match is not a directory
-                        debug('complete as scalar')
-                        prompt.value = prompt.value + completion
-                    }
+    if (dirname) {
+        // see if we need to add a trailing slash
+        fs.lstat(expandHomeDir(path.join(dirname, match)), (err, stats) => {
+            if (!err) {
+                if (stats.isDirectory()) {
+                    // add a trailing slash if the dirname/match is a directory
+                    debug('complete as directory')
+                    prompt.value = prompt.value + completion + '/'
                 } else {
-                    console.error(err)
+                    // otherwise, dirname/match is not a directory
+                    debug('complete as scalar')
+                    prompt.value = prompt.value + completion
                 }
-            })
+            } else {
+                console.error(err)
+            }
+        })
 
-        } else {
-            // otherwise, just add the completion to the prompt
-            debug('complete as scalar (alt)')
-            prompt.value = prompt.value + completion
-        }
     } else {
-        debug('no completion string')
+        // otherwise, just add the completion to the prompt
+        debug('complete as scalar (alt)')
+        prompt.value = prompt.value + completion
     }
 }
 
@@ -80,6 +85,44 @@ const installKeyHandlers = prompt => {
     }
 }
 
+/**
+  * Given a list of matches to the partial that is in the
+  * prompt.value, update prompt.value so that it contains the longest
+  * common prefix of the matches
+  *
+  */
+const updateReplToReflectLongestPrefix = (prompt, matches, temporaryContainer, partial=temporaryContainer.partial) => {
+    if (matches.length > 0) {
+        const shortest = matches.reduce((minLength, match) => !minLength ? match.length : Math.min(minLength, match.length), false)
+        let idx = 0
+
+        const partialComplete = idx => {
+            const completion =  completeWith(partial, matches[0].substring(0, idx))
+            temporaryContainer.partial = temporaryContainer.partial + completion
+            prompt.value = prompt.value + completion
+        }
+
+        for (idx = 0; idx < shortest; idx++) {
+            const char = matches[0].charAt(idx)
+
+            for (let jdx = 1; jdx < matches.length; jdx++) {
+                const other = matches[jdx].charAt(idx)
+                if (char != other) {
+                    if (idx > 0) {
+                        // then we found some common prefix
+                        return partialComplete(idx)
+                    }
+                }
+            }
+        }
+
+        if (idx > 0) {
+            partialComplete(idx)
+        }
+    }
+}
+
+
 /**
  * Install keyboard up-arrow and down-arrow handlers in the given REPL
  * prompt. This needs to be installed in the prompt, as ui.js installs
@@ -247,7 +290,7 @@ const makeCompletionContainer = (block, prompt, partial, dirname, lastIdx) => {
  * Add a suggestion to the suggestion container
  *
  */
-const addSuggestion = (temporaryContainer, partial, dirname, prompt) => (match, idx) => {
+const addSuggestion = (temporaryContainer, dirname, prompt) => (match, idx) => {
     const matchLabel = match.label || match,
           matchCompletion = match.completion || matchLabel
 
@@ -281,7 +324,7 @@ const addSuggestion = (temporaryContainer, partial, dirname, prompt) => (match,
 
     // onclick, use this match as the completion
     option.addEventListener('click', () => {
-        complete(matchCompletion, prompt, { temporaryContainer, partial, dirname, addSpace: match.addSpace })
+        complete(matchCompletion, prompt, { temporaryContainer, dirname, addSpace: match.addSpace })
     })
 
     option.setAttribute('data-match', matchLabel)
@@ -341,9 +384,11 @@ const suggestLocalFile = (last, block, prompt, temporaryContainer, lastIdx) => {
                         temporaryContainer = makeCompletionContainer(block, prompt, partial, dirname, lastIdx)
                     }
 
+                    updateReplToReflectLongestPrefix(prompt, matches, temporaryContainer)
+
                     // add each match to that temporary div
                     matches.forEach((match, idx) => {
-                        const { option, optionInner } = addSuggestion(temporaryContainer, partial, dirname, prompt)(match, idx)
+                        const { option, optionInner } = addSuggestion(temporaryContainer, dirname, prompt)(match, idx)
 
                         // see if the match is a directory, so that we add a trailing slash
                         fs.lstat(expandHomeDir(path.join(dirname, match)), (err, stats) => {
@@ -398,7 +443,9 @@ const filterAndPresentEntitySuggestions = (last, block, prompt, temporaryContain
             temporaryContainer = makeCompletionContainer(block, prompt, partial, dirname, lastIdx)
         }
 
-        filteredList.forEach(addSuggestion(temporaryContainer, partial, dirname, prompt))
+        updateReplToReflectLongestPrefix(prompt, filteredList, temporaryContainer)
+
+        filteredList.forEach(addSuggestion(temporaryContainer, dirname, prompt))
     }
 }
 
@@ -429,7 +476,7 @@ const suggestCommandCompletions = (matches, partial, block, prompt, temporaryCon
         }
 
         // add suggestions to the container
-        matches.forEach(addSuggestion(temporaryContainer, partial, undefined, prompt))
+        matches.forEach(addSuggestion(temporaryContainer, undefined, prompt))
     }
 }
 

tests/tests/passes/02/tab-completion.js

@@ -52,13 +52,18 @@ describe('Tab completion', function() {
           })
           .catch(common.oops(this));
 
-    const tabbyWithOptions = (app, partial, expected, full, { click, nTabs, expectOK=true, iter=0 }={}) => {
+    const tabbyWithOptions = (app, partial, expected, full, { click, nTabs, expectOK=true, iter=0, expectedPromptAfterTab }={}) => {
         return app.client.waitForExist(ui.selectors.CURRENT_PROMPT_BLOCK)
             .then(() => app.client.getAttribute(ui.selectors.CURRENT_PROMPT_BLOCK, 'data-input-count'))
             .then(count => parseInt(count))
             .then(count => app.client.setValue(ui.selectors.CURRENT_PROMPT, partial)
                   .then(() => app.client.waitForValue(ui.selectors.PROMPT_N(count), partial))
                   .then(() => app.client.setValue(ui.selectors.CURRENT_PROMPT, `${partial}${keys.TAB}`))
+                  .then(() => {
+                      if (expectedPromptAfterTab) {
+                          return app.client.waitForValue(ui.selectors.PROMPT_N(count), expectedPromptAfterTab)
+                      }
+                  })
                   .then(() => {
                       if (!expected) {
                           // then we expect non-visibility of the tab-completion popup
@@ -123,22 +128,29 @@ describe('Tab completion', function() {
 
     it('should have an active repl', () => cli.waitForRepl(this.app))
 
+    const options = ['commandFile.wsk',
+                     'composer-source/',
+                     'composer-source-expect-errors/',
+                     'composer-wookiechat/']
+
     // tab completion with options, then click on the second (idx=1) entry of the expected cmpletion list
     it('should tab complete local file path with options', () => tabbyWithOptions(this.app,
                                                                                   'lls data/com',
                                                                                   options,
                                                                                   'lls data/composer-source/',
                                                                                   { click: 1 }))
 
+    it('should tab complete local file path with options, expect prompt update', () => tabbyWithOptions(this.app,
+                                                                                                        'lls data/comp',
+                                                                                                        options.slice(1), // except the first
+                                                                                                        'lls data/composer-source/',
+                                                                                                        { click: 1,
+                                                                                                          expectedPromptAfterTab: 'lls data/composer-'}))
+
     it('should tab complete the data directory', () => tabby(this.app, 'lls da', 'lls data/'))
     it('should tab complete the data/fsm.js file', () => tabby(this.app, 'lls data/fsm.js', 'lls data/fsm.json'))
     it('should tab complete the ../app directory', () => tabby(this.app, 'lls ../ap', 'lls ../app/'))
 
-    const options = ['commandFile.wsk',
-                     'composer-source/',
-                     'composer-source-expect-errors/',
-                     'composer-wookiechat/']
-
     // same, but this time tab to cycle through the options
     it('should tab complete local file path', () => tabbyWithOptions(this.app,
                                                                      'lls data/com',
@@ -174,7 +186,8 @@ describe('Tab completion', function() {
     it('should tab complete action foo2 with options', () => tabbyWithOptions(this.app, 'action get f',
                                                                               ['foofoo/yum', 'foo2', 'foo'],
                                                                               'action get foo2',
-                                                                              { click: 1 })
+                                                                              { click: 1,
+                                                                                expectedPromptAfterTab: 'action get foo' })
        .then(sidecar.expectOpen)
        .then(sidecar.expectShowing('foo2'))
        .catch(common.oops(this)))