From d5d6f1b30a6b437511887e1bb67bfb267c4d174c Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Thu, 6 May 2021 15:21:10 -0400 Subject: [PATCH 1/5] 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; +} */ From 981a532a35ceb159598bfd1a8b39a073c0440451 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Thu, 6 May 2021 15:35:56 -0400 Subject: [PATCH 2/5] remove comment --- src/user/user-section.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/user/user-section.css b/src/user/user-section.css index 69977598ac..c28f7cbcfd 100644 --- a/src/user/user-section.css +++ b/src/user/user-section.css @@ -45,8 +45,3 @@ td.pf-c-table__check > input { 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; -} */ From 4fcc9654dc18f264aed734660084832fb096cb80 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Tue, 18 May 2021 10:39:17 -0400 Subject: [PATCH 3/5] rowsandchecks --- src/user/JoinGroupDialog.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/user/JoinGroupDialog.tsx b/src/user/JoinGroupDialog.tsx index d93b518bb8..73d18b551f 100644 --- a/src/user/JoinGroupDialog.tsx +++ b/src/user/JoinGroupDialog.tsx @@ -23,11 +23,6 @@ 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 = { @@ -209,7 +204,6 @@ export const JoinGroupDialog = ({ } : undefined } - // onClick={hasSubgroups(group) ? undefined} > Date: Tue, 18 May 2021 10:47:21 -0400 Subject: [PATCH 4/5] fix format --- src/user/JoinGroupDialog.tsx | 40 ++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/user/JoinGroupDialog.tsx b/src/user/JoinGroupDialog.tsx index 73d18b551f..1e99134aeb 100644 --- a/src/user/JoinGroupDialog.tsx +++ b/src/user/JoinGroupDialog.tsx @@ -64,26 +64,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, - }); - setJoinedGroups(existingUserGroups); - return { - groups: allGroups, - }; - } 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); From afb78cc6464828c82b544f89e3da3d0c785d4bb6 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Tue, 18 May 2021 14:14:15 -0400 Subject: [PATCH 5/5] fix import type --- src/user/JoinGroupDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/user/JoinGroupDialog.tsx b/src/user/JoinGroupDialog.tsx index 1e99134aeb..3f29472676 100644 --- a/src/user/JoinGroupDialog.tsx +++ b/src/user/JoinGroupDialog.tsx @@ -22,7 +22,7 @@ import { 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"; +import type GroupRepresentation from "keycloak-admin/lib/defs/groupRepresentation"; import { useParams } from "react-router-dom"; export type JoinGroupDialogProps = {