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/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
-    let { className } = this.props;
+    const { name, title, labelsOnly, children, hidden, className, renderBoolean, ...elemProps } = 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>
     )
   }