Sort project members by role

app/src/components/projectSettings/MemberTable.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import {
   Table,
   Thead,
@@ -44,6 +44,15 @@ const MemberTable = () => {
     [selectedProject?.id, cancelInvitationMutation],
   );
 
+  const sortedMembers = useMemo(() => {
+    if (!selectedProject?.projectUsers) return [];
+    return selectedProject.projectUsers.sort((a, b) => {
+      if (a.role === b.role) return a.createdAt < b.createdAt ? -1 : 1;
+      // Take advantage of fact that ADMIN is alphabetically before MEMBER
+      return a.role < b.role ? -1 : 1;
+    });
+  }, [selectedProject?.projectUsers]);
+
   return (
     <>
       <Table fontSize={{ base: "sm", md: "md" }}>
@@ -70,7 +79,8 @@ const MemberTable = () => {
             },
           }}
         >
-          {selectedProject?.projectUsers.map((member) => {
+          {selectedProject &&
+            sortedMembers.map((member) => {
               return (
                 <Tr key={member.id}>
                   <Td>