feat: allow controllers to control the color of the status stripe

Fixes #5490

Author: starpit

packages/core/src/core/events.ts

@@ -36,6 +36,11 @@ eventChannelUnsafe.setMaxListeners(100)
 
 export default eventChannelUnsafe
 
+export type StatusStripeChangeEvent = {
+  type: 'default' | 'blue' | 'yellow' | 'red'
+  message?: string
+}
+
 export type TabLayoutChangeEvent = { isSidecarNowHidden: boolean }
 type TabLayoutChangeHandler = (evt: TabLayoutChangeEvent) => void
 
@@ -115,6 +120,11 @@ class WriteEventBus extends EventBusBase {
     this.eventBus.emit('/snapshot/request', cb)
   }
 
+  /** Request a status stripe change */
+  public emitStatusStripeChangeRequest(evt: StatusStripeChangeEvent): void {
+    this.eventBus.emit('/status-stripe/change', evt)
+  }
+
   public emitWithTabId(channel: '/tab/offline' | '/tab/close/request', tabId: string, tab?: Tab): void {
     this.eventBus.emit(`${channel}/${tabId}`, tabId, tab)
   }
@@ -151,6 +161,16 @@ class ReadEventBus extends WriteEventBus {
     this.eventBus.off('/snapshot', listener)
   }
 
+  /** Request a status stripe change */
+  public onStatusStripeChangeRequest(listener: (evt: StatusStripeChangeEvent) => void): void {
+    this.eventBus.on('/status-stripe/change', listener)
+  }
+
+  /** Request a status stripe change */
+  public offStatusStripeChangeRequest(listener: (evt: StatusStripeChangeEvent) => void): void {
+    this.eventBus.off('/status-stripe/change', listener)
+  }
+
   /** User switching focus from one Split to another, within one Tab */
   public onSplitSwitch(listener: (tab?: Tab | number) => void): void {
     this.eventBus.on('/tab/switch/split', listener)

packages/core/src/index.ts

@@ -76,6 +76,7 @@ export {
   wireToTabEvents,
   wireToStandardEvents,
   eventBus,
+  StatusStripeChangeEvent,
   TabLayoutChangeEvent
 } from './core/events'
 

packages/core/src/repl/events.ts

@@ -83,5 +83,7 @@ export type SnapshotWindow = {
  *
  */
 export type Snapshot = {
+  title?: string
+  description?: string
   windows: SnapshotWindow[]
 }

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

@@ -35,7 +35,8 @@ import {
 import Card from '../spi/Card'
 import KuiContext from './context'
 import KuiConfiguration from './KuiConfiguration'
-import { ComboSidecar, InputStripe, StatusStripe, TabContainer, Loading, Alert } from '../..'
+import StatusStripe, { Props as StatusStripeProps } from './StatusStripe'
+import { ComboSidecar, InputStripe, TabContainer, Loading, Alert } from '../..'
 
 import KuiIcon from '../../../icons/png/WelcomeLight.png'
 
@@ -204,6 +205,25 @@ export class Kui extends React.PureComponent<Props, State> {
     })
   }
 
+  /**
+   * Props to pass to StatusStripe. This allows us to set the desired
+   * status stripe color at startup time, rather than seeing the
+   * default color, followed quickly by a change to the color desired
+   * by the controller backing the given `props.commandLine`. The
+   * controller may still want to specialize the status stripe
+   * further, but at least we can avoid that odd
+   * e.g. defaultColor-then-blue effect.
+   *
+   */
+  private statusStripeProps(): StatusStripeProps {
+    if (this.props.commandLine) {
+      const statusStripeIdx = this.props.commandLine.findIndex(_ => _ === '--status-stripe')
+      if (statusStripeIdx >= 0) {
+        return { type: this.props.commandLine[statusStripeIdx + 1] as StatusStripeProps['type'] }
+      }
+    }
+  }
+
   public componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     console.error(error, errorInfo)
   }
@@ -242,7 +262,7 @@ export class Kui extends React.PureComponent<Props, State> {
               <ComboSidecar />
             </TabContainer>
             {this.props.toplevel}
-            <StatusStripe>{this.props.children}</StatusStripe>
+            <StatusStripe {...this.statusStripeProps()}>{this.props.children}</StatusStripe>
           </div>
         </KuiContext.Provider>
       )

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

@@ -18,13 +18,30 @@
 /* eslint-disable react/prop-types */
 
 import * as React from 'react'
-import { pexecInCurrentTab, i18n } from '@kui-shell/core'
+import { eventBus, pexecInCurrentTab, i18n, StatusStripeChangeEvent } from '@kui-shell/core'
 
 import Icons from '../../spi/Icons'
+import Markdown from '../../Content/Markdown'
+import '../../../../web/scss/components/StatusStripe/StatusStripe.scss'
 
 const strings = i18n('plugin-client-common')
 
