fix: indicate when internal:variable input field has invalid values #…

…3224 #3188
bitfocus · Jan 21, 2025 · d1dfd92 · d1dfd92
1 parent d394d5e
commit d1dfd92
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/webui/src/Components/DropdownInputField.tsx b/webui/src/Components/DropdownInputField.tsx
@@ -12,6 +12,7 @@ export const MenuPortalContext = createContext<HTMLElement | null>(null)
 type AsType<Multi extends boolean> = Multi extends true ? DropdownChoiceId[] : DropdownChoiceId
 
 interface DropdownInputFieldProps<Multi extends boolean> {
+	className?: string
 	label?: React.ReactNode
 	choices: DropdownChoice[] | Record<string, DropdownChoice>
 	allowCustom?: boolean
@@ -34,6 +35,7 @@ interface DropdownChoiceInt {
 }
 
 export const DropdownInputField = memo(function DropdownInputField<Multi extends boolean>({
+	className,
 	label,
 	choices,
 	allowCustom,
@@ -202,14 +204,23 @@ export const DropdownInputField = memo(function DropdownInputField<Multi extends
 	)
 	const formatCreateLabel = useCallback((v: string | number) => `Use "${v}"`, [])
 
+	console.log(
+		'a',
+		isValueValid(isMultiple && currentValue ? (currentValue.map((v) => v.value) ?? []) : currentValue[0]?.value),
+		regex,
+		compiledRegex
+	)
 	return (
 		<div
-			className={classNames({
-				'select-tooltip': true,
-				'select-invalid': !isValueValid(
-					isMultiple && currentValue ? (currentValue.map((v) => v.value) ?? []) : currentValue[0]?.value
-				),
-			})}
+			className={classNames(
+				{
+					'select-tooltip': true,
+					'select-invalid': !isValueValid(
+						isMultiple && currentValue ? (currentValue.map((v) => v.value) ?? []) : currentValue[0]?.value
+					),
+				},
+				className
+			)}
 			title={tooltip}
 		>
 			{helpText ? (

diff --git a/webui/src/Controls/InternalModuleField.tsx b/webui/src/Controls/InternalModuleField.tsx
@@ -323,14 +323,18 @@ const InternalVariableDropdown = observer(function InternalVariableDropdown({
 		return choices
 	}, [baseVariableDefinitions])
 
+	const hasMatch = choices.find((c) => c.id === value)
+
 	return (
 		<DropdownInputField
+			className={hasMatch ? '' : 'select-warning'}
 			label={label}
 			disabled={disabled}
 			value={value}
 			choices={choices}
 			multiple={false}
 			setValue={setValue}
+			regex="/^([\w-_]+):([a-zA-Z0-9-_\.]+)$/"
 			allowCustom /* Allow specifying a variable which doesnt currently exist, perhaps as something is offline */
 		/>
 	)

diff --git a/webui/src/scss/_controls.scss b/webui/src/scss/_controls.scss
@@ -107,6 +107,12 @@ label.disabled {
 	}
 }
 
+.select-warning {
+	.select-control__control {
+		box-shadow: orange 0 0 0 1px;
+	}
+}
+
 .select-control__menu-portal {
 	z-index: 1200 !important;
 }