update checkbox styles and add disabled functionality to user grops modal

public/index.css

@@ -44,3 +44,12 @@ label.pf-c-form__label {
 .keycloak-empty-state-card:hover {
   cursor: pointer;
 }
+
+td.pf-c-table__check > input {
+  vertical-align: baseline;
+}
+
+.pf-c-table.tbody.pf-c-table__check > input {
+  margin-top: var(--pf-c-table__check--input--MarginTop);
+  vertical-align: baseline;
+}

src/user/JoinGroupDialog.tsx

@@ -23,7 +23,11 @@ import { useTranslation } from "react-i18next";
 import { useFetch, useAdminClient } from "../context/auth/AdminClient";
 import { AngleRightIcon, SearchIcon } from "@patternfly/react-icons";
 import GroupRepresentation from "keycloak-admin/lib/defs/groupRepresentation";
+<<<<<<< HEAD
 import _ from "lodash";
+=======
+import { useErrorHandler } from "react-error-boundary";
+>>>>>>> update checkbox styles and add disabled functionality to user grops modal
 import { useParams } from "react-router-dom";
 
 export type JoinGroupDialogProps = {
@@ -55,6 +59,7 @@ export const JoinGroupDialog = ({
   const [groups, setGroups] = useState<Group[]>([]);
   const [filtered, setFiltered] = useState<GroupRepresentation[]>();
   const [filter, setFilter] = useState("");
+  const [joinedGroups, setJoinedGroups] = useState<GroupRepresentation[]>([]);
 
   const [groupId, setGroupId] = useState<string>();
 
@@ -64,26 +69,26 @@ export const JoinGroupDialog = ({
     async () => {
       const allGroups = await adminClient.groups.find();
 
-      if (groupId) {
+          if (groupId) {
-        const group = await adminClient.groups.findOne({ id: groupId });
+            const group = await adminClient.groups.findOne({ id: groupId });
-        return { group, groups: group.subGroups! };
+            return { group, groups: group.subGroups! };
-      } else if (id) {
+          } else if (id) {
-        const existingUserGroups = await adminClient.users.listGroups({
+            const existingUserGroups = await adminClient.users.listGroups({
-          id,
+              id,
-        });
+            });
-
+            setJoinedGroups(existingUserGroups);
-        return {
+            return {
-          groups: _.differenceBy(allGroups, existingUserGroups, "id"),
+              groups: allGroups,
-        };
+            };
-      } else
+          } else
-        return {
+            return {
-          groups: allGroups,
+              groups: allGroups,
-        };
+            };
-    },
+        },
-    async ({ group: selectedGroup, groups }) => {
+        async ({ group: selectedGroup, groups }) => {
-      if (selectedGroup) {
+          if (selectedGroup) {
-        setNavigation([...navigation, selectedGroup]);
+            setNavigation([...navigation, selectedGroup]);
-      }
+          }
 
       groups.forEach((group: Group) => {
         group.checked = !!selectedRows.find((r) => r.id === group.id);
@@ -95,6 +100,14 @@ export const JoinGroupDialog = ({
     [groupId]
   );
 
+  const isRowDisabled = (row?: GroupRepresentation) => {
+    return !!joinedGroups.find((group) => group.id === row?.id);
+  };
+
+  const hasSubgroups = (group: GroupRepresentation) => {
+    return group.subGroups!.length !== 0;
+  };
+
   return (
     <Modal
       variant={ModalVariant.small}
@@ -181,28 +194,34 @@ export const JoinGroupDialog = ({
           </ToolbarItem>
         </ToolbarContent>
       </Toolbar>
-      <DataList
+      <DataList aria-label={t("groups")} isCompact>
-        onSelectDataListItem={(value) => {
-          setGroupId(value);
-        }}
-        aria-label={t("groups")}
-        isCompact
-      >
         {(filtered || groups).map((group: Group) => (
           <DataListItem
             aria-labelledby={group.name}
             key={group.id}
             id={group.id}
-            onClick={(e) => {
+            onClick={
-              if ((e.target as HTMLInputElement).type !== "checkbox") {
+              hasSubgroups(group)
-                setGroupId(group.id);
+                ? (e) => {
-              }
+                    if ((e.target as HTMLInputElement).type !== "checkbox") {
-            }}
+                      setGroupId(group.id);
+                    }
+                  }
+                : undefined
+            }
+            // onClick={hasSubgroups(group) ? undefined}
           >
-            <DataListItemRow data-testid={group.name}>
+            <DataListItemRow
+              className={`join-group-dialog-row-${
+                isRowDisabled(group) ? "m-disabled" : ""
+              }`}
+              data-testid={group.name}
+            >
               <DataListCheck
+                className="join-group-modal-check"
                 data-testid={`${group.name}-check`}
                 isChecked={group.checked}
+                isDisabled={isRowDisabled(group)}
                 onChange={(checked, e) => {
                   group.checked = (e.target as HTMLInputElement).checked;
                   let newSelectedRows: Group[];
@@ -232,9 +251,13 @@ export const JoinGroupDialog = ({
                 aria-label={t("groupName")}
                 isPlainButtonAction
               >
-                <Button isDisabled variant="link">
+                {hasSubgroups(group) ? (
-                  <AngleRightIcon />
+                  <Button isDisabled variant="link">
-                </Button>
+                    <AngleRightIcon />
+                  </Button>
+                ) : (
+                  ""
+                )}
               </DataListAction>
             </DataListItemRow>
           </DataListItem>

src/user/UserGroups.tsx

@@ -83,11 +83,14 @@ export const UserGroups = () => {
       return [];
     }
 
-    const joinedGroups = await adminClient.users.listGroups({ ...params, id });
+    const joinedUserGroups = await adminClient.users.listGroups({
+      ...params,
+      id,
+    });
 
     const allCreatedGroups = await adminClient.groups.find();
 
-    const getAllPaths = joinedGroups.reduce(
+    const getAllPaths = joinedUserGroups.reduce(
       (acc: string[], cur) => (cur.path && acc.push(cur.path), acc),
       []
     );
@@ -157,7 +160,7 @@ export const UserGroups = () => {
 
     topLevelGroups.forEach((group) => subgroupArray.push(group.subGroups));
 
-    const directMembership = joinedGroups.filter(
+    const directMembership = joinedUserGroups!.filter(
       (value) => !topLevelGroups.includes(value)
     );
 
@@ -168,11 +171,11 @@ export const UserGroups = () => {
         index === self.findIndex((t) => t.name === thing.name)
     );
 
-    if (isDirectMembership) {
+    if (!isDirectMembership) {
-      return alphabetize(directMembership);
+      return alphabetize(filterDupesfromGroups);
     }
 
-    return alphabetize(filterDupesfromGroups);
+    return alphabetize(directMembership);
   };
 
   useFetch(
@@ -323,6 +326,7 @@ export const UserGroups = () => {
                 id="kc-direct-membership-checkbox"
                 onChange={() => setDirectMembership(!isDirectMembership)}
                 isChecked={isDirectMembership}
+                className="direct-membership-check"
               />
               {enabled && (
                 <Popover

src/user/user-section.css

@@ -20,3 +20,33 @@ button#kc-join-groups-button {
   margin-right: var(--pf-global--spacer--md);
   padding: var(--pf-global--spacer--xs);
 }
+
+.join-group-dialog-row-m-disabled {
+  pointer-events: none;
+  color: var(--pf-global--disabled-color--200);
+}
+
+input#kc-direct-membership-checkbox {
+  width: 20px;
+}
+
+.join-group-modal-check > div > input {
+  height: 20px;
+  width: 20px;
+}
+
+.data-list-check > input {
+  height: 20px;
+  width: 20px;
+}
+
+td.pf-c-table__check > input {
+  height: 20px;
+  width: 20px;
+  vertical-align: text-top;
+}
+
+/* .pf-c-table tbody .pf-c-table__check>input {
+  margin-top: var(--pf-c-table__check--input--MarginTop);
+  vertical-align: center;
+} */