Merge branch 'master' into dashboard-taskrun-json

dashboard/package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.1.1",
     "@tanstack/react-query": "^5.37.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -27,9 +28,12 @@
     "lucide-react": "^0.379.0",
     "next": "^14.2.4",
     "next-auth": "^4.24.7",
+    "next-themes": "^0.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.2",
     "reactflow": "^11.11.3",
+    "sonner": "^1.7.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "use-debounce": "^10.0.0"
@@ -53,6 +57,6 @@
     "prettier-plugin-tailwindcss": "^0.5.14",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",
-    "typescript": "^5"
+    "typescript": "^5.6.3"
   }
 }

dashboard/src/app/(authenticated)/(diagram)/components/Forms/WfRunForm.tsx

@@ -0,0 +1,46 @@
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { ThreadVarDef } from 'littlehorse-client/proto'
+import { forwardRef } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { FormFields } from './components/FormFields'
+
+export type FormValues = {
+  [key: string]: unknown
+}
+
+type Prop = {
+  wfSpecVariables: ThreadVarDef[]
+  onSubmit: (data: FormValues) => void
+}
+
+// eslint-disable-next-line react/display-name
+export const WfRunForm = forwardRef<HTMLFormElement, Prop>(({ wfSpecVariables, onSubmit }, ref) => {
+  const methods = useForm()
+  const { register, handleSubmit, formState } = methods
+
+  const onSubmitForm = (data: FormValues) => {
+    onSubmit(data)
+  }
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmitForm)} ref={ref}>
+        <div>
+          <Label htmlFor="custom-id">Custom WfRun Id</Label>
+          <Input
+            type="text"
+            className="mb-4 mt-1"
+            id="custom-id"
+            {...register('custom-id-wfRun-flow')}
+            placeholder="Enter string value"
+          />
+        </div>
+        {!!wfSpecVariables?.length &&
+          wfSpecVariables.map((variable: ThreadVarDef) => (
+            <FormFields key={variable.varDef?.name} variables={variable} register={register} formState={formState} />
+          ))}
+      </form>
+    </FormProvider>
+  )
+})

dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormFields.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react'
+import { FormComponent } from './formType'
+import { VariableType, ThreadVarDef } from 'littlehorse-client/proto'
+import { FieldValues, UseFormRegister, FormState } from 'react-hook-form'
+
+type Prop = {
+  variables: ThreadVarDef
+  register: UseFormRegister<FieldValues>
+  formState: FormState<FieldValues>
+}
+export const FormFields: FC<Prop> = props => {
+  const type = props.variables?.varDef?.type as VariableType
+  if (!type) return
+  const Component = FormComponent[type]
+  return <Component {...props} />
+}

dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormInput.tsx

@@ -0,0 +1,77 @@
+import { VARIABLE_TYPES } from '@/app/constants'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { FormFieldProp } from '@/types'
+import { VariableType } from 'littlehorse-client/proto'
+import { CircleAlert } from 'lucide-react'
+import { FC, useState } from 'react'
+import { accessLevels } from '../../../wfSpec/[...props]/components/Variables'
+
+export const FormInput: FC<FormFieldProp> = props => {
+  const [isDisabled, setIsDisabled] = useState(false)
+  if (!props.variables?.varDef?.name) return null
+
+  const {
+    variables: {
+      varDef: { type, name },
+      required,
+      accessLevel,
+    },
+    register,
+    formState: { errors },
+  } = props
+
+  const variableToType = (variable: VariableType) => {
+    switch (variable) {
+      case VariableType.INT:
+        return 'number'
+      case VariableType.DOUBLE:
+        return 'number'
+      case VariableType.BYTES:
+        return 'number'
+      case VariableType.STR:
+        return 'text'
+      default:
+        return 'text'
+    }
+  }
+
+  const setValue = (value: number | string) => {
+    if (value === null) return value
+    return variableToType(type) === 'number' ? parseFloat(value?.toString()) || undefined : value || undefined
+  }
+
+  return (
+    <div>
+      <div className="mb-2 flex justify-between">
+        <Label htmlFor={name} className="flex items-center gap-2">
+          {name}
+          <span className="rounded bg-green-300 p-1 text-xs">{accessLevels[accessLevel]}</span>
+          {required ? (
+            <span className="rounded bg-red-300 p-1 text-xs">Required</span>
+          ) : (
+            <span className="rounded bg-gray-300 p-1 text-xs">Optional</span>
+          )}
+        </Label>
+      </div>
+      <Input
+        type={variableToType(type)}
+        className={errors[name] ? 'mb-1 mt-2 border-red-700' : 'mb-4 mt-1'}
+        id={name}
+        step={type === VariableType.DOUBLE ? '0.01' : undefined}
+        disabled={isDisabled}
+        placeholder={`Enter ${VARIABLE_TYPES[type]?.toLowerCase()} value`}
+        {...register(name, {
+          required: required ? `${name} is required` : false,
+          setValueAs: setValue,
+        })}
+      />
+      {errors[name] && (
+        <p className="mb-3 flex items-center gap-1 text-sm text-red-700">
+          <CircleAlert size={16} />
+          {errors[name]?.message}
+        </p>
+      )}
+    </div>
+  )
+}