refactor(k8s): namespace core logic (#12142)

Co-authored-by: testA113 <aliharriss1995@gmail.com>
Co-authored-by: Anthony Lapenna <anthony.lapenna@portainer.io>
Co-authored-by: James Carppe <85850129+jamescarppe@users.noreply.github.com>
Co-authored-by: Ali <83188384+testA113@users.noreply.github.com>

app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/created.tsx

@@ -0,0 +1,12 @@
+import { formatDate } from '@/portainer/filters/filters';
+
+import { columnHelper } from './helper';
+
+export const created = columnHelper.accessor(
+  (row) => formatDate(row.creationDate),
+  {
+    header: 'Created',
+    id: 'created',
+    cell: ({ getValue }) => getValue(),
+  }
+);

app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { Role } from '../types';
+
+export const columnHelper = createColumnHelper<Role>();

app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/index.tsx

@@ -0,0 +1,5 @@
+import { name } from './name';
+import { created } from './created';
+import { namespace } from './namespace';
+
+export const columns = [name, namespace, created];

app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/name.tsx

@@ -0,0 +1,28 @@
+import { SystemBadge } from '@@/Badge/SystemBadge';
+import { UnusedBadge } from '@@/Badge/UnusedBadge';
+
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor(
+  (row) => {
+    let result = row.name;
+    if (row.isSystem) {
+      result += ' system';
+    }
+    if (row.isUnused) {
+      result += ' unused';
+    }
+    return result;
+  },
+  {
+    header: 'Name',
+    id: 'name',
+    cell: ({ row }) => (
+      <div className="flex gap-2">
+        {row.original.name}
+        {row.original.isSystem && <SystemBadge />}
+        {row.original.isUnused && <UnusedBadge />}
+      </div>
+    ),
+  }
+);

app/react/kubernetes/more-resources/RolesView/RolesDatatable/columns/namespace.tsx

@@ -0,0 +1,32 @@
+import { Row } from '@tanstack/react-table';
+
+import { filterHOC } from '@@/datatables/Filter';
+import { Link } from '@@/Link';
+
+import { Role } from '../types';
+
+import { columnHelper } from './helper';
+
+export const namespace = columnHelper.accessor((row) => row.namespace, {
+  header: 'Namespace',
+  id: 'namespace',
+  cell: ({ getValue, row }) => (
+    <Link
+      to="kubernetes.resourcePools.resourcePool"
+      params={{
+        id: getValue(),
+      }}
+      title={getValue()}
+      data-cy={`role-namespace-link-${row.original.name}`}
+    >
+      {getValue()}
+    </Link>
+  ),
+  meta: {
+    filter: filterHOC('Filter by namespace'),
+  },
+  enableColumnFilter: true,
+  filterFn: (row: Row<Role>, _columnId: string, filterValue: string[]) =>
+    filterValue.length === 0 ||
+    filterValue.includes(row.original.namespace ?? ''),
+});