src/contentScripts/communityConsole/workflows/components/TwptWorkflowProgress.js

import '@material/mwc-dialog/mwc-dialog.js';
import '@material/web/button/filled-button.js';
import '@material/web/button/text-button.js';

import '../../../../workflows/manager/components/ActionEditor.js';

import {css, html, LitElement} from 'lit';
import {map} from 'lit/directives/map.js';

export default class TwptWorkflowProgress extends LitElement {
  static properties = {
    workflow: {type: Object},
    currentThread: {type: Number},
    numThreads: {type: Number},
    currentAction: {type: Number},
    status: {type: String},
  };

  static styles = css`
    .progressbar-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  `;

  renderThreadProgress() {
    // @TODO: Improve this UI when the actions section is complete
    return html`
      <div class="progressbar-container">
        <progress value=${this.currentThread + 1} max=${
        this.numThreads}></progress>
        <span>Thread ${this.currentThread + 1}/${this.numThreads}</span>
      </div>
      <p style="color: gray;">(Debug information) Status: ${this.status}</p>
    `;
  }

  renderActions() {
    const actions = this.workflow?.getActionsList?.() ?? [];
    return map(actions, (action, i) => {
      let status;
      if (i > this.currentAction)
        status = 'idle';
      else if (i == this.currentAction && this.status == 'running')
        status = 'running';
      else if (i == this.currentAction && this.status == 'error')
        status = 'error';
      else
        status = 'done';

      return html`
        <wf-action-editor
            .action=${action}
            readOnly
            step=${i + 1}
            status=${status}>
        </wf-action-editor>
      `;
    });
  }

  render() {
    return [
      this.renderThreadProgress(),
      this.renderActions(),
    ];
  }
}
window.customElements.define('twpt-workflow-progress', TwptWorkflowProgress);