feat: a new model NavResponse supporting side navigation menu

Fixes #3659

Author: myan9

packages/core/src/index.ts

@@ -177,6 +177,7 @@ export {
   Mode as MultiModalMode,
   MultiModalResponse
 } from './models/mmr/types'
+export { NavResponse, isNavResponse } from './models/NavResponse'
 export { isMultiModalResponse } from './models/mmr/is'
 export {
   Content,

packages/core/src/main/headless-pretty-print.ts

@@ -25,6 +25,7 @@ import ElementMimic from '../util/element-mimic'
 import { isTable, Row } from '../webapp/models/table'
 import { isMixedResponse, isMessageBearingEntity, Entity } from '../models/entity'
 import { isMultiModalResponse } from '../models/mmr/is'
+import { isNavResponse } from '../models/NavResponse'
 import { isHTML, isPromise } from '../util/types'
 
 const log = console.log
@@ -398,7 +399,7 @@ export const print = (
           stream.write('\n')
         })
         return logger(colors.green(ok))
-      } else if (isMultiModalResponse(msg)) {
+      } else if (isMultiModalResponse(msg) || isNavResponse(msg)) {
         throw new Error('cannot format this response in headless mode')
       } else if (Array.isArray(msg)) {
         // msg is an array of stuff

packages/core/src/models/NavResponse.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 { Entity } from './entity'
+import { isMultiModalResponse } from './mmr/is'
+import { MultiModalResponse } from './mmr/types'
+
+/**
+ * A `NavResponse` is a collection of `MultiModalResponse` with menu navigation
+ *
+ */
+export type NavResponse = Record<string, MultiModalResponse>
+
+export function isNavResponse(entity: Entity): entity is NavResponse {
+  const nav = entity as NavResponse
+  return (
+    typeof nav === 'object' &&
+    Object.keys(nav).length !== 0 &&
+    Object.keys(nav).every(menu => isMultiModalResponse(nav[menu]))
+  )
+}

packages/core/src/models/entity.ts

@@ -18,6 +18,7 @@ import { Table, Row, isTable } from '../webapp/models/table'
 import { ToolbarText } from '../webapp/views/toolbar-text'
 import { UsageModel } from '../core/usage-error'
 import { MultiModalResponse } from './mmr/types'
+import { NavResponse } from './NavResponse'
 import Presentation from '../webapp/views/presentation'
 
 export interface MessageBearingEntity {
@@ -191,6 +192,7 @@ export type Entity<
   | ResourceModification
   | MixedResponse
   | MultiModalResponse
+  | NavResponse
   | LowLevelLoop
   | UsageModel
   | Meta

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

@@ -1,11 +1,15 @@
 {
-  "modes": [
-    {
-      "mode": "about",
-      "content": "about:content",
-      "contentType": "text/markdown"
-    },
-    { "mode": "tutorial", "label": "Getting Started", "contentFrom": "tutorial play @tutorials/getting-started" },
-    { "mode": "version", "contentFrom": "version --full" }
-  ]
+  "nav": {
+    "Kui": {
+      "modes": [
+        {
+          "mode": "about",
+          "content": "about:content",
+          "contentType": "text/markdown"
+        },
+        { "mode": "tutorial", "label": "Getting Started", "contentFrom": "tutorial play @tutorials/getting-started" },
+        { "mode": "version", "contentFrom": "version --full" }
+      ]
+    }
+  }
 }

plugins/plugin-core-support/about/src/about.ts

@@ -21,7 +21,7 @@ import {
   i18n,
   inElectron,
   MultiModalMode as Mode,
-  MultiModalResponse,
+  NavResponse,
   Presentation,
   Table,
   isStringWithOptionalContentType
@@ -45,39 +45,43 @@ async function getName(): Promise<string> {
  * @return a MultiModalResponse for `about`
  *
  */
-const aboutWindow = async (): Promise<MultiModalResponse> => {
-  const [name, modesFromAbout] = await Promise.all([
-    getName(),
-    import('@kui-shell/client/config.d/about.json').then(_ => _.modes as Mode[])
-  ])
-
-  const modes = modesFromAbout.map(
-    (modeFromAbout): Mode => {
-      // translate the label
-      const label = clientStrings(modeFromAbout.label || modeFromAbout.mode)
-
-      if (isStringWithOptionalContentType(modeFromAbout)) {
-        return Object.assign({}, modeFromAbout, {
-          label,
-          content: clientStrings(modeFromAbout.content) // translate content string
-        })
-      } else {
-        return Object.assign({}, modeFromAbout, {
-          label
-        })
+const aboutWindow = async (): Promise<NavResponse> => {
+  const [name, about] = await Promise.all([getName(), import('@kui-shell/client/config.d/about.json').then(_ => _.nav)])
+
+  const fullAbout = {}
+
+  for (const [title, mmr] of Object.entries(about)) {
+    const modesFromAbout = mmr.modes
+    const modes = modesFromAbout.map(
+      (modeFromAbout): Mode => {
+        // translate the label
+        const label = clientStrings(modeFromAbout.label || modeFromAbout.mode)
+
+        if (isStringWithOptionalContentType(modeFromAbout)) {
+          return Object.assign({}, modeFromAbout, {
+            label,
+            content: clientStrings(modeFromAbout.content) // translate content string
+          })
+        } else {
+          return Object.assign({}, modeFromAbout, {
+            label
+          })
+        }
       }
-    }
-  )
-
-  return {
-    kind: 'about',
-    presentation:
-      (document.body.classList.contains('subwindow') && Presentation.SidecarFullscreen) || Presentation.SidecarThin,
-    modes,
-    metadata: {
-      name
-    }
+    )
+
+    Object.assign(fullAbout, {
+      [title]: {
+        kind: 'about',
+        modes,
+        presentation:
+          (document.body.classList.contains('subwindow') && Presentation.SidecarFullscreen) || Presentation.SidecarThin,
+        metadata: { name }
+      }
+    })
   }
+
+  return fullAbout
 }
 
 interface VersionOptions extends ParsedOptions {

plugins/plugin-sidecar/src/preload.ts

@@ -20,9 +20,10 @@ import {
   isHeadless,
   PreloadRegistration,
   PreloadRegistrar,
-  Presentation,
   isMultiModalResponse,
   MultiModalResponse,
+  NavResponse,
+  isNavResponse,
   REPL
 } from '@kui-shell/core'
 
@@ -37,8 +38,8 @@ const registration: PreloadRegistration = async (registrar: PreloadRegistrar) =>
 
     if (!isPopup()) {
       registrar.registerComponent({
-        when: response => isMultiModalResponse(response) && response.presentation === Presentation.SidecarThin,
-        render: async (entity: MultiModalResponse, tab: Tab, repl: REPL) => {
+        when: isNavResponse,
+        render: async (entity: NavResponse, tab: Tab, repl: REPL) => {
           return import(/* webpackMode: "lazy" */ './view/react2kui').then(_ => _.leftnav(entity, tab, repl))
         },
         priority: 10

plugins/plugin-sidecar/src/view/components/BaseSidecar.tsx

@@ -0,0 +1,75 @@
+/*
+ * 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 { REPL, getTabId, eventBus, KResponse, Tab as KuiTab } from '@kui-shell/core'
+
+import TitleBar from './TitleBar'
+
+import '../../../web/css/static/sidecar.css'
+import '../../../web/css/static/sidecar-main.css'
+
+export interface Props<R extends KResponse> {
+  repl: REPL
+  tab: KuiTab
+  response: R
+}
+
+export abstract class BaseSidecar<R extends KResponse, State> extends React.PureComponent<Props<R>, State> {
+  protected containerStyle() {
+    return { display: 'flex', flex: 1, 'overflow-y': 'hidden', 'flex-direction': 'column' }
+  }
+
+  protected onMaximize() {
+    eventBus.emit(`/sidecar/maximize/${getTabId(this.props.tab)}`, this.props.tab)
+  }
+
+  protected onRestore() {
+    eventBus.emit(`/sidecar/restore/${getTabId(this.props.tab)}`, this.props.tab)
+  }
+
+  protected onMinimize() {
+    eventBus.emit(`/sidecar/minimize/${getTabId(this.props.tab)}`, this.props.tab)
+  }
+
+  protected onClose() {
+    eventBus.emit(`/sidecar/close/${getTabId(this.props.tab)}`, this.props.tab)
+  }
+
+  protected viewId() {
+    return 'kui-default-sidecar'
+  }
+
+  protected isFixedWidth() {
+    return false
+  }
+
+  protected title(kind?: string, namespace?: string, fixedWidth = true, onClickNamespace?: () => void) {
+    return (
+      <TitleBar
+        fixedWidth={fixedWidth}
+        kind={kind}
+        namespace={namespace}
+        onClickNamespace={onClickNamespace}
+        onScreenshot={() => this.props.repl.pexec('screenshot sidecar')}
+        onMaximize={this.onMaximize.bind(this)}
+        onRestore={this.onRestore.bind(this)}
+        onMinimize={this.onMinimize.bind(this)}
+        onClose={this.onClose.bind(this)}
+      />
+    )
+  }
+}