From e6ab47f1eb63b81c499014293841ea35ea771658 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 1 Feb 2023 10:02:22 +0300
Subject: [PATCH] Styling subnamespace badge

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../namespace-tree-view.test.tsx.snap         | 30 ++++++++++++-------
 .../+namespaces/namespace-tree-view.tsx       | 14 +++------
 .../subnamespace-badge.module.scss            |  9 ++++++
 .../+namespaces/subnamespace-badge.tsx        | 24 +++++++++++++++
 4 files changed, 56 insertions(+), 21 deletions(-)
 create mode 100644 packages/core/src/renderer/components/+namespaces/subnamespace-badge.module.scss
 create mode 100644 packages/core/src/renderer/components/+namespaces/subnamespace-badge.tsx

diff --git a/packages/core/src/renderer/components/+namespaces/__snapshots__/namespace-tree-view.test.tsx.snap b/packages/core/src/renderer/components/+namespaces/__snapshots__/namespace-tree-view.test.tsx.snap
index 0539c0fe8b..67a8d75393 100644
--- a/packages/core/src/renderer/components/+namespaces/__snapshots__/namespace-tree-view.test.tsx.snap
+++ b/packages/core/src/renderer/components/+namespaces/__snapshots__/namespace-tree-view.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit"
+                class="MuiSvgIcon-root"
                 focusable="false"
                 style="width: 14px; height: 14px;"
                 viewBox="0 0 24 24"
@@ -72,7 +72,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
+                        class="MuiSvgIcon-root close"
                         focusable="false"
                         style="width: 14px; height: 14px;"
                         viewBox="0 0 24 24"
@@ -86,6 +86,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
                       class="MuiTypography-root MuiTreeItem-label Component-label-18 MuiTypography-body1"
                     >
                       level-deep-child-a
+                       
                     </div>
                   </div>
                   <ul
@@ -117,7 +118,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit"
+                        class="MuiSvgIcon-root"
                         focusable="false"
                         style="width: 14px; height: 14px;"
                         viewBox="0 0 24 24"
@@ -131,6 +132,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
                       class="MuiTypography-root MuiTreeItem-label Component-label-18 MuiTypography-body1"
                     >
                       level-deep-child-b
+                       
                     </div>
                   </div>
                   <ul
@@ -158,7 +160,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
                             >
                               <svg
                                 aria-hidden="true"
-                                class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
+                                class="MuiSvgIcon-root close"
                                 focusable="false"
                                 style="width: 14px; height: 14px;"
                                 viewBox="0 0 24 24"
@@ -172,6 +174,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
                               class="MuiTypography-root MuiTreeItem-label Component-label-18 MuiTypography-body1"
                             >
                               level-deep-subchild-a
+                               
                             </div>
                           </div>
                           <ul
@@ -233,7 +236,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit"
+                class="MuiSvgIcon-root"
                 focusable="false"
                 style="width: 14px; height: 14px;"
                 viewBox="0 0 24 24"
@@ -274,7 +277,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
+                        class="MuiSvgIcon-root close"
                         focusable="false"
                         style="width: 14px; height: 14px;"
                         viewBox="0 0 24 24"
@@ -288,6 +291,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
                       class="MuiTypography-root MuiTreeItem-label Component-label-6 MuiTypography-body1"
                     >
                       team-a
+                       
                     </div>
                   </div>
                   <ul
@@ -318,7 +322,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
+                        class="MuiSvgIcon-root close"
                         focusable="false"
                         style="width: 14px; height: 14px;"
                         viewBox="0 0 24 24"
@@ -332,6 +336,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
                       class="MuiTypography-root MuiTreeItem-label Component-label-6 MuiTypography-body1"
                     >
                       team-b
+                       
                     </div>
                   </div>
                   <ul
@@ -389,7 +394,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit"
+                class="MuiSvgIcon-root"
                 focusable="false"
                 style="width: 14px; height: 14px;"
                 viewBox="0 0 24 24"
@@ -430,7 +435,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
+                        class="MuiSvgIcon-root close"
                         focusable="false"
                         style="width: 14px; height: 14px;"
                         viewBox="0 0 24 24"
@@ -444,7 +449,9 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
                       class="MuiTypography-root MuiTreeItem-label Component-label-9 MuiTypography-body1"
                     >
                       service-1
+                       
                       <span
