From 20ae31bff8c28cfdef24c76c2faf97e935c41b14 Mon Sep 17 00:00:00 2001
From: PrzZiomek2 <pzz64056@gmail.com>
Date: Thu, 28 Mar 2024 12:38:48 +0100
Subject: [PATCH] add url input for url jdd argument

Summary: Ref T2859

Reviewers: kuba-orlik

Reviewed By: kuba-orlik

Subscribers: jenkins-user

Maniphest Tasks: T2859

Differential Revision: https://hub.sealcode.org/D1386
---
 .../routes/component-preview/component-input.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/back/routes/component-preview/component-input.tsx b/src/back/routes/component-preview/component-input.tsx
index f391ff4..980a7c5 100644
--- a/src/back/routes/component-preview/component-input.tsx
+++ b/src/back/routes/component-preview/component-input.tsx
@@ -1,4 +1,4 @@
-import { Enum, Image, List, Structured, Table, TableData } from "@sealcode/jdd";
+import { ComponentArguments, Enum, Image, List, Structured, Table, TableData } from "@sealcode/jdd";
 import { ComponentArgument } from "@sealcode/jdd";
 import { StatefulPage } from "@sealcode/sealgen";
 import { TempstreamJSX } from "tempstream";
@@ -10,6 +10,9 @@ import { ComponentInputStructured } from "./component-input-structured.js";
 import { ComponentInputTable } from "./component-input-table.js";
 import { printArgPath } from "./print-arg-path.js";
 
+export const actionName = "Components";
+const absoluteUrlPattern = "http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)";
+
 export function ComponentInput<State extends ComponentPreviewState, T>({
 	state,
 	arg_path,
@@ -30,6 +33,12 @@ export function ComponentInput<State extends ComponentPreviewState, T>({
 		return ComponentInputList({ state, arg_path, arg, value: value as T[], page });
 	}
 
+	const argType = arg.getTypeName();
+	const isUrlAbsolute =
+	arg instanceof ComponentArguments.URL &&
+	arg.urlType === "absolute";
+	const inputType = isUrlAbsolute ? "url" : "text";
+
 	if (arg instanceof Structured) {
 		return ComponentInputStructured({
 			state,
@@ -74,7 +83,7 @@ export function ComponentInput<State extends ComponentPreviewState, T>({
 		<div>
 			<label>
 				{arg_path.at(-1) || ""}
-				{arg.getTypeName() == "markdown" ? (
+				{argType == "markdown" ? (
 					<textarea
 						name={`$.component_args${printArgPath(arg_path)}`}
 						onblur={page.rerender()}
@@ -84,10 +93,11 @@ export function ComponentInput<State extends ComponentPreviewState, T>({
 					</textarea>
 				) : (
 					<input
-						type="text"
+						type={inputType}
 						name={`$.component_args${printArgPath(arg_path)}`}
 						value={value as string}
 						size="40"
+						pattern={isUrlAbsolute ? absoluteUrlPattern : undefined}
 					/>
 				)}
 			</label>