feat(plugins/plugin-client-common): assign code blocks an ordinal execution order

This PR also changes the play icon from circle-play to plain play

Author: starpit

packages/test/src/api/Markdown.ts

@@ -19,6 +19,9 @@ export default class Markdown {
   public readonly tabs = '.kui--markdown-tabs'
   public readonly tab = `${this.tabs} .kui--markdown-tab button`
 
+  private readonly _codeBlock = '.kui--code-block-in-markdown'
+  public readonly runButton = '.kui--block-action-run'
+
   public tipWithTitle(title: string) {
     return `${this.tip}[data-title="${title}"]`
   }
@@ -30,4 +33,8 @@ export default class Markdown {
   public tabWithTitle(title: string) {
     return `${this.tab}[data-title="${title}"]`
   }
+
+  public codeBlock(index: number) {
+    return `${this._codeBlock}[data-code-index="${index}"]`
+  }
 }

packages/test/src/api/Wizard.ts

@@ -20,6 +20,7 @@ export default class Wizard {
   private readonly _description = '.pf-c-wizard__description'
   private readonly _navItem = '.pf-c-wizard__nav-item'
   private readonly _navItemTitle = '.pf-c-wizard__nav-link'
+  public readonly isCurrentStep = 'pf-m-current'
   private readonly _navItemDescription = '.kui--wizard-nav-item-description'
   private readonly _navItemProgressStepper = '.kui--progress-stepper'
   private readonly _navItemProgressStep = '.kui--progress-step'
@@ -42,6 +43,10 @@ export default class Wizard {
     return `${this.wizard} ${this._navItem}:nth-child(${idx + 1})`
   }
 
+  public navItemSwitchToButton(idx: number) {
+    return `${this.navItem(idx)} > button`
+  }
+
   public navItemTitle(idx: number) {
     return `${this.navItem(idx)} ${this._navItemTitle}`
   }

plugins/plugin-client-common/src/components/Content/Markdown/components/Wizard/Progress.tsx

@@ -16,93 +16,100 @@
 
 import React from 'react'
 import { i18n } from '@kui-shell/core'
-
-import { Graph, blocks, progress } from '../code/graph'
-
-import { ProgressStepState, statusFromStatusVector } from '../../../ProgressStepper'
-import { subscribeToLinkUpdates, unsubscribeToLinkUpdates } from '../../../LinkStatus'
+import { ProgressVariant } from '@patternfly/react-core'
 
 import { State as WizardState } from '.'
 
-import { ProgressVariant } from '@patternfly/react-core'
+import {
+  ReadinessHandler,
+  emitCodeBlockReadiness,
+  onGetCodeBlockReadiness,
+  offGetCodeBlockReadiness
+} from '../../../../Views/Terminal/Block/CodeBlockEvents'
+
+import { OrderedGraph, blocks, progress } from '../code/graph'
+import { ProgressStepState } from '../../../ProgressStepper'
 
 const PatternFlyProgress = React.lazy(() => import('@patternfly/react-core').then(_ => ({ default: _.Progress })))
 
 const strings = i18n('plugin-client-common', 'code')
 
+type Status = ProgressStepState['status']
+
 type Props = Pick<WizardState, 'choices'> & {
   /** The tasks to be accomplished */
-  codeBlocks: Graph
-}
-
-type Status = ProgressStepState['status']
+  codeBlocks: OrderedGraph
 
-interface State {
   /** The key is a codeBlockId */
   status: Record<string, Status>
 }
 
+type State = ReturnType<typeof progress> & {
+  nextCodeBlocks: string[]
+}
+
 export default class Progress extends React.PureComponent<Props, State> {
+  private readonly cleaners: (() => void)[] = []
+
   public constructor(props: Props) {
     super(props)
 
-    this.state = {
-      status: {}
-    }
+    this.state = Progress.getDerivedStateFromProps(props)
   }
 
-  private readonly _statusUpdateHandler = (statusVector: number[], codeBlockId: string) => {
-    const status = statusFromStatusVector(statusVector, false)
+  public static getDerivedStateFromProps(props: Props, state?: State) {
+    const prog = progress(props.codeBlocks, props.status, props.choices)
+
+    const allCodeBlocks = blocks(props.codeBlocks)
+    if (!state) {
+      // initialize all blocks as not ready
+      allCodeBlocks.forEach(_ => emitCodeBlockReadiness(_.id, false))
+    }
+
+    const nextCodeBlocks = allCodeBlocks.filter(_ => prog.nextOrdinals.includes(_.order)).map(_ => _.id)
+
+    if (state) {
+      const noLongerReady = state.nextCodeBlocks.filter(_ => !nextCodeBlocks.includes(_))
+      noLongerReady.forEach(id => emitCodeBlockReadiness(id, false))
+    }
+    nextCodeBlocks.forEach(id => emitCodeBlockReadiness(id, true))
 
-    this.updateStatus(codeBlockId, status)
+    return Object.assign({}, prog, { nextCodeBlocks })
   }
 
-  private updateStatus(codeBlockId: string, status: Status) {
-    this.setState(curState => {
-      curState.status[codeBlockId] = status
-      return {
-        status: Object.assign({}, curState.status)
-      }
-    })
+  private readonly _onGetReadiness = (handler: ReadinessHandler, codeBlockId: string) => {
+    const ready = this.state.nextCodeBlocks.includes(codeBlockId)
+    handler(ready)
   }
 
   public componentDidMount() {
-    blocks(this.props.codeBlocks, 'all').forEach(_ => {
-      subscribeToLinkUpdates(_.id, this._statusUpdateHandler)
+    blocks(this.props.codeBlocks).forEach(({ id }) => {
+      onGetCodeBlockReadiness(id, this._onGetReadiness)
+      this.cleaners.push(() => offGetCodeBlockReadiness(id, this._onGetReadiness))
     })
   }
 
   public componentWillUnmount() {
-    blocks(this.props.codeBlocks, 'all').forEach(_ => {
-      unsubscribeToLinkUpdates(_.id, this._statusUpdateHandler)
-    })
-  }
-
-  private get nSteps() {
-    return progress(this.props.codeBlocks, undefined, this.props.choices).nTotal
-  }
-
-  private counts() {
-    return progress(this.props.codeBlocks, this.state.status, this.props.choices)
+    this.cleaners.forEach(_ => _())
   }
 
   public render() {
-    const { nDone, nError } = this.counts()
+    const { nDone, nError, nTotal } = this.state
 
     const title = strings('Completed tasks')
     const label =
       nError > 0
-        ? strings(nError === 1 ? 'xOfyFailingz' : 'xOfyFailingsz', nDone, nError, this.nSteps)
-        : strings('xOfy', nDone, this.nSteps)
+        ? strings(nError === 1 ? 'xOfyFailingz' : 'xOfyFailingsz', nDone, nError, nTotal)
+        : strings('xOfy', nDone, nTotal)
 
-    const variant = nDone === this.nSteps ? ProgressVariant.success : nError > 0 ? ProgressVariant.danger : undefined
+    const variant = nDone === nTotal ? ProgressVariant.success : nError > 0 ? ProgressVariant.danger : undefined
 
     return (
       <PatternFlyProgress
         aria-label="wizard progress"
         className="kui--wizard-progress"
         min={0}
-        max={this.nSteps}
+        max={nTotal}
         value={nDone}
         title={title}
         label={label}

plugins/plugin-client-common/src/components/Content/Markdown/components/Wizard/index.tsx

@@ -21,34 +21,56 @@ import { WizardProps } from './rehype-wizard'
 import Progress from './Progress'
 import CodeBlockProps from './CodeBlockProps'
 import { onTabSwitch, offTabSwitch } from '../tabbed'
-import { Graph, sequence, compile, blocks } from '../code/graph'
+import { Graph, OrderedGraph, blocks, compile, order, sequence } from '../code/graph'
 
 import Card from '../../../../spi/Card'
 import { MiniProgressStepper } from '../../../MiniProgressStepper'
+import { ProgressStepState, statusFromStatusVector } from '../../../ProgressStepper'
+import { subscribeToLinkUpdates, unsubscribeToLinkUpdates } from '../../../LinkStatus'
 
 import '../../../../../../web/scss/components/Wizard/PatternFly.scss'
 
 const PatternFlyWizard = React.lazy(() => import('@patternfly/react-core').then(_ => ({ default: _.Wizard })))
 
+type Status = ProgressStepState['status']
+
 type Props = WizardProps & { uuid: string }
 
 export interface State {
+  codeBlocks: OrderedGraph
+
+  /** Map from codeBlock ID to execution status of that code block */
+  status: Record<string, Status>
+
   /** Map from tab group to currently selected tab member */
   choices: Record<string, string>
 }
 
 export default class Wizard extends React.PureComponent<Props, State> {
   private readonly cleaners: (() => void)[] = []
 
+  private readonly _statusUpdateHandler = (statusVector: number[], codeBlockId: string) => {
+    const status = statusFromStatusVector(statusVector, false)
+
+    this.updateStatus(codeBlockId, status)
+  }
+
   public constructor(props: Props) {
     super(props)
 
     this.state = {
-      choices: {}
+      status: {},
+      choices: {},
+      codeBlocks: order(sequence(this.children.flatMap(_ => this.containedCodeBlocks(_)).filter(Boolean)))
     }
   }
 
   public componentDidMount() {
+    blocks(this.state.codeBlocks, 'all').forEach(_ => {
+      subscribeToLinkUpdates(_.id, this._statusUpdateHandler)
+      this.cleaners.push(() => unsubscribeToLinkUpdates(_.id, this._statusUpdateHandler))
+    })
+
     const switcher = (group: string, member: string) => {
       this.setState(curState => ({
         choices: Object.assign({}, curState.choices, { [group]: member })
@@ -63,10 +85,20 @@ export default class Wizard extends React.PureComponent<Props, State> {
     this.cleaners.forEach(_ => _())
   }
 
+  private updateStatus(codeBlockId: string, status: Status) {
+    this.setState(curState => {
+      curState.status[codeBlockId] = status
+      return {
+        status: Object.assign({}, curState.status)
+      }
+    })
+  }
+
   private wizardCodeBlockSteps(containedCodeBlocks: Graph) {
     return (
       containedCodeBlocks && (
         <MiniProgressStepper
+          status={this.state.status}
           steps={blocks(containedCodeBlocks, this.state.choices).map(_ => ({
             codeBlockId: _.id,
             validate: _.validate,
@@ -111,14 +143,11 @@ export default class Wizard extends React.PureComponent<Props, State> {
 
   /** Overall progress across all steps */
   private progress() {
-    if (this.props['data-kui-wizard-progress'] === 'bar') {
-      const allCodeBlocks = sequence(this.children.flatMap(_ => this.containedCodeBlocks(_)))
+    if (this.props['data-kui-wizard-progress'] === 'bar' && blocks(this.state.codeBlocks).length > 0) {
       return (
-        allCodeBlocks.sequence.length > 0 && (
-          <div className="kui--markdown-major-paragraph">
-            <Progress choices={this.state.choices} codeBlocks={allCodeBlocks} />
-          </div>
-        )
+        <div className="kui--markdown-major-paragraph">
+          <Progress status={this.state.status} choices={this.state.choices} codeBlocks={this.state.codeBlocks} />
+        </div>
       )
     }
   }