How to use the @kui-shell/core/api/repl-util.encodeComponent function in @kui-shell/core

rowIsSelected ? 'selected-row' : ''
      ]

      // if there isn't a global namespace specifier, maybe there is a row namespace specifier
      // we use the row specifier in preference to a global specifier -- is that right?
      const ns =
        (namespaceColumnIdx >= 0 && command !== 'helm' && `-n ${encodeComponent(rows[namespaceColumnIdx].value)}`) ||
        drilldownNamespace ||
        ''

      // idx === 0: don't click on header row
      const onclick =
        idx === 0
          ? false
          : drilldownVerb
          ? `${drilldownCommand} ${drilldownVerb}${drilldownKind(nameSplit, rows)} ${encodeComponent(
              nameForDrilldown
            )} ${drilldownFormat} ${ns}`
          : false

      const header = idx === 0 ? 'header-cell' : ''

      // for `k get events`, show REASON and MESSAGE columns when sidecar open
      const columnVisibleWithSidecar = new RegExp(/STATUS|REASON|MESSAGE/i)

      // show red-background if it's a failure reason in `k  get events`
      const maybeRed = (reason: string) => {
        return /failed/i.test(reason) ? 'red-background' : ''
      }

      return {
        key: rows[0].key,

const status = async (command: string, code?: number, stderr?: string) => {
      if (hasFileArg || verb === 'delete' || verb === 'create') {
        if (!execOptions.noStatus) {
          const expectedState = verb === 'create' || verb === 'apply' ? FinalState.OnlineLike : FinalState.OfflineLike
          const finalState = `--final-state ${expectedState.toString()}`
          const resourceNamespace =
            options.n || options.namespace ? `-n ${encodeComponent(options.n || options.namespace)}` : ''

          debug('about to get status', file, entityType, entity, resourceNamespace)
          return REPL.qexec(
            `${statusCommand} status ${file || entityType} ${entity || ''} ${finalState} ${resourceNamespace} --watch`,
            undefined,
            undefined,
            { parameters: execOptions.parameters }
          ).catch(err => {
            if (err.code === 404 && expectedState === FinalState.OfflineLike) {
              // that's ok!
              debug('resource not found after status check, but that is ok because that is what we wanted')
              return out
            } else {
              console.error('error constructing status', err)
              return err
            }

entityTypeFromRows = undefined
        }
      }

      const rowIsSelected = rows[0].key === 'CURRENT' && rows[0].value === '*'
      const rowKey = rows[0].key
      const rowValue = rows[0].value
      const rowCSS = [
        (cssForKeyValue[rowKey] && cssForKeyValue[rowKey][rowValue]) || '',
        rowIsSelected ? 'selected-row' : ''
      ]

      // if there isn't a global namespace specifier, maybe there is a row namespace specifier
      // we use the row specifier in preference to a global specifier -- is that right?
      const ns =
        (namespaceColumnIdx >= 0 && command !== 'helm' && `-n ${encodeComponent(rows[namespaceColumnIdx].value)}`) ||
        drilldownNamespace ||
        ''

      // idx === 0: don't click on header row
      const onclick =
        idx === 0
          ? false
          : drilldownVerb
          ? `${drilldownCommand} ${drilldownVerb}${drilldownKind(nameSplit, rows)} ${encodeComponent(
              nameForDrilldown
            )} ${drilldownFormat} ${ns}`
          : false

      const header = idx === 0 ? 'header-cell' : ''

      // for `k get events`, show REASON and MESSAGE columns when sidecar open

return evt => {
        evt.stopPropagation() // row versus name click handling; we don't want both
        return REPL.pexec(`kedit ${encodeComponent(filepathAsGiven)} ${encodeComponent(kubeEntity.metadata.name)}`)
      }
    }

const drilldownCommand = isHelmStatus ? 'kubectl' : command

  const drilldownVerb =
    (verb === 'get'
      ? 'get'
      : command === 'helm' && (verb === 'list' || verb === 'ls')
      ? 'get'
      : isHelmStatus
      ? 'get'
      : undefined) || undefined

  // helm doesn't support --output
  const drilldownFormat = drilldownCommand === 'kubectl' && drilldownVerb === 'get' ? '-o yaml' : ''

  const drilldownNamespace =
    options.n || options.namespace ? `-n ${encodeComponent(options.n || options.namespace)}` : ''

  const kindColumnIdx = preTable[0].findIndex(({ key }) => key === 'KIND')
  const drilldownKind = (nameSplit: string[], row: Pair[]) => {
    if (drilldownVerb === 'get') {
      const kind =
        kindColumnIdx >= 0 ? row[kindColumnIdx].value : nameSplit.length > 1 ? nameSplit[0] : entityTypeFromCommandLine
      return kind ? ' ' + kind : ''
      /* } else if (drilldownVerb === 'config') {
        return ' use-context'; */
    } else {
      return ''
    }
  }

  // maximum column count across all rows
  const nameColumnIdx = preTable[0].findIndex(({ key }) => key === 'NAME')

const showLogs = (tab: Tab, { pod, container }) => {
  const podName = encodeComponent(pod.metadata.name)
  const containerName = encodeComponent(container.name)
  const ns = encodeComponent(pod.metadata.namespace)

  return `kubectl logs ${podName} ${containerName} -n ${ns}`
}

const ns = (namespace?: string) =>
  namespace && namespace !== 'default' ? `--namespace ${encodeComponent(namespace)}` : ''

const showLogs = (tab: Tab, { pod, container }) => {
  const podName = encodeComponent(pod.metadata.name)
  const containerName = encodeComponent(container.name)
  const ns = encodeComponent(pod.metadata.namespace)

  return `kubectl logs ${podName} ${containerName} -n ${ns}`
}