feat: plugin install should offer a spinner

Fixes #3024

Author: starpit

package-lock.json

@@ -35,5 +35,6 @@ export const streamTo = async () => {
     debug('streaming response', response)
     print(response)
     debug('streaming response2')
+    return Promise.resolve()
   }
 }

packages/core/src/main/headless-support.ts

@@ -21,6 +21,6 @@ import { CustomSpec } from '../webapp/views/sidecar'
 export type Streamable = SimpleEntity | Table | MultiTable | CustomSpec | MixedResponse
 export default Streamable
 
-export type Stream = (response: Streamable, killLine?: boolean) => void
+export type Stream = (response: Streamable, killLine?: boolean) => Promise<void>
 
 export type StreamableFactory = () => Promise<Stream>

packages/core/src/models/streamable.ts

@@ -23,6 +23,7 @@ import { setStatus, Status } from './status'
 import { popupListen } from './listen'
 import { SidecarMode as Mode } from './bottom-stripe'
 import { isPopup } from './popup-core'
+import { scrollIntoView } from './scroll'
 import { renderPopupContent, createPopupContentContainer } from './popup'
 
 import { formatTable } from './views/table'
@@ -109,13 +110,16 @@ const printTable = async (
  *
  */
 export const streamTo = (tab: Tab, block: Element): Stream => {
-  const resultDom = block.querySelector('.repl-result') as HTMLElement
-  // so we can scroll this into view as streaming output arrives
+  const container = block.querySelector('.repl-output') as HTMLElement
+  const resultDom = container ? document.createElement('div') : (block.querySelector('.repl-result') as HTMLElement)
+  if (container) {
+    container.classList.add('repl-result-has-content')
+    container.insertBefore(resultDom, container.childNodes[0])
+  }
 
   let previousLine: HTMLElement
-  return (response: Streamable, killLine = false) => {
-    // debug('stream', response)
-
+  return (response: Streamable, killLine = false): Promise<void> => {
+    // debug('stream', response, killLine)
     resultDom.setAttribute('data-stream', 'data-stream')
     ;(resultDom.parentNode as HTMLElement).classList.add('result-vertical')
 
@@ -138,27 +142,31 @@ export const streamTo = (tab: Tab, block: Element): Stream => {
           return formatPart(_, para)
         })
       } else if (isHTML(response)) {
+        response.classList.add('repl-result-like')
         previousLine = response
         resultDom.appendChild(previousLine)
       } else if (isMultiTable(response)) {
         response.tables.forEach(async _ => printTable(tab, _, resultDom))
         const br = document.createElement('br')
         resultDom.appendChild(br)
       } else if (isTable(response)) {
-        await printTable(tab, response, resultDom)
+        const wrapper = document.createElement('div')
+        wrapper.classList.add('repl-result')
+        resultDom.appendChild(wrapper)
+        await printTable(tab, response, wrapper)
       } else if (isCustomSpec(response)) {
         showCustom(tab, response, {})
       } else {
         previousLine = document.createElement('pre')
-        previousLine.classList.add('streaming-output')
+        previousLine.classList.add('streaming-output', 'repl-result-like')
         previousLine.innerText = isMessageBearingEntity(response) ? response.message : response.toString()
         resultDom.appendChild(previousLine)
       }
     }
 
-    return formatPart(response, resultDom)
-
-    // scrollIntoView({ when: 0, element: spinner })
+    return formatPart(response, resultDom).then(() => {
+      scrollIntoView({ element: resultDom, when: 0 })
+    })
   }
 }
 

packages/core/src/webapp/print.ts

