Admin events rep dialog (#1137)

* admin-events-list: added PF code editor

* realm-settings: added template for client policies tab

* realm-settings: fixed space between text and q icon

* admin-events-list: hardcoded representation dialog

* realm-settings: css improvement

* realm-settings: feedback applied

* realm-settings: feedback applied

* admin-events-list: fixed representation dialog

* admin-events-list: fixed representation dialog

* Update src/events/AdminEvents.tsx

Co-authored-by: Jon Koops <jonkoops@gmail.com>

* admin-events-list: fixed representation dialog

Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>
Co-authored-by: Jon Koops <jonkoops@gmail.com>

package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@keycloak/keycloak-admin-client": "^16.0.0-dev.10",
     "@patternfly/patternfly": "^4.132.2",
+    "@patternfly/react-code-editor": "^4.3.42",
     "@patternfly/react-core": "4.152.4",
     "@patternfly/react-icons": "4.11.14",
     "@patternfly/react-table": "4.29.58",

src/events/AdminEvents.tsx

@@ -24,9 +24,10 @@ import {
   TableHeader,
   TableVariant,
 } from "@patternfly/react-table";
+import { CodeEditor, Language } from "@patternfly/react-code-editor";
 import type AdminEventRepresentation from "@keycloak/keycloak-admin-client/lib/defs/adminEventRepresentation";
 import moment from "moment";
-import React, { FunctionComponent, useState } from "react";
+import React, { FunctionComponent, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -540,6 +541,24 @@ 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
+          ? prettyPrintJSON(representationEvent.representation)
+          : ""
+      ),
+    [representationEvent?.representation]
+  );
+
   return (
     <>
       {authEvent && (
@@ -562,7 +581,13 @@ export const AdminEvents = () => {
           data-testid="representation-dialog"
           onClose={() => setRepresentationEvent(undefined)}
         >
-          some json from the changed values
+          <CodeEditor
+            isLineNumbersVisible
+            isReadOnly
+            code={code}
+            language={Language.json}
+            height="125px"
+          />
         </DisplayDialog>
       )}
       <KeycloakDataTable

src/realm-settings/PoliciesTab.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { PageSection } from "@patternfly/react-core";
+
+import "./RealmSettingsSection.css";
+
+export const PoliciesTab = () => {
+  return (
+    <PageSection variant="light" padding={{ default: "noPadding" }}>
+      <h1>Policies Tab</h1>
+    </PageSection>
+  );
+};

src/realm-settings/ProfilesTab.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { PageSection } from "@patternfly/react-core";
+
+import "./RealmSettingsSection.css";
+
+export const ProfilesTab = () => {
+  return (
+    <PageSection variant="light" padding={{ default: "noPadding" }}>
+      <h1>Profiles Tab</h1>
+    </PageSection>
+  );
+};

src/realm-settings/RealmSettingsSection.css

@@ -176,3 +176,8 @@ article.pf-c-card.pf-m-flat.kc-login-settings-template
 .kc-row-drag-button {
   padding: var(--pf-global--spacer--sm);
 }
+
+.kc-help-text {
+  margin: var(--pf-global--spacer--sm);
+  font-size: var(--pf-global--FontSize--sm);
+}

src/realm-settings/RealmSettingsTabs.tsx

@@ -41,9 +41,12 @@ import { SecurityDefences } from "./security-defences/SecurityDefences";
 import { RealmSettingsSessionsTab } from "./SessionsTab";
 import { RealmSettingsThemesTab } from "./ThemesTab";
 import { RealmSettingsTokensTab } from "./TokensTab";
+import { ProfilesTab } from "./ProfilesTab";
+import { PoliciesTab } from "./PoliciesTab";
 import { PartialImportDialog } from "./PartialImport";
 import { toRealmSettings } from "./routes/RealmSettings";
 import { LocalizationTab } from "./LocalizationTab";
+import { HelpItem } from "../components/help-enabler/HelpItem";
 
 type RealmSettingsHeaderProps = {
   onChange: (value: boolean) => void;
@@ -345,6 +348,66 @@ export const RealmSettingsTabs = ({
                 reset={() => resetForm(realm)}
               />
             </Tab>
+            <Tab
+              eventKey="clientPolicies"
+              title={
+                <TabTitleText>
+                  {t("realm-settings:clientPolicies")}
+                </TabTitleText>
+              }
+              data-testid="rs-clientPolicies-tab"
+              aria-label={t("clientPoliciesTab")}
+            >
+              <Tabs
+                activeKey={activeTab}
+                onSelect={(_, key) => setActiveTab(Number(key))}
+              >
+                <Tab
+                  id="profiles"
+                  eventKey={0}
+                  data-testid="rs-profiles-clientPolicies-tab"
+                  aria-label={t("clientProfilesSubTab")}
+                  title={
+                    <TabTitleText>
+                      {t("profiles")}
+                      <span className="kc-help-text">
+                        <HelpItem
+                          helpText={t("clientPoliciesProfilesHelpText")}
+                          forLabel={t("clientPoliciesProfiles")}
+                          forID={t(`common:helpLabel`, {
+                            label: t("clientPoliciesProfiles"),
+                          })}
+                        />
+                      </span>
+                    </TabTitleText>
+                  }
+                >
+                  <ProfilesTab />
+                </Tab>
+                <Tab
+                  id="policies"
+                  data-testid="rs-policies-clientPolicies-tab"
+                  aria-label={t("clientPoliciesSubTab")}
+                  eventKey={1}
+                  title={
+                    <TabTitleText>
+                      {t("policies")}
+                      <span className="kc-help-text">
+                        <HelpItem
+                          helpText={t("clientPoliciesPoliciesHelpText")}
+                          forLabel={t("clientPoliciesPolicies")}
+                          forID={t(`common:helpLabel`, {
+                            label: t("clientPoliciesPolicies"),
+                          })}
+                        />
+                      </span>
+                    </TabTitleText>
+                  }
+                >
+                  <PoliciesTab />
+                </Tab>
+              </Tabs>
+            </Tab>
           </KeycloakTabs>
         </FormProvider>
       </PageSection>

src/realm-settings/messages.ts

@@ -190,6 +190,18 @@ export default {
     emailVerification: "Email Verification",
     idpAccountEmailVerification: "IdP account email verification",
     executeActions: "Execute actions",
+    clientPolicies: "Client policies",
+    profiles: "Profiles",
+    policies: "Policies",
+    clientPoliciesProfilesHelpText:
+      "Client Profile allows to setup set of executors, which are enforced for various actions done with the client. Actions can be admin actions like creating or updating client, or user actions like authentication to the client.",
+    clientPoliciesProfiles: "Client Policies Profiles",
+    clientPoliciesPoliciesHelpText:
+      "Client Policy allows to bind client profiles with various conditions to specify when exactly is enforced behavior specified by executors of the particular client profile.",
+    clientPoliciesPolicies: "Client Policies Policies",
+    clientPoliciesTab: "Client policies tab",
+    clientProfilesSubTab: "Client profiles subtab",
+    clientPoliciesSubTab: "Client policies subtab",
     tokens: "Tokens",
     key: "Key",
     value: "Value",

src/realm-settings/routes/RealmSettings.ts

@@ -12,7 +12,8 @@ export type RealmSettingsTab =
   | "events"
   | "securityDefences"
   | "sessions"
-  | "tokens";
+  | "tokens"
+  | "clientPolicies";
 
 export type RealmSettingsParams = {
   realm: string;