feat: group namespaces by internal/regular in CurrentNamespace

Fixes kubernetes-sigs#7058

Author: starpit

plugins/plugin-client-common/src/components/spi/Select/impl/PatternFly.tsx

@@ -15,11 +15,11 @@
  */
 
 import React from 'react'
-import { Select, SelectOption } from '@patternfly/react-core'
+import { Divider, Select, SelectGroup, SelectOption } from '@patternfly/react-core'
 
-import { pexecInCurrentTab } from '@kui-shell/core'
+import { flatten, pexecInCurrentTab } from '@kui-shell/core'
 
-import Props, { SelectOptions } from '../model'
+import Props, { SelectOptions, isGrouped, isDivider } from '../model'
 
 interface State {
   isOpen: boolean
@@ -60,10 +60,53 @@ export default class PatternFlySelect extends React.PureComponent<Props, State>
     }
   }
 
-  private readonly _onClicks = this.props.options.map(option => this.onClick.bind(this, option))
+  private readonly _onClicks = isGrouped(this.props)
+    ? flatten(
+        this.props.groups.map(group =>
+          isDivider(group) ? [] : group.options.map(option => this.onClick.bind(this, option))
+        )
+      )
+    : this.props.options.map(option => this.onClick.bind(this, option))
+
   private readonly _onSelect = this.onSelect.bind(this)
   private readonly _onToggle = this.onToggle.bind(this)
 
+  /** @return UI for the given option */
+  private option(option: SelectOptions, index: number) {
+    return (
+      <SelectOption
+        className="kui--select-option"
+        data-value={option.label}
+        key={index}
+        value={option.label}
+        isSelected={option.isSelected}
+        description={option.description}
+        onClick={this._onClicks[index]}
+        isDisabled={option.isDisabled}
+      />
+    )
+  }
+
+  /** @return UI for all of the options */
+  private options() {
+    if (isGrouped(this.props)) {
+      let runningIdx = 0
+      const groups = this.props.groups.map((group, idx1) =>
+        isDivider(group) ? (
+          <Divider key={`divider-${idx1}`} />
+        ) : (
+          <SelectGroup label={group.label} key={`group-${idx1}`}>
+            {group.options.map(option => this.option(option, runningIdx++))}
+          </SelectGroup>
+        )
+      )
+
+      return groups
+    } else {
+      return this.props.options.map((option, idx) => this.option(option, idx))
+    }
+  }
+
   public render() {
     return (
       <Select
@@ -72,23 +115,13 @@ export default class PatternFlySelect extends React.PureComponent<Props, State>
         variant={this.props.variant}
         typeAheadAriaLabel="Select from the Options"
         selections={this.state.selected}
+        isGrouped={isGrouped(this.props)}
         maxHeight={this.props.maxHeight}
         onToggle={this._onToggle}
         onSelect={this._onSelect}
         isDisabled={this.props.isDisabled}
       >
-        {this.props.options.map((option, index) => (
-          <SelectOption
-            className="kui--select-option"
-            data-value={option.label}
-            key={index}
-            value={option.label}
-            isSelected={option.isSelected}
-            description={option.description}
-            onClick={this._onClicks[index]}
-            isDisabled={option.isDisabled}
-          />
-        ))}
+        {this.options()}
       </Select>
     )
   }

plugins/plugin-client-common/src/components/spi/Select/model.ts

@@ -21,10 +21,7 @@ export type SelectOptions = {
   isDisabled?: boolean
 }
 
