set leave buttons only on dgroups with direct membership (#499)

src/user/UserGroups.tsx

@@ -32,6 +32,9 @@ export const UserGroups = () => {
   const [username, setUsername] = useState("");
 
   const [isDirectMembership, setDirectMembership] = useState(true);
+  const [directMembershipList, setDirectMembershipList] = useState<
+    GroupRepresentation[]
+  >([]);
   const [open, setOpen] = useState(false);
 
   const adminClient = useAdminClient();
@@ -137,6 +140,7 @@ export const UserGroups = () => {
       (value) => !topLevelGroups.includes(value)
     );
 
+    setDirectMembershipList(directMembership);
     const filterDupesfromGroups = allPaths.filter(
       (thing, index, self) =>
         index === self.findIndex((t) => t.name === thing.name)
@@ -169,16 +173,6 @@ export const UserGroups = () => {
     return <>{group.name}</>;
   };
 
-  const LeaveButtonRenderer = (group: GroupRepresentation) => {
-    return (
-      <>
-        <Button onClick={() => leave(group)} variant="link">
-          {t("users:Leave")}
-        </Button>
-      </>
-    );
-  };
-
   const toggleModal = () => setOpen(!open);
 
   const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
@@ -213,6 +207,23 @@ export const UserGroups = () => {
     toggleDeleteDialog();
   };
 
+  const LeaveButtonRenderer = (group: GroupRepresentation) => {
+    if (
+      directMembershipList.some((item) => item.id === group.id) ||
+      directMembershipList.length === 0
+    ) {
+      return (
+        <>
+          <Button onClick={() => leave(group)} variant="link">
+            {t("users:Leave")}
+          </Button>
+        </>
+      );
+    } else {
+      return <> </>;
+    }
+  };
+
   return (
     <>
       <PageSection variant="light">
@@ -258,6 +269,7 @@ export const UserGroups = () => {
               cellFormatters: [emptyFormatter()],
               transforms: [cellWidth(45)],
             },
+
             {
               name: "",
               cellRenderer: LeaveButtonRenderer,