feat(editor): support configuring param evaluation

swisscom · Oct 10, 2024 · fb7b8c0 · fb7b8c0
1 parent 928d196
commit fb7b8c0
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 27 deletions.
diff --git a/src/main/frontend/model/Script.ts b/src/main/frontend/model/Script.ts
@@ -1,10 +1,12 @@
 import { LogLevel } from './LogLevel';
 import { Hop } from './hops';
 
+type ParameterEvaluation = 'STRING' | 'LINES' | 'TEMPLATE' | 'EXPRESSION';
 export interface Parameter {
 	name: string;
 	defaultValue: string;
 	type: string;
+	evaluation: ParameterEvaluation;
 }
 
 export interface Script {

diff --git a/src/main/frontend/sections/RunControls.tsx b/src/main/frontend/sections/RunControls.tsx
@@ -7,9 +7,17 @@ const Elm = styled('form', React.forwardRef)`
 	grid-auto-flow: row;
 	.arguments {
 		display: grid;
-		grid-template-columns: 1fr 3fr;
-		> input {
-			width: auto;
+		gap: 6px;
+		grid-template-columns: 1fr 2fr;
+		grid-auto-flow: row;
+		> label {
+			display: contents;
+			> span {
+				align-content: center;
+			}
+			> input {
+				width: auto;
+			}
 		}
 	}
 	> .options {
@@ -41,7 +49,8 @@ export const RunControls: FC<{ runWith: (data: FormData) => Promise<void> }> = (
 						{script.parameters.map(({ name, type }) => (
 							<React.Fragment key={name}>
 								<label>
-									{name}:<input is="coral-textfield" type={type} name={name} />
+									<span>{name}:</span>
+									<input is="coral-textfield" type={type} name={name} />
 								</label>
 							</React.Fragment>
 						))}

diff --git a/src/main/frontend/sections/ScriptEditor.tsx b/src/main/frontend/sections/ScriptEditor.tsx
@@ -10,10 +10,16 @@ const Elm = styled('div')`
 	grid-auto-rows: min-content 1fr min-content;
 	overflow: auto;
 	.parameters {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
 		> .param {
 			display: flex;
 			gap: 6px;
 		}
+		> button {
+			align-self: end;
+		}
 	}
 `;
 
@@ -26,6 +32,7 @@ export const ScriptEditor: FC = () => {
 			name: `param_${script.parameters.length + 1}`,
 			defaultValue: '',
 			type: 'text',
+			evaluation: 'STRING',
 		});
 		scriptContext.commit();
 	}

diff --git a/src/main/frontend/sections/editor/Parameter.tsx b/src/main/frontend/sections/editor/Parameter.tsx
@@ -30,22 +30,19 @@ export const Parameter: FC<{ param: Script['parameters'][0]; i: number }> = ({ i
 
 	return (
 		<Elm>
-			<label>
-				<span>Param {i + 1}: </span>
-				<input
-					is="coral-textfield"
-					placeholder="Name"
-					name="name"
-					value={name}
-					onChange={e => {
-						setName(e.target.value);
-					}}
-					onBlur={e => {
-						param.name = e.target.value;
-						scriptContext.commit();
-					}}
-				></input>
-			</label>
+			<input
+				is="coral-textfield"
+				placeholder="Name"
+				name="name"
+				value={name}
+				onChange={e => {
+					setName(e.target.value);
+				}}
+				onBlur={e => {
+					param.name = e.target.value;
+					scriptContext.commit();
+				}}
+			></input>
 			<input
 				is="coral-textfield"
 				placeholder="Default Value"
@@ -67,6 +64,16 @@ export const Parameter: FC<{ param: Script['parameters'][0]; i: number }> = ({ i
 				value={param.type}
 				onChange={val => (param.type = val)}
 			/>
+			<Select
+				list={[
+					['STRING', 'String'],
+					['LINES', 'Array of Lines'],
+					['TEMPLATE', 'JEXL String Template'],
+					['EXPRESSION', 'JEXL Expression'],
+				]}
+				value={param.evaluation}
+				onChange={val => (param.evaluation = val as typeof param.evaluation)}
+			/>
 			<button
 				is="coral-button"
 				icon="delete"

diff --git a/src/main/frontend/sections/editor/types/FallbackStep.tsx b/src/main/frontend/sections/editor/types/FallbackStep.tsx
@@ -1,11 +1,11 @@
 import React, { FC, useContext } from 'react';
 
-import { AnyHop, Hop } from '../../../model/hops';
+import { Hop } from '../../../model/hops';
 import { StepEditor } from '../../../widgets/StepEditor';
 import { ScriptContext } from '../../../App';
 import { CodeEditor } from '../../../widgets/CodeEditor';
 
-export const FallbackStep: FC<{ parentHops: Hop[]; hop: AnyHop }> = ({ parentHops, hop }) => {
+export const FallbackStep: FC<{ parentHops: Hop[]; hop: Hop }> = ({ parentHops, hop }) => {
 	const scriptContext = useContext(ScriptContext);
 
 	const { type: hopType, ...hopWithoutType } = hop;

diff --git a/src/main/frontend/widgets/StepEditor.tsx b/src/main/frontend/widgets/StepEditor.tsx
@@ -1,6 +1,6 @@
 import React, { FC, ReactNode, useContext } from 'react';
 
-import { AnyHop, Hop } from '../model/hops';
+import { Hop } from '../model/hops';
 import { styled } from 'goober';
 import { ScriptContext } from '../App';
 
@@ -167,7 +167,7 @@ const Elm = styled('div')`
 	}
 `;
 
-export const StepEditor: FC<{ parentHops: Hop[]; hop: AnyHop; title: string; children: ReactNode; pipeline?: ReactNode }> = ({
+export const StepEditor: FC<{ parentHops: Hop[]; hop: Hop; title: string; children: ReactNode; pipeline?: ReactNode }> = ({
 	parentHops,
 	hop,
 	title,
@@ -176,11 +176,11 @@ export const StepEditor: FC<{ parentHops: Hop[]; hop: AnyHop; title: string; chi
 }) => {
 	const scriptContext = useContext(ScriptContext);
 
-	const hopIndex = parentHops.indexOf(hop as Hop);
+	const hopIndex = parentHops.indexOf(hop);
 
 	function moveHop(isUp = false) {
 		parentHops.splice(hopIndex, 1);
-		parentHops.splice(hopIndex + (isUp ? -1 : 1), 0, hop as Hop);
+		parentHops.splice(hopIndex + (isUp ? -1 : 1), 0, hop);
 		scriptContext.commit();
 	}
 
@@ -206,7 +206,7 @@ export const StepEditor: FC<{ parentHops: Hop[]; hop: AnyHop; title: string; chi
 							is="coral-button"
 							icon="duplicate"
 							onClick={() => {
-								parentHops.splice(hopIndex, 0, hop as Hop);
+								parentHops.splice(hopIndex, 0, hop);
 								scriptContext.commit();
 							}}
 						></button>