-export type Props = {
-  /** select options */
-  options: SelectOptions[]
-
+type BaseProps = {
   /** Variant of rendered Select */
   variant: 'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti'
 
@@ -50,4 +47,27 @@ export type Props = {
   isDisabled?: boolean
 }
 
+type Divider = { divider: true }
+type Group = { label: string; options: SelectOptions[] }
+
+type GroupedProps = BaseProps & {
+  /** select groups */
+  groups: (Divider | Group)[]
+}
+
+export function isDivider(group: Divider | Group): group is Divider {
+  return (group as Divider).divider === true
+}
+
+type NonGroupedProps = BaseProps & {
+  /** select options */
+  options: SelectOptions[]
+}
+
+type Props = GroupedProps | NonGroupedProps
+
+export function isGrouped(props: Props): props is GroupedProps {
+  return Array.isArray((props as GroupedProps).groups)
+}
+
 export default Props

plugins/plugin-client-common/web/scss/components/Select/PatternFly.scss

@@ -21,13 +21,37 @@
 .kui--popover .kui--select {
   font-size: 0.75rem;
 
+  /** Groups with no label: don't show the empty label element */
+  .pf-c-select__menu-group-title:empty {
+    display: none;
+  }
+
+  /** For some reason, PatternFly doesn't seem to get the ellipsis right here; @patternfly/[email protected] */
+  .pf-c-select__menu-item-main {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .pf-c-select__toggle-typeahead {
     font-size: 0.75rem;
     font-family: var(--font-sans-serif);
   }
 
+  .kui--select-option[aria-selected='true'] {
+    font-weight: 500;
+    color: var(--active-tab-color);
+  }
+  .pf-c-select__menu-item-description {
+    font-weight: normal;
+  }
+
+  .pf-c-select__menu-group-title,
+  .pf-c-select__menu-item-icon {
+    font-size: inherit;
+  }
+
   button {
-    padding-top: 0.25em;
-    padding-bottom: 0.25em;
+    padding-top: 0.375em;
+    padding-bottom: 0.375em;
   }
 }

plugins/plugin-kubectl/components/src/CurrentContext.tsx

@@ -163,6 +163,7 @@ export default class CurrentContext extends React.PureComponent<{}, State> {
     const options = this.state.allContexts.map(context => ({
       label: this.renderName(context.metadata.name),
       isSelected: context.spec.isCurrent,
+      description: context.spec.isCurrent ? strings('This is your current context') : undefined,
       command: `kubectl config use-context ${encodeComponent(context.metadata.name)}`
     }))
 

plugins/plugin-kubectl/components/src/CurrentNamespace.tsx

@@ -17,6 +17,7 @@
 import React from 'react'
 
 import { Icons, ViewLevel, Select, TextWithIconWidget } from '@kui-shell/plugin-client-common'
+
 import {
   i18n,
   eventChannelUnsafe,
@@ -29,13 +30,16 @@ import {
   unwireToStandardEvents,
   inBrowser
 } from '@kui-shell/core'
+
 import {
   KubeContext,
   getCurrentDefaultNamespace,
   onKubectlConfigChangeEvents,
   offKubectlConfigChangeEvents
 } from '@kui-shell/plugin-kubectl'
 
+import { isInternalNamespace } from '@kui-shell/plugin-kubectl/heuristics'
+
 interface State {
   currentNamespace: string
   allNamespaces: string[]
@@ -165,12 +169,31 @@ export default class CurrentNamespace extends React.PureComponent<{}, State> {
     )
   }
 
+  /** @return the options model for the given namespace named `ns` */
+  private optionFor(ns: string) {
+    const isSelected = ns === this.state.currentNamespace
+
+    return {
+      label: ns,
+      isSelected,
+      description: isSelected ? strings('This is your current namespace') : undefined,
+      command: `kubectl config set-context --current --namespace=${ns}`
+    }
+  }
+
   private switchNamespace() {
-    const options = this.state.allNamespaces.map(namespace => ({
-      label: namespace,
-      isSelected: namespace === this.state.currentNamespace,
-      command: `kubectl config set-context --current --namespace=${namespace}`
-    }))
+    const internalNs = this.state.allNamespaces.filter(_ => isInternalNamespace[_]).map(_ => this.optionFor(_))
+    const regularNs = this.state.allNamespaces.filter(_ => !isInternalNamespace[_]).map(_ => this.optionFor(_))
+
+    const options = internalNs.length > 0 ? undefined : regularNs
+    const groups =
+      internalNs.length === 0
+        ? undefined
+        : [
+            { label: '', options: regularNs },
+            { divider: true as const },
+            { label: strings('System Namespaces'), options: internalNs }
+          ]
 
     return (
       <React.Suspense fallback={<div />}>
@@ -180,6 +203,7 @@ export default class CurrentNamespace extends React.PureComponent<{}, State> {
           className="small-top-pad"
           selected={this.state.currentNamespace}
           options={options}
+          groups={groups}
           isOpen
           isClosable={false}
         />

plugins/plugin-kubectl/heuristics/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@kui-shell/plugin-kubectl-heuristics",
+  "version": "1.0.1",
+  "description": "Heuristics for plugin-kubectl",
+  "author": "Nick Mitchell",
+  "license": "Apache-2.0",
+  "keywords": [
+    "kui",
+    "plugin",
+    "sample",
+    "example"
+  ],
+  "main": "dist/index.js",
+  "module": "mdist/index.js",
+  "types": "mdist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  }
+}

plugins/plugin-kubectl/heuristics/src/InternalNamespace/calico.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2021 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.
+ */
+
+export default ['calico-system']

plugins/plugin-kubectl/heuristics/src/InternalNamespace/ibm.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2021 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.
+ */
+
+export default ['ibm-cert-store', 'ibm-operators', 'ibm-system']

plugins/plugin-kubectl/heuristics/src/InternalNamespace/index.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2021 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.
+ */
+
+/**
+ * This heuristic exports a map from Namespace-as-string to `true`
+ * that indicates whether the given-named namespace is a
+ * system/internal namespace.
+ *
+ * To extend, either add a new namespace name to one of the existing
+ * files, or create a new file and add it to the `isInternal` array below
+ *
+ */
+
+import ibm from './ibm'
+import kube from './kube'
+import istio from './istio'
+import calico from './calico'
+import knative from './knative'
+import openshift from './openshift'
+import operators from './operators'
+
+/** Make sure to add any new files to this array */
+const isInternal: string[] = [...ibm, ...kube, ...istio, ...calico, ...knative, ...openshift, ...operators]
+
+const isInternalMap = isInternal.reduce((M, ns) => {
+  M[ns] = true
+  return M
+}, {} as Record<string, true>)
+
+export default isInternalMap

plugins/plugin-kubectl/heuristics/src/InternalNamespace/istio.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2021 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.
+ */
+
+export default ['istio-system']

plugins/plugin-kubectl/heuristics/src/InternalNamespace/knative.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2021 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.
+ */
+
+export default ['knative-serving']