feat: escape to toggle Sidebar visibility

Also cleans up sidebar scss, consolidating into web/scss/components/Sidebar

Author: starpit

plugins/plugin-bash-like/src/pty/client.ts

@@ -855,6 +855,11 @@ export const doExec = (
           xtermContainer = document.createElement('xterm')
           xtermContainer.classList.add('xterm-container')
 
+          // swallow escape key presses against the xterm container,
+          // e.g. we don't want hitting escape in vi to propagate to
+          // other kui elements
+          xtermContainer.onkeyup = evt => evt.key === 'Escape' && evt.stopPropagation()
+
           if (execOptions.replSilence) {
             debug('repl silence')
             xtermContainer.style.display = 'none'

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

@@ -15,24 +15,31 @@
  */
 
 import React from 'react'
-import { encodeComponent, pexecInCurrentTab } from '@kui-shell/core'
+import { encodeComponent, i18n, pexecInCurrentTab } from '@kui-shell/core'
 import { PageSidebar } from '@patternfly/react-core'
 
 import BrandingProps from './props/Branding'
 import GuidebookProps, { isGuidebook, isMenu, MenuItem } from './props/Guidebooks'
 
+import '../../../web/scss/components/Sidebar/_index.scss'
+
 const Nav = React.lazy(() => import('@patternfly/react-core').then(_ => ({ default: _.Nav })))
 const NavItem = React.lazy(() => import('@patternfly/react-core').then(_ => ({ default: _.NavItem })))
 const NavList = React.lazy(() => import('@patternfly/react-core').then(_ => ({ default: _.NavList })))
 const NavExpandable = React.lazy(() => import('@patternfly/react-core').then(_ => ({ default: _.NavExpandable })))
 
+const strings = i18n('plugin-client-common')
+
 type Props = BrandingProps &
   GuidebookProps & {
     /** unfurled? */
     isOpen: boolean
 
     /** visually indicate which nav item is active? */
     indicateActiveItem?: boolean
+
+    /** toggle open state */
+    toggleOpen(): void
   }
 
 interface State {
@@ -41,6 +48,8 @@ interface State {
 }
 
 export default class Sidebar extends React.PureComponent<Props, State> {
+  private readonly cleaners: (() => void)[] = []
+
   public constructor(props: Props) {
     super(props)
     this.state = {}
@@ -50,6 +59,21 @@ export default class Sidebar extends React.PureComponent<Props, State> {
     return this.state.currentGuidebook
   }
 
+  private readonly onKeyup = (evt: KeyboardEvent) => {
+    if (evt.key === 'Escape') {
+      this.props.toggleOpen()
+    }
+  }
+
+  public componentDidMount() {
+    document.addEventListener('keyup', this.onKeyup)
+    this.cleaners.push(() => document.removeEventListener('keyup', this.onKeyup))
+  }
+
+  public componentWillUnmount() {
+    this.cleaners.forEach(_ => _())
+  }
+
   private nav() {
     // helps deal with isActive; if we don't have a currentGuidebook,
     // use the first one (for now)
@@ -89,8 +113,9 @@ export default class Sidebar extends React.PureComponent<Props, State> {
           <NavList>{this.props.guidebooks.map(renderItem)}</NavList>
         </Nav>
         {this.props.productName && this.props.version && (
-          <div className="flex-align-end semi-bold kui--tab-container-sidebar-other">
-            {this.props.productName} v{this.props.version}
+          <div className="kui--tab-container-sidebar-other flex-layout">
+            <span className="flex-fill sub-text">{strings('Toggle via <Esc>')}</span>
+            <span className="inline-flex flex-align-end semi-bold">v{this.props.version}</span>
           </div>
         )}
       </React.Suspense>

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

@@ -348,12 +348,13 @@ export default class TabContainer extends React.PureComponent<Props, State> {
   private sidebar() {
     return (
       <Sidebar
-        isOpen={this.state.isSidebarOpen}
         version={this.props.version}
-        productName={this.props.productName}
+        isOpen={this.state.isSidebarOpen}
+        toggleOpen={this.toggleSidebar}
         guidebooks={this.props.guidebooks}
-        guidebooksCommand={this.props.guidebooksCommand}
+        productName={this.props.productName}
         indicateActiveItem={!!this.props.noTopTabs}
+        guidebooksCommand={this.props.guidebooksCommand}
       />
     )
   }

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

@@ -136,8 +136,14 @@ export default class SimpleEditor extends React.Component<Props, State> {
 
     // ibid, but for Escape -> onCancel
     if (onCancel) {
-      editor.addCommand(KeyCode.Escape, () => {
-        onCancel(editor.getValue())
+      editor.onKeyUp(evt => {
+        if (evt.browserEvent.key === 'Escape') {
+          // swallow the event, so other kui components don't also respond
+          evt.browserEvent.stopPropagation()
+
+          // notify the enclosing component that we have cancelled editing
+          onCancel(editor.getValue())
+        }
       })
     }
   }

plugins/plugin-client-common/web/css/static/ui.css

@@ -297,6 +297,9 @@ code.fancy-code.hljs {
   display: flex;
   justify-content: flex-end;
 }
+.inline-flex {
+  display: inline-flex;
+}
 .flex-align-start {
   justify-content: flex-start;
 }

plugins/plugin-client-common/web/scss/components/Sidebar/_index.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2021 The Kubernetes Authors
+ * Copyright 2022 The Kubernetes Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,3 +13,81 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+@import 'mixins';
+@import '../TopTabStripe/mixins';
+
+body[kui-theme-style='light'] {
+  @include Sidebar {
+    --kui--sidebar-color-01: var(--color-base00);
+    --kui--sidebar-color-02: var(--color-base02);
+  }
+  @include TopTabStripe {
+    @include SidebarToggleButton {
+      --kui--sidebar-toggle-button-color: var(--color-text-02);
+    }
+  }
+}
+
+@include TopTabStripe {
+  @include Sidebar {
+    --kui--sidebar-color-01: var(--color-text-01);
+    --kui--sidebar-color-02: var(--color-text-02);
+
+    display: flex;
+    flex-direction: column;
+  }
+  @include SidebarBody {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  @include SidebarNav {
+    flex: 1;
+  }
+  @include SidebarBottomAlignedContent {
+    padding: 0 var(--pf-global--spacer--lg);
+  }
+
+  @include SidebarNavMenuButton {
+    color: var(--kui--sidebar-color-01);
+  }
+
+  @include SidebarNavMenu {
+    @include SidebarNavItem {
+      color: var(--kui--sidebar-color-02);
+    }
+  }
+  @include SidebarNavItem {
+    color: var(--kui--sidebar-color-01);
+
+    a:hover {
+      cursor: pointer;
+    }
+  }
+  @include SidebarToggleButton {
+    --kui--sidebar-toggle-button-color: var(--kui--sidebar-color-02);
+    font-size: 1.25em;
+  }
+  @include SidebarToggleIcon {
+    color: var(--kui--sidebar-toggle-button-color);
+  }
+}
+
+/* Sidebar width */
+@include Sidebar {
+  max-width: 15rem;
+}
+
+/* Coloring of bottom-aligned text */
+@include Sidebar {
+  @include SidebarBottomAlignedContent {
+    .sub-text {
+      opacity: 0.8;
+      color: var(--kui--sidebar-color-02);
+    }
+    .semi-bold {
+      color: var(--kui--sidebar-color-01);
+    }
+  }
+}

plugins/plugin-client-common/web/scss/components/Sidebar/_mixins.scss

@@ -0,0 +1,71 @@
+/*
+ * Copyright 2022 The Kubernetes Authors
+ *
+ * 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.
+ */
+
+@mixin SidebarToggleButton {
+  button.kui--top-tab-stripe-header--toggle-button {
+    @content;
+  }
+}
+
+@mixin SidebarToggleIcon {
+  .kui--top-tab-stripe-header--toggle-button-icon {
+    @content;
+  }
+}
+
+@mixin Sidebar {
+  .kui--tab-container-sidebar {
+    @content;
+  }
+}
+
+@mixin SidebarBody {
+  .pf-c-page__sidebar-body {
+    @content;
+  }
+}
+
+@mixin SidebarNav {
+  .kui--tab-container-sidebar-nav {
+    @content;
+  }
+}
+
+@mixin SidebarNavItem {
+  .kui--sidebar-nav-item {
+    @content;
+  }
+}
+
+@mixin SidebarNavMenu {
+  .kui--sidebar-nav-menu {
+    @content;
+  }
+}
+
+@mixin SidebarNavMenuButton {
+  @include SidebarNavMenu {
+    & > button {
+      @content;
+    }
+  }
+}
+
+@mixin SidebarBottomAlignedContent {
+  .kui--tab-container-sidebar-other {
+    @content;
+  }
+}