From 7c4c9852478112cf1e9eb7d085e0fc0e830851ac Mon Sep 17 00:00:00 2001
From: Matt Hook <hookenz@gmail.com>
Date: Fri, 13 Oct 2023 03:10:16 +1300
Subject: [PATCH] upgrade some badge components to match EE (#10451)

---
 .../ConfigMapsDatatable/columns/name.tsx      |  6 ++--
 .../SecretsDatatable/columns/name.tsx         |  6 ++--
 .../IngressDatatable/columns/name.tsx         |  4 +--
 .../ServicesDatatable/columns/name.tsx        | 32 ++++++++++---------
 4 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx b/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx
index 09b414403..163cf3343 100644
--- a/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx
+++ b/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx
@@ -63,15 +63,15 @@ function Cell({ row }: CellContext<ConfigMapRowData, string>) {
         </Link>
         {isSystemConfigMap && (
           <Badge type="success" className="ml-2">
-            system
+            System
           </Badge>
         )}
         {!isSystemToken && !hasConfigurationOwner && (
-          <Badge className="ml-2">external</Badge>
+          <Badge className="ml-2">External</Badge>
         )}
         {!row.original.inUse && !isSystemConfigMap && (
           <Badge type="warn" className="ml-2">
-            unused
+            Unused
           </Badge>
         )}
       </div>
diff --git a/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx b/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx
index 9a03fd57e..d9ea8db06 100644
--- a/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx
+++ b/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx
@@ -66,15 +66,15 @@ function Cell({ row }: CellContext<SecretRowData, string>) {
         </Link>
         {isSystemSecret && (
           <Badge type="success" className="ml-2">
-            system
+            System
           </Badge>
         )}
         {!isSystemToken && !hasConfigurationOwner && (
-          <Badge className="ml-2">external</Badge>
+          <Badge className="ml-2">External</Badge>
         )}
         {!row.original.inUse && !isSystemSecret && (
           <Badge type="warn" className="ml-2">
-            unused
+            Unused
           </Badge>
         )}
       </div>
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx b/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx
index 44c6a0767..f5f7a9e43 100644
--- a/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx
+++ b/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx
@@ -22,7 +22,7 @@ function Cell({ row, getValue }: CellContext<Ingress, string>) {
   const isSystemIngress = isSystemNamespace(namespace);
 
   return (
-    <div className="flex whitespace-nowrap">
+    <div className="flex flex-nowrap whitespace-nowrap">
       <Authorized authorizations="K8sIngressesW" childrenUnauthorized={name}>
         <Link
           to="kubernetes.ingresses.edit"
@@ -38,7 +38,7 @@ function Cell({ row, getValue }: CellContext<Ingress, string>) {
       </Authorized>
       {isSystemIngress && (
         <Badge type="success" className="ml-2">
-          system
+          System
         </Badge>
       )}
     </div>
diff --git a/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/name.tsx b/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/name.tsx
index 99d89b5b9..6f80a6a74 100644
--- a/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/name.tsx
+++ b/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/name.tsx
@@ -1,6 +1,8 @@
 import { Authorized } from '@/react/hooks/useUser';
 import { isSystemNamespace } from '@/react/kubernetes/namespaces/utils';
 
+import { Badge } from '@@/Badge';
+
 import { columnHelper } from './helper';
 
 export const name = columnHelper.accessor(
@@ -32,21 +34,21 @@ export const name = columnHelper.accessor(
         !row.original.Labels['io.portainer.kubernetes.application.owner'];
 
       return (
-        <Authorized authorizations="K8sServiceW" childrenUnauthorized={name}>
-          {name}
-
-          {isSystem && (
-            <span className="label label-info image-tag label-margins">
-              system
-            </span>
-          )}
-
-          {isExternal && !isSystem && (
-            <span className="label label-primary image-tag label-margins">
-              external
-            </span>
-          )}
-        </Authorized>
+        <div className="flex">
+          <Authorized authorizations="K8sServiceW" childrenUnauthorized={name}>
+            {name}
+
+            {isSystem && (
+              <Badge type="success" className="ml-2">
+                System
+              </Badge>
+            )}
+
+            {isExternal && !isSystem && (
+              <Badge className="ml-2">External</Badge>
+            )}
+          </Authorized>
+        </div>
       );
     },
   }