From 8110da9e28aadf96d05b1fba24e30cd66c95bfb3 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 10 Feb 2023 14:29:39 +0300
Subject: [PATCH] Use Subnamespace badge in namespace list (#7132)

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../src/renderer/components/+namespaces/namespaces.scss   | 4 ++++
 .../core/src/renderer/components/+namespaces/route.tsx    | 8 +++++++-
 .../components/+namespaces/subnamespace-badge.tsx         | 5 +++--
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/renderer/components/+namespaces/namespaces.scss b/packages/core/src/renderer/components/+namespaces/namespaces.scss
index 8636d2f5ad..8aabb06a4a 100644
--- a/packages/core/src/renderer/components/+namespaces/namespaces.scss
+++ b/packages/core/src/renderer/components/+namespaces/namespaces.scss
@@ -22,4 +22,8 @@
       @include namespaceStatus;
     }
   }
+
+  .subnamespaceBadge {
+    margin-inline-start: var(--margin);
+  }
 }
diff --git a/packages/core/src/renderer/components/+namespaces/route.tsx b/packages/core/src/renderer/components/+namespaces/route.tsx
index 7efbfb738e..11e6d97864 100644
--- a/packages/core/src/renderer/components/+namespaces/route.tsx
+++ b/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
diff --git a/packages/core/src/renderer/components/+namespaces/subnamespace-badge.tsx b/packages/core/src/renderer/components/+namespaces/subnamespace-badge.tsx
index 37214b0b7f..4ae652acc6 100644
--- a/packages/core/src/renderer/components/+namespaces/subnamespace-badge.tsx
+++ b/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}