libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

wip consents UI fixes

Browse source
This commit is contained in:
jenny-s51 2021-06-08 09:23:32 -04:00
parent f322edec10
commit 5ea204b003
3 changed files with 72 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
src/user/UserConsents.tsx
View file

@ -1,7 +1,7 @@
import React from "react"; import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { PageSection } from "@patternfly/react-core"; import { Button, Label, PageSection } from "@patternfly/react-core";
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState"; import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable"; import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
import { emptyFormatter } from "../util"; import { emptyFormatter } from "../util";
@ -27,10 +27,31 @@ export const UserConsents = () => {
return alphabetize(consents); return alphabetize(consents);
}; };
const [labelClicked, setLabelClicked] = useState(false);
useEffect(() => {
console.log(labelClicked)
}, [labelClicked])
const clientScopesRenderer = ({ const clientScopesRenderer = ({
grantedClientScopes, grantedClientScopes,
}: UserConsentRepresentation) => { }: UserConsentRepresentation) => {
return <>{grantedClientScopes!.join(", ")}</>; if (grantedClientScopes!.length <= 5 && labelClicked) {
return <>{grantedClientScopes!.join(", ")}</>;
} else
return (
<>
{grantedClientScopes!.slice(1, 6).join(", ")}{" "}
<Label
color="blue"
style={{ cursor: "pointer" }}
variant="outline"
onClick={() => setLabelClicked(true)}
>
{grantedClientScopes!.length - 5 + " more"}
</Label>
</>
);
}; };
const createdRenderer = ({ createDate }: UserConsentRepresentation) => { const createdRenderer = ({ createDate }: UserConsentRepresentation) => {
@ -45,50 +66,49 @@ export const UserConsents = () => {
return ( return (
<> <>
<PageSection variant="light"> <KeycloakDataTable
<KeycloakDataTable loader={loader}
loader={loader} ariaLabelKey="roles:roleList"
ariaLabelKey="roles:roleList" searchPlaceholderKey=" "
columns={[ columns={[
{ {
name: "clientId", name: "clientId",
displayKey: "clients:Client", displayKey: "clients:Client",
cellFormatters: [emptyFormatter()], cellFormatters: [emptyFormatter()],
transforms: [cellWidth(20)], transforms: [cellWidth(20)],
}, },
{ {
name: "grantedClientScopes", name: "grantedClientScopes",
displayKey: "client-scopes:grantedClientScopes", displayKey: "client-scopes:grantedClientScopes",
cellFormatters: [emptyFormatter()], cellFormatters: [emptyFormatter()],
cellRenderer: clientScopesRenderer, cellRenderer: clientScopesRenderer,
transforms: [cellWidth(30)], transforms: [cellWidth(30)],
}, },
{ {
name: "createdDate", name: "createdDate",
displayKey: "clients:created", displayKey: "clients:created",
cellFormatters: [emptyFormatter()], cellFormatters: [emptyFormatter()],
cellRenderer: createdRenderer, cellRenderer: createdRenderer,
transforms: [cellWidth(20)], transforms: [cellWidth(20)],
}, },
{ {
name: "lastUpdatedDate", name: "lastUpdatedDate",
displayKey: "clients:lastUpdated", displayKey: "clients:lastUpdated",
cellFormatters: [emptyFormatter()], cellFormatters: [emptyFormatter()],
cellRenderer: lastUpdatedRenderer, cellRenderer: lastUpdatedRenderer,
transforms: [cellWidth(20)], transforms: [cellWidth(20)],
}, },
]} ]}
emptyState={ emptyState={
<ListEmptyState <ListEmptyState
hasIcon={true} hasIcon={true}
icon={CubesIcon} icon={CubesIcon}
message={t("users:noConsents")} message={t("users:noConsents")}
instructions={t("users:noConsentsText")} instructions={t("users:noConsentsText")}
onPrimaryAction={() => {}} onPrimaryAction={() => {}}
/> />
} }
/> />
</PageSection>
</> </>
); );
}; };

4
src/user/UsersTabs.tsx
View file

@ -108,9 +108,7 @@ export const UsersTabs = () => {
data-testid="user-consents-tab" data-testid="user-consents-tab"
title={<TabTitleText>{t("users:consents")}</TabTitleText>} title={<TabTitleText>{t("users:consents")}</TabTitleText>}
> >
<PageSection variant="light"> <UserConsents />
<UserConsents />
</PageSection>
</Tab> </Tab>
</KeycloakTabs> </KeycloakTabs>
)} )}

4
src/user/user-section.css
View file

@ -45,3 +45,7 @@ td.pf-c-table__check > input {
width: 20px; width: 20px;
vertical-align: text-top; vertical-align: text-top;
} }
.pf-c-toolbar__content-section {
margin-bottom: calc(var(--pf-global--spacer--lg) * -1);
}