From f6f07f4690a429fa1e42a0058491ba6631289989 Mon Sep 17 00:00:00 2001
From: James Player <james.player@portainer.io>
Date: Thu, 3 Apr 2025 14:18:31 +1300
Subject: [PATCH] improvement(kubernetes): right align tags in datatables
 R8S-250 (#601)

Co-authored-by: testA113 <aliharriss1995@gmail.com>
---
 app/react/components/Badge/ExternalBadge.tsx           |  8 ++++++--
 app/react/components/Badge/SystemBadge.tsx             |  8 ++++++--
 .../ListView/ApplicationsDatatable/columns.name.tsx    |  6 +++++-
 .../ListView/ApplicationsDatatable/columns.tsx         |  2 +-
 .../ListView/ApplicationsStacksDatatable/columns.tsx   |  2 +-
 .../cluster/HomeView/NodesDatatable/columns/name.tsx   |  7 +++++--
 .../NodeApplicationsDatatable/columns.name.tsx         | 10 ++++++----
 .../IngressClassDatatable/columns/name.tsx             |  4 ++--
 app/react/kubernetes/components/ExternalBadge.tsx      |  5 -----
 app/react/kubernetes/components/SystemBadge.tsx        |  5 -----
 .../ListView/ConfigMapsDatatable/columns/name.tsx      |  9 ++++++---
 .../configs/ListView/SecretsDatatable/columns/name.tsx | 10 ++++++----
 .../ingresses/IngressDatatable/columns/name.tsx        |  2 +-
 .../ClusterRoleBindingsDatatable/columns/name.tsx      |  2 +-
 .../ClusterRolesDatatable/columns/name.tsx             |  6 ++++--
 .../JobsView/CronJobsDatatable/columns/name.tsx        |  2 +-
 .../JobsView/JobsDatatable/columns/name.tsx            |  2 +-
 .../RolesView/RoleBindingsDatatable/columns/name.tsx   |  2 +-
 .../RolesView/RolesDatatable/columns/name.tsx          |  6 ++++--
 .../ServiceAccountsDatatable/columns/name.tsx          |  2 +-
 .../namespaces/ListView/columns/useColumns.tsx         | 10 +++-------
 .../ServicesView/ServicesDatatable/columns/name.tsx    |  7 ++++---
 app/react/kubernetes/volumes/ListView/columns.name.tsx |  6 +++---
 23 files changed, 68 insertions(+), 55 deletions(-)
 delete mode 100644 app/react/kubernetes/components/ExternalBadge.tsx
 delete mode 100644 app/react/kubernetes/components/SystemBadge.tsx

diff --git a/app/react/components/Badge/ExternalBadge.tsx b/app/react/components/Badge/ExternalBadge.tsx
index 5cf85b844..e49afd07a 100644
--- a/app/react/components/Badge/ExternalBadge.tsx
+++ b/app/react/components/Badge/ExternalBadge.tsx
@@ -1,5 +1,9 @@
 import { Badge } from '@@/Badge';
 
-export function ExternalBadge() {
-  return <Badge type="info">External</Badge>;
+export function ExternalBadge({ className }: { className?: string }) {
+  return (
+    <Badge type="info" className={className}>
+      External
+    </Badge>
+  );
 }
diff --git a/app/react/components/Badge/SystemBadge.tsx b/app/react/components/Badge/SystemBadge.tsx
index e09b944ff..204d01bbd 100644
--- a/app/react/components/Badge/SystemBadge.tsx
+++ b/app/react/components/Badge/SystemBadge.tsx
@@ -1,5 +1,9 @@
 import { Badge } from '@@/Badge';
 
-export function SystemBadge() {
-  return <Badge type="success">System</Badge>;
+export function SystemBadge({ className }: { className?: string }) {
+  return (
+    <Badge type="success" className={className}>
+      System
+    </Badge>
+  );
 }
diff --git a/app/react/kubernetes/applications/ListView/ApplicationsDatatable/columns.name.tsx b/app/react/kubernetes/applications/ListView/ApplicationsDatatable/columns.name.tsx
index e0801cb8f..e7ff26593 100644
--- a/app/react/kubernetes/applications/ListView/ApplicationsDatatable/columns.name.tsx
+++ b/app/react/kubernetes/applications/ListView/ApplicationsDatatable/columns.name.tsx
@@ -43,7 +43,11 @@ function Cell({
         </Link>
       )}
 
-      {isSystem ? <SystemBadge /> : !item.ApplicationOwner && <ExternalBadge />}
+      {isSystem ? (
+        <SystemBadge className="ml-auto" />
+      ) : (
+        !item.ApplicationOwner && <ExternalBadge className="ml-auto" />
+      )}
     </div>
   );
 }
diff --git a/app/react/kubernetes/applications/ListView/ApplicationsDatatable/columns.tsx b/app/react/kubernetes/applications/ListView/ApplicationsDatatable/columns.tsx
index f5473b954..0ece6ed2e 100644
--- a/app/react/kubernetes/applications/ListView/ApplicationsDatatable/columns.tsx
+++ b/app/react/kubernetes/applications/ListView/ApplicationsDatatable/columns.tsx
@@ -31,7 +31,7 @@ function NamespaceCell({ row, getValue }: CellContext<Application, string>) {
       >
         {value}
       </Link>
-      {isSystem && <SystemBadge />}
+      {isSystem && <SystemBadge className="ml-auto" />}
     </div>
   );
 }
