From 3d1c20b4a5f1d2d77ca9cf60446557c16e061962 Mon Sep 17 00:00:00 2001
From: Nicola Beghin <nicolabeghin@gmail.com>
Date: Tue, 14 May 2024 11:34:49 +0200
Subject: [PATCH] Add new `ProviderConfigProperty` type for URLs in Admin
 Console (#27743)

Closes #27673

Signed-off-by: Nicola Beghin <nicolabeghin@gmail.com>
---
 .../src/components/dynamic/UrlComponent.tsx   | 30 +++++++++++++++++++
 .../src/components/dynamic/components.ts      |  3 ++
 .../src/components/dynamic/url-component.css  |  3 ++
 .../provider/ProviderConfigProperty.java      |  5 ++++
 4 files changed, 41 insertions(+)
 create mode 100644 js/apps/admin-ui/src/components/dynamic/UrlComponent.tsx
 create mode 100644 js/apps/admin-ui/src/components/dynamic/url-component.css

diff --git a/js/apps/admin-ui/src/components/dynamic/UrlComponent.tsx b/js/apps/admin-ui/src/components/dynamic/UrlComponent.tsx
new file mode 100644
index 0000000000..3c05cd45a6
--- /dev/null
+++ b/js/apps/admin-ui/src/components/dynamic/UrlComponent.tsx
@@ -0,0 +1,30 @@
+import { FormGroup } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+
+import { HelpItem } from "@keycloak/keycloak-ui-shared";
+import { useFormContext, useWatch } from "react-hook-form";
+import type { ComponentProps } from "./components";
+import { FormattedLink } from "../external-link/FormattedLink";
+
+import "./url-component.css";
+
+export const UrlComponent = ({ name, label, helpText }: ComponentProps) => {
+  const { t } = useTranslation();
+  const { control } = useFormContext();
+  const { value } = useWatch({
+    control,
+    name: name!,
+    defaultValue: "",
+  });
+
+  return (
+    <FormGroup
+      label={t(label!)}
+      fieldId={name!}
+      labelIcon={<HelpItem helpText={t(helpText!)} fieldLabelId={`${label}`} />}
+      className="keycloak__identity-providers__url_component"
+    >
+      <FormattedLink title={t(helpText!)} href={value} isInline />
+    </FormGroup>
+  );
+};
diff --git a/js/apps/admin-ui/src/components/dynamic/components.ts b/js/apps/admin-ui/src/components/dynamic/components.ts
index f860088f4c..0d9a5a545d 100644
--- a/js/apps/admin-ui/src/components/dynamic/components.ts
+++ b/js/apps/admin-ui/src/components/dynamic/components.ts
@@ -14,6 +14,7 @@ import { RoleComponent } from "./RoleComponent";
 import { ScriptComponent } from "./ScriptComponent";
 import { StringComponent } from "./StringComponent";
 import { TextComponent } from "./TextComponent";
+import { UrlComponent } from "./UrlComponent";
 import { UserProfileAttributeListComponent } from "./UserProfileAttributeListComponent";
 
 export type ComponentProps = Omit<ConfigPropertyRepresentation, "type"> & {
@@ -37,6 +38,7 @@ const ComponentTypes = [
   "MultivaluedString",
   "File",
   "Password",
+  "Url",
 ] as const;
 
 export type Components = (typeof ComponentTypes)[number];
@@ -58,6 +60,7 @@ export const COMPONENTS: {
   MultivaluedString: MultiValuedStringComponent,
   File: FileComponent,
   Password: PasswordComponent,
+  Url: UrlComponent,
 } as const;
 
 export const isValidComponentType = (value: string): value is Components =>
diff --git a/js/apps/admin-ui/src/components/dynamic/url-component.css b/js/apps/admin-ui/src/components/dynamic/url-component.css
new file mode 100644
index 0000000000..fb31930a8e
--- /dev/null
+++ b/js/apps/admin-ui/src/components/dynamic/url-component.css
@@ -0,0 +1,3 @@
+.keycloak__identity-providers__url_component > .pf-v5-c-form__group-control {
+  padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
+}
diff --git a/server-spi/src/main/java/org/keycloak/provider/ProviderConfigProperty.java b/server-spi/src/main/java/org/keycloak/provider/ProviderConfigProperty.java
index 4e7b88ad15..337ae129f4 100755
--- a/server-spi/src/main/java/org/keycloak/provider/ProviderConfigProperty.java
+++ b/server-spi/src/main/java/org/keycloak/provider/ProviderConfigProperty.java
@@ -68,6 +68,11 @@ public class ProviderConfigProperty {
      */
     public static final String MAP_TYPE ="Map";
 
+    /**
+     * URL field
+     */
+    public static final String URL_TYPE ="Url";
+
     protected String name;
     protected String label;
     protected String helpText;