+                        class="subnamespaceBadge"
                         data-testid="subnamespace-badge-for-service-1-1"
                       >
                         S
@@ -479,7 +486,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
                     >
                       <svg
                         aria-hidden="true"
-                        class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
+                        class="MuiSvgIcon-root close"
                         focusable="false"
                         style="width: 14px; height: 14px;"
                         viewBox="0 0 24 24"
@@ -493,6 +500,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
                       class="MuiTypography-root MuiTreeItem-label Component-label-9 MuiTypography-body1"
                     >
                       team-c
+                       
                     </div>
                   </div>
                   <ul
@@ -555,7 +563,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders one namespace
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
+                class="MuiSvgIcon-root close"
                 focusable="false"
                 style="width: 14px; height: 14px;"
                 viewBox="0 0 24 24"
diff --git a/packages/core/src/renderer/components/+namespaces/namespace-tree-view.tsx b/packages/core/src/renderer/components/+namespaces/namespace-tree-view.tsx
index f13466ee14..a7ceb3c933 100644
--- a/packages/core/src/renderer/components/+namespaces/namespace-tree-view.tsx
+++ b/packages/core/src/renderer/components/+namespaces/namespace-tree-view.tsx
@@ -1,4 +1,4 @@
-import { alpha, SvgIcon, withStyles } from "@material-ui/core";
+import { SvgIcon, withStyles } from "@material-ui/core";
 import { TreeItem, TreeItemProps, TreeView } from "@material-ui/lab";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
@@ -9,6 +9,7 @@ import type { GetDetailsUrl } from "../kube-detail-params/get-details-url.inject
 import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
 import type { NamespaceStore } from "./store";
 import namespaceStoreInjectable from "./store.injectable";
+import { SubnamespaceBadge } from "./subnamespace-badge";
 
 interface NamespaceTreeViewProps {
   root: Namespace;
@@ -23,14 +24,6 @@ function NonInjectableNamespaceTreeView({ root, namespaceStore, getDetailsUrl }:
   const hierarchicalNamespaces = namespaceStore.getByLabel(["hnc.x-k8s.io/included-namespace=true"]);
   const expandedItems = hierarchicalNamespaces.map(ns => `namespace-${ns.getId()}`);
 
-  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`)
@@ -46,7 +39,8 @@ function NonInjectableNamespaceTreeView({ root, namespaceStore, getDetailsUrl }:
             <Link key={child.getId()} to={getDetailsUrl(child.selfLink)}>
               {child.getName()}
             </Link>
-            {renderBadge(child)}
+            {" "}
+            <SubnamespaceBadge namespace={child} />
           </>
         )}
       >
diff --git a/packages/core/src/renderer/components/+namespaces/subnamespace-badge.module.scss b/packages/core/src/renderer/components/+namespaces/subnamespace-badge.module.scss
new file mode 100644
index 0000000000..3f6bfa52b1
--- /dev/null
+++ b/packages/core/src/renderer/components/+namespaces/subnamespace-badge.module.scss
@@ -0,0 +1,9 @@
+.subnamespaceBadge {
+  border-radius: 3px;
+  padding: 0px 6px;
+  background-color: var(--halfGray);
+  color: white;
+  display: inline-block;
+  font-size: 0.7rem;
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/packages/core/src/renderer/components/+namespaces/subnamespace-badge.tsx b/packages/core/src/renderer/components/+namespaces/subnamespace-badge.tsx
new file mode 100644
index 0000000000..a2eb0dc602
--- /dev/null
+++ b/packages/core/src/renderer/components/+namespaces/subnamespace-badge.tsx
@@ -0,0 +1,24 @@
+import styles from "./subnamespace-badge.module.scss";
+
+import React from "react";
+import type { Namespace } from "../../../common/k8s-api/endpoints";
+
+interface SubnamespaceBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  namespace: Namespace;
+}
+
+export function SubnamespaceBadge({ namespace, ...other }: SubnamespaceBadgeProps) {
+  if (!namespace.getAnnotations().find(annotation => annotation.includes("hnc.x-k8s.io/subnamespace-of"))) {
+    return null;
+  }
+
+  return (
+    <span
+      className={styles.subnamespaceBadge}
+      data-testid={`subnamespace-badge-for-${namespace.getId()}`}
+      {...other}
+    >
+      S
+    </span>
+  );
+}
\ No newline at end of file