feat: add labels to summary mode

Fixes #4041

this also tweaks the Form layout a bit more
Fixes #4040

Author: starpit

packages/test/bin/runMochaLayersv2.sh

@@ -41,7 +41,11 @@ if [ -z "$WEBPACK_CLIENT_URL" ]; then
     echo "Using WEBPACK_CLIENT_URL=$WEBPACK_CLIENT_URL"
 fi
 
-for i in $@; do
-    export LAYER=$i
+if [ $# = 0 ]; then
     "$TEST_ROOT"/bin/runTest.sh
-done
+else
+    for i in $@; do
+        export LAYER=$i
+        "$TEST_ROOT"/bin/runTest.sh
+    done
+fi

plugins/plugin-client-common/web/css/static/Form.scss

@@ -8,30 +8,40 @@
     grid-template-columns: repeat(auto-fill, minmax(3em, auto));
     flex: unset;
 
+    .kui--form-item--for-label .bx--form-item {
+      .bx--label {
+        color: var(--color-base0D);
+      }
+      .bx--text-input {
+        background-color: var(--color-base04);
+        color: var(--color-base07);
+      }
+    }
+
     .bx--form-item {
       font-size: 0.875em;
-    }
-  }
 
-  .bx--text-input {
-    font-size: 1em;
-    line-height: 1.125em;
-    height: 2.5em;
-    padding: 0 1em;
-    color: var(--color-text-01);
-    background-color: var(--color-base03);
-    border-bottom-color: var(--color-base02);
+      .bx--text-input {
+        font-size: 1em;
+        line-height: 1.125em;
+        height: 2.5em;
+        padding: 0 1em;
+        color: var(--color-text-01);
+        background-color: var(--color-base03);
+        border-bottom-color: var(--color-base02);
 
-    &:focus,
-    &:active {
-      outline-color: var(--active-tab-color);
-    }
-  }
+        &:focus,
+        &:active {
+          outline-color: var(--active-tab-color);
+        }
+      }
 
-  .bx--label {
-    color: var(--color-text-02);
-    font-size: 0.875em;
-    margin-bottom: 0.5em;
-    line-height: 1em;
+      .bx--label {
+        color: var(--color-text-02);
+        font-size: 0.875em;
+        margin-bottom: 0.5em;
+        line-height: 1em;
+      }
+    }
   }
 }

plugins/plugin-client-common/web/css/static/sidecar-main.css

