feat: update ls to allow for presenting content from more limited VFS's such as tutorials

this also updates TableCell.tsx to allow for Markdown content in cells.

Fixes #5497

Author: starpit

packages/core/src/webapp/models/table.ts

@@ -130,7 +130,8 @@ export enum TableStyle {
 export class Table<RowType extends Row = Row> {
   body: RowType[]
 
-  // type?: string
+  /** Markdown cells? */
+  markdown?: boolean
 
   /** Column index to be interpreted as a status column */
   statusColumnIdx?: number

plugins/plugin-bash-like/fs/src/lib/ls.ts

@@ -105,8 +105,8 @@ function cssOf(glob: GlobStats): string {
  * Decorate the name according to its nature
  *
  */
-function nameOf(glob: GlobStats): string {
-  return `${glob.nameForDisplay}${
+function nameOf(glob: GlobStats, wide: boolean): string {
+  return `${wide ? glob.nameForDisplay : glob.name}${
     glob.dirent.isDirectory
       ? !glob.nameForDisplay.endsWith('/')
         ? '/'
@@ -136,25 +136,35 @@ function formatGid(entry: GlobStats) {
   return entry.stats.gid.toString()
 }
 
-function attrs(entry: GlobStats, args: Arguments<LsOptions>) {
+function attrs(
+  entry: GlobStats,
+  args: Arguments<LsOptions>,
+  hasPermissions: boolean,
+  hasSize: boolean,
+  hasUid: boolean,
+  hasGid: boolean,
+  hasMtime: boolean
+) {
   // const language = withLanguage(args.execOptions).language
 
   const wide = args.parsedOptions.l
-  const perms = wide ? [{ value: formatPermissions(entry), outerCSS: outerCSSSecondary }] : []
-  const uid = wide ? [{ value: formatUid(entry), outerCSS: outerCSSSecondary, css: cssSecondary }] : []
-  const gid = wide ? [{ value: formatGid(entry), outerCSS: outerCSSSecondary, css: cssSecondary }] : []
-  const size = wide
-    ? [{ value: prettyBytes(entry.stats.size).replace(/\s/g, ''), outerCSS: `${outerCSSSecondary} text-right` }]
-    : []
-  const lastMod = wide
-    ? [
-        {
-          value: prettyTime(entry.stats.mtimeMs),
-          outerCSS: outerCSSLesser,
-          css: `${cssLesser} ${cssSecondary} pre-wrap`
-        }
-      ]
-    : []
+  const perms = wide && hasPermissions ? [{ value: formatPermissions(entry), outerCSS: outerCSSSecondary }] : []
+  const uid = wide && hasUid ? [{ value: formatUid(entry), outerCSS: outerCSSSecondary, css: cssSecondary }] : []
+  const gid = wide && hasGid ? [{ value: formatGid(entry), outerCSS: outerCSSSecondary, css: cssSecondary }] : []
+  const size =
+    wide && hasSize
+      ? [{ value: prettyBytes(entry.stats.size).replace(/\s/g, ''), outerCSS: `${outerCSSSecondary} text-right` }]
+      : []
+  const lastMod =
+    wide && hasMtime
+      ? [
+          {
+            value: prettyTime(entry.stats.mtimeMs),
+            outerCSS: outerCSSLesser,
+            css: `${cssLesser} ${cssSecondary} pre-wrap`
+          }
+        ]
+      : []
 
   return perms
     .concat(uid)
@@ -171,12 +181,18 @@ function toTable(entries: GlobStats[], args: Arguments<LsOptions>): HTMLElement
   const rev = args.parsedOptions.r ? -1 : 1
   const sorter = args.parsedOptions.S ? bySize(rev) : args.parsedOptions.t ? byTime(rev) : byLex(rev)
 
+  const hasPermissions = entries.some(_ => _.dirent && _.dirent.permissions)
+  const hasSize = entries.some(_ => _.stats && _.stats.size)
+  const hasUid = entries.some(_ => (_.dirent && _.dirent.username) || (_.stats && _.stats.uid >= 0))
+  const hasGid = entries.some(_ => _.stats && _.stats.gid >= 0)
+  const hasMtime = entries.some(_ => _.stats && _.stats.mtimeMs)
+
   const body = entries.sort(sorter).map(_ => ({
-    name: nameOf(_),
+    name: nameOf(_, args.parsedOptions.l),
     css: cssOf(_),
     onclickExec: 'pexec' as const,
     onclick: `${_.dirent.isDirectory ? 'ls' : 'open'} ${args.REPL.encodeComponent(_.path)}`,
-    attributes: attrs(_, args)
+    attributes: attrs(_, args, hasPermissions, hasSize, hasUid, hasGid, hasMtime)
   }))
 
   if (!args.parsedOptions.l) {
@@ -210,11 +226,11 @@ function toTable(entries: GlobStats[], args: Arguments<LsOptions>): HTMLElement
     container.appendChild(frag)
     return container
   } else {
-    const perms = [{ value: 'Permissions', outerCSS: outerCSSSecondary }]
-    const uid = [{ value: 'User', outerCSS: outerCSSSecondary }]
-    const gid = [{ value: 'Group', outerCSS: outerCSSSecondary }]
-    const size = [{ value: 'Size', outerCSS: `${outerCSSSecondary} text-right` }]
-    const lastMod = [{ value: 'Last Modified', outerCSS: outerCSSLesser, css: cssLesser }]
+    const perms = hasPermissions ? [{ value: 'Permissions', outerCSS: outerCSSSecondary }] : []
+    const uid = hasUid ? [{ value: 'User', outerCSS: outerCSSSecondary }] : []
+    const gid = hasGid ? [{ value: 'Group', outerCSS: outerCSSSecondary }] : []
+    const size = hasSize ? [{ value: 'Size', outerCSS: `${outerCSSSecondary} text-right` }] : []
+    const lastMod = hasMtime ? [{ value: 'Last Modified', outerCSS: outerCSSLesser, css: cssLesser }] : []
 
     const header = {
       name: 'Name',
@@ -228,6 +244,7 @@ function toTable(entries: GlobStats[], args: Arguments<LsOptions>): HTMLElement
     return {
       header,
       body,
+      markdown: true,
       noSort: true,
       noEntityColors: true
     }

plugins/plugin-client-common/src/components/Content/Table/TableCell.tsx

@@ -19,6 +19,7 @@ import * as prettyPrintDuration from 'pretty-ms'
 import { TableCell, DataTableCell } from 'carbon-components-react'
 import { Table as KuiTable, Cell as KuiCell, Row as KuiRow, Tab, REPL } from '@kui-shell/core'
 
+import Markdown from '../Markdown'
 import ErrorCell from './ErrorCell'
 
 /**
@@ -114,7 +115,7 @@ export default function renderCell(table: KuiTable, kuiRow: KuiRow, justUpdated:
               {/red-background/.test(css) ? <ErrorCell /> : undefined}
             </span>
           )}
-          <span className="kui--cell-inner-text">{innerText}</span>
+          <span className="kui--cell-inner-text">{table.markdown ? <Markdown source={innerText} /> : innerText}</span>
         </span>
       </TableCell>
     )

plugins/plugin-client-common/web/scss/components/Table/tables.scss

@@ -40,6 +40,14 @@ body .bx--data-table-container {
   .bx--data-table {
     font-family: var(--font-sans-serif);
 
+    /* markdown */
+    p {
+      padding: 0;
+      font-size: inherit;
+      line-height: inherit;
+      font-weight: inherit;
+    }
+
     /* td [data-key='NAME'],
     td .kui--table-cell-is-name {
       font-weight: 700;

plugins/plugin-client-default/config.d/about.json

@@ -13,10 +13,10 @@
     }
   ],
   "links": [
-    { "label": "Home Page", "href": "http://kui.tools" },
     { "label": "Github", "href": "https://github.com/IBM/kui" },
     { "label": "Bugs", "href": "https://github.com/IBM/kui/issues/new" },
     { "label": "Kubectl Help", "command": "kubectl --help" },
-    { "label": "API Resources", "command": "kubectl api-resources" }
+    { "label": "API Resources", "command": "kubectl api-resources" },
+    { "label": "Kubernetes Notebooks", "command": "ls -l /kui/kubernetes" }
   ]
 }

plugins/plugin-core-support/src/lib/cmds/replay.ts

@@ -30,7 +30,7 @@ import {
  * Schema for a serialized snapshot of the Inputs and Outputs of
  * command executions.
  */
-interface SerializedSnapshot {
+export interface SerializedSnapshot {
   apiVersion: 'kui-shell/v1'
   kind: 'Snapshot'
   spec: Snapshot

plugins/plugin-core-support/src/tutorials/vfs/index.ts

@@ -18,7 +18,8 @@ import TrieSearch from 'trie-search'
 import { basename, dirname, join } from 'path'
 import { Arguments, CodedError, flatten } from '@kui-shell/core'
 import { FStat, VFS, mount } from '@kui-shell/plugin-bash-like/fs'
-import { productName } from '@kui-shell/client/config.d/name.json'
+
+import { SerializedSnapshot } from '../../lib/cmds/replay'
 
 interface Tutorial {
   name: string
@@ -28,23 +29,25 @@ interface Tutorial {
   nameForDisplay: string
 }
 
-interface Entry {
+interface BaseEntry {
   mountPath: string
 }
 
-type Directory = Entry
+type Directory = BaseEntry
 
-interface Leaf extends Entry {
-  data: Record<string, any> // FIXME snapshot type
+interface Leaf extends BaseEntry {
+  data: SerializedSnapshot
 }
 
-function isDirectory(entry: Entry): entry is Directory {
-  return (entry as Leaf).data === undefined
+type Entry = Leaf | Directory
+
+function isLeaf(entry: Entry): entry is Leaf {
+  return (entry as Leaf).data !== undefined
 }
 
-const uid = 0
-const gid = 0
-const username = productName
+const uid = -1
+const gid = -1
+const username = ''
 
 class TutorialVFS implements VFS {
   public readonly mountPath = '/kui'
@@ -83,13 +86,14 @@ class TutorialVFS implements VFS {
   }
 
   private enumerate({ entries }: { entries: Entry[] }) {
-    return entries.map(mount => {
+    return entries.map((mount: Entry) => {
       const name = basename(mount.mountPath)
-      const isFile = !isDirectory(mount)
+      const nameForDisplay = isLeaf(mount) ? mount.data.spec.title || mount.data.spec.description || name : name
+      const isDir = !isLeaf(mount)
 
       return {
         name,
-        nameForDisplay: name,
+        nameForDisplay,
         path: mount.mountPath,
         stats: {
           size: 0,
@@ -99,8 +103,8 @@ class TutorialVFS implements VFS {
           gid
         },
         dirent: {
-          isFile,
-          isDirectory: !isFile,
+          isFile: !isDir,
+          isDirectory: isDir,
           isSymbolicLink: false,
           isSpecial: false,
           isExecutable: false,
@@ -178,8 +182,8 @@ class TutorialVFS implements VFS {
         viewer: 'replay --new-window',
         filepath: entry.mountPath,
         fullpath: entry.mountPath,
-        isDirectory: isDirectory(entry),
-        data: withData && !isDirectory(entry) ? JSON.stringify(entry.data, undefined, 2) : undefined
+        isDirectory: !isLeaf(entry),
+        data: withData && isLeaf(entry) ? JSON.stringify(entry.data, undefined, 2) : undefined
       }
     }
   }