diff --git a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/columns.tsx b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/columns.tsx
index 40358f277..833bad58c 100644
--- a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/columns.tsx
+++ b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/columns.tsx
@@ -30,7 +30,7 @@ function NamespaceCell({ row, getValue }: CellContext<Stack, string>) {
       >
         {value}
       </Link>
-      {isSystem && <SystemBadge />}
+      {isSystem && <SystemBadge className="ml-auto" />}
     </div>
   );
 }
diff --git a/app/react/kubernetes/cluster/HomeView/NodesDatatable/columns/name.tsx b/app/react/kubernetes/cluster/HomeView/NodesDatatable/columns/name.tsx
index 1a0ddce53..cf1252919 100644
--- a/app/react/kubernetes/cluster/HomeView/NodesDatatable/columns/name.tsx
+++ b/app/react/kubernetes/cluster/HomeView/NodesDatatable/columns/name.tsx
@@ -34,8 +34,11 @@ function NameCell({
           {nodeName}
         </Link>
       </Authorized>
-      {node.isApi && <Badge type="info">api</Badge>}
-      {node.isPublishedNode && <Badge type="success">environment IP</Badge>}
+
+      <div className="ml-auto flex gap-2">
+        {node.isApi && <Badge type="info">api</Badge>}
+        {node.isPublishedNode && <Badge type="success">environment IP</Badge>}
+      </div>
     </div>
   );
 }
