fixed uxd review issues (#478)

fixing: #464

src/clients/help.json

@@ -26,6 +26,9 @@
     "signature-algorithm": "JWA algorithm, which the client needs to use when signing a JWT for authentication. If left blank, the client is allowed to use any algorithm.",
     "subject": "A regular expression for validating Subject DN in the Client Certificate. Use \"(.*?)(?:$)\" to match all kind of expressions.",
     "evaluateExplain": "This page allows you to see all protocol mappers and role scope mappings",
+    "effectiveProtocolMappers": "Contains all default client scopes and selected optional scopes. All protocol mappers and role scope mappings of all those client scopes will be used when generating access token issued for your client",
+    "effectiveRoleScopeMappings": "Selected Optional Client Scopes, which will be used when issuing access token for this client. You can see above what value of OAuth Scope Parameter needs to be used when you want to have these optional client scopes applied when the initial OpenID Connect Authentication request will be sent from your client adapter",
+    "generatedAccessToken": "Example access token",
     "scopeParameter": "You can copy/paste this value of scope parameter and use it in initial OpenID Connect Authentication Request sent from this client adapter. Default client scopes and selected optional client scopes will be used when generating token issued for this client",
     "user": "Optionally select user, for whom the example access token will be generated. If you do not select a user, example access token will not be generated during evaluation",
     "notBefore": "Revoke any tokens issued before this date for this client.",

src/clients/scopes/EvaluateScopes.tsx

@@ -41,6 +41,7 @@ import { KeycloakDataTable } from "../../components/table-toolbar/KeycloakDataTa
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 
 import "./evaluate.css";
+import { HelpContext } from "../../components/help-enabler/HelpHeader";
 
 export type EvaluateScopesProps = {
   clientId: string;
@@ -65,7 +66,7 @@ const ProtocolMappers = ({
       columns={[
         {
           name: "mapperName",
-          displayKey: "clients:name",
+          displayKey: "common:name",
         },
         {
           name: "containerName",
@@ -77,7 +78,7 @@ const ProtocolMappers = ({
         },
         {
           name: "type.priority",
-          displayKey: "commmon:priority",
+          displayKey: "common:priority",
         },
       ]}
     />
@@ -117,6 +118,7 @@ const EffectiveRoles = ({
 export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
   const prefix = "openid";
   const { t } = useTranslation("clients");
+  const { enabled } = useContext(HelpContext);
   const adminClient = useAdminClient();
   const { realm } = useContext(RealmContext);
   const mapperTypes = useServerInfo().protocolMapperTypes![protocol];
@@ -255,11 +257,13 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
   return (
     <>
       <PageSection variant="light">
+        {enabled && (
           <TextContent className="keycloak__scopes_evaluate__intro">
             <Text>
               <QuestionCircleIcon /> {t("clients-help:evaluateExplain")}
             </Text>
           </TextContent>
+        )}
         <Form isHorizontal>
           <FormGroup
             label={t("scopeParameter")}
@@ -386,6 +390,7 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
         </GridItem>
         <GridItem span={4}>
           <Tabs
+            id="tabs"
             key={key}
             isVertical
             activeKey={activeTab}
@@ -396,7 +401,15 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
               aria-controls="effectiveProtocolMappers"
               eventKey={0}
               title={
-                <TabTitleText>{t("effectiveProtocolMappers")}</TabTitleText>
+                <TabTitleText>
+                  {t("effectiveProtocolMappers")}{" "}
+                  <HelpItem
+                    forID="effectiveProtocolMappers"
+                    forLabel={t("effectiveProtocolMappers")}
+                    helpText="clients-help:effectiveProtocolMappers"
+                    noVerticalAlign={false}
+                  />
+                </TabTitleText>
               }
               tabContentRef={tabContent1}
             />
@@ -405,7 +418,15 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
               aria-controls="effectiveRoleScopeMappings"
               eventKey={1}
               title={
-                <TabTitleText>{t("effectiveRoleScopeMappings")}</TabTitleText>
+                <TabTitleText>
+                  {t("effectiveRoleScopeMappings")}{" "}
+                  <HelpItem
+                    forID="effectiveRoleScopeMappings"
+                    forLabel={t("effectiveRoleScopeMappings")}
+                    helpText="clients-help:effectiveRoleScopeMappings"
+                    noVerticalAlign={false}
+                  />
+                </TabTitleText>
               }
               tabContentRef={tabContent2}
             ></Tab>
@@ -413,7 +434,17 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
               id="generatedAccessToken"
               aria-controls="generatedAccessToken"
               eventKey={2}
-              title={<TabTitleText>{t("generatedAccessToken")}</TabTitleText>}
+              title={
+                <TabTitleText>
+                  {t("generatedAccessToken")}{" "}
+                  <HelpItem
+                    forID="generatedAccessToken"
+                    forLabel={t("generatedAccessToken")}
+                    helpText="clients-help:generatedAccessToken"
+                    noVerticalAlign={false}
+                  />
+                </TabTitleText>
+              }
               tabContentRef={tabContent3}
             />
           </Tabs>

src/clients/scopes/evaluate.css

@@ -9,3 +9,7 @@
 .keycloak__scopes_evaluate__tabs {
   padding-top: var(--pf-global--spacer--2xl);
 }
+
+#tabs .pf-c-tabs__list {
+  max-width: 300px;
+}

src/components/help-enabler/HelpItem.tsx

@@ -8,9 +8,15 @@ type HelpItemProps = {
   helpText: string;
   forLabel: string;
   forID: string;
+  noVerticalAlign?: boolean;
 };
 
-export const HelpItem = ({ helpText, forLabel, forID }: HelpItemProps) => {
+export const HelpItem = ({
+  helpText,
+  forLabel,
+  forID,
+  noVerticalAlign = true,
+}: HelpItemProps) => {
   const { t } = useTranslation();
   const { enabled } = useContext(HelpContext);
   return (
@@ -24,7 +30,7 @@ export const HelpItem = ({ helpText, forLabel, forID }: HelpItemProps) => {
             aria-describedby={forID}
             className="pf-c-form__group-label-help"
           >
-            <HelpIcon noVerticalAlign />
+            <HelpIcon noVerticalAlign={noVerticalAlign} />
           </button>
         </Popover>
       )}