improvement(kubernetes): right align tags in datatables R8S-250 (#601)

Co-authored-by: testA113 <aliharriss1995@gmail.com>
2025-07-19 13:29:41 +02:00 · 2025-04-03 14:18:31 +13:00 · 2025-04-03 14:18:31 +13:00 · f6f07f4690
commit f6f07f4690
parent 3800249921
23 changed files with 68 additions and 55 deletions
--- 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>
+  );
 }
--- 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>
+  );
 }
--- 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>
  );
 }
--- 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>
  );
 }
--- 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>
  );
 }
--- 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>
+
+      <div className="ml-auto flex gap-2">
        {node.isApi && <Badge type="info">api</Badge>}
        {node.isPublishedNode && <Badge type="success">environment IP</Badge>}
      </div>
+    </div>
  );
 }
--- 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>
  );
--- 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>
  );
 }
--- a/app/react/kubernetes/components/ExternalBadge.tsx
+++ b/app/react/kubernetes/components/ExternalBadge.tsx
@ -1,5 +0,0 @@
-import { Badge } from '@@/Badge';
-
-export function ExternalBadge() {
-  return <Badge type="info">external</Badge>;
-}
--- a/app/react/kubernetes/components/SystemBadge.tsx
+++ b/app/react/kubernetes/components/SystemBadge.tsx
@ -1,5 +0,0 @@
-import { Badge } from '@@/Badge';
-
-export function SystemBadge() {
-  return <Badge type="success">system</Badge>;
-}
--- a/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx
+++ b/app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx
@ -55,10 +55,13 @@ function Cell({ row }: CellContext<ConfigMapRowData, string>) {
        >
          {name}
        </Link>
+
+        <div className="ml-auto flex gap-2">
          {isSystemConfigMap && <SystemBadge />}
          {!isSystemToken && !hasConfigurationOwner && <ExternalBadge />}
          {!row.original.inUse && !isSystemConfigMap && <UnusedBadge />}
        </div>
+      </div>
    </Authorized>
  );
 }
--- 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,10 +56,12 @@ function Cell({ row }: CellContext<SecretRowData, string>) {
        >
          {name}
        </Link>
+        <div className="ml-auto flex gap-2">
          {isSystemSecret && <SystemBadge />}
          {!isSystemToken && !hasConfigurationOwner && <ExternalBadge />}
          {!row.original.inUse && !isSystemSecret && <UnusedBadge />}
        </div>
+      </div>
    </Authorized>
  );
 }
--- 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>
  );
 }
--- 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>
    ),
  }
--- a/app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/name.tsx
+++ b/app/react/kubernetes/more-resources/ClusterRolesView/ClusterRolesDatatable/columns/name.tsx
@ -17,9 +17,11 @@ export const name = columnHelper.accessor(
    cell: ({ row }) => (
      <div className="flex gap-2">
        {row.original.name}
+        <div className="ml-auto flex gap-2">
          {row.original.isSystem && <SystemBadge />}
          {row.original.isUnused && <UnusedBadge />}
        </div>
+      </div>
    ),
  }
 );
--- 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>
    ),
  }
--- 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>
    ),
  }
--- 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>
    ),
  }
--- a/app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/name.tsx
+++ b/app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/name.tsx
@ -20,9 +20,11 @@ export const name = columnHelper.accessor(
    cell: ({ row }) => (
      <div className="flex gap-2">
        {row.original.name}
+        <div className="ml-auto flex gap-2">
          {row.original.isSystem && <SystemBadge />}
          {row.original.isUnused && <UnusedBadge />}
        </div>
+      </div>
    ),
  }
 );
--- 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>
    ),
  }
--- 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>
            );
          },
        }),
--- 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}

+            <div className="ml-auto flex gap-2">
              {row.original.IsSystem && <SystemBadge />}
-
              {isExternal && !row.original.IsSystem && <ExternalBadge />}
+            </div>
          </Authorized>
        </div>
      );
--- 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>
  );