fix(plugins/plugin-client-common): Tree Component tweaks

- Tree View: use fix width, and only render the selected tree node as active
- Tree Events: fix background color, border-top, message formatting and use fix-height
- Tree View Text: fix font-family

Fixes #6158
Fixes #6157

Author: myan9

plugins/plugin-client-common/src/components/Content/Events.tsx

@@ -181,10 +181,10 @@ export default class Events extends React.PureComponent<Props, State> {
 
           const kind = kindCol !== undefined ? row[kindCol].value : ''
 
-          const ago = agos ? `[${agos[idx]}]` : ''
+          const ago = agos ? `[[${agos[idx]}]]()` : ''
 
           return {
-            message: `${ago}${name}${message}`,
+            message: `${ago}${name} ${message}`,
             involvedObjects: {
               name: row[nameCol].value,
               kind
@@ -248,7 +248,7 @@ export default class Events extends React.PureComponent<Props, State> {
         return streams.map(({ message }, idx) => (
           <div key={`${message}-${idx}`} className="kui--tree-event-messages">
             <div className="kui--tree-event-message">
-              <Markdown source={message} noExternalLinks repl={this.props.tab.REPL} />
+              <Markdown tab={this.props.tab} source={message} noExternalLinks repl={this.props.tab.REPL} />
             </div>
           </div>
         ))

plugins/plugin-client-common/src/components/Content/Markdown.tsx

@@ -80,7 +80,6 @@ export default class Markdown extends React.PureComponent<Props> {
           link: props => {
             const isLocal = !/^http/i.test(props.href)
             const target = !isLocal ? '_blank' : undefined
-            const href = isLocal ? '#' : props.href
             const onClick = !isLocal
               ? (evt: React.MouseEvent) => evt.stopPropagation()
               : async (evt: React.MouseEvent) => {
@@ -100,18 +99,23 @@ export default class Markdown extends React.PureComponent<Props> {
                     if (elt) {
                       return elt.scrollIntoView()
                     }
-                  } else if (this.props.fullpath) {
-                    const absoluteHref = join(dirname(this.props.fullpath), props.href)
-                    const relativeToCWD = relative(process.cwd() || process.env.PWD, absoluteHref)
-                    file = relativeToCWD
+                  } else if (file) {
+                    if (this.props.fullpath) {
+                      const absoluteHref = join(dirname(this.props.fullpath), props.href)
+                      const relativeToCWD = relative(process.cwd() || process.env.PWD, absoluteHref)
+                      file = relativeToCWD
+                    }
+
+                    return this.props.repl.pexec(`open ${this.props.repl.encodeComponent(file)}`)
                   }
-                  return this.props.repl.pexec(`open ${this.props.repl.encodeComponent(file)}`)
                 }
 
-            if (!isLocal && this.props.noExternalLinks) {
-              return <span className={this.props.className}>{href}</span>
+            if (!props.href) {
+              return <a className={this.props.className}>{props.children}</a>
+            } else if (!isLocal && this.props.noExternalLinks) {
+              return <span className={this.props.className}>{props.href}</span>
             } else {
-              return <Link {...props} href={href} target={target} onClick={onClick} />
+              return <Link {...props} href={props.href} target={target} onClick={onClick} />
             }
           },
           code: props => (

plugins/plugin-client-common/src/components/Content/Tree.tsx

@@ -30,15 +30,15 @@ type Props = {
 }
 
 interface State {
-  activeItems: TreeItem[]
+  activeItem: TreeItem
 }
 
 export default class KuiTreeView extends React.PureComponent<Props, State> {
   public constructor(props) {
     super(props)
 
     this.state = {
-      activeItems: [this.props.data[0]]
+      activeItem: this.props.data[0]
     }
   }
 
@@ -47,8 +47,8 @@ export default class KuiTreeView extends React.PureComponent<Props, State> {
     return (
       <React.Suspense fallback={<div />}>
         <Editor
-          key={this.state.activeItems[0].id}
-          content={{ content: this.state.activeItems[0].content, contentType: this.state.activeItems[0].contentType }}
+          key={this.state.activeItem.id}
+          content={{ content: this.state.activeItem.content, contentType: this.state.activeItem.contentType }}
           readOnly={false}
           sizeToFit
           response={this.props.response}
@@ -63,10 +63,10 @@ export default class KuiTreeView extends React.PureComponent<Props, State> {
     return (
       <TreeView
         data={this.props.data}
-        activeItems={this.state.activeItems}
-        onSelect={(_, treeViewItem, parentItem) => {
+        activeItems={[this.state.activeItem]}
+        onSelect={(_, treeViewItem) => {
           this.setState({
-            activeItems: [treeViewItem as TreeItem, parentItem as TreeItem]
+            activeItem: treeViewItem as TreeItem
           })
         }}
         hasBadges
@@ -75,15 +75,15 @@ export default class KuiTreeView extends React.PureComponent<Props, State> {
   }
 
   private events() {
-    if (this.state.activeItems[0].eventArgs) {
-      const { command, schema } = this.state.activeItems[0].eventArgs
+    if (this.state.activeItem.eventArgs) {
+      const { command, schema } = this.state.activeItem.eventArgs
 
       return (
         <Events
           tab={this.props.tab}
           command={command}
           schema={schema}
-          involvedObjects={this.state.activeItems[0].extends}
+          involvedObjects={this.state.activeItem.extends}
         />
       )
     }

plugins/plugin-client-common/src/components/spi/TreeView/index.tsx

@@ -17,8 +17,6 @@
 import React from 'react'
 import { TreeView, TreeViewProps } from '@patternfly/react-core'
 
-import '../../../../web/scss/components/TreeView/PatternFly.scss'
-
 export default function KuiTreeView(props: TreeViewProps): React.ReactElement {
   return <TreeView {...props} />
 }

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

@@ -65,7 +65,7 @@ $inter-message-spacing: 0.1875rem;
   p {
     line-height: initial;
     white-space: pre-wrap;
-    font-family: monospace;
+    font-family: var(--font-monospace);
     font-size: 0.75rem;
     padding: 0;
   }

plugins/plugin-client-common/web/scss/components/Tree/index.scss

@@ -25,6 +25,7 @@
   }
 
   @include TreeViewNav {
+    width: 19rem;
     background-color: var(--color-sidecar-header);
 
     @include TreeViewItemNotSelected {
@@ -38,7 +39,10 @@
   }
 
   .kui--tree-events {
-    background-color: var(--color-base03);
+    background-color: var(--color-base00);
+    border-top: 1px soild var(--color-base02);
+    overflow-y: auto;
+    height: 9rem;
 
     .kui--tree-event-messages:first-child {
       .kui--tree-event-message {