@@ -308,10 +308,10 @@ body.os-win32 .kui--sidecar .sidecar-bottom-stripe-button-container:hover .sidec
   justify-content: center;
 }
 .kui--sidecar .sidecar-header-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   text-transform: uppercase;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .kui--sidecar .sidecar-toolbar-text a,
 .kui--sidecar .sidecar-toolbar-text a:hover {

plugins/plugin-kubectl/src/lib/view/modes/Form.tsx

@@ -17,26 +17,70 @@
 import * as React from 'react'
 import { Form, TextInput } from 'carbon-components-react'
 
+import { FormMap } from './table-to-map'
+import { KubeResource } from '../../model/resource'
+
+import '@kui-shell/plugin-client-common/web/css/static/Form.scss'
+import 'carbon-components/scss/components/form/_form.scss'
+
 /** @return a ReactElement */
-export default function SidecarForm({ map }: { map: Record<string, string> }) {
+export default function SidecarForm({
+  nested,
+  map,
+  className
+}: {
+  nested?: boolean
+  map: FormMap
+  className?: string
+}) {
   return (
-    <Form className="page-content padding-content scrollable kui--placeholder-primary">
+    <Form className={nested ? className : `padding-content scrollable ${className || ''}`}>
       {Object.keys(map).map((key, idx) => {
-        const colspan = Math.max(Math.ceil(key.length / 5), Math.ceil(map[key].length / 3.5))
+        const vvalue = map[key]
+        const value =
+          (typeof vvalue === 'number' ? vvalue.toLocaleString() : typeof vvalue !== 'object' ? vvalue : vvalue.label) ||
+          ''
+
+        const colspan = Math.max(Math.ceil(key.length / 9), Math.ceil(value.length / 6))
         const style = { gridColumn: `span ${colspan}` }
+        const className = typeof vvalue !== 'object' ? undefined : 'kui--form-item--for-label'
 
         return (
-          <div key={idx} style={style}>
-            <TextInput readOnly id={`kubectl-summary-${key}`} labelText={key} defaultValue={map[key]} />
+          <div key={idx} style={style} className={className}>
+            <TextInput readOnly id={`kubectl-summary-${key}`} labelText={key} defaultValue={value} />
           </div>
         )
       })}
     </Form>
   )
 }
 
+export function FormWithLabels(props: { map: FormMap; resource: KubeResource }) {
+  const labelMap: FormMap = {}
+  if (props.resource.metadata && props.resource.metadata.labels) {
+    for (const key in props.resource.metadata.labels) {
+      labelMap[`${key} label`] = { label: props.resource.metadata.labels[key] }
+    }
+  }
+
+  return (
+    <div className="padding-content scrollable">
+      <SidecarForm nested map={props.map} />
+      <SidecarForm nested map={labelMap} className="top-pad" />
+    </div>
+  )
+}
+
+export function renderFormWithLabels(map: FormMap, resource: KubeResource) {
+  return {
+    react: function SidecarFormWithLabelsProvider() {
+      return <FormWithLabels map={map} resource={resource} />
+    }
+  }
+}
+
 /** @return a ReactProvider */
-export function renderForm(map: Record<string, string>) {
+export function renderForm(map: FormMap) {
   return {
     react: function SidecarFormProvider() {
       return <SidecarForm map={map} />

plugins/plugin-kubectl/src/lib/view/modes/configmap-summary.ts

@@ -16,7 +16,7 @@
 
 import { i18n, Tab, ModeRegistration } from '@kui-shell/core'
 
-import { renderForm } from './Form'
+import { renderFormWithLabels } from './Form'
 import { getDefaultSummaryMap } from './summary'
 import { ConfigMap, isConfigMap } from '../../model/resource'
 
@@ -43,7 +43,7 @@ async function content(tab: Tab, cm: ConfigMap, args: { argvNoOptions: string[]
     }
   }
 
-  return renderForm(map)
+  return renderFormWithLabels(map, cm)
 }
 
 /**

plugins/plugin-kubectl/src/lib/view/modes/crd-summary.ts

@@ -17,7 +17,7 @@
 import Debug from 'debug'
 import { i18n, Tab, Table, ModeRegistration } from '@kui-shell/core'
 
-import { renderForm } from './Form'
+import { renderFormWithLabels } from './Form'
 import { command } from './show-crd-managed-resources'
 import { CustomResourceDefinition, isCustomResourceDefinition } from '../../model/resource'
 
@@ -48,7 +48,7 @@ async function content(tab: Tab, crd: CustomResourceDefinition, args: { argvNoOp
     )
     const countObj = { 'Resource count': resources.length }
 
-    return renderForm(Object.assign(baseResponse, countObj))
+    return renderFormWithLabels(Object.assign(baseResponse, countObj), crd)
   } catch (err) {
     // safeguarding here, in case of unexpected errors collecting
     // optional information; see

plugins/plugin-kubectl/src/lib/view/modes/summary.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright 2019 IBM Corporation
+ * Copyright 2019-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.
@@ -17,14 +17,11 @@
 import { i18n, Tab, Table, ModeRegistration } from '@kui-shell/core'
 
 import toMap from './table-to-map'
-import { renderForm } from './Form'
+import { renderFormWithLabels } from './Form'
 import { getCommandFromArgs } from '../../util/util'
 import { fqnOf } from '../../../controller/kubectl/fqn'
 import { KubeResource, isSummarizableKubeResource, isKubeResourceWithItsOwnSummary } from '../../model/resource'
 
-import '@kui-shell/plugin-client-common/web/css/static/Form.scss'
-import 'carbon-components/scss/components/form/_form.scss'
-
 const strings = i18n('plugin-kubectl')
 
 export function getDefaultSummaryMap(
@@ -56,7 +53,8 @@ async function renderSummary(
     return resource.summary
   }
 
-  return renderForm(await getDefaultSummaryMap(tab, resource, args))
+  const map = await await getDefaultSummaryMap(tab, resource, args)
+  return renderFormWithLabels(map, resource)
 }
 
 /**

plugins/plugin-kubectl/src/lib/view/modes/table-to-map.ts

@@ -16,6 +16,12 @@
 
 import { Table } from '@kui-shell/core'
 
+export interface LabelValue {
+  label: string
+}
+
+export type FormMap = Record<string, number | string | LabelValue>
+
 export function capitalize(str: string) {
   return str === 'IP' ? str : str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
 }
@@ -24,7 +30,7 @@ export function capitalize(str: string) {
  * Turn a one-row Table into a Map
  *
  */
-export default function toMap(table: Table): Record<string, string> {
+export default function toMap(table: Table): FormMap {
   return table.body.reduce((map, row) => {
     map[capitalize(row.key)] = row.name