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;
+}