How to use the @kui-shell/core/webapp/util/dom.element function in @kui-shell/core

if (annotation.badge && annotation.badge !== 'web') {
            // render a badge, if we have one; we render web badges specially, with maybeAddWebBadge
            addBadge(tab, annotation.badge)
          }

          return true // yes, we took care of the rendering!
        }

        return renderingTakenCareOf
      }, false)
    }
  } // end of third party view mod

  // const content = sidecar.querySelector('.sidecar-content')
  if (entity.exec) {
    const kind = element('.action-content .kind', sidecar)
    if (entity.exec.kind) {
      const kindText = entity.exec.prettyKind || entity.exec.kind
      const kindBits = kindText.split(/:/) // nodejs:6 => ['nodejs', '6']
      kind.innerText = kindBits[0]
      if (entity.exec.prettyKind === 'app') {
        kind.innerText = `This entity represents a composition`
      } else if (entity.exec.kind === 'source') {
        kind.innerText = `This is a preview of your app, it is not yet deployed`
      } else {
        kind.innerText = `This is a ${kindText} action`
      }
    } else {
      kind.innerText = ''
    }

    /* const url = sidecar.querySelector('.entity-web-export-url')

0.000017 *
      1000000
    ).toFixed(2)
    element('.activation-estimated-cost', sidecar).innerText = roughCostEstimate
  }

  // the entity.namespace and entity.name of activation records don't include the package name :/
  const pathAnnotation = entity.annotations && entity.annotations.find(kv => kv.key === 'path')
  const entityNameWithPackageAndNamespace =
    (pathAnnotation && pathAnnotation.value) || `${entity.namespace}/${entity.name}`
  const pathComponents = pathAnnotation && entityNameWithPackageAndNamespace.split('/')
  const entityPackageName = pathComponents ? (pathComponents.length === 2 ? '' : pathComponents[1]) : '' // either ns/package/action or ns/action

  // make the nameDom clickable, traversing to the action
  const footer = sidecar.querySelector('.sidecar-bottom-stripe')
  element('.package-prefix', footer).innerText = entityPackageName
  const entityName = element('.entity-name', nameDom)
  entityName.innerText = entity.name
  entityName.className = `${entityName.className} clickable`
  entityName.onclick =
    entity.onclick ||
    (async () => {
      tab.REPL.pexec(`wsk action get "/${entityNameWithPackageAndNamespace}"`)
    })

  // add the activation id to the header
  const activationDom = element('.sidecar-header-name .entity-name-hash', sidecar)
  activationDom.innerText = entity.activationId

  // view mode
  const show =
    (options && options.show) || // cli-specified mode

// WARNING: hljs.highlightBlock is buggy, at least as of 9.14.2 (same with 9.12.0)
              // but hljs.highlight seems better
              await installHighlightJS()
              code.innerHTML = hljs.highlight(lang, codeText).value
              code.className = `action-source ${lang}`
            } else {
              // TODO what do we do with binary actions?
              code.innerText = 'This is a binary action'
            }
          }
        }
      } else if (options && options.show) {
        //
        // show some other attribute of the action
        //
        const container = element('.action-content .action-source', sidecar)
        renderField(container, entity, options.show)
      }
    }
  } else if (entity.type === 'rules') {
    // enabled indicator
    sidecar.classList.add(`rule-enabled-${entity.status === 'active'}`)

    // form a fake AST, so we can use the wskflow visualization
    // wskflw now use the IR, so we have to fake a IR instead of a AST
    // const key = idx => `action_${idx}`
    const components: Action[] = [
      {
        type: 'action' as const,
        name: `/${entity.action.path}/${entity.action.name}`,
        displayLabel: entity.action.name as string
      }

const entityPackageName = pathComponents ? (pathComponents.length === 2 ? '' : pathComponents[1]) : '' // either ns/package/action or ns/action

  // make the nameDom clickable, traversing to the action
  const footer = sidecar.querySelector('.sidecar-bottom-stripe')
  element('.package-prefix', footer).innerText = entityPackageName
  const entityName = element('.entity-name', nameDom)
  entityName.innerText = entity.name
  entityName.className = `${entityName.className} clickable`
  entityName.onclick =
    entity.onclick ||
    (async () => {
      tab.REPL.pexec(`wsk action get "/${entityNameWithPackageAndNamespace}"`)
    })

  // add the activation id to the header
  const activationDom = element('.sidecar-header-name .entity-name-hash', sidecar)
  activationDom.innerText = entity.activationId

  // view mode
  const show =
    (options && options.show) || // cli-specified mode
    (entity.modes && entity.modes.find(_ => _.defaultMode)) || // model-specified default mode
    'result' // fail-safe default mode

  if (show === 'result' || show.mode === 'result') {
    debug('showing result')
    const activationResult = element('.activation-result', sidecar)
    UI.empty(activationResult)

    try {
      activationResult['scrollIntoViewIfNeeded']()
    } catch (err) {

}
  } else if (entity.type === 'activations') {
    showActivation(tab, entity, options)
  } else if (entity.type === 'triggers') {
    const feed = entity.annotations && entity.annotations.find(kv => kv.key === 'feed')
    const feedDom = element('.trigger-content .feed-content', sidecar)
    if (feed) {
      feedDom.innerText = `This is a feed based on ${feed.value}`
    } else {
      feedDom.innerText = ''
    }
    if (options && options.show !== 'content' && options.show !== 'default') {
      //
      // show some other attribute of the action
      //
      const source = element('.trigger-content .trigger-source', sidecar)
      renderField(source, entity, options.show)
    }
  }

  UI.LowLevel.scrollIntoView()

  return responseToRepl
} /* showEntity */

type: 'action' as const,
        name: `/${entity.action.path}/${entity.action.name}`,
        displayLabel: entity.action.name as string
      }
    ]
    const ast: ComponentArrayBearing = {
      type: 'sequence',
      components
    }
    const rule = entity
    await wskflow(tab, ast, rule)
  } else if (entity.type === 'packages') {
    const actionCountDom = sidecar.querySelector('.package-action-count')
    const actionCount = (entity.actions && entity.actions.length) || 0
    actionCountDom.setAttribute('data-is-plural', (actionCount !== 1).toString())
    element('.package-content-count', actionCountDom).innerText = actionCount

    const feedCountDom = element('.package-feed-count', sidecar)
    const feedCount = (entity.feeds && entity.feeds.length) || 0
    feedCountDom.setAttribute('data-is-plural', (feedCount !== 1).toString())
    element('.package-content-count', feedCountDom).innerText = feedCount

    const packageContent = element('.sidecar-content .package-content', sidecar)
    UI.empty(packageContent)

    if (options && options.show !== 'content' && options.show !== 'default') {
      //
      // show some other attribute of the action
      //
      const source = document.createElement('pre')
      const sourceCode = document.createElement('code')
      source.className = 'package-source'

}
    } else {
      //
      // visualize some sort of atomic/regular action
      //
      if (!entity.limits) {
        sidecar.classList.add('no-limits-data')
      }

      if (!options || options.show === 'code' || options.show === 'default') {
        maybeAddWebBadge(entity)
        if (renderThirdParty(entity)) {
          // then the third party rendering took care of it
        } else {
          // this is the container for the code
          const code = element('.action-content .action-source', sidecar)

          if (entity.exec.kind === 'blackbox') {
            if (entity.exec.image) {
              if (entity.exec.code) {
                // then this is a dockerskeleton
                // that attaches some code; we can
                // show the code
                code.appendChild(document.createTextNode(entity.exec.code))
                await installHighlightJS()
                hljs.highlightBlock(code)
              } else {
                // otherwise, just show the image name
                const clicky = document.createElement('a')
                clicky.className = 'clickable clickable-blatant'
                code.appendChild(document.createTextNode('dockerhub image: '))
                code.appendChild(clicky)

if (annotation.badge === 'zip') {
            const code = Buffer.from(entity.exec.code, 'base64')
            // eslint-disable-next-line @typescript-eslint/no-var-requires
            const Zip = require('adm-zip')
            const zip = Zip(code)
            const indexEntryJavascript = zip.getEntry('index.js')
            const indexEntry =
              indexEntryJavascript ||
              zip.getEntry('index.py') ||
              zip.getEntry('__main__.py') ||
              zip.getEntry('index.php')

            if (indexEntry) {
              const indexContent = zip.readAsText(indexEntry)
              const src = element('.action-source', sidecar)

              src.innerText = beautify(indexEntryJavascript ? 'nodejs' : 'other', indexContent.toString())
              setTimeout(async () => {
                await installHighlightJS()
                hljs.highlightBlock(src)
              }, 0)
            } else {
              addThirdPartyMessage('Unable to locate the index.js file in the zip file')
            }
          } else if (annotation.contentType === 'html') {
            const frame = document.createElement('iframe')
            const container = sidecarSelector(tab, '.custom-content')

            frame.style.width = '100%'
            frame.style.border = 'none'
            sidecar.setAttribute('data-active-view', '.custom-content > div')

displayLabel: entity.action.name as string
      }
    ]
    const ast: ComponentArrayBearing = {
      type: 'sequence',
      components
    }
    const rule = entity
    await wskflow(tab, ast, rule)
  } else if (entity.type === 'packages') {
    const actionCountDom = sidecar.querySelector('.package-action-count')
    const actionCount = (entity.actions && entity.actions.length) || 0
    actionCountDom.setAttribute('data-is-plural', (actionCount !== 1).toString())
    element('.package-content-count', actionCountDom).innerText = actionCount

    const feedCountDom = element('.package-feed-count', sidecar)
    const feedCount = (entity.feeds && entity.feeds.length) || 0
    feedCountDom.setAttribute('data-is-plural', (feedCount !== 1).toString())
    element('.package-content-count', feedCountDom).innerText = feedCount

    const packageContent = element('.sidecar-content .package-content', sidecar)
    UI.empty(packageContent)

    if (options && options.show !== 'content' && options.show !== 'default') {
      //
      // show some other attribute of the action
      //
      const source = document.createElement('pre')
      const sourceCode = document.createElement('code')
      source.className = 'package-source'
      source.appendChild(sourceCode)
      packageContent.appendChild(source)

components
    }
    const rule = entity
    await wskflow(tab, ast, rule)
  } else if (entity.type === 'packages') {
    const actionCountDom = sidecar.querySelector('.package-action-count')
    const actionCount = (entity.actions && entity.actions.length) || 0
    actionCountDom.setAttribute('data-is-plural', (actionCount !== 1).toString())
    element('.package-content-count', actionCountDom).innerText = actionCount

    const feedCountDom = element('.package-feed-count', sidecar)
    const feedCount = (entity.feeds && entity.feeds.length) || 0
    feedCountDom.setAttribute('data-is-plural', (feedCount !== 1).toString())
    element('.package-content-count', feedCountDom).innerText = feedCount

    const packageContent = element('.sidecar-content .package-content', sidecar)
    UI.empty(packageContent)

    if (options && options.show !== 'content' && options.show !== 'default') {
      //
      // show some other attribute of the action
      //
      const source = document.createElement('pre')
      const sourceCode = document.createElement('code')
      source.className = 'package-source'
      source.appendChild(sourceCode)
      packageContent.appendChild(source)
      renderField(sourceCode, entity, options.show)
    } else {
      if (entity.actions) {
        const list = document.createElement('div')
        list.className = 'package-action-list'