chore: port TopTabStripe from carbon to patternfly

part of kubernetes-sigs#4364
starpit · Jan 11, 2021 · 4e2ad5d · 4e2ad5d
1 parent 12f62a4
commit 4e2ad5d
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 192 deletions.
diff --git a/packages/test/src/api/repl-expect.ts b/packages/test/src/api/repl-expect.ts
@@ -316,7 +316,7 @@ export function splitCount(expectedSplitCount: number, inverseColors = false, ex
     if (inverseColors) {
       await app.client
         .$(Selectors.SPLIT_N(expectedSplitIndex || expectedSplitCount, inverseColors))
-        .then(_ => _.waitForExist())
+        .then(_ => _.waitForExist({ timeout: waitTimeout }))
     }
   }
 }

diff --git a/packages/test/src/api/selectors.ts b/packages/test/src/api/selectors.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/camelcase */
-export const TOP_TAB = '.kui--tab'
+export const TOP_TAB = '.kui--tab-list > .kui--tab'
 export const TOP_TAB_N = (N: number) => `${TOP_TAB}:nth-child(${N})`
+export const TOP_TAB_N_CLICKABLE = (N: number) => `${TOP_TAB_N(N)} > a`
 export const TOP_TAB_CLOSE_N = (N: number) => `${TOP_TAB}:nth-child(${N}) .kui--tab-close`
 export const TOP_TAB_WITH_TITLE = (title: string) => `${TOP_TAB} a[data-custom-label-text="${title}"]`
 export const TAB_CONTENT = '.kui--tab-content'

diff --git a/plugins/plugin-client-common/src/components/Client/TopTabStripe/Tab.tsx b/plugins/plugin-client-common/src/components/Client/TopTabStripe/Tab.tsx
@@ -26,7 +26,7 @@ import {
   getPersistedThemeChoice,
   findThemeByName
 } from '@kui-shell/core'
-import { HeaderMenuItem } from 'carbon-components-react'
+import { NavItem } from '@patternfly/react-core'
 
 import Icons from '../../spi/Icons'
 const Markdown = React.lazy(() => import('../../Content/Markdown'))
@@ -147,12 +147,14 @@ export default class Tab extends React.PureComponent<Props, State> {
 
   public render() {
     return (
-      <HeaderMenuItem
+      <NavItem
         href="#"
         data-tab-names={this.state.topTabNames}
         data-fresh={this.state.isFreshlyCreated}
         data-custom-label={this.props.title ? true : undefined}
         data-custom-label-text={this.props.title || undefined}
+        isActive={this.props.active}
+        styleChildren={false}
         className={
           'kui--tab kui--tab-navigatable' +
           (this.props.active ? ' kui--tab--active' : '') +
@@ -197,7 +199,7 @@ export default class Tab extends React.PureComponent<Props, State> {
             <Icons icon="WindowClose" focusable="false" preserveAspectRatio="xMidYMid meet" aria-hidden="true" />
           </div>
         )}
-      </HeaderMenuItem>
+      </NavItem>
     )
   }
 }
diff --git a/plugins/plugin-client-common/src/components/Client/TopTabStripe/index.tsx b/plugins/plugin-client-common/src/components/Client/TopTabStripe/index.tsx
@@ -16,7 +16,7 @@
 
 import React from 'react'
 import { KeyCodes, inElectron } from '@kui-shell/core'
-import { Header, HeaderName, HeaderMenuButton, HeaderNavigation } from 'carbon-components-react'
+import { Nav, NavList, Page, PageHeader } from '@patternfly/react-core'
 
 import TabModel from '../TabModel'
 import KuiContext from '../context'
@@ -114,21 +114,23 @@ export default class TopTabStripe extends React.PureComponent<Props> {
   private tabs() {
     return (
       <React.Fragment>
-        <HeaderNavigation aria-label="Tabs">
-          {this.props.tabs.map((tab, idx) => (
-            <Tab
-              {...this.props}
-              key={idx}
-              idx={idx}
-              uuid={tab.uuid}
-              title={tab.title}
-              closeable={this.props.tabs.length > 1}
-              active={idx === this.props.activeIdx}
-              onCloseTab={(idx: number) => this.props.onCloseTab(idx)}
-              onSwitchTab={(idx: number) => this.props.onSwitchTab(idx)}
-            />
-          ))}
-        </HeaderNavigation>
+        <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.tabs.length > 1}
+                active={idx === this.props.activeIdx}
+                onCloseTab={(idx: number) => this.props.onCloseTab(idx)}
+                onSwitchTab={(idx: number) => this.props.onSwitchTab(idx)}
+              />
+            ))}
+          </NavList>
+        </Nav>
         <div className="kui--top-tab-buttons">
           <NewTabButton onNewTab={this.props.onNewTab} />
           <SplitTerminalButton />
@@ -141,43 +143,33 @@ export default class TopTabStripe extends React.PureComponent<Props> {
     return <About expanded={args.isSideNavExpanded} />
   } */
 
-  private headerMenu(args: CarbonHeaderArgs) {
-    return (
-      <HeaderMenuButton
-        aria-label="Open menu"
-        isCollapsible
-        onClick={args.onClickSideNavExpand}
-        isActive={args.isSideNavExpanded}
-      />
-    )
-  }
-
   private headerName() {
     return (
       <KuiContext.Consumer>
         {config => (
-          <HeaderName prefix="" className="kui--header--name">
+          <div prefix="" className="kui--header--name">
             {config.productName || 'Kui'}
-          </HeaderName>
+          </div>
         )}
       </KuiContext.Consumer>
     )
   }
 
-  /** Buttons that appear in the top right */
-  private buttons() {
-    if (this.props.tabs[this.props.activeIdx]) {
-      const { buttons } = this.props.tabs[this.props.activeIdx]
-      return (
-        <div
-          id="kui--custom-top-tab-stripe-button-container"
-          num-button={buttons.length} // helps with css to calculate the right position of the container
-          className="kui--hide-in-narrower-windows" // re: kui--hide-in-narrower-windows, see https://github.com/IBM/kui/issues/4459
-        >
-          {buttons.map(_ => _.icon)}
-        </div>
-      )
+  private header() {
+    const logoProps = {
+      /*      href: 'https://patternfly.org',
+      onClick: () => console.log('clicked logo'),
+      target: '_blank' */
     }
+
+    return (
+      <PageHeader
+        className="kui--top-tab-stripe-header"
+        logo={this.headerName()}
+        logoProps={logoProps}
+        topNav={this.tabs()}
+      />
+    )
   }
 
   /**
@@ -186,13 +178,12 @@ export default class TopTabStripe extends React.PureComponent<Props> {
    */
   public render() {
     return (
-      <Header aria-label="Header" className="kui--top-tab-stripe">
-        {/* this.headerMenu(args) */}
-        {this.headerName()}
-        {this.tabs()}
-        {this.buttons()}
-        {/* this.sidenav(args) */}
-      </Header>
+      <Page
+        aria-label="Header"
+        className="kui--top-tab-stripe"
+        header={this.header()}
+        mainContainerId="kui--top-tab-stripe-main"
+      />
     )
   }
 }
diff --git a/plugins/plugin-client-common/web/scss/components/Card/PatternFly.scss b/plugins/plugin-client-common/web/scss/components/Card/PatternFly.scss
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@import '_mixins';
+@import 'mixins';
 @import '../../PatternFly/common';
 
 body[kui-theme-style] .kui--watch-pane {