feat: execute the command in url query when the browser app is loaded

Fixes #5879

Author: myan9

packages/core/src/webapp/bootstrap/boot.ts

@@ -37,7 +37,6 @@ const domReady = (inSandbox: boolean, client?: Client) => async () => {
   const initializer = import('./init')
   const plugins = import('../../plugins/plugins')
   const events = import('../../core/events')
-  // const query = import('../query')
 
   try {
     const waitForThese: Promise<void>[] = []

packages/core/src/webapp/query.ts

@@ -499,6 +499,11 @@ export const remoteIt = (msg: string, func: Func) => {
   if (process.env.MOCHA_RUN_TARGET === 'webpack') return it(msg, func)
 }
 
+/** only execute the test suite in proxy+browser clients */
+export const proxyDescribe = (msg: string, suite: (this: Suite) => void) => {
+  if (process.env.MOCHA_RUN_TARGET === 'webpack' && process.env.KUI_USE_PROXY === 'true') return describe(msg, suite)
+}
+
 /** only execute the test suite in electron or proxy+browser clients */
 export const pDescribe = (msg: string, suite: (this: Suite) => void) => {
   if (process.env.MOCHA_RUN_TARGET !== 'webpack' || process.env.KUI_USE_PROXY === 'true') return describe(msg, suite)

packages/test/src/api/common.ts

@@ -66,12 +66,17 @@ export type Props = Partial<KuiConfiguration> & {
   /** If in popup mode, execute the given command line */
   commandLine?: string[]
 
+  /** do not echo the command? */
+  quietExecCommand?: boolean
+
   /** initial tab title */
   initialTabTitle?: string
 }
 
 type State = KuiConfiguration & {
   isBootstrapped: boolean
+  commandLine?: string[]
+  quietExecCommand?: boolean
 }
 
 /**
@@ -112,17 +117,39 @@ export class Kui extends React.PureComponent<Props, State> {
         })
     }
 
+    let commandLine = this.props.commandLine
+    let quietExecCommand = this.props.quietExecCommand !== undefined ? this.props.quietExecCommand : !this.props.isPopup
+
+    if (inBrowser()) {
+      const windowQuery = window.location.search
+      if (windowQuery) {
+        // parse and extract the question mark in window.location.search
+        // e.g. query = { command: 'replay /kui/welcome.json' }
+        const query = require('querystring').parse(windowQuery.substring(1))
+
+        // To avoid SQL injection attacks, users can only query with `replay` command
+        if (query.command && /^replay/.test(query.command)) {
+          commandLine = query.command.split(' ')
+          quietExecCommand = false
+        }
+      }
+    }
+
     try {
       this.state = Object.assign({}, this.defaultSessionBehavior(), this.defaultFeatureFlag(), props, {
-        isBootstrapped: !!props.noBootstrap
+        isBootstrapped: !!props.noBootstrap,
+        commandLine,
+        quietExecCommand
       })
       debug('initial state:inBrowser?', inBrowser())
       debug('initial state:given properties', props)
       debug('initial state:final value', this.state)
     } catch (err) {
       console.log('using default configuration')
       this.state = {
-        isBootstrapped: !!props.noBootstrap
+        isBootstrapped: !!props.noBootstrap,
+        commandLine,
+        quietExecCommand
       }
     }
   }
@@ -220,8 +247,8 @@ export class Kui extends React.PureComponent<Props, State> {
    *
    */
   private statusStripeProps(): StatusStripeProps {
-    if (this.props.commandLine) {
-      const statusStripeIdx = this.props.commandLine.findIndex(_ => _ === '--status-stripe')
+    if (this.state.commandLine) {
+      const statusStripeIdx = this.state.commandLine.findIndex(_ => _ === '--status-stripe')
       if (statusStripeIdx >= 0) {
         return { type: this.props.commandLine[statusStripeIdx + 1] as StatusStripeProps['type'] }
       }
@@ -234,13 +261,14 @@ export class Kui extends React.PureComponent<Props, State> {
 
   private firstTab = true
   private onTabReady() {
-    if (this.props.commandLine && this.firstTab) {
+    if (this.state.commandLine && this.firstTab) {
       this.firstTab = false
 
-      // do not echo the command?
-      const quiet = !this.props.isPopup
-
-      pexecInCurrentTab(this.props.commandLine.map(_ => encodeComponent(_)).join(' '), undefined, quiet)
+      pexecInCurrentTab(
+        this.state.commandLine.map(_ => encodeComponent(_)).join(' '),
+        undefined,
+        this.state.quietExecCommand
+      )
     }
   }
 
@@ -251,11 +279,11 @@ export class Kui extends React.PureComponent<Props, State> {
       return <Loading />
     }
 
-    if (this.props.isPopup && this.props.commandLine) {
+    if (this.props.isPopup && this.state.commandLine) {
       return (
         <KuiContext.Provider value={this.state}>
           <React.Suspense fallback={<div />}>
-            <Popup commandLine={this.props.commandLine}>{this.props.children}</Popup>
+            <Popup commandLine={this.state.commandLine}>{this.props.children}</Popup>
           </React.Suspense>
         </KuiContext.Provider>
       )
@@ -268,7 +296,7 @@ export class Kui extends React.PureComponent<Props, State> {
               noActiveInput={!!this.props.bottomInput}
               bottom={bottom}
               title={this.props.initialTabTitle}
-              onTabReady={this.props.commandLine && this._onTabReady}
+              onTabReady={this.state.commandLine && this._onTabReady}
             >
               <ComboSidecar />
             </TabContainer>

plugins/plugin-client-common/src/components/Client/Kui.tsx

@@ -209,3 +209,43 @@ describe(`split-snapshot-replay ${process.env.MOCHA_RUN_TARGET || ''}`, async fu
     }
   })
 })
+
+Common.proxyDescribe(`core snapshot and replay by query ${process.env.MOCHA_RUN_TARGET || ''}`, function(
+  this: Common.ISuite
+) {
+  before(Common.before(this))
+  after(Common.after(this))
+
+  it(`should base64 ${base64Input}`, () =>
+    CLI.command(`base64 ${base64Input}`, this.app)
+      .then(ReplExpect.okWithString(base64Output))
+      .catch(Common.oops(this, true)))
+
+  it('should snapshot', () =>
+    CLI.command('snapshot /tmp/test.kui', this.app)
+      .then(ReplExpect.justOK)
+      .catch(Common.oops(this, true)))
+
+  it('should refresh', () => Common.refresh(this))
+
+  it('should replay by query', async () => {
+    try {
+      await this.app.client.url(`${process.env.WEBPACK_CLIENT_URL}?command=replay /tmp/test.kui`)
+
+      // verify the base64 command replay
+      let idx = 0
+      await this.app.client.waitUntil(async () => {
+        const txt = await this.app.client.getText(Selectors.OUTPUT_LAST)
+        if (++idx > 5) {
+          console.error(`still waiting for expected=${base64Output}; actual=${txt}`)
+        }
+        return txt === base64Output
+      }, CLI.waitTimeout)
+
+      // back to the original url, without this line, the following tests will fail at `before` state
+      await this.app.client.url(process.env.WEBPACK_CLIENT_URL)
+    } catch (err) {
+      await Common.oops(this, true)(err)
+    }
+  })
+})