diff --git a/src/clients/ClientDetails.tsx b/src/clients/ClientDetails.tsx index 274905ee18..abafb183e4 100644 --- a/src/clients/ClientDetails.tsx +++ b/src/clients/ClientDetails.tsx @@ -4,15 +4,18 @@ import { ButtonVariant, Divider, DropdownItem, + Label, PageSection, Spinner, Tab, Tabs, TabTitleText, + Tooltip, } from "@patternfly/react-core"; +import { InfoCircleIcon } from "@patternfly/react-icons"; import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation"; import _ from "lodash"; -import React, { useState } from "react"; +import React, { useMemo, useState } from "react"; import { Controller, FormProvider, useForm, useWatch } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { useHistory, useParams } from "react-router-dom"; @@ -28,7 +31,10 @@ import { MultiLine, toValue, } from "../components/multi-line-input/MultiLineInput"; -import { ViewHeader } from "../components/view-header/ViewHeader"; +import { + ViewHeader, + ViewHeaderBadge, +} from "../components/view-header/ViewHeader"; import { useAdminClient, useFetch } from "../context/auth/AdminClient"; import { useRealm } from "../context/realm-context/RealmContext"; import { RolesList } from "../realm-roles/RolesList"; @@ -74,13 +80,30 @@ const ClientDetailHeader = ({ save(); }, }); + + const badges = useMemo(() => { + if (!client.protocol) { + return []; + } + + const text = client.bearerOnly ? ( + + + + ) : ( + + ); + + return [{ text }]; + }, [client]); + return ( <>