Fully support displaying all supported PodVolume types (#4131)

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

@@ -6,21 +6,30 @@
 import React from "react";
 import { DrawerItem, DrawerItemProps } from "./drawer-item";
 import { Badge } from "../badge";
+import { KubeObject } from "../../../common/k8s-api/kube-object";
 
 export interface DrawerItemLabelsProps extends DrawerItemProps {
-  labels: string[];
+  labels: string[] | Record<string, string>;
 }
 
 export function DrawerItemLabels(props: DrawerItemLabelsProps) {
   const { labels, ...itemProps } = props;
 
-  if (!labels || !labels.length) {
+  if (!labels || typeof labels !== "object") {
+    return null;
+  }
+
+  const labelStrings = Array.isArray(labels)
+    ? labels
+    : KubeObject.stringifyLabels(labels);
+
+  if (labelStrings.length === 0) {
     return null;
   }
 
   return (
     <DrawerItem {...itemProps} labelsOnly>
-      {labels.map(label => <Badge key={label} label={label} title={label}/>)}
+      {labelStrings.map(label => <Badge key={label} label={label} title={label}/>)}
     </DrawerItem>
   );
 }

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

@@ -7,29 +7,32 @@ import "./drawer-item.scss";
 import React from "react";
 import { cssNames, displayBooleans } from "../../utils";
 
-export interface DrawerItemProps extends React.HTMLAttributes<any> {
+export interface DrawerItemProps extends React.HTMLAttributes<HTMLDivElement> {
   name: React.ReactNode;
-  className?: string;
   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, className, renderBoolean, ...elemProps } = this.props;
-
-    if (hidden) return null;
-
-    const classNames = cssNames("DrawerItem", className, { labelsOnly });
-    const content = displayBooleans(renderBoolean, children);
-
-    return (
-      <div {...elemProps} className={classNames} title={title}>
-        <span className="name">{name}</span>
-        <span className="value">{content}</span>
-      </div>
-    );
+export function DrawerItem({
+  name,
+  title,
+  labelsOnly,
+  children,
+  hidden = false,
+  className,
+  renderBoolean,
+  ...elemProps
+}: DrawerItemProps) {
+  if (hidden) {
+    return null;
   }
+
+  return (
+    <div {...elemProps} className={cssNames("DrawerItem", className, { labelsOnly })} title={title}>
+      <span className="name">{name}</span>
+      <span className="value">{displayBooleans(renderBoolean, children)}</span>
+    </div>
+  );
 }

src/renderer/components/drawer/drawer-title.module.css

@@ -4,7 +4,14 @@
  */
 
 .DrawerTitle {
-  padding: $padding * 1.5 $padding * 3;
   margin: $margin * 3 (-$margin * 3);
   background: var(--drawerSubtitleBackground);
 }
+
+.DrawerTitle.title {
+  padding: $padding * 1.5 $padding * 3;
+}
+
+.DrawerTitle.sub-title {
+  padding: $padding $padding * 2;
+}

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

@@ -3,23 +3,29 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./drawer-title.scss";
+import styles from "./drawer-title.module.css";
 import React from "react";
 import { cssNames } from "../../utils";
 
 export interface DrawerTitleProps {
   className?: string;
-  title?: React.ReactNode;
+  children: React.ReactNode;
+
+  /**
+   * Specifies how large this title is
+   *
+   * @default "title"
+   */
+  size?: "sub-title" | "title";
 }
 
-export class DrawerTitle extends React.Component<DrawerTitleProps> {
-  render() {
-    const { title, children, className } = this.props;
-
-    return (
-      <div className={cssNames("DrawerTitle", className)}>
-        {title || children}
-      </div>
-    );
-  }
+export function DrawerTitle({ className, children, size = "title" }: DrawerTitleProps) {
+  return (
+    <div className={cssNames(styles.DrawerTitle, className, {
+      [styles.title]: size === "title",
+      [styles["sub-title"]]: size === "sub-title",
+    })}>
+      {children}
+    </div>
+  );
 }