diff --git a/src/user/UserConsents.tsx b/src/user/UserConsents.tsx index 5151f644b6..fab50c408b 100644 --- a/src/user/UserConsents.tsx +++ b/src/user/UserConsents.tsx @@ -1,7 +1,7 @@ -import React, { useState } from "react"; +import React from "react"; import { useParams } from "react-router-dom"; import { useTranslation } from "react-i18next"; -import { Label } from "@patternfly/react-core"; +import { Chip, ChipGroup } from "@patternfly/react-core"; import { ListEmptyState } from "../components/list-empty-state/ListEmptyState"; import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable"; import { emptyFormatter } from "../util"; @@ -22,38 +22,28 @@ export const UserConsents = () => { }; const loader = async () => { - const consents = await adminClient.users.listConsents({ id }); + const getConsents = await adminClient.users.listConsents({ id }); - return alphabetize(consents); + return alphabetize(getConsents); }; - const [labelClicked, setLabelClicked] = useState(false); - - // useEffect(() => { - // console.log(labelClicked) - // }, [key]) - - const [key, setKey] = useState(0); - const clientScopesRenderer = ({ grantedClientScopes, }: UserConsentRepresentation) => { - if (grantedClientScopes!.length <= 5 && labelClicked) { - return <>{grantedClientScopes!.join(", ")}; - } else - return ( - <> - {grantedClientScopes!.slice(1, 6).join(", ")}{" "} - - - ); + {currentChip} + + ))} + + ); }; const createdRenderer = ({ createDate }: UserConsentRepresentation) => { @@ -70,7 +60,6 @@ export const UserConsents = () => { <> input { .pf-c-toolbar__content-section { margin-bottom: calc(var(--pf-global--spacer--lg) * -1); } + +.pf-c-chip.kc-consents-chip::before { + padding: 0px; + border: 0; +} + +.pf-c-chip.kc-consents-chip { + padding: 0px; +} + +.pf-c-chip-group__list-item { + margin-right: 0px; +} + +#consents-chip-text.pf-c-chip-text { + font-size: var(--pf-c-table--cell--FontSize); +} + +.kc-consents-chip > .pf-c-chip__text { + font-size: var(--pf-c-table--cell--FontSize); + display: inline-block; +} + +.pf-c-chip-group.kc-consents-chip-group + > div.pf-c-chip-group__main + > ul.pf-c-chip-group__list + li:first-child + .pf-c-chip__text::before { + content: ""; +} + +.pf-c-chip-group.kc-consents-chip-group + > div.pf-c-chip-group__main + > ul.pf-c-chip-group__list + .pf-c-chip__text::before { + content: ", "; +} + +.pf-c-chip-group.kc-consents-chip-group + > div.pf-c-chip-group__main + > ul.pf-c-chip-group__list + .pf-m-overflow + .pf-c-chip__text::before { + content: ""; + margin-left: var(--pf-global--spacer--sm); + padding-left: 0px; +}