@@ -119,7 +119,7 @@ body.subwindow:not(.sidecar-is-minimized) .left-tab-stripe {
 body.not-electron .repl-input {
   padding-left: 0.375rem;
 }
-.repl .repl-block:not(.processing) .result-as-table .repl-result:not(:empty) {
+.repl .repl-block:not(.processing) .result-as-table .repl-result:not(:empty):not(.result-vertical) {
   padding: 0.625em 1.25em 0;
 }
 .repl-prompt-right-elements {

packages/core/web/css/top-tab-stripe.css

@@ -384,6 +384,7 @@ body/*:not(.sidecar-full-screen)*/ repl.sidecar-visible .repl-selection, body/*.
   margin: 0 !important;
 }
 .repl-result,
+.repl-result-like,
 .repl-input input,
 .repl-input-like {
   font-size: 0.875em;

packages/core/web/css/ui.css

@@ -3,6 +3,9 @@
   "list commands offered by an installed shell plugin": "list commands offered by an installed shell plugin",
   "for advanced use: recompile plugin registry": "for advanced use: recompile plugin registry",
   "offered commands": "offered commands",
+  "Preparing to install": "Preparing to install {0}",
+  "Install dependencies": "Installing dependencies",
+  "Setup": "Setup",
   "Install plugin": "Install plugin",
   "install a plugin": "install a plugin",
   "a simple example plugin": "a simple example plugin",

plugins/plugin-manager/i18n/resources_en_US.json

@@ -22,6 +22,7 @@
   "main": "dist/index.js",
   "dependencies": {
     "fs-extra": "8.1.0",
+    "ora": "4.0.2",
     "tmp": "0.1.0",
     "which": "1.3.1"
   },
@@ -35,6 +36,6 @@
   },
   "gitHead": "89de9f78e8a1a2bdd29d2e17d7c608ab006c6d32",
   "devDependencies": {
-    "@types/which": "^1.3.2"
+    "@types/which": "1.3.2"
   }
 }

plugins/plugin-manager/package.json

@@ -24,6 +24,7 @@ import Errors from '@kui-shell/core/api/errors'
 import { i18n } from '@kui-shell/core/api/i18n'
 import Settings from '@kui-shell/core/api/settings'
 
+import OraStream from '../util/ora'
 import locateNpm from '../util/locate-npm'
 
 const strings = i18n('plugin-manager')
@@ -50,11 +51,11 @@ const usage: Errors.UsageModel = {
  * This is the command handler for `plugin install`
  *
  */
-const doInstall = async ({ argvNoOptions, REPL }: Commands.Arguments) => {
-  debug('command execution started')
+const doInstall = async (args: Commands.Arguments) => {
+  const { argvNoOptions, REPL } = args
+  const name = argvNoOptions[argvNoOptions.indexOf('install') + 1]
 
-  argvNoOptions = argvNoOptions.slice(argvNoOptions.indexOf('install') + 1)
-  const name = argvNoOptions.shift()
+  const spinner = await new OraStream().init(args)
 
   const rootDir = Settings.userDataDir()
   const pluginHome = join(rootDir, 'plugins')
@@ -73,6 +74,7 @@ const doInstall = async ({ argvNoOptions, REPL }: Commands.Arguments) => {
   const { npm } = resolved
 
   // npm init
+  await spinner.next(strings('Setup'))
   await new Promise((resolve, reject) => {
     execFile(npm, ['init', '-y'], { cwd: pluginHome }, (error, stdout, stderr) => {
       if (error) {
@@ -90,8 +92,9 @@ const doInstall = async ({ argvNoOptions, REPL }: Commands.Arguments) => {
   })
 
   // npm install
+  await spinner.next(strings('Installing dependencies'))
   await new Promise((resolve, reject) => {
-    const args = ['install', name, '--prod', '--no-package-lock']
+    const args = ['install', name, '--prod', '--no-package-lock', '--loglevel', 'info']
     debug('npm install args', args)
     const sub = spawn(npm, args, {
       cwd: pluginHome
@@ -113,6 +116,7 @@ const doInstall = async ({ argvNoOptions, REPL }: Commands.Arguments) => {
         return reject(error)
       } else {
         debug(error)
+        spinner.text = error
       }
     })
 
@@ -131,8 +135,12 @@ const doInstall = async ({ argvNoOptions, REPL }: Commands.Arguments) => {
     })
   })
 
+  await spinner.next(strings('Compiling'), strings('Installing dependencies'))
   await REPL.qexec('plugin compile')
 
+  await spinner.next(strings('Successfully installed. Here are your new commands:'))
+  await spinner.stop(true)
+
   return REPL.qexec(`plugin commands ${name}`)
 }