feat: initial support for capturing input files and showing them in the UI

Fixes #5513

Author: starpit

packages/core/src/index.ts

@@ -54,7 +54,9 @@ export {
   MixedResponse,
   isMixedResponse,
   RawResponse,
-  //  ResourceModification,
+  hasSourceReferences,
+  WithSourceReferences,
+  SourceRef,
   MetadataBearingByReference as ResourceByReference,
   MetadataBearingByReferenceWithContent as ResourceByReferenceWithContent,
   isMetadataBearingByReference as isResourceByReference

packages/core/src/models/entity.ts

@@ -185,7 +185,7 @@ export function isRawResponse<Content extends RawContent>(entity: Entity<Content
  */
 export type ScalarResponse<RowType extends Row = Row> =
   | SimpleEntity
-  | Table<RowType>
+  | (Table<RowType> & Partial<WithSourceReferences>)
   | MixedResponse
   | CommentaryResponse
 
@@ -200,6 +200,22 @@ export type StructuredResponse<
   SomeSortOfResource extends MetadataBearing<Content> = MetadataBearing<Content>
 > = ViewableResponse | UsageModel | SomeSortOfResource | RawResponse<Content> | SomeSortOfResource[]
 
+export interface SourceRef {
+  templates: { filepath: string; data: string; isFor: string; kind?: 'source' | 'template'; contentType?: string }[]
+  customization?: { filepath: string; data: string; isFor: string }
+}
+
+export interface WithSourceReferences {
+  kuiSourceRef: SourceRef
+}
+
+export function hasSourceReferences(
+  response: Partial<WithSourceReferences>
+): response is Required<WithSourceReferences> {
+  const trait = response as WithSourceReferences
+  return trait && trait.kuiSourceRef !== undefined
+}
+
 /**
  * A potentially more complex entity with a "spec"
  *

packages/test/src/api/selectors.ts

@@ -239,3 +239,9 @@ export const RADIO_BUTTON = '.kui--radio-table-body .kui--radio-table-row'
 export const RADIO_BUTTON_BY_NAME = (name: string) => `${RADIO_BUTTON}[data-name="${name}"]`
 export const RADIO_BUTTON_IS_SELECTED = '[data-is-selected]'
 export const RADIO_BUTTON_SELECTED = `${RADIO_BUTTON}${RADIO_BUTTON_IS_SELECTED}`
+
+/** SourceRef */
+export const SOURCE_REF_N = (N: number, splitIndex = 1) =>
+  `${PROMPT_BLOCK_N_FOR_SPLIT(N, splitIndex)} .kui--expandable-section`
+export const SOURCE_REF_TOGGLE_N = (N: number, expanded = false, splitIndex = 1) =>
+  `${SOURCE_REF_N(N, splitIndex)} .pf-c-expandable-section__toggle[aria-expanded=${expanded.toString()}]`

packages/test/src/api/util.ts

@@ -166,8 +166,8 @@ export const expectArray = (expected: Array<string>, failFast = true, subset = f
 }
 
 /** get the monaco editor text */
-export const getValueFromMonaco = async (app: Application) => {
-  const selector = '.bx--tab-content[aria-hidden="false"] .monaco-editor-wrapper'
+export const getValueFromMonaco = async (app: Application, container = '.bx--tab-content[aria-hidden="false"]') => {
+  const selector = `${container} .monaco-editor-wrapper`
   try {
     await app.client.waitForExist(selector, CLI.waitTimeout)
   } catch (err) {

plugins/plugin-client-common/i18n/resources_en_US.json

@@ -7,6 +7,10 @@
   "No resources": "No resources",
   "nRows": "{0} rows",
   "nRows1": "1 row",
+  "Show More": "Show More",
+  "Show Less": "Show Less",
+  "Show X": "Show {0}",
+  "Hide X": "Hide {0}",
   "New Tab": "Open a new tab",
   "Duration": "Duration: {0}",
   "Cold Start": "Cold start delay: {0}. {1}",

plugins/plugin-client-common/src/components/Content/Editor/SimpleEditor.tsx

@@ -0,0 +1,140 @@
+/*
+ * Copyright 2020 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react'
+import { editor as Monaco } from 'monaco-editor'
+
+import { eventChannelUnsafe, eventBus } from '@kui-shell/core'
+
+import getKuiFontSize from './lib/fonts'
+import defaultMonacoOptions, { Options as MonacoOptions } from './lib/defaults'
+
+import '../../../../web/scss/components/Editor/Editor.scss'
+
+type Props = Pick<MonacoOptions, 'fontSize'> & {
+  tabUUID: string
+  content: string
+  contentType: string
+  className?: string
+}
+
+interface State {
+  editor: Monaco.ICodeEditor
+  wrapper: HTMLDivElement
+  catastrophicError: Error
+  cleaners: (() => void)[]
+}
+
+export default class SimpleEditor extends React.PureComponent<Props, State> {
+  public constructor(props: Props) {
+    super(props)
+
+    // created below in render() via ref={...} -> initMonaco()
+    this.state = {
+      cleaners: [],
+      editor: undefined,
+      wrapper: undefined,
+      catastrophicError: undefined
+    }
+  }
+
+  public static getDerivedStateFromError(error: Error) {
+    return { catastrophicError: error }
+  }
+
+  public componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('catastrophic error in Editor', error, errorInfo)
+  }
+
+  /** Called whenever we have proposed (props,state); we derive a new State */
+  public static getDerivedStateFromProps(props: Props, state: State) {
+    if (!state.editor && state.wrapper) {
+      // then we are ready to render monaco into the wrapper
+      return SimpleEditor.initMonaco(props, state)
+    } else {
+      return state
+    }
+  }
+
+  /** Called when this component is no longer attached to the document */
+  public componentWillUnmount() {
+    this.destroyMonaco()
+  }
+
+  /** Called when we no longer need the monaco-editor instance */
+  private destroyMonaco() {
+    this.state.cleaners.forEach(cleaner => cleaner())
+  }
+
+  /** Called when we have a ready wrapper (monaco's init requires an wrapper */
+  private static initMonaco(props: Props, state: State): Partial<State> {
+    const cleaners = []
+
+    try {
+      // here we instantiate an editor widget
+      const providedOptions = {
+        value: props.content,
+        readOnly: true,
+        fontSize: props.fontSize,
+        language: props.contentType
+      }
+      const options = Object.assign(defaultMonacoOptions(providedOptions), providedOptions)
+      const editor = Monaco.create(state.wrapper, options)
+
+      state.wrapper['getValueForTests'] = () => {
+        return editor.getValue()
+      }
+
+      const onZoom = () => {
+        editor.updateOptions({ fontSize: getKuiFontSize() })
+      }
+      eventChannelUnsafe.on('/zoom', onZoom)
+      cleaners.push(() => eventChannelUnsafe.off('/zoom', onZoom))
+
+      const onTabLayoutChange = () => {
+        editor.layout()
+      }
+      eventBus.onTabLayoutChange(props.tabUUID, onTabLayoutChange)
+      cleaners.push(() => eventBus.offTabLayoutChange(props.tabUUID, onTabLayoutChange))
+
+      cleaners.push(() => {
+        editor.dispose()
+        const model = editor.getModel()
+        if (model) {
+          model.dispose()
+        }
+      })
+
+      return {
+        editor,
+        cleaners
+      }
+    } catch (err) {
+      console.error('Error initing Monaco: ', err)
+      state.catastrophicError = err
+      return state
+    }
+  }
+
+  public render() {
+    if (this.state.catastrophicError) {
+      return <div className="oops"> {this.state.catastrophicError.toString()}</div>
+    } else {
+      const className = 'monaco-editor-wrapper' + (this.props.className ? ' ' + this.props.className : '')
+      return <div className={className} ref={wrapper => this.setState({ wrapper })}></div>
+    }
+  }
+}

plugins/plugin-client-common/src/components/Content/Editor/index.tsx

@@ -27,7 +27,6 @@ import {
   ToolbarText,
   ToolbarProps,
   MultiModalResponse,
-  TabLayoutChangeEvent,
   eventChannelUnsafe,
   eventBus,
   i18n
@@ -294,10 +293,8 @@ export default class Editor extends React.PureComponent<Props, State> {
       eventChannelUnsafe.on('/zoom', onZoom)
       cleaners.push(() => eventChannelUnsafe.off('/zoom', onZoom))
 
-      const onTabLayoutChange = (evt: TabLayoutChangeEvent) => {
-        if (!evt.isSidecarNowHidden) {
-          editor.layout()
-        }
+      const onTabLayoutChange = () => {
+        editor.layout()
       }
       eventBus.onTabLayoutChange(props.tabUUID, onTabLayoutChange)
       cleaners.push(() => eventBus.offTabLayoutChange(props.tabUUID, onTabLayoutChange))

plugins/plugin-client-common/src/components/Content/Editor/lib/defaults.ts

@@ -20,6 +20,7 @@ import getKuiFontSize from './fonts'
 export interface Options {
   readOnly?: boolean
   simple?: boolean
+  fontSize?: number
 }
 
 export default (options: Options): editor.IEditorConstructionOptions => ({
@@ -35,7 +36,7 @@ export default (options: Options): editor.IEditorConstructionOptions => ({
   scrollBeyondLastColumn: 2,
   // cursorStyle: 'block',
   fontFamily: 'var(--font-monospace)',
-  fontSize: getKuiFontSize(),
+  fontSize: options.fontSize || getKuiFontSize(),
 
   // specifics for readOnly mode
   glyphMargin: !options.readOnly, // needed for error indicators

plugins/plugin-client-common/src/components/Views/Terminal/Block/Input.tsx

@@ -15,20 +15,34 @@
  */
 
 import * as React from 'react'
+import { basename } from 'path'
 import { dots as spinnerFrames } from 'cli-spinners'
-import { Tab as KuiTab, inBrowser, doCancel, i18n } from '@kui-shell/core'
+import { Tab as KuiTab, inBrowser, doCancel, i18n, isTable, hasSourceReferences, eventBus } from '@kui-shell/core'
 
 import onPaste from './OnPaste'
 import onKeyDown from './OnKeyDown'
 import onKeyPress from './OnKeyPress'
 import KuiContext from '../../../Client/context'
 import { TabCompletionState } from './TabCompletion'
 import ActiveISearch, { onKeyUp } from './ActiveISearch'
-import { BlockModel, isActive, isProcessing, isFinished, hasCommand, isEmpty, hasUUID, hasValue } from './BlockModel'
+import {
+  BlockModel,
+  isActive,
+  isProcessing,
+  isFinished,
+  hasCommand,
+  isEmpty,
+  isWithCompleteEvent,
+  hasUUID,
+  hasValue
+} from './BlockModel'
 import { BlockViewTraits } from './'
 
-import DropDown, { DropDownAction } from '../../../spi/DropDown'
 import Tag from '../../../spi/Tag'
+import ExpandableSection from '../../../spi/ExpandableSection'
+import DropDown, { DropDownAction } from '../../../spi/DropDown'
+
+const SimpleEditor = React.lazy(() => import('../../../Content/Editor/SimpleEditor'))
 
 const strings = i18n('plugin-client-common')
 const strings2 = i18n('plugin-client-common', 'screenshot')
@@ -198,17 +212,59 @@ export abstract class InputProvider<S extends State = State> extends React.PureC
     }
   }
 
+  protected sourceRef() {
+    const { model } = this.props
+
+    if (model && isWithCompleteEvent(model) && isTable(model.response) && hasSourceReferences(model.response)) {
+      const sourceRef = model.response.kuiSourceRef
+      return (
+        <div className="repl-input-sourceref">
+          <div className="repl-context"></div>
+          <div className="flex-layout flex-fill">
+            {sourceRef.templates.map((_, idx) => {
+              const name = basename(_.filepath)
+              return (
+                <ExpandableSection
+                  key={idx}
+                  className="flex-fill"
+                  showMore={strings('Show X', name)}
+                  showLess={strings('Hide X', name)}
+                  onToggle={() => eventBus.emitTabLayoutChange(this.props.tab.uuid)}
+                >
+                  <SimpleEditor
+                    tabUUID={this.props.tab.uuid}
+                    content={_.data}
+                    contentType={_.contentType}
+                    className="kui--source-ref-editor kui--inverted-color-context"
+                    fontSize={12}
+                  />
+                </ExpandableSection>
+              )
+            })}
+          </div>
+        </div>
+      )
+    }
+
+    // if (this.state.sourceRef) {
+    //      return 'hi'
+    //    }
+  }
+
   public render() {
     return (
-      <div className={'repl-input' + (this.state && this.state.isearch ? ' kui--isearch-active' : '')}>
-        {this.prompt()}
-        <div className="kui--input-and-context">
-          {this.props.children}
-          {this.input()}
-          {this.status()}
+      <React.Fragment>
+        <div className={'repl-input' + (this.state && this.state.isearch ? ' kui--isearch-active' : '')}>
+          {this.prompt()}
+          <div className="kui--input-and-context">
+            {this.props.children}
+            {this.input()}
+            {this.status()}
+          </div>
+          {this.state && this.state.tabCompletion && this.state.tabCompletion.render()}
         </div>
-        {this.state && this.state.tabCompletion && this.state.tabCompletion.render()}
-      </div>
+        {this.sourceRef()}
+      </React.Fragment>
     )
   }
 }