How to use the @kui-shell/core.REPL.encodeComponent function in @kui-shell/core

export const fillInActionDetails = (pkage: Package, type = 'actions') => actionSummary => {
  const kindAnnotation = actionSummary.annotations && actionSummary.annotations.find(_ => _.key === 'exec')
  const kind = kindAnnotation && kindAnnotation.value

  return Object.assign({}, actionSummary, {
    // given the actionSummary from the 'actions' field of a package entity
    type,
    packageName: pkage.name,
    namespace: `${pkage.namespace}/${pkage.name}`,
    kind,
    onclick: `wsk action get ${REPL.encodeComponent(`/${pkage.namespace}/${pkage.name}/${actionSummary.name}`)}`
  })
}

if (task && task.spec.steps && task.spec.steps.length > 0) {
        //
        // in this case, we do have a full Task definition, which
        // includes Steps; we will make a subgraph for the steps
        //
        const resources = (task.spec.inputs && task.spec.inputs.resources) || []
        const resourceList = `${resources.map(_ =&gt; `<span class="color-base0A">${_.type}</span>:${_.name}`).join(', ')}`

        const params = (task.spec.inputs &amp;&amp; task.spec.inputs.params) || []
        const paramList = `(${params.map(_ =&gt; _.name).join(', ')})`

        const subgraph = makeSubGraph(taskRef.name, {
          type: 'Tekton Task',
          tooltip: `<table><tbody><tr><td><strong>Resources</strong></td><td>${resourceList}</td></tr><tr><td><strong>Params</strong></td><td>${paramList}</td></tr></tbody></table>`,
          tooltipColor: '0C',
          onclick: `tekton get task ${REPL.encodeComponent(pipeline.metadata.name)} ${REPL.encodeComponent(
            task.metadata.name
          )} ${filearg}`,
          visited: task.visitedIdx !== undefined ? [task.visitedIdx] : undefined,
          children: task.spec.steps.map(step =&gt; {
            const stepNode: TektonNode = {
              id: stepId(taskRef, step),
              label: step.name,
              width: step.name.length * defaultCharWidth,
              height: defaultHeight,
              nChildren: 0,
              nParents: 0,
              deployed: false,
              visited: step.visitedIdx !== undefined ? [step.visitedIdx] : undefined,
              type: 'Tekton Step',
              tooltip: `<strong>Image</strong>: ${step.image}`,
              tooltipColor: '0E',

(symtab: SymbolTable, taskRef: TaskRef) => {
      const task: Task = taskName2Task[taskRef.taskRef.name]
      debug('TaskRef', taskRef.name, task)

      // -f file argument for drilldowns, if we have one
      const filearg = filepath ? `-f ${REPL.encodeComponent(filepath)}` : ''

      let node: TektonNode
      if (task && task.spec.steps && task.spec.steps.length > 0) {
        //
        // in this case, we do have a full Task definition, which
        // includes Steps; we will make a subgraph for the steps
        //
        const resources = (task.spec.inputs && task.spec.inputs.resources) || []
        const resourceList = `${resources.map(_ =&gt; `<span class="color-base0A">${_.type}</span>:${_.name}`).join(', ')}`

        const params = (task.spec.inputs &amp;&amp; task.spec.inputs.params) || []
        const paramList = `(${params.map(_ =&gt; _.name).join(', ')})`

        const subgraph = makeSubGraph(taskRef.name, {
          type: 'Tekton Task',
          tooltip: `<table><tbody><tr><td><strong>Resources</strong></td><td>${resourceList}</td></tr><tr><td><strong>Params</strong></td><td>${paramList}</td></tr></tbody></table>`,

bar.style.left = percent(left)
        bar.style.width = percent(right - left)

        // fancy focus, to show the extent of the bar on the x axis!
        const resetFocus = xAxisResetFocus(barWrapper)
        const doFocus = () => xAxisToggleFocus({ barWrapper, this25, this75, left, right })
        const focus = (dom: HTMLElement) => {
          dom.onmouseenter = doFocus
          dom.onmouseleave = doFocus
        }

        // drill down to grid view; note how we pass through a name filter
        // query, to filter based on the clicked-upon row
        cell.onclick = drilldownWith(
          `grid ${REPL.encodeComponent(group.path)} ${optionsToString(options)} ${splitOptions}`,
          [resetFocus]
        )

        // install the fancy focus handlers
        focus(bar)

        // add 25th and 75th explainers to widest bar
        if (
          this75 - this25 === maxBarRange ||
          ((lastTimeWeRenderedARangeIndicator === undefined || idx - lastTimeWeRenderedARangeIndicator > 20) &&
            (this75 - this25) / maxBarRange > 0.9)
        ) {
          // render the < 25th and 75th > indicators inside the bar
          lastTimeWeRenderedARangeIndicator = idx

          // e.g. 25th versus min; and 75th percentile versus max

list.applications.map(app => ({
      type: 'application',
      name: app.name,
      onclick: `kubectl get svc ${REPL.encodeComponent(app.name)} -o yaml`,
      attributes: [
        {
          value: app.istioSidecar,
          outerCSS: 'text-center hide-with-sidecar',
          css: app.istioSidecar ? 'green-text' : 'red-text',
          fontawesome: app.istioSidecar ? 'fas fa-check-circle' : 'fas fa-exclamation-triangle'
        },
        {
          key: 'inboundErrorRatio',
          value: '\u2014', // emdash
          // outerCSS: 'hide-with-sidecar',
          css: TrafficLight.Gray
        },
        {
          key: 'outboundErrorRatio',
          value: '\u2014', // emdash

    clicky.onclick = () => REPL.pexec(`ls ${REPL.encodeComponent(wrkExec())}`)
    msg.appendChild(clicky)

onclick: () => {
                      return REPL.pexec(`wsk api get ${REPL.encodeComponent(name)} ${verb}`)
                    },
                    attributes: [

                        onclick: () => REPL.pexec(`wsk action get ${REPL.encodeComponent(actionFqn)}`)
                      },

children: task.spec.steps.map(step => {
            const stepNode: TektonNode = {
              id: stepId(taskRef, step),
              label: step.name,
              width: step.name.length * defaultCharWidth,
              height: defaultHeight,
              nChildren: 0,
              nParents: 0,
              deployed: false,
              visited: step.visitedIdx !== undefined ? [step.visitedIdx] : undefined,
              type: 'Tekton Step',
              tooltip: `<strong>Image</strong>: ${step.image}`,
              tooltipColor: '0E',
              onclick: `tekton get step ${REPL.encodeComponent(pipeline.metadata.name)} ${REPL.encodeComponent(
                task.metadata.name
              )} ${REPL.encodeComponent(step.name)} ${filearg}`
            }

            symtab[stepNode.id] = stepNode
            return stepNode
          })
        })

return Object.keys(map).reduce((opts, key) => {
    if (key === '_' || typeof map[key] === 'object') {
      return opts
    } else {
      return `${opts} --${key} ${REPL.encodeComponent(map[key])}`
    }
  }, '')
}