refactor(ui): use external/system badge where applicable [EE-6952] (#11475)

app/react/docker/images/ListView/ImagesDatatable/columns/id.tsx

@@ -6,6 +6,7 @@ import { getValueAsArrayOfStrings } from '@/portainer/helpers/array';
 import { ImagesListResponse } from '@/react/docker/images/queries/useImages';
 
 import { MultipleSelectionFilter } from '@@/datatables/Filter';
+import { UnusedBadge } from '@@/Badge/UnusedBadge';
 
 import { columnHelper } from './helper';
 
@@ -76,9 +77,7 @@ function Cell({
       <a href={linkProps.href} onClick={linkProps.onClick} title={name}>
         {truncate(name, 40)}
       </a>
-      {!image.used && (
-        <span className="label label-warning image-tag ml-2">Unused</span>
-      )}
+      {!image.used && <UnusedBadge />}
     </>
   );
 }

app/react/docker/volumes/ListView/VolumesDatatable/columns/name.tsx

@@ -8,6 +8,7 @@ import { Authorized } from '@/react/hooks/useUser';
 import { Button } from '@@/buttons';
 import { Link } from '@@/Link';
 import { MultipleSelectionFilter } from '@@/datatables/Filter';
+import { UnusedBadge } from '@@/Badge/UnusedBadge';
 
 import { DecoratedVolume } from '../../types';
 import { getTableMeta } from '../tableMeta';
@@ -76,7 +77,7 @@ function Cell({
   const name = getValue();
 
   return (
-    <>
+    <div className="flex gap-2">
       <Link
         to=".volume"
         params={{
@@ -107,11 +108,7 @@ function Cell({
           </Button>
         </Authorized>
       )}
-      {item.dangling && (
-        <span className="label label-warning image-tag ml-2" role="status">
-          Unused
-        </span>
-      )}
-    </>
+      {item.dangling && <UnusedBadge />}
+    </div>
   );
 }

app/react/kubernetes/applications/DetailsView/ApplicationSummaryWidget.tsx

@@ -10,13 +10,14 @@ import { usePublicSettings } from '@/react/portainer/settings/queries';
 import { GlobalDeploymentOptions } from '@/react/portainer/settings/types';
 
 import { DetailsTable } from '@@/DetailsTable';
-import { Badge } from '@@/Badge';
 import { Link } from '@@/Link';
 import { LoadingButton } from '@@/buttons';
 import { WidgetBody, Widget } from '@@/Widget';
 import { InlineLoader } from '@@/InlineLoader';
 import { Icon } from '@@/Icon';
 import { Note } from '@@/Note';
+import { ExternalBadge } from '@@/Badge/ExternalBadge';
+import { SystemBadge } from '@@/Badge/SystemBadge';
 
 import {
   appStackNameLabel,
@@ -127,7 +128,7 @@ export function ApplicationSummaryWidget() {
                       >
                         {name}
                         {externalApplication && !isSystemNamespace && (
-                          <Badge type="info">external</Badge>
+                          <ExternalBadge />
                         )}
                       </div>
                     </td>
@@ -156,7 +157,7 @@ export function ApplicationSummaryWidget() {
                         >
                           {namespace}
                         </Link>
-                        {isSystemNamespace && <Badge type="info">system</Badge>}
+                        {isSystemNamespace && <SystemBadge />}
                       </div>
                     </td>
                   </tr>

app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/SubRows.tsx

@@ -4,6 +4,7 @@ import KubernetesApplicationHelper from '@/kubernetes/helpers/application';
 import KubernetesNamespaceHelper from '@/kubernetes/helpers/namespaceHelper';
 
 import { Link } from '@@/Link';
+import { ExternalBadge } from '@@/Badge/ExternalBadge';
 
 import { KubernetesStack } from '../../types';
 
@@ -26,18 +27,18 @@ export function SubRows({
         >
           <td />
           <td colSpan={span - 1}>
-            <Link
-              to="kubernetes.applications.application"
-              params={{ name: app.Name, namespace: app.ResourcePool }}
-            >
-              {app.Name}
-            </Link>
-            {KubernetesNamespaceHelper.isSystemNamespace(app.ResourcePool) &&
-              KubernetesApplicationHelper.isExternalApplication(app) && (
-                <span className="space-left label label-primary image-tag">
-                  external
-                </span>
-              )}
+            <div className="flex gap-2">
+              <Link
+                to="kubernetes.applications.application"
+                params={{ name: app.Name, namespace: app.ResourcePool }}
+              >
+                {app.Name}
+              </Link>
+              {KubernetesNamespaceHelper.isSystemNamespace(app.ResourcePool) &&
+                KubernetesApplicationHelper.isExternalApplication(app) && (
+                  <ExternalBadge />
+                )}
+            </div>
           </td>
         </tr>
       ))}

app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/columns.tsx

@@ -6,6 +6,7 @@ import KubernetesNamespaceHelper from '@/kubernetes/helpers/namespaceHelper';
 import { buildExpandColumn } from '@@/datatables/expand-column';
 import { Link } from '@@/Link';
 import { Icon } from '@@/Icon';
+import { SystemBadge } from '@@/Badge/SystemBadge';
 
 import { KubernetesStack } from '../../types';
 
@@ -23,7 +24,7 @@ export const columns = [
     cell: ({ getValue }) => {
       const value = getValue();
       return (
-        <>
+        <div className="flex gap-2">
           <Link
             to="kubernetes.resourcePools.resourcePool"
             params={{ id: value }}
@@ -31,11 +32,9 @@ export const columns = [
             {value}
           </Link>
           {KubernetesNamespaceHelper.isSystemNamespace(value) && (
-            <span className="label label-info image-tag label-margins">
-              system
-            </span>
+            <SystemBadge />
           )}
-        </>
+        </div>
       );
     },
   }),

app/react/kubernetes/configs/ListView/ConfigMapsDatatable/columns/name.tsx

@@ -3,8 +3,10 @@ import { CellContext } from '@tanstack/react-table';
 import { Authorized } from '@/react/hooks/useUser';
 import { appOwnerLabel } from '@/react/kubernetes/applications/constants';
 
+import { ExternalBadge } from '@@/Badge/ExternalBadge';
+import { SystemBadge } from '@@/Badge/SystemBadge';
+import { UnusedBadge } from '@@/Badge/UnusedBadge';
 import { Link } from '@@/Link';
-import { Badge } from '@@/Badge';
 
 import { ConfigMapRowData } from '../types';
 import { configurationOwnerUsernameLabel } from '../../../constants';
@@ -47,7 +49,7 @@ function Cell({ row }: CellContext<ConfigMapRowData, string>) {
 
   return (
     <Authorized authorizations="K8sConfigMapsR" childrenUnauthorized={name}>
-      <div className="flex">
+      <div className="flex gap-2">
         <Link
           to="kubernetes.configmaps.configmap"
           params={{
@@ -59,19 +61,9 @@ function Cell({ row }: CellContext<ConfigMapRowData, string>) {
         >
           {name}
         </Link>
-        {isSystemConfigMap && (
-          <Badge type="success" className="ml-2">
-            System
-          </Badge>
-        )}
-        {!isSystemToken && !hasConfigurationOwner && (
-          <Badge className="ml-2">External</Badge>
-        )}
-        {!row.original.inUse && !isSystemConfigMap && (
-          <Badge type="warn" className="ml-2">
-            Unused
-          </Badge>
-        )}
+        {isSystemConfigMap && <SystemBadge />}
+        {!isSystemToken && !hasConfigurationOwner && <ExternalBadge />}
+        {!row.original.inUse && !isSystemConfigMap && <UnusedBadge />}
       </div>
     </Authorized>
   );

app/react/kubernetes/configs/ListView/SecretsDatatable/columns/name.tsx

@@ -3,8 +3,10 @@ import { CellContext } from '@tanstack/react-table';
 import { Authorized } from '@/react/hooks/useUser';
 import { appOwnerLabel } from '@/react/kubernetes/applications/constants';
 
+import { SystemBadge } from '@@/Badge/SystemBadge';
+import { ExternalBadge } from '@@/Badge/ExternalBadge';
+import { UnusedBadge } from '@@/Badge/UnusedBadge';
 import { Link } from '@@/Link';
-import { Badge } from '@@/Badge';
 
 import { SecretRowData } from '../types';
 import { configurationOwnerUsernameLabel } from '../../../constants';
@@ -60,19 +62,10 @@ function Cell({ row }: CellContext<SecretRowData, string>) {
         >
           {name}
         </Link>
-        {isSystemSecret && (
-          <Badge type="success" className="ml-2">
-            System
-          </Badge>
-        )}
-        {!isSystemToken && !hasConfigurationOwner && (
-          <Badge className="ml-2">External</Badge>
-        )}
-        {!row.original.inUse && !isSystemSecret && (
-          <Badge type="warn" className="ml-2">
-            Unused
-          </Badge>
-        )}
+
+        {isSystemSecret && <SystemBadge />}
+        {!isSystemToken && !hasConfigurationOwner && <ExternalBadge />}
+        {!row.original.inUse && !isSystemSecret && <UnusedBadge />}
       </div>
     </Authorized>
   );

app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx

@@ -2,8 +2,8 @@ import { CellContext } from '@tanstack/react-table';
 
 import { Authorized } from '@/react/hooks/useUser';
 
+import { SystemBadge } from '@@/Badge/SystemBadge';
 import { Link } from '@@/Link';
-import { Badge } from '@@/Badge';
 
 import { Ingress } from '../../types';
 
@@ -20,7 +20,7 @@ function Cell({ row, getValue }: CellContext<Ingress, string>) {
   const namespace = row.original.Namespace;
 
   return (
-    <div className="flex flex-nowrap whitespace-nowrap">
+    <div className="flex flex-nowrap whitespace-nowrap gap-2">
       <Authorized authorizations="K8sIngressesW" childrenUnauthorized={name}>
         <Link
           to="kubernetes.ingresses.edit"
@@ -34,11 +34,7 @@ function Cell({ row, getValue }: CellContext<Ingress, string>) {
           {name}
         </Link>
       </Authorized>
-      {row.original.IsSystem && (
-        <Badge type="success" className="ml-2">
-          System
-        </Badge>
-      )}
+      {row.original.IsSystem && <SystemBadge />}
     </div>
   );
 }

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/name.tsx

@@ -1,6 +1,7 @@
 import { Authorized } from '@/react/hooks/useUser';
 
-import { Badge } from '@@/Badge';
+import { SystemBadge } from '@@/Badge/SystemBadge';
+import { ExternalBadge } from '@@/Badge/ExternalBadge';
 
 import { columnHelper } from './helper';
 
@@ -31,19 +32,13 @@ export const name = columnHelper.accessor(
         !row.original.Labels['io.portainer.kubernetes.application.owner'];
 
       return (
-        <div className="flex">
+        <div className="flex gap-2">
           <Authorized authorizations="K8sServiceW" childrenUnauthorized={name}>
             {name}
 
-            {row.original.IsSystem && (
-              <Badge type="success" className="ml-2">
-                System
-              </Badge>
-            )}
+            {row.original.IsSystem && <SystemBadge />}
 
-            {isExternal && !row.original.IsSystem && (
-              <Badge className="ml-2">External</Badge>
-            )}
+            {isExternal && !row.original.IsSystem && <ExternalBadge />}
           </Authorized>
         </div>
       );