Use Subnamespace badge in namespace list (#7132)

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

packages/core/src/renderer/components/+namespaces/namespaces.scss

@@ -22,4 +22,8 @@
       @include namespaceStatus;
     }
   }
+
+  .subnamespaceBadge {
+    margin-inline-start: var(--margin);
+  }
 }

packages/core/src/renderer/components/+namespaces/route.tsx

@@ -16,6 +16,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import namespaceStoreInjectable from "./store.injectable";
 import { KubeObjectAge } from "../kube-object/age";
 import openAddNamepaceDialogInjectable from "./add-dialog/open.injectable";
+import { SubnamespaceBadge } from "./subnamespace-badge";
 
 enum columnId {
   name = "name",
@@ -55,7 +56,12 @@ const NonInjectedNamespacesRoute = ({ namespaceStore, openAddNamespaceDialog }:
         { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
       ]}
       renderTableContents={namespace => [
-        namespace.getName(),
+        <>
+          {namespace.getName()}
+          {namespace.isSubnamespace() && (
+            <SubnamespaceBadge className="subnamespaceBadge" id={`namespace-list-badge-for-${namespace.getId()}`} />
+          )}
+        </>,
         <KubeObjectStatusIcon key="icon" object={namespace} />,
         namespace.getLabels().map(label => (
           <Badge

packages/core/src/renderer/components/+namespaces/subnamespace-badge.tsx

@@ -6,16 +6,17 @@ import styles from "./subnamespace-badge.module.scss";
 
 import React from "react";
 import { Tooltip } from "../tooltip";
+import { cssNames } from "../../utils";
 
 interface SubnamespaceBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   id: string;
 }
 
-export function SubnamespaceBadge({ id, ...other }: SubnamespaceBadgeProps) {
+export function SubnamespaceBadge({ id, className, ...other }: SubnamespaceBadgeProps) {
   return (
     <>
       <span
-        className={styles.subnamespaceBadge}
+        className={cssNames(styles.subnamespaceBadge, className)}
         data-testid={id}
         id={id}
         {...other}