Convert detail tab text to links (#2277)

* convert to link

* changed to be link to details

fixes: #2039

src/clients/authorization/DetailCell.tsx

@@ -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} />
+      <DetailDescriptionLink
-      <DetailDescription
+        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>
   );

src/clients/authorization/DetailDescription.tsx

@@ -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>

src/clients/authorization/Permissions.tsx

@@ -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>
                         )}

src/clients/authorization/Policies.tsx

@@ -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>
                           )}

src/clients/authorization/Scopes.tsx

@@ -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>
                         )}