Add utility function to pretty print JSON (#1310)

src/clients/scopes/EvaluateScopes.tsx

@@ -35,6 +35,7 @@ import { KeycloakDataTable } from "../../components/table-toolbar/KeycloakDataTa
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
+import { prettyPrintJSON } from "../../util";
 import "./evaluate.css";
 
 export type EvaluateScopesProps = {
@@ -232,7 +233,7 @@ export const EvaluateScopes = ({ clientId, protocol }: EvaluateScopesProps) => {
       }
     },
     (accessToken) => {
-      setAccessToken(JSON.stringify(accessToken, undefined, 3));
+      setAccessToken(prettyPrintJSON(accessToken));
     },
     [user, selected]
   );

src/components/download-dialog/DownloadDialog.tsx

@@ -16,6 +16,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
+import { prettyPrintJSON } from "../../util";
 import { ConfirmDialogModal } from "../confirm-dialog/ConfirmDialog";
 import { useHelp } from "../help-enabler/HelpHeader";
 import { HelpItem } from "../help-enabler/HelpItem";
@@ -46,7 +47,7 @@ export const DownloadDialog = ({
   const [openType, setOpenType] = useState(false);
 
   const selectedConfig = useMemo(
-    () => configFormats?.find((config) => config.id === selected) ?? null,
+    () => configFormats.find((config) => config.id === selected) ?? null,
     [selected]
   );
 
@@ -59,7 +60,7 @@ export const DownloadDialog = ({
       if (typeof snippet === "string") {
         return snippet;
       } else {
-        return JSON.stringify(snippet, undefined, 3);
+        return prettyPrintJSON(snippet);
       }
     },
     (snippet) => setSnippet(snippet),

src/events/AdminEvents.tsx

@@ -37,6 +37,7 @@ import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable
 import { useAdminClient } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
+import { prettyPrintJSON } from "../util";
 import "./events.css";
 
 type DisplayDialogProps = {
@@ -541,21 +542,11 @@ export const AdminEvents = () => {
     [t("ipAddress"), authEvent?.authDetails?.ipAddress],
   ];
 
-  function prettyPrintJSON(json: string) {
-    try {
-      return JSON.stringify(JSON.parse(json), null, 2);
-    } catch (error) {
-      return json;
-    }
-  }
-
   const code = useMemo(
     () =>
-      prettyPrintJSON(
+      representationEvent?.representation
-        representationEvent?.representation
+        ? prettyPrintJSON(JSON.parse(representationEvent.representation))
-          ? prettyPrintJSON(representationEvent.representation)
+        : "",
-          : ""
-      ),
     [representationEvent?.representation]
   );
 

src/realm-settings/PoliciesTab.tsx

@@ -17,7 +17,7 @@ import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { useTranslation } from "react-i18next";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
-import { upperCaseFormatter } from "../util";
+import { prettyPrintJSON, upperCaseFormatter } from "../util";
 import { CodeEditor, Language } from "@patternfly/react-code-editor";
 import { Link } from "react-router-dom";
 import type ClientPolicyRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientPolicyRepresentation";
@@ -44,7 +44,7 @@ export const PoliciesTab = () => {
 
   const loader = async () => policies ?? [];
 
-  const code = useMemo(() => JSON.stringify(policies, null, 2), [policies]);
+  const code = useMemo(() => prettyPrintJSON(policies), [policies]);
 
   const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
     titleKey: t("deleteClientPolicyConfirmTitle"),

src/realm-settings/ProfilesTab.tsx

@@ -20,6 +20,7 @@ import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { useAlerts } from "../components/alert/Alerts";
+import { prettyPrintJSON } from "../util";
 import { Link } from "react-router-dom";
 import { toNewClientProfile } from "./routes/NewClientProfile";
 import type ClientProfileRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientProfileRepresentation";
@@ -260,7 +261,7 @@ export const ProfilesTab = () => {
               <Button
                 variant={ButtonVariant.link}
                 onClick={() => {
-                  setCode(JSON.stringify(tableProfiles, null, 2));
+                  setCode(prettyPrintJSON(tableProfiles));
                 }}
                 data-testid="jsonEditor-reloadBtn"
               >

src/util.ts

@@ -44,7 +44,7 @@ export const exportClient = (client: ClientRepresentation): void => {
   }
 
   FileSaver.saveAs(
-    new Blob([JSON.stringify(clientCopy, null, 2)], {
+    new Blob([prettyPrintJSON(clientCopy)], {
       type: "application/json",
     }),
     clientCopy.clientId + ".json"
@@ -190,3 +190,5 @@ export const interpolateTimespan = (forHumans: string) => {
 };
 
 export const KEY_PROVIDER_TYPE = "org.keycloak.keys.KeyProvider";
+
+export const prettyPrintJSON = (value: any) => JSON.stringify(value, null, 2);