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/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"