feat(plugins/plugin-client-common): noTopTabs, allowing clients to use the sidebar instead of top tabs

Author: starpit

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

@@ -301,6 +301,7 @@ export class Kui extends React.PureComponent<Props, State> {
                 title={this.props.initialTabTitle}
                 onTabReady={this.state.commandLine && this._onTabReady}
                 closeableTabs={this.props.closeableTabs}
+                noTopTabs={this.props.noTopTabs}
                 guidebooks={this.props.guidebooks}
                 guidebooksCommand={this.props.guidebooksCommand}
                 guidebooksExpanded={this.props.guidebooksExpanded}

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

@@ -47,12 +47,15 @@ type Props = TabContentOptions &
   TopTabStripeConfiguration &
   BrandingProps &
   GuidebookProps &
-  Pick<CommonProps, 'closeableTabs'>
+  Pick<CommonProps, 'closeableTabs' | 'noTopTabs'>
 
 interface State {
   /** hamburger menu expanded? */
   isSidebarOpen: boolean
 
+  /** in noTopTabs mode, we indicate selected guidebook in the NavItem below */
+  currentGuidebook?: string
+
   /** list of current tabs; one TabContent for each */
   tabs: TabModel[]
 
@@ -296,6 +299,7 @@ export default class TabContainer extends React.PureComponent<Props, State> {
         needsSidebar={this.needsSidebar}
         isSidebarOpen={this.state.isSidebarOpen}
         onToggleSidebar={this.toggleSidebar}
+        noTopTabs={this.props.noTopTabs}
         closeableTabs={this.state.tabs.length > 1 && (this.props.closeableTabs || !isReadOnlyClient())}
       />
     )
@@ -344,15 +348,25 @@ export default class TabContainer extends React.PureComponent<Props, State> {
   }
 
   private sidebar() {
-    const renderItem = (_: MenuItem, idx) =>
-      isGuidebook(_) ? (
+    // helps deal with isActive
+    let first = true
+
+    const renderItem = (_: MenuItem, idx) => {
+      const thisIsTheFirstNavItem = isGuidebook(_) && first
+      if (thisIsTheFirstNavItem) {
+        first = false
+      }
+
+      return isGuidebook(_) ? (
         <NavItem
           key={idx}
-          className="kui--sidebar-nav-item"
           data-title={_.notebook}
-          onClick={() =>
+          className="kui--sidebar-nav-item"
+          isActive={_.notebook === this.state.currentGuidebook || thisIsTheFirstNavItem}
+          onClick={() => {
             pexecInCurrentTab(`${this.props.guidebooksCommand || 'replay'} ${encodeComponent(_.filepath)}`)
-          }
+            this.setState({ currentGuidebook: _.notebook })
+          }}
         >
           {_.notebook}
         </NavItem>
@@ -363,6 +377,7 @@ export default class TabContainer extends React.PureComponent<Props, State> {
       ) : (
         undefined
       )
+    }
 
     const nav = this.needsSidebar && (
       <React.Fragment>

plugins/plugin-client-common/src/components/Client/TopTabStripe/index.tsx

@@ -65,6 +65,7 @@ export type TopTabStripeConfiguration = TabConfiguration
 type Props = TopTabStripeConfiguration & {
   tabs: TabModel[]
   activeIdx: number
+  noTopTabs: boolean
   closeableTabs: boolean
   onNewTab: () => void
   onCloseTab: (idx: number) => void
@@ -126,31 +127,33 @@ export default class TopTabStripe extends React.PureComponent<Props> {
   /** Render tabs */
   private tabs() {
     return (
-      <React.Fragment>
-        <Nav aria-label="Tabs" variant="horizontal" className="kui--header-tabs">
-          <NavList className="kui--tab-list">
-            {this.props.tabs.map((tab, idx) => (
-              <Tab
-                {...this.props}
-                key={idx}
-                idx={idx}
-                uuid={tab.uuid}
-                title={tab.title}
-                closeable={this.props.closeableTabs}
-                active={idx === this.props.activeIdx}
-                onCloseTab={(idx: number) => this.props.onCloseTab(idx)}
-                onSwitchTab={(idx: number) => this.props.onSwitchTab(idx)}
-              />
-            ))}
-          </NavList>
-        </Nav>
-        {!isReadOnlyClient() && (
-          <div className="kui--top-tab-buttons">
-            <NewTabButton onNewTab={this.props.onNewTab} />
-            <SplitTerminalButton />
-          </div>
-        )}
-      </React.Fragment>
+      !this.props.noTopTabs && (
+        <React.Fragment>
+          <Nav aria-label="Tabs" variant="horizontal" className="kui--header-tabs">
+            <NavList className="kui--tab-list">
+              {this.props.tabs.map((tab, idx) => (
+                <Tab
+                  {...this.props}
+                  key={idx}
+                  idx={idx}
+                  uuid={tab.uuid}
+                  title={tab.title}
+                  closeable={this.props.closeableTabs}
+                  active={idx === this.props.activeIdx}
+                  onCloseTab={(idx: number) => this.props.onCloseTab(idx)}
+                  onSwitchTab={(idx: number) => this.props.onSwitchTab(idx)}
+                />
+              ))}
+            </NavList>
+          </Nav>
+          {!isReadOnlyClient() && (
+            <div className="kui--top-tab-buttons">
+              <NewTabButton onNewTab={this.props.onNewTab} />
+              <SplitTerminalButton />
+            </div>
+          )}
+        </React.Fragment>
+      )
     )
   }
 

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

@@ -26,4 +26,7 @@ export default interface CommonProps {
 
   /** Are tabs closeable? [default: true except for config.d/client.json readonly: true */
   closeableTabs?: boolean
+
+  /** Don't show top tabs [default: false] */
+  noTopTabs?: boolean
 }