Convert detail tab text to links (#2277)
* convert to link * changed to be link to details fixes: #2039
This commit is contained in:
parent
73958176f5
commit
51aba823ef
5 changed files with 82 additions and 13 deletions
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
Loading…
Reference in a new issue