fix: In narrower windows, there is too much content in the StatusStripe

Fixes #6570

Author: starpit

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

@@ -19,8 +19,16 @@
 
 import React from 'react'
 
-export default class MeterWidgets extends React.PureComponent {
+interface Props {
+  className?: string
+}
+
+export default class MeterWidgets extends React.PureComponent<Props> {
+  private className() {
+    return 'kui--status-stripe-meter ' + (this.props.className || '')
+  }
+
   public render() {
-    return <div className="kui--status-stripe-meter">{this.props.children}</div>
+    return <div className={this.className()}>{this.props.children}</div>
   }
 }

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

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+import React from 'react'
+
+/**
+ * This components can be used as a space filler in your StatusStripe.
+ *
+ */
+export default function SpaceFiller() {
+  return <div className="flex-fill" />
+}

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

@@ -114,7 +114,7 @@ export default class StatusStripe extends React.PureComponent<Props, State> {
           {this.message()}
           {this.widgets()}
 
-          <MeterWidgets>
+          <MeterWidgets className="kui--hide-in-narrower-windows">
             <Settings />
           </MeterWidgets>
 

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

@@ -34,6 +34,7 @@ export { default as TabContent } from './components/Client/TabContent'
 export { default as TabModel, uuid as allocateTabUUID } from './components/Client/TabModel'
 export { default as StatusStripe } from './components/Client/StatusStripe'
 export { default as CurrentWorkingDirectory } from './components/Client/StatusStripe/CurrentWorkingDirectory'
+export { default as SpaceFiller } from './components/Client/StatusStripe/SpaceFiller'
 export { default as MeterWidgets } from './components/Client/StatusStripe/MeterWidgets'
 export { default as ContextWidgets } from './components/Client/StatusStripe/ContextWidgets'
 export { ViewLevel, default as TextWithIconWidget } from './components/Client/StatusStripe/TextWithIconWidget'

plugins/plugin-client-common/web/scss/components/StatusStripe/StatusStripe.scss

@@ -16,6 +16,7 @@
 
 @import 'mixins';
 @import '../DropDown/mixins';
+@import '../common/narrow-window';
 
 $font-size: 0.75rem;
 
@@ -133,8 +134,8 @@ $element-padding: 1rem;
   }
 
   .kui--status-stripe-context {
-    flex: 1;
     font-size: $font-size;
+    border-right: $element-border;
 
     .kui--status-stripe-element {
       padding-left: calc(#{$element-padding} * 0.875 / 0.75);
@@ -144,10 +145,6 @@ $element-padding: 1rem;
     .kui--status-stripe-element:not(:first-child) {
       border-left: $element-border;
     }
-    .kui--status-stripe-element-wrapper:last-child,
-    .kui--status-stripe-element:last-child {
-      border-right: $element-border;
-    }
     .kui--status-stripe-element:not(:first-child):not([data-padding='none']) {
       padding-left: $element-padding;
     }
@@ -253,4 +250,6 @@ $element-padding: 1rem;
       border-radius: 4px 4px 0px 0px;
     }
   }
+
+  @include HideInNarrowWindows;
 }

plugins/plugin-client-common/web/scss/components/common/_narrow-window.scss

@@ -53,3 +53,11 @@ $medium-width-upper-bound: 68rem;
     @content;
   }
 }
+
+@mixin HideInNarrowWindows {
+  @include narrow-window {
+    .kui--hide-in-narrower-windows {
+      display: none;
+    }
+  }
+}

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

@@ -17,7 +17,14 @@
 import React from 'react'
 
 import { i18n, inBrowser, isPopup } from '@kui-shell/core'
-import { Kui, KuiProps, ContextWidgets, MeterWidgets, CurrentWorkingDirectory } from '@kui-shell/plugin-client-common'
+import {
+  Kui,
+  KuiProps,
+  ContextWidgets,
+  MeterWidgets,
+  CurrentWorkingDirectory,
+  SpaceFiller
+} from '@kui-shell/plugin-client-common'
 
 import { CurrentGitBranch } from '@kui-shell/plugin-git'
 import { CurrentContext, CurrentNamespace } from '@kui-shell/plugin-kubectl/components'
@@ -83,7 +90,9 @@ export default function renderMain(props: KuiProps) {
         <CurrentGitBranch className="kui--hide-in-narrower-windows" />
       </ContextWidgets>
 
-      <MeterWidgets>
+      <SpaceFiller />
+
+      <MeterWidgets className="kui--hide-in-narrower-windows">
         {/* <ClusterUtilization /> */}
         {/* !isPopup() && <OpenWhiskGridWidget /> */}
         {inBrowser() && <ProxyOfflineIndicator />}

plugins/plugin-electron-components/src/components/UpdateChecker.tsx

@@ -52,6 +52,9 @@ interface Props {
 
   /** periodically check for updates with this interval (millis) */
   interval?: number
+
+  /** Additional css classes */
+  className?: string
 }
 
 interface State {
@@ -213,6 +216,7 @@ export default class UpdateChecker extends React.PureComponent<Props, State> {
       return (
         <Widget
           id="kui--plugin-core-support--update-checker"
+          className={this.props.className}
           viewLevel="info"
           text={this.text()}
           title={strings(