Render subnamespace badge after name

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

packages/core/src/renderer/components/+namespaces/__snapshots__/namespace-tree-view.test.tsx.snap

@@ -60,6 +60,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
               >
                 <li
                   class="MuiTreeItem-root"
+                  data-testid="namespace-team-a-1"
                   role="treeitem"
                   tabindex="-1"
                 >
@@ -90,6 +91,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
                 </li>
                 <li
                   class="MuiTreeItem-root"
+                  data-testid="namespace-team-b-1"
                   role="treeitem"
                   tabindex="-1"
                 >
@@ -188,6 +190,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
               >
                 <li
                   class="MuiTreeItem-root"
+                  data-testid="namespace-service-1-1"
                   role="treeitem"
                   tabindex="-1"
                 >
@@ -213,11 +216,17 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
                       class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
                     >
                       service-1
+                      <span
+                        data-testid="subnamespace-badge-for-service-1-1"
+                      >
+                        S
+                      </span>
                     </div>
                   </div>
                 </li>
                 <li
                   class="MuiTreeItem-root"
+                  data-testid="namespace-team-c-1"
                   role="treeitem"
                   tabindex="-1"
                 >

packages/core/src/renderer/components/+namespaces/namespace-tree-view.test.tsx

@@ -167,6 +167,19 @@ describe("<NamespaceTreeView />", () => {
       const result = render(<NamespaceTreeView root={orgA} />);
 
       expect(result.baseElement).toMatchSnapshot();
-    })
+    });
+
+    it("renders an indicator badge for the subnamespace", () => {
+      const result = render(<NamespaceTreeView root={orgA} />);
+
+      expect(result.getByTestId("subnamespace-badge-for-service-1-1")).toBeInTheDocument();
+    });
+
+    it("does not render an indicator badge for the true namespace", () => {
+      const result = render(<NamespaceTreeView root={orgA} />);
+      const trueNamespace = result.getByTestId("namespace-team-c-1");
+
+      expect(trueNamespace.querySelector("[data-testid='subnamespace-badge-for-team-c-1']")).toBeNull();
+    });
   });
 });

packages/core/src/renderer/components/+namespaces/namespace-tree-view.tsx

@@ -18,13 +18,31 @@ interface Dependencies {
 function NonInjectableNamespaceTreeView({ root, namespaceStore }: Dependencies & NamespaceTreeViewProps) {
   const hierarchicalNamespaces = namespaceStore.getByLabel(["hnc.x-k8s.io/included-namespace=true"]);
 
+  function renderBadge(namespace: Namespace) {
+    if (!namespace.getAnnotations().find(annotation => annotation.includes("hnc.x-k8s.io/subnamespace-of"))) {
+      return null;
+    }
+
+    return <span data-testid={`subnamespace-badge-for-${namespace.getId()}`}>S</span>;
+  }
+
   function renderChildren(parent: Namespace) {
     const children = hierarchicalNamespaces.filter(ns =>
       ns.getLabels().find(label => label === `${parent.getName()}.tree.hnc.x-k8s.io/depth=1`)
     );
 
     return children.map(child => (
-      <StyledTreeItem key={`namespace-${child.getId()}`} nodeId={`namespace-${child.getId()}`} label={child.getName()}>
+      <StyledTreeItem
+        key={`namespace-${child.getId()}`}
+        nodeId={`namespace-${child.getId()}`}
+        data-testid={`namespace-${child.getId()}`}
+        label={(
+          <>
+            {child.getName()}
+            {renderBadge(child)}
+          </>
+        )}
+      >
         {renderChildren(child)}
       </StyledTreeItem>
     ));
@@ -43,7 +61,11 @@ function NonInjectableNamespaceTreeView({ root, namespaceStore }: Dependencies &
         defaultExpandIcon={<PlusSquare />}
         defaultEndIcon={<CloseSquare />}
       >
-        <StyledTreeItem nodeId={`namespace-${root.getId()}`} label={root.getName()} data-testid={`namespace-${root.getId()}`}>
+        <StyledTreeItem
+          nodeId={`namespace-${root.getId()}`}
+          label={root.getName()}
+          data-testid={`namespace-${root.getId()}`}
+        >
           {renderChildren(root)}
         </StyledTreeItem>
       </TreeView>