From d5d6f1b30a6b437511887e1bb67bfb267c4d174c Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Thu, 6 May 2021 15:21:10 -0400 Subject: [PATCH] update checkbox styles and add disabled functionality to user grops modal --- public/index.css | 9 ++++ src/user/JoinGroupDialog.tsx | 95 ++++++++++++++++++++++-------------- src/user/UserGroups.tsx | 16 +++--- src/user/user-section.css | 30 ++++++++++++ 4 files changed, 108 insertions(+), 42 deletions(-) diff --git a/public/index.css b/public/index.css index f326ddc0f1..e75c4b8dc8 100644 --- a/public/index.css +++ b/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; +} diff --git a/src/user/JoinGroupDialog.tsx b/src/user/JoinGroupDialog.tsx index 5bab44da09..d93b518bb8 100644 --- a/src/user/JoinGroupDialog.tsx +++ b/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([]); const [filtered, setFiltered] = useState(); const [filter, setFilter] = useState(""); + const [joinedGroups, setJoinedGroups] = useState([]); const [groupId, setGroupId] = useState(); @@ -64,26 +69,26 @@ export const JoinGroupDialog = ({ async () => { const allGroups = await adminClient.groups.find(); - if (groupId) { - const group = await adminClient.groups.findOne({ id: groupId }); - return { group, groups: group.subGroups! }; - } else if (id) { - const existingUserGroups = await adminClient.users.listGroups({ - id, - }); - - return { - groups: _.differenceBy(allGroups, existingUserGroups, "id"), - }; - } else - return { - groups: allGroups, - }; - }, - async ({ group: selectedGroup, groups }) => { - if (selectedGroup) { - setNavigation([...navigation, selectedGroup]); - } + if (groupId) { + const group = await adminClient.groups.findOne({ id: groupId }); + return { group, groups: group.subGroups! }; + } else if (id) { + const existingUserGroups = await adminClient.users.listGroups({ + id, + }); + setJoinedGroups(existingUserGroups); + return { + groups: allGroups, + }; + } else + return { + groups: allGroups, + }; + }, + async ({ group: selectedGroup, groups }) => { + if (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 ( - { - setGroupId(value); - }} - aria-label={t("groups")} - isCompact - > + {(filtered || groups).map((group: Group) => ( { - if ((e.target as HTMLInputElement).type !== "checkbox") { - setGroupId(group.id); - } - }} + onClick={ + hasSubgroups(group) + ? (e) => { + if ((e.target as HTMLInputElement).type !== "checkbox") { + setGroupId(group.id); + } + } + : undefined + } + // onClick={hasSubgroups(group) ? undefined} > - + { group.checked = (e.target as HTMLInputElement).checked; let newSelectedRows: Group[]; @@ -232,9 +251,13 @@ export const JoinGroupDialog = ({ aria-label={t("groupName")} isPlainButtonAction > - + {hasSubgroups(group) ? ( + + ) : ( + "" + )} diff --git a/src/user/UserGroups.tsx b/src/user/UserGroups.tsx index 3f7d38b371..8d849b07a0 100644 --- a/src/user/UserGroups.tsx +++ b/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 && ( 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; +} */