diff --git a/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.name.tsx b/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.name.tsx
index e7c6ecacf..bcc246dee 100644
--- a/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.name.tsx
+++ b/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.name.tsx
@@ -2,11 +2,11 @@ import { CellContext } from '@tanstack/react-table';
 
 import { isExternalApplication } from '@/react/kubernetes/applications/utils';
 import { useIsSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
-import { ExternalBadge } from '@/react/kubernetes/components/ExternalBadge';
-import { SystemBadge } from '@/react/kubernetes/components/SystemBadge';
 import { Application } from '@/react/kubernetes/applications/ListView/ApplicationsDatatable/types';
 
 import { Link } from '@@/Link';
+import { SystemBadge } from '@@/Badge/SystemBadge';
+import { ExternalBadge } from '@@/Badge/ExternalBadge';
 
 import { helper } from './columns.helper';
 
@@ -28,9 +28,11 @@ function Cell({ row: { original: item } }: CellContext<Application, string>) {
       </Link>
 
       {isSystem ? (
-        <SystemBadge />
+        <SystemBadge className="ml-auto" />
       ) : (
-        isExternalApplication({ metadata: item.Metadata }) && <ExternalBadge />
+        isExternalApplication({ metadata: item.Metadata }) && (
+          <ExternalBadge className="ml-auto" />
+        )
       )}
     </div>
   );
diff --git a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/name.tsx b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/name.tsx
index be22a5362..70a2dc765 100644
--- a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/name.tsx
+++ b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/name.tsx
@@ -19,9 +19,9 @@ function NameCell({
   const className = getValue();
 
   return (
-    <span className="flex flex-nowrap">
+    <span className="flex gap-2 flex-nowrap">
       {className}
-      {row.original.New && <Badge className="ml-1">Newly detected</Badge>}
+      {row.original.New && <Badge className="ml-auto">Newly detected</Badge>}
     </span>
   );
 }
diff --git a/app/react/kubernetes/components/ExternalBadge.tsx b/app/react/kubernetes/components/ExternalBadge.tsx
deleted file mode 100644
index cba18f3f1..000000000
--- a/app/react/kubernetes/components/ExternalBadge.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '@@/Badge';
-
-export function ExternalBadge() {
-  return <Badge type="info">external</Badge>;
-}
diff --git a/app/react/kubernetes/components/SystemBadge.tsx b/app/react/kubernetes/components/SystemBadge.tsx
deleted file mode 100644
index 17552d755..000000000
--- a/app/react/kubernetes/components/SystemBadge.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Badge } from '@@/Badge';
-
-export function SystemBadge() {
-  return <Badge type="success">system</Badge>;
-}
diff --git a/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx b/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx
index 526e009fa..065994322 100644
--- a/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx
+++ b/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx
@@ -55,9 +55,12 @@ function Cell({ row }: CellContext<ConfigMapRowData, string>) {
         >
           {name}
         </Link>
-        {isSystemConfigMap && <SystemBadge />}
-        {!isSystemToken && !hasConfigurationOwner && <ExternalBadge />}
-        {!row.original.inUse && !isSystemConfigMap && <UnusedBadge />}
+
+        <div className="ml-auto flex gap-2">
+          {isSystemConfigMap && <SystemBadge />}
+          {!isSystemToken && !hasConfigurationOwner && <ExternalBadge />}
+          {!row.original.inUse && !isSystemConfigMap && <UnusedBadge />}
+        </div>
       </div>
     </Authorized>
   );
diff --git a/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx b/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx
index ce0e6033c..31c30e0bb 100644
--- a/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx
+++ b/app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx
@@ -43,7 +43,7 @@ function Cell({ row }: CellContext<SecretRowData, string>) {
 
   return (
     <Authorized authorizations="K8sSecretsR" childrenUnauthorized={name}>
-      <div className="flex w-fit gap-x-2">
+      <div className="flex gap-2">
         <Link
           to="kubernetes.secrets.secret"
           params={{
@@ -56,9 +56,11 @@ function Cell({ row }: CellContext<SecretRowData, string>) {
         >
           {name}
         </Link>
-        {isSystemSecret && <SystemBadge />}
-        {!isSystemToken && !hasConfigurationOwner && <ExternalBadge />}
-        {!row.original.inUse && !isSystemSecret && <UnusedBadge />}
+        <div className="ml-auto flex gap-2">
+          {isSystemSecret && <SystemBadge />}
+          {!isSystemToken && !hasConfigurationOwner && <ExternalBadge />}
+          {!row.original.inUse && !isSystemSecret && <UnusedBadge />}
+        </div>
       </div>
     </Authorized>
   );
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx b/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx
index d8574c47a..33c3f546f 100644
--- a/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx
+++ b/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx
@@ -35,7 +35,7 @@ function Cell({ row, getValue }: CellContext<Ingress, string>) {
           {name}
         </Link>
       </Authorized>
-      {row.original.IsSystem && <SystemBadge />}
+      {row.original.IsSystem && <SystemBadge className="ml-auto" />}
     </div>
   );
 }
diff --git a/app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/name.tsx b/app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/name.tsx
index 45ebb750e..6b6d02da7 100644
--- a/app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/name.tsx
+++ b/app/react/kubernetes/more-resources/ClusterRolesView/ClusterRoleBindingsDatatable/columns/name.tsx
@@ -15,7 +15,7 @@ export const name = columnHelper.accessor(
     cell: ({ row }) => (
       <div className="flex gap-2">
         {row.original.name}
-        {row.original.isSystem && <SystemBadge />}
+        {row.original.isSystem && <SystemBadge className="ml-auto" />}
       </div>
     ),
   }
diff --git a/app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/name.tsx b/app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/name.tsx
index 53addd62e..e42129606 100644
--- a/app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/name.tsx
+++ b/app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/name.tsx
@@ -17,8 +17,10 @@ export const name = columnHelper.accessor(
     cell: ({ row }) => (
       <div className="flex gap-2">
         {row.original.name}
-        {row.original.isSystem && <SystemBadge />}
-        {row.original.isUnused && <UnusedBadge />}
+        <div className="ml-auto flex gap-2">
+          {row.original.isSystem && <SystemBadge />}
+          {row.original.isUnused && <UnusedBadge />}
+        </div>
       </div>
     ),
   }
diff --git a/app/react/kubernetes/more-resources/JobsView/CronJobsDatatable/columns/name.tsx b/app/react/kubernetes/more-resources/JobsView/CronJobsDatatable/columns/name.tsx
index a3394f57e..09620b65e 100644
--- a/app/react/kubernetes/more-resources/JobsView/CronJobsDatatable/columns/name.tsx
+++ b/app/react/kubernetes/more-resources/JobsView/CronJobsDatatable/columns/name.tsx
@@ -16,7 +16,7 @@ export const name = columnHelper.accessor(
     cell: ({ row }) => (
       <div className="flex gap-2">
         {row.original.Name}
-        {row.original.IsSystem && <SystemBadge />}
+        {row.original.IsSystem && <SystemBadge className="ml-auto" />}
       </div>
     ),
   }
diff --git a/app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/name.tsx b/app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/name.tsx
index a3394f57e..09620b65e 100644
--- a/app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/name.tsx
+++ b/app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/name.tsx
@@ -16,7 +16,7 @@ export const name = columnHelper.accessor(
     cell: ({ row }) => (
       <div className="flex gap-2">
         {row.original.Name}
-        {row.original.IsSystem && <SystemBadge />}
+        {row.original.IsSystem && <SystemBadge className="ml-auto" />}
       </div>
     ),
   }
diff --git a/app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/columns/name.tsx b/app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/columns/name.tsx
index 45ebb750e..6b6d02da7 100644
--- a/app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/columns/name.tsx
+++ b/app/react/kubernetes/more-resources/RolesView/RoleBindingsDatatable/columns/name.tsx
@@ -15,7 +15,7 @@ export const name = columnHelper.accessor(
     cell: ({ row }) => (
       <div className="flex gap-2">
         {row.original.name}
-        {row.original.isSystem && <SystemBadge />}
+        {row.original.isSystem && <SystemBadge className="ml-auto" />}
       </div>
     ),
   }
diff --git a/app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/name.tsx b/app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/name.tsx
index b73bc6180..16482e5ca 100644
--- a/app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/name.tsx
+++ b/app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/name.tsx
@@ -20,8 +20,10 @@ export const name = columnHelper.accessor(
     cell: ({ row }) => (
       <div className="flex gap-2">
         {row.original.name}
-        {row.original.isSystem && <SystemBadge />}
-        {row.original.isUnused && <UnusedBadge />}
+        <div className="ml-auto flex gap-2">
+          {row.original.isSystem && <SystemBadge />}
+          {row.original.isUnused && <UnusedBadge />}
+        </div>
       </div>
     ),
   }
diff --git a/app/react/kubernetes/more-resources/ServiceAccountsView/ServiceAccountsDatatable/columns/name.tsx b/app/react/kubernetes/more-resources/ServiceAccountsView/ServiceAccountsDatatable/columns/name.tsx
index e4749af9b..7a551f78c 100644
--- a/app/react/kubernetes/more-resources/ServiceAccountsView/ServiceAccountsDatatable/columns/name.tsx
+++ b/app/react/kubernetes/more-resources/ServiceAccountsView/ServiceAccountsDatatable/columns/name.tsx
@@ -16,7 +16,7 @@ export const name = columnHelper.accessor(
     cell: ({ row }) => (
       <div className="flex gap-2">
         <div>{row.original.name}</div>
-        {row.original.isSystem && <SystemBadge />}
+        {row.original.isSystem && <SystemBadge className="ml-auto" />}
       </div>
     ),
   }
diff --git a/app/react/kubernetes/namespaces/ListView/columns/useColumns.tsx b/app/react/kubernetes/namespaces/ListView/columns/useColumns.tsx
index 0da487973..541c2315f 100644
--- a/app/react/kubernetes/namespaces/ListView/columns/useColumns.tsx
+++ b/app/react/kubernetes/namespaces/ListView/columns/useColumns.tsx
@@ -28,7 +28,7 @@ export function useColumns() {
             const name = getValue();
 
             return (
-              <>
+              <div className="flex gap-2">
                 <Link
                   to="kubernetes.resourcePools.resourcePool"
                   params={{
@@ -38,12 +38,8 @@ export function useColumns() {
                 >
                   {name}
                 </Link>
-                {item.IsSystem && (
-                  <span className="ml-2">
-                    <SystemBadge />
-                  </span>
-                )}
-              </>
+                {item.IsSystem && <SystemBadge className="ml-auto" />}
+              </div>
             );
           },
         }),
diff --git a/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/name.tsx b/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/name.tsx
index 3a7183299..3dbc5dccc 100644
--- a/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/name.tsx
+++ b/app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/name.tsx
@@ -36,9 +36,10 @@ export const name = columnHelper.accessor(
           <Authorized authorizations="K8sServiceW" childrenUnauthorized={name}>
             {name}
 
-            {row.original.IsSystem && <SystemBadge />}
-
-            {isExternal && !row.original.IsSystem && <ExternalBadge />}
+            <div className="ml-auto flex gap-2">
+              {row.original.IsSystem && <SystemBadge />}
+              {isExternal && !row.original.IsSystem && <ExternalBadge />}
+            </div>
           </Authorized>
         </div>
       );
diff --git a/app/react/kubernetes/volumes/ListView/columns.name.tsx b/app/react/kubernetes/volumes/ListView/columns.name.tsx
index f1fc25138..ff2e986a1 100644
--- a/app/react/kubernetes/volumes/ListView/columns.name.tsx
+++ b/app/react/kubernetes/volumes/ListView/columns.name.tsx
@@ -41,12 +41,12 @@ export function NameCell({
         {item.PersistentVolumeClaim.Name}
       </Link>
       {isSystem ? (
-        <SystemBadge />
+        <SystemBadge className="ml-auto" />
       ) : (
-        <>
+        <div className="ml-auto flex gap-2">
           {item.PersistentVolumeClaim.IsExternal && <ExternalBadge />}
           {!isVolumeUsed(item) && <UnusedBadge />}
-        </>
+        </div>
       )}
     </div>
   );