ENCOA-163: Groups should only display first 5 names on the table

src/pages/(admin)/Lists/GroupList.tsx

@@ -173,14 +173,13 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => {
 								control: (styles) => ({
 									...styles,
 									backgroundColor: "white",
-									borderRadius: "999px",
 									padding: "1rem 1.5rem",
 									zIndex: "40",
 								}),
 							}}
 						/>
 						{user.type !== "teacher" && (
-							<Button className="w-full max-w-[300px]" onClick={openFilePicker} isLoading={isLoading} variant="outline">
+							<Button className="w-full max-w-[300px] h-fit" onClick={openFilePicker} isLoading={isLoading} variant="outline">
 								{filesContent.length === 0 ? "Upload participants Excel file" : filesContent[0].name}
 							</Button>
 						)}
@@ -204,6 +203,7 @@ const filterTypes = ["corporate", "teacher", "mastercorporate"];
 export default function GroupList({user}: {user: User}) {
 	const [isCreating, setIsCreating] = useState(false);
 	const [editingGroup, setEditingGroup] = useState<Group>();
+	const [viewingAllParticipants, setViewingAllParticipants] = useState<string>();
 
 	const {permissions} = usePermissions(user?.id || "");
 
@@ -254,11 +254,29 @@ export default function GroupList({user}: {user: User}) {
 		}),
 		columnHelper.accessor("participants", {
 			header: "Participants",
-			cell: (info) =>
-				info
-					.getValue()
-					.map((x) => users.find((y) => y.id === x)?.name)
-					.join(", "),
+			cell: (info) => (
+				<span>
+					{info
+						.getValue()
+						.slice(0, viewingAllParticipants === info.row.original.id ? undefined : 5)
+						.map((x) => users.find((y) => y.id === x)?.name)
+						.join(", ")}
+					{info.getValue().length > 5 && viewingAllParticipants !== info.row.original.id && (
+						<button
+							className="text-mti-purple-light font-bold hover:text-mti-purple-dark transition ease-in-out duration-300"
+							onClick={() => setViewingAllParticipants(info.row.original.id)}>
+							, View More
+						</button>
+					)}
+					{info.getValue().length > 5 && viewingAllParticipants === info.row.original.id && (
+						<button
+							className="text-mti-purple-light font-bold hover:text-mti-purple-dark transition ease-in-out duration-300"
+							onClick={() => setViewingAllParticipants(undefined)}>
+							, View Less
+						</button>
+					)}
+				</span>
+			),
 		}),
 		{
 			header: "",