-export default class StatusStripe extends React.PureComponent {
+type State = StatusStripeChangeEvent
+export type Props = Partial<State>
+
+export default class StatusStripe extends React.PureComponent<Props, State> {
+  public constructor(props: Props) {
+    super(props)
+    eventBus.onStatusStripeChangeRequest(this.onChangeRequest.bind(this))
+
+    this.state = Object.assign({ type: 'default' }, props)
+  }
+
+  /** Status Stripe change request */
+  private onChangeRequest(evt: StatusStripeChangeEvent) {
+    this.setState(evt)
+  }
+
   /**
    * User has clicked on the Settings icon.
    *
@@ -43,20 +60,41 @@ export default class StatusStripe extends React.PureComponent {
   }
 
   /**
-   * Render any widgets specified by the client.
+   * Render the current State.message, if any
+   *
+   */
+  private message() {
+    if (this.state.message) {
+      return (
+        <div className="kui--status-stripe-element left-pad">
+          <Markdown source={this.state.message} />
+        </div>
+      )
+    }
+  }
+
+  /**
+   * Render any widgets specified by the client. Note how we don't
+   * show widgets if we were given a message. See
+   * https://github.com/IBM/kui/issues/5490
    *
    */
   private widgets() {
-    if (React.Children.count(this.props.children) === 0) {
+    if (this.state.type !== 'default' || React.Children.count(this.props.children) === 0) {
       return this.filler()
     } else {
       return this.props.children
     }
   }
 
+  private className() {
+    return 'kui--status-stripe' + (this.state.type === 'default' ? ' kui--inverted-color-context' : '')
+  }
+
   public render() {
     return (
-      <div className="kui--status-stripe kui--inverted-color-context zoomable" id="kui--status-stripe">
+      <div className={this.className()} id="kui--status-stripe" data-type={this.state.type}>
+        {this.message()}
         {this.widgets()}
 
         <div className="kui--status-stripe-button">

plugins/plugin-client-common/src/index.ts

@@ -23,7 +23,6 @@ import '../web/css/static/carbon-overrides-common.css'
 import '../web/css/static/inverted-colors.css'
 import '../web/css/static/ui.css'
 import '../web/css/static/repl.scss'
-import '../web/css/static/status-stripe.css'
 
 // default client
 export { default as Kui, Props as KuiProps } from './components/Client/Kui'

plugins/plugin-client-common/web/css/static/status-stripe.css renamed to plugins/plugin-client-common/web/scss/components/StatusStripe/StatusStripe.scss

@@ -1,10 +1,56 @@
+/*
+ * 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.
+ */
+
 $font-size: 0.75rem;
 
+/** StatusStripeChangeEvent.type */
+$fg-type-default: var(--color-text-01);
+$bg-type-default: var(--color-sidecar-header);
+
+$fg-type-blue: var(--color-base00);
+$bg-type-blue: var(--color-brand-03);
+
+$bg-type-yellow: var(--color-yellow);
+$bg-type-red: var(--color-red);
+
 .kui--status-stripe {
   display: flex;
   flex-basis: 2.25rem;
-  background-color: var(--color-sidecar-header);
-  color: var(--color-text-01);
+  background-color: $bg-type-default;
+  color: $fg-type-default;
+
+  &[data-type='blue'] {
+    color: $fg-type-blue;
+    background-color: $bg-type-blue;
+  }
+  &[data-type='yellow'] {
+    background-color: $bg-type-yellow;
+  }
+  &[data-type='red'] {
+    background-color: $bg-type-red;
+  }
+
+  /* markdown */
+  p {
+    letter-spacing: 0.16px;
+    code {
+      font-family: var(--font-sans-serif);
+      color: var(--color-base01);
+    }
+  }
 
   z-index: 10;
   box-shadow: 0 -1px 1px var(--color-base05);
@@ -22,16 +68,16 @@ $font-size: 0.75rem;
   .kui--status-stripe-element svg {
     fill: currentColor;
   }
-  .kui--status-stripe-element[data-view="obscured"] {
+  .kui--status-stripe-element[data-view='obscured'] {
     color: var(--color-text-02);
   }
-  .kui--status-stripe-element[data-view="obscured"] svg {
+  .kui--status-stripe-element[data-view='obscured'] svg {
     fill: var(--color-text-02);
   }
-  .kui--status-stripe-element[data-view="ok"] svg {
+  .kui--status-stripe-element[data-view='ok'] svg {
     fill: var(--color-green);
   }
-  .kui--status-stripe-element:not(.kui--status-stripe-tag-element)[data-view="warn"] {
+  .kui--status-stripe-element:not(.kui--status-stripe-tag-element)[data-view='warn'] {
     filter: grayscale(0.15) brightness(0.9);
 
     &,
@@ -43,10 +89,10 @@ $font-size: 0.75rem;
       filter: none;
     }
   }
-  .kui--status-stripe-element[data-view="error"] svg {
+  .kui--status-stripe-element[data-view='error'] svg {
     fill: var(--color-error);
   }
-  .kui--status-stripe-element[data-view="hidden"] {
+  .kui--status-stripe-element[data-view='hidden'] {
     display: none;
   }