91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
|
import React, { useState } from "react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import {
|
||
|
|
DescriptionList,
|
||
|
|
DescriptionListGroup,
|
||
|
|
DescriptionListTerm,
|
||
|
|
DescriptionListDescription,
|
||
|
|
} from "@patternfly/react-core";
|
||
|
|
|
||
|
|
import type ResourceServerRepresentation from "@keycloak/keycloak-admin-client/lib/defs/resourceServerRepresentation";
|
||
|
|
import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
|
||
|
|
|
||
|
|
import "./detail-cell.css";
|
||
|
|
|
||
|
|
type Scope = { id: string; name: string }[];
|
||
|
|
|
||
|
|
type DetailCellProps = {
|
||
|
|
id: string;
|
||
|
|
clientId: string;
|
||
|
|
uris?: string[];
|
||
|
|
};
|
||
|
|
|
||
|
|
export const DetailCell = ({ id, clientId, uris }: DetailCellProps) => {
|
||
|
|
const { t } = useTranslation("clients");
|
||
|
|
const adminClient = useAdminClient();
|
||
|
|
const [scope, setScope] = useState<Scope>();
|
||
|
|
const [permissions, setPermissions] =
|
||
|
|
useState<ResourceServerRepresentation[]>();
|
||
|
|
|
||
|
|
useFetch(
|
||
|
|
() =>
|
||
|
|
Promise.all([
|
||
|
|
adminClient.clients.listScopesByResource({
|
||
|
|
id: clientId,
|
||
|
|
resourceName: id,
|
||
|
|
}),
|
||
|
|
adminClient.clients.listPermissionsByResource({
|
||
|
|
id: clientId,
|
||
|
|
resourceId: id,
|
||
|
|
}),
|
||
|
|
]),
|
||
|
|
([scopes, permissions]) => {
|
||
|
|
setScope(scopes);
|
||
|
|
setPermissions(permissions);
|
||
|
|
},
|
||
|
|
[]
|
||
|
|
);
|
||
|
|
return (
|
||
|
|
<DescriptionList isHorizontal className="keycloak_resource_details">
|
||
|
|
{uris?.length !== 0 && (
|
||
|
|
<DescriptionListGroup>
|
||
|
|
<DescriptionListTerm>{t("uris")}</DescriptionListTerm>
|
||
|
|
<DescriptionListDescription>
|
||
|
|
{uris?.map((uri) => (
|
||
|
|
<span key={uri} className="pf-u-pr-sm">
|
||
|
|
{uri}
|
||
|
|
</span>
|
||
|
|
))}
|
||
|
|
</DescriptionListDescription>
|
||
|
|
</DescriptionListGroup>
|
||
|
|
)}
|
||
|
|
{scope?.length !== 0 && (
|
||
|
|
<DescriptionListGroup>
|
||
|
|
<DescriptionListTerm>{t("scopes")}</DescriptionListTerm>
|
||
|
|
<DescriptionListDescription>
|
||
|
|
{scope?.map((scope) => (
|
||
|
|
<span key={scope.id} className="pf-u-pr-sm">
|
||
|
|
{scope.name}
|
||
|
|
</span>
|
||
|
|
))}
|
||
|
|
</DescriptionListDescription>
|
||
|
|
</DescriptionListGroup>
|
||
|
|
)}
|
||
|
|
{permissions?.length !== 0 && (
|
||
|
|
<DescriptionListGroup>
|
||
|
|
<DescriptionListTerm>
|
||
|
|
{t("associatedPermissions")}
|
||
|
|
</DescriptionListTerm>
|
||
|
|
<DescriptionListDescription>
|
||
|
|
{permissions?.map((permission) => (
|
||
|
|
<span key={permission.id} className="pf-u-pr-sm">
|
||
|
|
{permission.name}
|
||
|
|
</span>
|
||
|
|
))}
|
||
|
|
</DescriptionListDescription>
|
||
|
|
</DescriptionListGroup>
|
||
|
|
)}
|
||
|
|
</DescriptionList>
|
||
|
|
);
|
||
|
|
};
|