refactor(settings/auth): migrate ldap tables to react [EE-4712] (#10822)

app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPGroupsTable.tsx

@@ -0,0 +1,49 @@
+import { Users } from 'lucide-react';
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { Datatable } from '@@/datatables';
+import { useTableStateWithoutStorage } from '@@/datatables/useTableState';
+
+const columns = getColumns();
+
+interface Value {
+  Name: string;
+  Groups: string[];
+}
+
+export function LDAPGroupsTable({ dataset }: { dataset?: Value[] }) {
+  const tableState = useTableStateWithoutStorage();
+
+  return (
+    <Datatable
+      columns={columns}
+      dataset={dataset || []}
+      isLoading={!dataset}
+      title="Groups"
+      titleIcon={Users}
+      settingsManager={tableState}
+      emptyContentLabel="No groups found."
+      disableSelect
+    />
+  );
+}
+
+function getColumns() {
+  const helper = createColumnHelper<Value>();
+
+  return [
+    helper.accessor('Name', {}),
+    helper.accessor((item) => item.Groups.join(','), {
+      header: 'Groups',
+      cell: ({ row: { original: item } }) => (
+        <>
+          {item.Groups.map((g) => (
+            <p className="m-0" key={g}>
+              {g}
+            </p>
+          ))}
+        </>
+      ),
+    }),
+  ];
+}

app/react/portainer/settings/AuthenticationView/LDAPAuth/LDAPUsersTable.tsx

@@ -0,0 +1,37 @@
+import { Users } from 'lucide-react';
+
+import { Datatable } from '@@/datatables';
+import { useTableStateWithoutStorage } from '@@/datatables/useTableState';
+
+const columns = getColumns();
+
+interface Value {
+  value: string;
+}
+
+export function LDAPUsersTable({ dataset }: { dataset?: string[] }) {
+  const tableState = useTableStateWithoutStorage();
+  const items = dataset?.map((value) => ({ value }));
+
+  return (
+    <Datatable
+      columns={columns}
+      dataset={items || []}
+      isLoading={!items}
+      title="Users"
+      titleIcon={Users}
+      settingsManager={tableState}
+      emptyContentLabel="No users found."
+      disableSelect
+    />
+  );
+}
+
+function getColumns() {
+  return [
+    {
+      header: 'Name',
+      accessorFn: ({ value }: Value) => value,
+    },
+  ];
+}