Add new ProviderConfigProperty type for URLs in Admin Console (#27743)

Closes #27673

Signed-off-by: Nicola Beghin <nicolabeghin@gmail.com>

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>
+  );
+};

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 =>

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);
+}

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;