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

Convert detail tab text to links (#2277)

Browse source 
* convert to link

* changed to be link to details

fixes: #2039
This commit is contained in:
Erik Jan de Wit 2022-03-21 07:45:49 +01:00 committed by GitHub
parent 73958176f5
commit 51aba823ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 82 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/clients/authorization/DetailCell.tsx
View file

@ -4,7 +4,10 @@ import { DescriptionList } from "@patternfly/react-core";
import type ResourceServerRepresentation from "@keycloak/keycloak-admin-client/lib/defs/resourceServerRepresentation";
import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
import { DetailDescription } from "./DetailDescription";
import { DetailDescription, DetailDescriptionLink } from "./DetailDescription";
import { toScopeDetails } from "../routes/Scope";
import { useRealm } from "../../context/realm-context/RealmContext";
import { toPermissionDetails } from "../routes/PermissionDetails";
import "./detail-cell.css";
@ -18,6 +21,7 @@ type DetailCellProps = {
export const DetailCell = ({ id, clientId, uris }: DetailCellProps) => {
const adminClient = useAdminClient();
const { realm } = useRealm();
const [scope, setScope] = useState<Scope>();
const [permissions, setPermissions] =
useState<ResourceServerRepresentation[]>();
@ -48,11 +52,26 @@ export const DetailCell = ({ id, clientId, uris }: DetailCellProps) => {
return (
<DescriptionList isHorizontal className="keycloak_resource_details">
<DetailDescription name="uris" array={uris} />
<DetailDescription name="scopes" array={scope} convert={(s) => s.name} />
<DetailDescription
<DetailDescriptionLink
name="scopes"
array={scope}
convert={(s) => s.name}
link={(scope) =>
toScopeDetails({ id: clientId, realm, scopeId: scope.id! })
}
/>
<DetailDescriptionLink
name="associatedPermissions"
array={permissions}
convert={(p) => p.name!}
link={(permission) =>
toPermissionDetails({
id: clientId,
realm,
permissionId: permission.id!,
permissionType: "resource",
})
}
/>
</DescriptionList>
);

21
src/clients/authorization/DetailDescription.tsx
View file

@ -1,4 +1,6 @@
import React from "react";
import { Link } from "react-router-dom";
import type { LocationDescriptor } from "history";
import { useTranslation } from "react-i18next";
import {
DescriptionListGroup,
@ -12,11 +14,20 @@ type DetailDescriptionProps<T> = {
convert?: (obj: T) => string;
};
export function DetailDescription<T>({
export function DetailDescription<T>(props: DetailDescriptionProps<T>) {
return <DetailDescriptionLink {...props} />;
}
type DetailDescriptionLinkProps<T> = DetailDescriptionProps<T> & {
link?: (element: T) => LocationDescriptor;
};
export function DetailDescriptionLink<T>({
name,
array,
convert,
}: DetailDescriptionProps<T>) {
link,
}: DetailDescriptionLinkProps<T>) {
const { t } = useTranslation("clients");
return (
<DescriptionListGroup>
@ -25,7 +36,11 @@ export function DetailDescription<T>({
{array?.map((element) => {
const value =
typeof element === "string" ? element : convert!(element);
return (
return link ? (
<Link key={value} to={link(element as T)} className="pf-u-pr-sm">
{value}
</Link>
) : (
<span key={value} className="pf-u-pr-sm">
{value}
</span>

13
src/clients/authorization/Permissions.tsx
View file

@ -32,13 +32,14 @@ import useToggle from "../../utils/useToggle";
import { useRealm } from "../../context/realm-context/RealmContext";
import { SearchDropdown, SearchForm } from "./SearchDropdown";
import { MoreLabel } from "./MoreLabel";
import { DetailDescription } from "./DetailDescription";
import { DetailDescriptionLink } from "./DetailDescription";
import { EmptyPermissionsState } from "./EmptyPermissionsState";
import { toNewPermission } from "../routes/NewPermission";
import { toPermissionDetails } from "../routes/PermissionDetails";
import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
import "./permissions.css";
import { toPolicyDetails } from "../routes/PolicyDetails";
type PermissionsProps = {
clientId: string;
@ -324,10 +325,18 @@ export const AuthorizationPermissions = ({ clientId }: PermissionsProps) => {
isHorizontal
className="keycloak_resource_details"
>
<DetailDescription
<DetailDescriptionLink
name="associatedPolicy"
array={permission.associatedPolicies}
convert={(p) => p.name!}
link={(p) =>
toPolicyDetails({
id: clientId,
realm,
policyId: p.id!,
policyType: p.type!,
})
}
/>
</DescriptionList>
)}

13
src/clients/authorization/Policies.tsx
View file

@ -34,8 +34,9 @@ import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState
import useToggle from "../../utils/useToggle";
import { NewPolicyDialog } from "./NewPolicyDialog";
import { toCreatePolicy } from "../routes/NewPolicy";
import { DetailDescription } from "./DetailDescription";
import { toPermissionDetails } from "../routes/PermissionDetails";
import { SearchDropdown, SearchForm } from "./SearchDropdown";
import { DetailDescriptionLink } from "./DetailDescription";
type PoliciesProps = {
clientId: string;
@ -278,10 +279,18 @@ export const AuthorizationPolicies = ({ clientId }: PoliciesProps) => {
isHorizontal
className="keycloak_resource_details"
>
<DetailDescription
<DetailDescriptionLink
name="dependentPermission"
array={policy.dependentPolicies}
convert={(p) => p.name!}
link={(permission) =>
toPermissionDetails({
realm,
id: clientId,
permissionId: permission.id!,
permissionType: permission.type!,
})
}
/>
</DescriptionList>
)}

23
src/clients/authorization/Scopes.tsx
View file

@ -30,8 +30,10 @@ import { toNewScope } from "../routes/NewScope";
import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
import useToggle from "../../utils/useToggle";
import { DeleteScopeDialog } from "./DeleteScopeDialog";
import { DetailDescription } from "./DetailDescription";
import { DetailDescriptionLink } from "./DetailDescription";
import { toNewPermission } from "../routes/NewPermission";
import { toResourceDetails } from "../routes/Resource";
import { toPermissionDetails } from "../routes/PermissionDetails";
type ScopesProps = {
clientId: string;
@ -251,15 +253,30 @@ export const AuthorizationScopes = ({ clientId }: ScopesProps) => {
isHorizontal
className="keycloak_resource_details"
>
<DetailDescription
<DetailDescriptionLink
name="resources"
array={scope.resources}
convert={(r) => r.name!}
link={(r) =>
toResourceDetails({
id: clientId,
realm,
resourceId: r._id!,
})
}
/>
<DetailDescription
<DetailDescriptionLink
name="associatedPermissions"
array={scope.permissions}
convert={(p) => p.name!}
link={(p) =>
toPermissionDetails({
id: clientId,
realm,
permissionId: p.id!,
permissionType: p.type!,
})
}
/>
</DescriptionList>
)}