Fix rendering of boolean values in CRDs (#1087)

* Fix rendering of boolean values in CRDs

- add optional special casing for boolean values in DrawerItems and
  TableRows since React (imo annoying fashion) does not render boolean
  values by default.
- add a spinner on the sidebar for when the CRD menu is expeanded but
  the entries have not been loaded yet.
- Add ability to double click a Badge to expand, also make it so that
  Badges highligh all text on first click.

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/common/utils/saveToAppFiles.ts

@@ -1,7 +1,8 @@
 // Save file to electron app directory (e.g. "/Users/$USER/Library/Application Support/Lens" for MacOS)
 import path from "path";
 import { app, remote } from "electron";
-import { ensureDirSync, writeFileSync, WriteFileOptions } from "fs-extra";
+import { ensureDirSync, writeFileSync } from "fs-extra";
+import { WriteFileOptions } from "fs"
 
 export function saveToAppFiles(filePath: string, contents: any, options?: WriteFileOptions): string {
   const absPath = path.resolve((app || remote.app).getPath("userData"), filePath);

src/renderer/api/api-manager.ts

@@ -14,7 +14,7 @@ export class ApiManager {
       return this.apis.get(pathOrCallback) || this.apis.get(KubeApi.parseApi(pathOrCallback).apiBase);
     }
 
-    return Array.from(this.apis.values()).find(pathOrCallback);
+    return Array.from(this.apis.values()).find(pathOrCallback ?? ((api: KubeApi) => true));
   }
 
   registerApi(apiBase: string, api: KubeApi) {

src/renderer/api/endpoints/crd.api.ts

@@ -9,7 +9,7 @@ type AdditionalPrinterColumnsCommon = {
   description: string;
 }
 
-type AdditionalPrinterColumnsV1 = AdditionalPrinterColumnsCommon & {
+export type AdditionalPrinterColumnsV1 = AdditionalPrinterColumnsCommon & {
   jsonPath: string;
 }
 
@@ -120,9 +120,9 @@ export class CustomResourceDefinition extends KubeObject {
     return JSON.stringify(this.spec.conversion);
   }
 
-  getPrinterColumns(ignorePriority = true) {
+  getPrinterColumns(ignorePriority = true): AdditionalPrinterColumnsV1[] {
     const columns = this.spec.versions.find(a => this.getVersion() == a.name)?.additionalPrinterColumns
-      ?? this.spec.additionalPrinterColumns?.map(({JSONPath, ...rest}) => ({ ...rest, jsonPath: JSONPath })) // map to V1 shape
+      ?? this.spec.additionalPrinterColumns?.map(({ JSONPath, ...rest }) => ({ ...rest, jsonPath: JSONPath })) // map to V1 shape
       ?? [];
     return columns
       .filter(column => column.name != "Age")
@@ -149,4 +149,3 @@ export class CustomResourceDefinition extends KubeObject {
 export const crdApi = new VersionedKubeApi<CustomResourceDefinition>({
   objectConstructor: CustomResourceDefinition
 });
-

src/renderer/components/+custom-resources/crd-resource-details.tsx

@@ -12,67 +12,83 @@ import { KubeObjectDetailsProps } from "../kube-object";
 import { crdStore } from "./crd.store";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { Input } from "../input";
-import { CustomResourceDefinition } from "../../api/endpoints/crd.api";
+import { AdditionalPrinterColumnsV1, CustomResourceDefinition } from "../../api/endpoints/crd.api";
 
 interface Props extends KubeObjectDetailsProps<CustomResourceDefinition> {
 }
 
-function CrdColumnValue({ value }: { value: any[] | {} | string }) {
+function convertSpecValue(value: any): any {
   if (Array.isArray(value)) {
-    return <>{value.map((item, index) => <CrdColumnValue key={index} value={item} />)}</>
+    return value.map(convertSpecValue)
   }
-  if (typeof(value) === 'object') return (
+
-    <Input
+  if (typeof value === "object") {
-      readOnly
+    return (
-      multiLine
+      <Input
-      theme="round-black"
+        readOnly
-      className="box grow"
+        multiLine
-      value={JSON.stringify(value, null, 2)}
+        theme="round-black"
-    />
+        className="box grow"
-  );
+        value={JSON.stringify(value, null, 2)}
-  return <span>{value}</span>;
+      />
+    )
+  }
+
+  return value
 }
+
 @observer
 export class CrdResourceDetails extends React.Component<Props> {
   @computed get crd() {
     return crdStore.getByObject(this.props.object);
   }
 
+  renderAdditionalColumns(crd: CustomResourceDefinition, columns: AdditionalPrinterColumnsV1[]) {
+    return columns.map(({ name, jsonPath: jp }) => (
+      <DrawerItem key={name} name={name} renderBoolean>
+        {convertSpecValue(jsonPath.value(crd, jp.slice(1)))}
+      </DrawerItem>
+    ))
+  }
+
+  renderStatus(crd: CustomResourceDefinition, columns: AdditionalPrinterColumnsV1[]) {
+    const showStatus = !columns.find(column => column.name == "Status") && crd.status?.conditions;
+    if (!showStatus) {
+      return null
+    }
+
+    const conditions = crd.status.conditions
+      .filter(({ type, reason }) => type || reason)
+      .map(({ type, reason, message, status }) => ({ kind: type || reason, message, status }))
+      .map(({ kind, message, status }, index) => (
+        <Badge
+          key={kind + index} label={kind}
+          className={cssNames({ disabled: status === "False" }, kind.toLowerCase())}
+          tooltip={message}
+        />
+      ))
+
+    return (
+      <DrawerItem name={<Trans>Status</Trans>} className="status" labelsOnly>
+        {conditions}
+      </DrawerItem>
+    )
+  }
+
   render() {
-    const { object } = this.props;
+    const { props: { object }, crd } = this;
-    const { crd } = this;
+    if (!object || !crd) {
-    if (!object || !crd) return null;
+      return null;
+    }
+
     const className = cssNames("CrdResourceDetails", crd.getResourceKind());
     const extraColumns = crd.getPrinterColumns();
-    const showStatus = !extraColumns.find(column => column.name == "Status") && object.status?.conditions;
+
     return (
       <div className={className}>
-        <KubeObjectMeta object={object}/>
+        <KubeObjectMeta object={object} />
-        {extraColumns.map(column => {
+        {this.renderAdditionalColumns(object, extraColumns)}
-          const { name } = column;
+        {this.renderStatus(object, extraColumns)}
-          const value = jsonPath.query(object, (column.jsonPath).slice(1));
-          return (
-            <DrawerItem key={name} name={name}>
-              <CrdColumnValue value={value} />
-            </DrawerItem>
-          )
-        })}
-        {showStatus && (
-          <DrawerItem name={<Trans>Status</Trans>} className="status" labelsOnly>
-            {object.status.conditions.map((condition, index) => {
-              const { type, reason, message, status } = condition;
-              const kind = type || reason;
-              if (!kind) return null;
-              return (
-                <Badge
-                  key={kind + index} label={kind}
-                  className={cssNames({ disabled: status === "False" }, kind.toLowerCase())}
-                  tooltip={message}
-                />
-              );
-            })}
-          </DrawerItem>
-        )}
       </div>
     )
   }

src/renderer/components/+custom-resources/crd-resources.tsx

@@ -56,11 +56,11 @@ export class CrdResources extends React.Component<Props> {
       [sortBy.age]: (item: KubeObject) => item.metadata.creationTimestamp,
     }
     extraColumns.forEach(column => {
-      sortingCallbacks[column.name] = (item: KubeObject) => jsonPath.query(item, column.jsonPath.slice(1))
+      sortingCallbacks[column.name] = (item: KubeObject) => jsonPath.value(item, column.jsonPath.slice(1))
     })
-    const ListView = KubeObjectListLayout;
+
     return (
-      <ListView
+      <KubeObjectListLayout
         className="CrdResources"
         isClusterScoped={!isNamespaced}
         store={store}
@@ -85,9 +85,10 @@ export class CrdResources extends React.Component<Props> {
         renderTableContents={(crdInstance: KubeObject) => [
           crdInstance.getName(),
           isNamespaced && crdInstance.getNs(),
-          ...extraColumns.map(column => {
+          ...extraColumns.map(column => ({
-            return jsonPath.query(crdInstance, (column.jsonPath).slice(1))
+            renderBoolean: true,
-          }),
+            children: jsonPath.value(crdInstance, column.jsonPath.slice(1)),
+          })),
           crdInstance.getAge(),
         ]}
       />

src/renderer/components/drawer/drawer-item.tsx

@@ -1,6 +1,6 @@
 import "./drawer-item.scss";
 import React from "react";
-import { cssNames } from "../../utils";
+import { cssNames, displayBooleans } from "../../utils";
 
 export interface DrawerItemProps extends React.HTMLAttributes<any> {
   name: React.ReactNode;
@@ -8,18 +8,21 @@ export interface DrawerItemProps extends React.HTMLAttributes<any> {
   title?: string;
   labelsOnly?: boolean;
   hidden?: boolean;
+  renderBoolean?: boolean; // show "true" or "false" for all of the children elements are "typeof boolean"
 }
 
 export class DrawerItem extends React.Component<DrawerItemProps> {
   render() {
-    const { name, title, labelsOnly, children, hidden, ...elemProps } = this.props
+    const { name, title, labelsOnly, children, hidden, className, renderBoolean, ...elemProps } = this.props
-    let { className } = this.props;
     if (hidden) return null
-    className = cssNames("DrawerItem", className, { labelsOnly });
+
+    const classNames = cssNames("DrawerItem", className, { labelsOnly });
+    const content = displayBooleans(renderBoolean, children)
+
     return (
-      <div {...elemProps} className={className} title={title}>
+      <div {...elemProps} className={classNames} title={title}>
         <span className="name">{name}</span>
-        <span className="value">{children}</span>
+        <span className="value">{content}</span>
       </div>
     )
   }

src/renderer/components/item-object-list/item-list-layout.tsx

@@ -235,7 +235,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
                   cellProps.className = cssNames(cellProps.className, headCell.className);
                 }
               }
-              return <TableCell key={index} {...cellProps}/>
+              return <TableCell key={index} {...cellProps} />
             })
         }
         {renderItemMenu && (
@@ -277,7 +277,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     if (!isReady || !filters.length || hideFilters || !userSettings.showAppliedFilters) {
       return;
     }
-    return <PageFiltersList filters={filters}/>
+    return <PageFiltersList filters={filters} />
   }
 
   renderNoItems() {
@@ -297,7 +297,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
         </NoItems>
       )
     }
-    return <NoItems/>
+    return <NoItems />
   }
 
   renderHeaderContent(placeholders: IHeaderPlaceholders): ReactNode {
@@ -344,12 +344,12 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
       title: <h5 className="title">{title}</h5>,
       info: this.renderInfo(),
       filters: <>
-        {!isClusterScoped && <NamespaceSelectFilter/>}
+        {!isClusterScoped && <NamespaceSelectFilter />}
         <PageFiltersSelect allowEmpty disableFilters={{
           [FilterType.NAMESPACE]: true, // namespace-select used instead
-        }}/>
+        }} />
       </>,
-      search: <SearchInputUrl/>,
+      search: <SearchInputUrl />,
     }
     let header = this.renderHeaderContent(placeholders);
     if (customizeHeader) {
@@ -381,7 +381,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     return (
       <div className="items box grow flex column">
         {!isReady && (
-          <Spinner center/>
+          <Spinner center />
         )}
         {isReady && (
           <Table
@@ -406,8 +406,8 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
                     onClick={prevDefault(() => store.toggleSelectionAll(items))}
                   />
                 )}
-                {renderTableHeader.map((cellProps, index) => <TableCell key={index} {...cellProps}/>)}
+                {renderTableHeader.map((cellProps, index) => <TableCell key={index} {...cellProps} />)}
-                {renderItemMenu && <TableCell className="menu"/>}
+                {renderItemMenu && <TableCell className="menu" />}
               </TableHead>
             )}
             {

src/renderer/components/layout/sidebar.tsx

@@ -27,8 +27,9 @@ import { crdStore } from "../+custom-resources/crd.store";
 import { CrdList, crdResourcesRoute, crdRoute, crdURL } from "../+custom-resources";
 import { CustomResources } from "../+custom-resources/custom-resources";
 import { navigation } from "../../navigation";
-import { isAllowedResource } from "../../../common/rbac"
 import { clusterPageRegistry } from "../../../extensions/registries/page-registry";
+import { isAllowedResource } from "../../../common/rbac";
+import { Spinner } from "../spinner";
 
 const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
 type SidebarContextValue = {
@@ -50,6 +51,10 @@ export class Sidebar extends React.Component<Props> {
   }
 
   renderCustomResources() {
+    if (crdStore.isLoading) {
+      return <Spinner centerHorizontal />
+    }
+
     return Object.entries(crdStore.groups).map(([group, crds]) => {
       const submenus = crds.map((crd) => {
         return {
@@ -80,7 +85,7 @@ export class Sidebar extends React.Component<Props> {
         <div className={cssNames("Sidebar flex column", className, { pinned: isPinned })}>
           <div className="header flex align-center">
             <NavLink exact to="/" className="box grow">
-              <Icon svg="logo-lens" className="logo-icon"/>
+              <Icon svg="logo-lens" className="logo-icon" />
               <div className="logo-text">Lens</div>
             </NavLink>
             <Icon
@@ -97,14 +102,14 @@ export class Sidebar extends React.Component<Props> {
               isHidden={!isAllowedResource("nodes")}
               url={clusterURL()}
               text={<Trans>Cluster</Trans>}
-              icon={<Icon svg="kube"/>}
+              icon={<Icon svg="kube" />}
             />
             <SidebarNavItem
               id="nodes"
               isHidden={!isAllowedResource("nodes")}
               url={nodesURL()}
               text={<Trans>Nodes</Trans>}
-              icon={<Icon svg="nodes"/>}
+              icon={<Icon svg="nodes" />}
             />
             <SidebarNavItem
               id="workloads"
@@ -113,7 +118,7 @@ export class Sidebar extends React.Component<Props> {
               routePath={workloadsRoute.path}
               subMenus={Workloads.tabRoutes}
               text={<Trans>Workloads</Trans>}
-              icon={<Icon svg="workloads"/>}
+              icon={<Icon svg="workloads" />}
             />
             <SidebarNavItem
               id="config"
@@ -122,7 +127,7 @@ export class Sidebar extends React.Component<Props> {
               routePath={configRoute.path}
               subMenus={Config.tabRoutes}
               text={<Trans>Configuration</Trans>}
-              icon={<Icon material="list"/>}
+              icon={<Icon material="list" />}
             />
             <SidebarNavItem
               id="networks"
@@ -131,7 +136,7 @@ export class Sidebar extends React.Component<Props> {
               routePath={networkRoute.path}
               subMenus={Network.tabRoutes}
               text={<Trans>Network</Trans>}
-              icon={<Icon material="device_hub"/>}
+              icon={<Icon material="device_hub" />}
             />
             <SidebarNavItem
               id="storage"
@@ -139,14 +144,14 @@ export class Sidebar extends React.Component<Props> {
               url={storageURL({ query })}
               routePath={storageRoute.path}
               subMenus={Storage.tabRoutes}
-              icon={<Icon svg="storage"/>}
+              icon={<Icon svg="storage" />}
               text={<Trans>Storage</Trans>}
             />
             <SidebarNavItem
               id="namespaces"
               isHidden={!isAllowedResource("namespaces")}
               url={namespacesURL()}
-              icon={<Icon material="layers"/>}
+              icon={<Icon material="layers" />}
               text={<Trans>Namespaces</Trans>}
             />
             <SidebarNavItem
@@ -154,7 +159,7 @@ export class Sidebar extends React.Component<Props> {
               isHidden={!isAllowedResource("events")}
               url={eventsURL({ query })}
               routePath={eventRoute.path}
-              icon={<Icon material="access_time"/>}
+              icon={<Icon material="access_time" />}
               text={<Trans>Events</Trans>}
             />
             <SidebarNavItem
@@ -162,7 +167,7 @@ export class Sidebar extends React.Component<Props> {
               url={appsURL({ query })}
               subMenus={Apps.tabRoutes}
               routePath={appsRoute.path}
-              icon={<Icon material="apps"/>}
+              icon={<Icon material="apps" />}
               text={<Trans>Apps</Trans>}
             />
             <SidebarNavItem
@@ -170,7 +175,7 @@ export class Sidebar extends React.Component<Props> {
               url={usersManagementURL({ query })}
               routePath={usersManagementRoute.path}
               subMenus={UserManagement.tabRoutes}
-              icon={<Icon material="security"/>}
+              icon={<Icon material="security" />}
               text={<Trans>Access Control</Trans>}
             />
             <SidebarNavItem
@@ -179,7 +184,7 @@ export class Sidebar extends React.Component<Props> {
               url={crdURL()}
               subMenus={CustomResources.tabRoutes}
               routePath={crdRoute.path}
-              icon={<Icon material="extension"/>}
+              icon={<Icon material="extension" />}
               text={<Trans>Custom Resources</Trans>}
             >
               {this.renderCustomResources()}
@@ -194,7 +199,7 @@ export class Sidebar extends React.Component<Props> {
                   url={url}
                   routePath={path}
                   text={title}
-                  icon={<MenuIcon/>}
+                  icon={<MenuIcon />}
                 />
               )
             })}
@@ -257,7 +262,7 @@ class SidebarNavItem extends React.Component<SidebarNavItemProps> {
           <div className={cssNames("nav-item", { active: isActive })} onClick={this.toggleSubMenu}>
             {icon}
             <span className="link-text">{text}</span>
-            <Icon className="expand-icon" material={this.isExpanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}/>
+            <Icon className="expand-icon" material={this.isExpanded ? "keyboard_arrow_up" : "keyboard_arrow_down"} />
           </div>
           <ul className={cssNames("sub-menu", { active: isActive })}>
             {subMenus.map(({ title, url }) => (

src/renderer/components/spinner/spinner.scss

@@ -34,6 +34,12 @@
     margin-top: calc(var(--spinner-size) / -2);
   }
 
+  &.centerHorizontal {
+    position: absolute;
+    left: 50%;
+    margin-left: calc(var(--spinner-size) / -2);
+  }
+
   @keyframes rotate {
     0% {
       transform: rotate(0deg);
@@ -60,4 +66,4 @@
       @include spinner-color(#4285F4);
     }
   }
-}
+}

src/renderer/components/spinner/spinner.tsx

@@ -6,23 +6,19 @@ import { cssNames } from "../../utils";
 export interface SpinnerProps extends React.HTMLProps<any> {
   singleColor?: boolean;
   center?: boolean;
+  centerHorizontal?: boolean;
 }
 
 export class Spinner extends React.Component<SpinnerProps, {}> {
-  private elem: HTMLElement;
-
   static defaultProps = {
     singleColor: true,
     center: false,
   };
 
   render() {
-    const { center, singleColor, ...props } = this.props;
+    const { center, singleColor, centerHorizontal, className, ...props } = this.props;
-    let { className } = this.props;
+    const classNames = cssNames('Spinner', className, { singleColor, center, centerHorizontal });
-    className = cssNames('Spinner', className, {
+
-      singleColor: singleColor,
+    return <div {...props} className={classNames} />;
-      center: center,
-    });
-    return <div {...props} className={className} ref={e => this.elem = e}/>;
   }
 }

src/renderer/components/table/table-cell.tsx

@@ -2,7 +2,7 @@ import "./table-cell.scss";
 import type { TableSortBy, TableSortParams } from "./table";
 
 import React, { ReactNode } from "react";
-import { autobind, cssNames } from "../../utils";
+import { autobind, cssNames, displayBooleans } from "../../utils";
 import { Icon } from "../icon";
 import { Checkbox } from "../checkbox";
 
@@ -13,6 +13,7 @@ export interface TableCellProps extends React.DOMAttributes<HTMLDivElement> {
   title?: ReactNode;
   checkbox?: boolean; // render cell with a checkbox
   isChecked?: boolean; // mark checkbox as checked or not
+  renderBoolean?: boolean; // show "true" or "false" for all of the children elements are "typeof boolean"
   sortBy?: TableSortBy; // column name, must be same as key in sortable object <Table sortable={}/>
   _sorting?: Partial<TableSortParams>; // <Table> sorting state, don't use this prop outside (!)
   _sort?(sortBy: TableSortBy): void; // <Table> sort function, don't use this prop outside (!)
@@ -52,20 +53,20 @@ export class TableCell extends React.Component<TableCellProps> {
     const { checkbox, isChecked } = this.props;
     const showCheckbox = isChecked !== undefined;
     if (checkbox && showCheckbox) {
-      return <Checkbox value={isChecked}/>
+      return <Checkbox value={isChecked} />
     }
   }
 
   render() {
-    const { className, checkbox, isChecked, sortBy, _sort, _sorting, _nowrap, children, title, ...cellProps } = this.props;
+    const { className, checkbox, isChecked, sortBy, _sort, _sorting, _nowrap, children, title, renderBoolean: displayBoolean, ...cellProps } = this.props;
     const classNames = cssNames("TableCell", className, {
       checkbox: checkbox,
       nowrap: _nowrap,
       sorting: this.isSortable,
     });
-    const content = title || children;
+    const content = displayBooleans(displayBoolean, title || children)
     return (
-      <div {...cellProps} className={classNames} onClick={this.onClick}>
+      <div {...cellProps} id={className} className={classNames} onClick={this.onClick}>
         {this.renderCheckbox()}
         {_nowrap ? <div className="content">{content}</div> : content}
         {this.renderSortIcon()}

src/renderer/utils/__tests__/display-booleans.test.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { displayBooleans } from "../display-booleans"
+
+describe("displayBooleans tests", () => {
+  it("should not do anything to div's if shouldShow is false", () => {
+    expect(displayBooleans(false, <div></div>)).toStrictEqual(<div></div>)
+  })
+
+  it("should not do anything to booleans's if shouldShow is false", () => {
+    expect(displayBooleans(false, true)).toStrictEqual(true)
+    expect(displayBooleans(false, false)).toStrictEqual(false)
+  })
+
+  it("should stringify booleans when shouldShow is true", () => {
+    expect(displayBooleans(true, true)).toStrictEqual("true")
+    expect(displayBooleans(true, false)).toStrictEqual("false")
+  })
+})

src/renderer/utils/display-booleans.ts

@@ -0,0 +1,15 @@
+import React from "react"
+
+export function displayBooleans(shouldShow: boolean, from: React.ReactNode): React.ReactNode {
+  if (shouldShow) {
+    if (typeof from === "boolean") {
+      return from.toString()
+    }
+
+    if (Array.isArray(from)) {
+      return from.map(node => displayBooleans(shouldShow, node))
+    }
+  }
+
+  return from
+}

src/renderer/utils/index.ts

@@ -18,3 +18,4 @@ export * from "./isReactNode"
 export * from "./convertMemory"
 export * from "./convertCpu"
 export * from "./metricUnitsToNumber"
+export * from "./display-booleans"

tsconfig.json

@@ -4,7 +4,11 @@
     "jsx": "react",
     "target": "ES2017",
     "module": "ESNext",
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ESNext",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "moduleResolution": "Node",
     "sourceMap": true,
     "strict": false,