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>();
 
@@ -71,9 +76,9 @@ export const JoinGroupDialog = ({
             const existingUserGroups = await adminClient.users.listGroups({
               id,
             });
-
+            setJoinedGroups(existingUserGroups);
             return {
-          groups: _.differenceBy(allGroups, existingUserGroups, "id"),
+              groups: allGroups,
             };
           } else
             return {
@@ -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
-        onSelectDataListItem={(value) => {
-          setGroupId(value);
-        }}
-        aria-label={t("groups")}
-        isCompact
-      >
+      <DataList aria-label={t("groups")} isCompact>
         {(filtered || groups).map((group: Group) => (
           <DataListItem
             aria-labelledby={group.name}
             key={group.id}
             id={group.id}
-            onClick={(e) => {
+            onClick={
+              hasSubgroups(group)
+                ? (e) => {
                     if ((e.target as HTMLInputElement).type !== "checkbox") {
                       setGroupId(group.id);
                     }
-            }}
+                  }
+                : undefined
+            }
+            // onClick={hasSubgroups(group) ? undefined}
+          >
+            <DataListItemRow
+              className={`join-group-dialog-row-${
+                isRowDisabled(group) ? "m-disabled" : ""
+              }`}
+              data-testid={group.name}
             >
-            <DataListItemRow 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
               >
+                {hasSubgroups(group) ? (
                   <Button isDisabled variant="link">
                     <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) {
-      return alphabetize(directMembership);
+    if (!isDirectMembership) {
+      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;
+} */