chore: add name to the permissions table

Author: mainawycliffe

src/components/Permissions/PermissionsTable.tsx

@@ -1,6 +1,7 @@
 import { PermissionAPIResponse } from "@flanksource-ui/api/types/permissions";
 import { Avatar } from "@flanksource-ui/ui/Avatar";
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
+import { Icon } from "@flanksource-ui/ui/Icons/Icon";
 import { MRTDateCell } from "@flanksource-ui/ui/MRTDataTable/Cells/MRTDateCells";
 import MRTDataTable from "@flanksource-ui/ui/MRTDataTable/MRTDataTable";
 import { MRT_ColumnDef } from "mantine-react-table";
@@ -42,6 +43,34 @@ const permissionsTableColumns: MRT_ColumnDef<PermissionAPIResponse>[] = [
       );
     }
   },
+  {
+    header: "Subject",
+    size: 250,
+    Cell: ({ row }) => {
+      const team = row.original.team;
+      const person = row.original.person;
+
+      if (person) {
+        return (
+          <div className="flex flex-row items-center gap-2">
+            <Avatar user={person} />
+            <span>{person.name}</span>
+          </div>
+        );
+      }
+
+      if (team) {
+        return (
+          <div className="flex flex-row items-center gap-2">
+            <Icon name={team.icon} className="h-5 w-5 text-gray-600" />
+            <span>{team.name}</span>
+          </div>
+        );
+      }
+
+      return null;
+    }
+  },
   {
     id: "action",
     header: "Action",