Add dialog to show authorization data (#2782)

public/resources/en/clients.json

@@ -48,6 +48,8 @@
   "evaluate": "Evaluate",
   "reevaluate": "Re-evaluate",
   "showAuthData": "Show authorization data",
+  "authData": "Authorization data",
+  "authDataDescription": "Represents a token carrying authorization data as a result of the processing of an authorization request. This representation is basically what Keycloak issues to clients asking for permission. Check the `authorization` claim for the permissions that where granted based on the current authorization request. ",
   "results": "Results",
   "allResults": "All results",
   "resultPermit": "Result-Permit",

src/clients/authorization/AuthorizationDataModal.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  Modal,
+  ModalVariant,
+  TextContent,
+  Text,
+  TextVariants,
+} from "@patternfly/react-core";
+
+import type AccessTokenRepresentation from "@keycloak/keycloak-admin-client/lib/defs/accessTokenAuthorization";
+import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
+import useToggle from "../../utils/useToggle";
+import { prettyPrintJSON } from "../../util";
+
+type AuthorizationDataModalProps = {
+  data: AccessTokenRepresentation;
+};
+
+export const AuthorizationDataModal = ({
+  data,
+}: AuthorizationDataModalProps) => {
+  const { t } = useTranslation("clients");
+  const [show, toggle] = useToggle();
+
+  return (
+    <>
+      <Button
+        data-testid="authorization-revert"
+        onClick={toggle}
+        variant="secondary"
+      >
+        {t("showAuthData")}
+      </Button>
+      <Modal
+        variant={ModalVariant.medium}
+        isOpen={show}
+        header={
+          <TextContent>
+            <Text component={TextVariants.h1}>{t("authData")}</Text>
+            <Text>{t("authDataDescription")}</Text>
+          </TextContent>
+        }
+        onClose={toggle}
+        actions={[
+          <Button
+            data-testid="cancel"
+            id="modal-cancel"
+            key="cancel"
+            onClick={toggle}
+          >
+            {t("common:cancel")}
+          </Button>,
+        ]}
+      >
+        <KeycloakTextArea readOnly rows={20} value={prettyPrintJSON(data)} />
+      </Modal>
+    </>
+  );
+};

src/clients/authorization/AuthorizationEvaluate.tsx

@@ -26,6 +26,7 @@ import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { FormPanel } from "../../components/scroll-form/FormPanel";
 import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
 import type RoleRepresentation from "@keycloak/keycloak-admin-client/lib/defs/roleRepresentation";
+import type AccessTokenRepresentation from "@keycloak/keycloak-admin-client/lib/defs/accessTokenAuthorization";
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import type ResourceEvaluation from "@keycloak/keycloak-admin-client/lib/defs/resourceEvaluation";
 import { useRealm } from "../../context/realm-context/RealmContext";
@@ -36,13 +37,15 @@ import type ResourceRepresentation from "@keycloak/keycloak-admin-client/lib/def
 import type ScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/scopeRepresentation";
 import type { KeyValueType } from "../../components/key-value-form/key-value-convert";
 import { TableComposable, Th, Thead, Tr } from "@patternfly/react-table";
-import "./auth-evaluate.css";
 import { AuthorizationEvaluateResource } from "./AuthorizationEvaluateResource";
 import { SearchIcon } from "@patternfly/react-icons";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useAccess } from "../../context/access/Access";
 import { ForbiddenSection } from "../../ForbiddenSection";
+import { AuthorizationDataModal } from "./AuthorizationDataModal";
+
+import "./auth-evaluate.css";
 
 interface EvaluateFormInputs
   extends Omit<ResourceEvaluation, "context" | "resources"> {
@@ -121,6 +124,7 @@ export const AuthorizationEvaluate = ({ client }: Props) => {
   const [evaluateResults, setEvaluateResults] = useState<
     EvaluationResultRepresentation[]
   >([]);
+  const [access, setAccess] = useState<AccessTokenRepresentation>();
   const [showEvaluateResults, setShowEvaluateResults] = useState(false);
   const searchQueryRef = useRef("");
   const [searchQuery, setSearchQuery] = useState("");
@@ -210,6 +214,7 @@ export const AuthorizationEvaluate = ({ client }: Props) => {
     );
 
     setEvaluateResults(evaluation.results);
+    setAccess(evaluation.rpt);
     setShowEvaluateResults(true);
     return evaluateResults;
   };
@@ -340,9 +345,7 @@ export const AuthorizationEvaluate = ({ client }: Props) => {
         >
           {t("clients:reevaluate")}
         </Button>
-        <Button data-testid="authorization-revert" variant="secondary">
+        <AuthorizationDataModal data={access!} />
-          {t("showAuthData")}
-        </Button>
       </ActionGroup>
     </PageSection>
   ) : (
@@ -644,14 +647,6 @@ export const AuthorizationEvaluate = ({ client }: Props) => {
           >
             {t("common:revert")}
           </Button>
-          <Button
-            data-testid="authorization-revert"
-            variant="primary"
-            onClick={() => reset()}
-            isDisabled
-          >
-            {t("lastEvaluation")}
-          </Button>
         </ActionGroup>
       </FormPanel>
     </PageSection>