feat(plugins/plugin-client-common): support client option for hero na…

…mes in sidecar

Fixes #4909

packages/test/src/api/mmr.ts

@@ -61,9 +61,10 @@ export class TestMMR {
     nameHash?: string
     prettyName?: string
     onclick?: {
-      name: ClickExpect
+      name?: ClickExpect
       nameHash?: ClickExpect
     }
+    heroName?: boolean
   }) {
     const { command, testName, metadata } = this.param
     const testClickResult = this.testClickResult
@@ -73,7 +74,7 @@ export class TestMMR {
       before(Common.before(this))
       after(Common.after(this))
 
-      const { nameHash, prettyName, onclick } = opt
+      const { nameHash, prettyName, onclick, heroName } = opt
 
       let cmdIdx = 0 // keep track of the command execution number
 
@@ -86,11 +87,11 @@ export class TestMMR {
           })
           .then(ReplExpect.ok)
           .then(SidecarExpect.open)
-          .then(SidecarExpect.name(showName))
+          .then(heroName ? SidecarExpect.heroName(showName) : SidecarExpect.name(showName))
           .then(app => (nameHash ? SidecarExpect.namehash(nameHash) : app))
           .catch(Common.oops(this, true)))
 
-      if (onclick.name) {
+      if (onclick && onclick.name) {
         it('should click the name part of sidecar and expect the command shows in repl', async () => {
           try {
             await this.app.client.click(Selectors.SIDECAR_TITLE)
@@ -101,7 +102,7 @@ export class TestMMR {
         })
       }
 
-      if (onclick.nameHash) {
+      if (onclick && onclick.nameHash) {
         it('should click the namehash part of sidecar and expect the command shows in repl', async () => {
           try {
             await this.app.client.click(Selectors.SIDECAR_ACTIVATION_TITLE)

packages/test/src/api/selectors.ts

@@ -16,11 +16,13 @@ export const SIDECAR = `${SIDECAR_BASE}.visible:not(.minimized)`
 export const SIDECAR_WITH_FAILURE = `${SIDECAR_BASE}.visible.activation-success-false`
 export const SIDECAR_ACTIVATION_TITLE = `${SIDECAR} .kui--sidecar-entity-name-hash .bx--link`
 export const SIDECAR_TITLE = `${SIDECAR} .kui--sidecar-entity-name .bx--link`
+export const SIDECAR_HERO_TITLE = `${SIDECAR} .sidecar-header .sidecar-header-name`
 export const SIDECAR_LEFTNAV_TITLE = `${SIDECAR} .sidecar-header-name-content .bx--side-nav__submenu-title`
 export const SIDECAR_HEADER_NAVIGATION = `${SIDECAR} .kui--sidecar--titlebar-navigation`
 export const SIDECAR_BREADCRUMBS = `${SIDECAR_HEADER_NAVIGATION} .bx--breadcrumb .bx--breadcrumb-item .bx--link`
 export const SIDECAR_PACKAGE_NAME_TITLE = `${SIDECAR} .kui--sidecar-entity-namespace .bx--link`
 export const SIDECAR_POPUP_TITLE = SIDECAR_TITLE
+export const SIDECAR_POPUP_HERO_TITLE = SIDECAR_HERO_TITLE
 export const SIDECAR_KIND = `${SIDECAR} .kui--sidecar-kind .bx--link`
 export const SIDECAR_CONTENT = `${SIDECAR} .sidecar-content`
 export const SIDECAR_WEB_ACTION_URL = `${SIDECAR} .sidecar-header .entity-web-export-url.has-url`

packages/test/src/api/sidecar-expect.ts

@@ -156,6 +156,8 @@ const show = (expected: string, selector: string) => async (app: Application) =>
 
 export const name = (expectedName: string) => show(expectedName, Selectors.SIDECAR_TITLE)
 
+export const heroName = (expectedName: string) => show(expectedName, Selectors.SIDECAR_HERO_TITLE)
+
 export const namehash = (expectedNameHash: string) => show(expectedNameHash, Selectors.SIDECAR_ACTIVATION_TITLE)
 
 export const namespace = (expectedNamespace: string) => show(expectedNamespace, Selectors.SIDECAR_PACKAGE_NAME_TITLE)
@@ -241,7 +243,7 @@ export const yaml = (content: object) => async (app: Application) => {
 
 export async function popupTitle(app: Application, expectedTitle: string) {
   return app.client.waitUntil(async () => {
-    const actualTitle = await app.client.getText(Selectors.SIDECAR_POPUP_TITLE)
+    const actualTitle = await app.client.getText(Selectors.SIDECAR_POPUP_HERO_TITLE)
     return actualTitle === expectedTitle
   }, waitTimeout)
 }

plugins/plugin-client-common/src/components/Client/Kui.tsx

@@ -101,7 +101,7 @@ export class Kui extends React.PureComponent<Props, State> {
     }
 
     try {
-      this.state = Object.assign({}, this.defaultSessionBehavior(), props, {
+      this.state = Object.assign({}, this.defaultSessionBehavior(), this.defaultFeatureFlag(), props, {
         isBootstrapped: !!props.noBootstrap
       })
       debug('initial state', this.state)
@@ -113,6 +113,12 @@ export class Kui extends React.PureComponent<Props, State> {
     }
   }
 
+  private defaultFeatureFlag() {
+    return {
+      sidecarName: 'breadcrumb'
+    }
+  }
+
   /**
    * For browser-based clients, this defines the default UI for
    * session initialization.
@@ -161,9 +167,11 @@ export class Kui extends React.PureComponent<Props, State> {
 
     if (this.props.isPopup && this.props.commandLine) {
       return (
-        <React.Suspense fallback={<div />}>
-          <Popup commandLine={this.props.commandLine}>{this.props.children}</Popup>
-        </React.Suspense>
+        <KuiContext.Provider value={this.state}>
+          <React.Suspense fallback={<div />}>
+            <Popup commandLine={this.props.commandLine}>{this.props.children}</Popup>
+          </React.Suspense>
+        </KuiContext.Provider>
       )
     } else {
       const bottom = !!this.props.bottomInput && <InputStripe>{this.props.bottomInput}</InputStripe>

plugins/plugin-client-common/src/components/Client/props/FeatureFlags.ts

@@ -21,6 +21,9 @@ type FeatureFlags = {
   /** [Optional] disable table title? */
   disableTableTitle?: boolean
 
+  /** [Optional] show sidecar name as breadcrumb or hero text, default: 'breadcrumb' */
+  sidecarName?: 'breadcrumb' | 'heroText'
+
   /** [Optional] Enable Split Terminals? */
   splitTerminals?: boolean
 

plugins/plugin-client-common/src/components/Views/Sidecar/TopNavSidecar.tsx

@@ -38,6 +38,7 @@ import Badge from './Badge'
 import ToolbarContainer from './ToolbarContainer'
 import { BreadcrumbView } from '../../spi/Breadcrumb'
 import { BaseSidecar, Props, SidecarHistoryEntry, cwd } from './BaseSidecar'
+import KuiContext from '../../Client/context'
 
 import '../../../../web/css/static/ToolbarButton.scss'
 
@@ -130,6 +131,8 @@ export function getStateFromMMR(
  *
  */
 export default class TopNavSidecar extends BaseSidecar<MultiModalResponse, HistoryEntry> {
+  public static contextType = KuiContext
+
   public constructor(props: Props) {
     super(props)
 
@@ -178,16 +181,29 @@ export default class TopNavSidecar extends BaseSidecar<MultiModalResponse, Histo
     return { 'flex-direction': 'column' }
   }
 
-  private namePart() {
+  /** return the name from the response */
+  private name(): string {
     return (
-      <div className="header-left-bits">
-        <div className="sidecar-header-text">
-          <div className="sidecar-header-name" data-base-class="sidecar-header-name">
-            <div className="sidecar-header-name-content" data-base-class="sidecar-header-name-content"></div>
+      this.current.response &&
+      (this.current.response.prettyName ||
+        (this.current.response.metadata ? this.current.response.metadata.name : undefined))
+    )
+  }
+
+  private namePart() {
+    if (this.context.sidecarName === 'heroText') {
+      return (
+        <div className="header-left-bits">
+          <div className="sidecar-header-text">
+            <div className="sidecar-header-name" data-base-class="sidecar-header-name">
+              <div className="sidecar-header-name-content" data-base-class="sidecar-header-name-content">
+                {this.name()}
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-    )
+      )
+    }
   }
 
   /** Tell the world that we have changed the focused mode */
@@ -326,18 +342,17 @@ export default class TopNavSidecar extends BaseSidecar<MultiModalResponse, Histo
     return { label: kind, command: onclick && onclick.kind, className: 'kui--sidecar-kind' }
   }
 
+  /** show name as breadcrumb when not showing context as hero text in sidecar header  */
   private nameBreadcrumb(): BreadcrumbView {
-    const name =
-      this.current.response &&
-      (this.current.response.prettyName ||
-        (this.current.response.metadata ? this.current.response.metadata.name : undefined))
-    const { onclick } = this.current.response
-
-    return {
-      label: name,
-      command: onclick && onclick.name,
-      isCurrentPage: true,
-      className: 'kui--sidecar-entity-name'
+    if (this.context.sidecarName === 'breadcrumb') {
+      const { onclick } = this.current.response
+
+      return {
+        label: this.name(),
+        command: onclick && onclick.name,
+        isCurrentPage: true,
+        className: 'kui--sidecar-entity-name'
+      }
     }
   }
 

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

@@ -148,7 +148,7 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
   }
 
   private allocateUUIDForScrollback() {
-    if (this.props.config.splitTerminals) {
+    if (this.props.config.splitTerminals && !isPopup()) {
       return `${this.props.uuid}_${uuid()}`
     } else {
       return this.props.uuid
@@ -391,7 +391,7 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
       eventChannelUnsafe.off(`/terminal/clear/${state.uuid}`, clear)
     })
 
-    if (this.props.config.splitTerminals) {
+    if (this.props.config.splitTerminals && !isPopup()) {
       const split = this.onSplit.bind(this)
       onSplit(state.uuid, split)
       state.cleaners.push(() => offSplit(state.uuid, split))

plugins/plugin-client-common/web/css/static/sidecar-main.css

@@ -21,6 +21,11 @@
     margin: 0.75em 0 0;
   }
 
+  .sidecar-header-text {
+    margin: 0 0 0.75em 0;
+    font-size: 22px;
+  }
+
   .kui--sidecar-overflow {
     font-size: 1em;
   }

plugins/plugin-client-test/src/index.tsx

@@ -33,7 +33,7 @@ import '../web/css/static/test.scss'
  */
 export default function TestClient(props: KuiProps) {
   return (
-    <Kui {...props} disableTableTitle>
+    <Kui {...props} disableTableTitle sidecarName="heroText">
       <ContextWidgets>
         <CounterWidget idx={0} />
       </ContextWidgets>

plugins/plugin-client-test/src/test/response/mmr-mode.ts

@@ -148,7 +148,7 @@ testReact.toolbarText({
   text: 'hello this is iter',
   exact: false
 })
-testDefault.name({ onclick: { name: { command: 'test string', expect: 'hello world' } } })
+testDefault.name({ heroName: true })
 testDefault.modes(expectModes, expectModes[0], { testWindowButtons: true })
 testDefault2.modes(expectModes2, expectModes2[0])
 testDefault3.modes(expectModes3, expectModes3[0])

plugins/plugin-client-test/src/test/response/mmr-name.ts

@@ -39,17 +39,17 @@ const testPrettyName = new TestMMR({
 
 testMetadataName.name({
   nameHash: 'this is the namehash part',
+  heroName: true,
   onclick: {
-    name: { command: 'test string', expect: 'hello world' },
     nameHash: { command: 'test string --grumble 1', expect: 'hello world 1' }
   }
 })
 
 testPrettyName.name({
   nameHash: 'this is the namehash part',
   prettyName: 'this is the prettyName part',
+  heroName: true,
   onclick: {
-    name: { command: 'test string', expect: 'hello world' },
     nameHash: { command: 'test string --grumble 1', expect: 'hello world 1' }
   }
 })

plugins/plugin-client-test/src/test/response/mmr-namespace.ts

@@ -33,8 +33,8 @@ const test = new TestMMR({
 
 test.name({
   nameHash: 'this is the namehash part',
+  heroName: true,
   onclick: {
-    name: { command: 'test string --grumble 1', expect: 'hello world 1' },
     nameHash: { command: 'test string --grumble 3', expect: 'hello world 3' }
   }
 })

plugins/plugin-client-test/src/test/response/topnav-backbutton.ts

@@ -120,7 +120,7 @@ describe('TopNavSidecar back button', function(this: Common.ISuite) {
       return CLI.command(firstCmd, this.app)
         .then(ReplExpect.justOK)
         .then(SidecarExpect.open)
-        .then(SidecarExpect.showingTopNav('this is the name part'))
+        .then(SidecarExpect.heroName('this is the name part'))
         .then(
           () =>
             !startOfBuffer
@@ -143,7 +143,7 @@ describe('TopNavSidecar back button', function(this: Common.ISuite) {
       return CLI.command(secondCmd, this.app)
         .then(ReplExpect.justOK)
         .then(SidecarExpect.open)
-        .then(SidecarExpect.showingTopNav('this is the name part'))
+        .then(SidecarExpect.heroName('this is the name part'))
         .then(SidecarExpect.badge('badge1'))
         .then(SidecarExpect.button({ mode: 'button1', label: 'button1 label' }))
         .then(() => this.app.client.waitForVisible(Selectors.SIDECAR_BACK_BUTTON)) // back button IS visible