Skip to content

Commit

Permalink
Revert "refactor(dashboard): optimize execute WfRun components"
Browse files Browse the repository at this point in the history
This reverts commit bfc0462.
  • Loading branch information
HazimAr committed Nov 25, 2024
1 parent d9c76c0 commit 25e86b1
Show file tree
Hide file tree
Showing 9 changed files with 171 additions and 144 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,35 +14,33 @@ type Prop = {
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={methods.handleSubmit(onSubmit)} ref={ref} className="space-y-4">
<form onSubmit={handleSubmit(onSubmitForm)} ref={ref}>
<div>
<div className="mb-2 flex justify-between">
<Label htmlFor="customWfRunId" className="center flex items-center gap-2">
Custom WfRun Id
<span className="rounded bg-gray-300 p-1 text-xs">Optional</span>
</Label>
</div>
<Input {...methods.register('customWfRunId')} type="text" placeholder="Enter custom WfRun Id" />
<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}
variable={variable}
register={methods.register}
formState={methods.formState}
/>
<FormFields key={variable.varDef?.name} variables={variable} register={register} formState={formState} />
))}
</form>
</FormProvider>
)
})

WfRunForm.displayName = 'WfRunForm'

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import { FormFieldProp } from '@/types'
import { FC } from 'react'
import React, { FC } from 'react'
import { FormComponent } from './formType'
import { VariableType, ThreadVarDef } from 'littlehorse-client/proto'
import { FieldValues, UseFormRegister, FormState } from 'react-hook-form'

export const FormFields: FC<FormFieldProp> = ({ variable: variables, register, formState }) => {
if (!variables?.varDef?.type) return null

const Component = FormComponent[variables.varDef.type]
return <Component variable={variables} register={register} formState={formState} />
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} />
}
Original file line number Diff line number Diff line change
@@ -1,43 +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 { FC } from 'react'
import { useFormContext } from 'react-hook-form'
import { BaseFormField } from './BaseFormField'
import { CircleAlert } from 'lucide-react'
import { FC, useState } from 'react'
import { accessLevels } from '../../../wfSpec/[...props]/components/Variables'

export const FormInput: FC<FormFieldProp> = props => {
const { register } = useFormContext()

if (!props.variable?.varDef?.name) return null
const [isDisabled, setIsDisabled] = useState(false)
if (!props.variables?.varDef?.name) return null

const {
variable: {
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 (
<BaseFormField variables={props.variable}>
<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={type === VariableType.DOUBLE || type === VariableType.INT ? 'number' : 'text'}
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: value => {
if (value === '') return undefined

if ((type === VariableType.DOUBLE || type === VariableType.INT) && value) {
return parseFloat(value)
}

return value
},
setValueAs: setValue,
})}
/>
</BaseFormField>
{errors[name] && (
<p className="mb-3 flex items-center gap-1 text-sm text-red-700">
<CircleAlert size={16} />
{errors[name]?.message}
</p>
)}
</div>
)
}
Original file line number Diff line number Diff line change
@@ -1,25 +1,33 @@
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { FormFieldProp } from '@/types'
import { CircleAlert } from 'lucide-react'
import { FC, useState } from 'react'
import { useFormContext } from 'react-hook-form'
import { BaseFormField } from './BaseFormField'
import { accessLevels } from '../../../wfSpec/[...props]/components/Variables'

export const FormSelect: FC<FormFieldProp> = props => {
const { register, setValue, getValues, trigger } = useFormContext()
const [isDisabled] = useState(false)
const {
register,
setValue,
formState: { errors },
getValues,
trigger,
} = useFormContext()
const [isDisabled, setIsDisabled] = useState(false)

if (!props.variable?.varDef?.name) return null
if (!props.variables?.varDef?.name) return null

const {
variable: {
variables: {
varDef: { name },
required,
accessLevel,
},
} = props

const handleChange = (value: string | null) => {
if (value === null) setValue(name, null)
else if (value === 'none') setValue(name, undefined)
const handleChange = (value: string) => {
if (value === 'none') setValue(name, undefined)
else {
const booleanValue = value === 'true'
setValue(name, booleanValue)
Expand All @@ -30,14 +38,25 @@ export const FormSelect: FC<FormFieldProp> = props => {
const value = getValues(name)

return (
<BaseFormField variables={props.variable}>
<div>
<div className="mb-2 flex justify-between">
<Label htmlFor={name} className="center 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>
<Select
value={value?.toString() || ''}
onValueChange={handleChange}
disabled={isDisabled}
{...register(name, { required: required ? `${name} is required` : false })}
>
<SelectTrigger id={name} className="mb-4 mt-1">
<SelectTrigger id={name} className={errors[name] ? 'mb-1 mt-1 border-red-700' : 'mb-4 mt-1'}>
<SelectValue placeholder="Select True or False" />
</SelectTrigger>
<SelectContent>
Expand All @@ -46,6 +65,12 @@ export const FormSelect: FC<FormFieldProp> = props => {
<SelectItem value="none">None</SelectItem>
</SelectContent>
</Select>
</BaseFormField>
{errors[name]?.message && (
<p className="mb-3 flex items-center gap-1 text-sm text-red-700">
<CircleAlert size={16} />
{String(errors[name]?.message)}
</p>
)}
</div>
)
}
Original file line number Diff line number Diff line change
@@ -1,27 +1,46 @@
import { VARIABLE_TYPES } from '@/app/constants'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { FormFieldProp } from '@/types'
import { FC } from 'react'
import { FC, useState } from 'react'

import { VARIABLE_TYPES } from '@/app/constants'
import { CircleAlert } from 'lucide-react'
import { useFormContext } from 'react-hook-form'
import { BaseFormField } from './BaseFormField'
import { accessLevels } from '../../../wfSpec/[...props]/components/Variables'
import { getValidation } from './validation'

export const FormTextarea: FC<FormFieldProp> = props => {
const { setValue, trigger, register } = useFormContext()

if (!props.variable?.varDef?.name) return null
const [isDisabled, setIsDisabled] = useState(false)
const { setValue, trigger } = useFormContext()

if (!props.variables?.varDef?.name) return
const {
variable: {
variables: {
varDef: { type, name },
accessLevel,
required,
},
register,
formState: { errors },
} = props

return (
<BaseFormField variables={props.variable}>
<div>
<div className="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>
<Textarea
className={errors[name] ? 'mb-1 mt-1 min-h-[120px] border-red-700' : 'mb-4 mt-1 rounded-xl'}
id={name}
disabled={isDisabled}
placeholder={`Enter ${VARIABLE_TYPES[type]?.toLowerCase()} value`}
{...register(name, {
required: required ? `${name} is required` : false,
Expand All @@ -33,6 +52,12 @@ export const FormTextarea: FC<FormFieldProp> = props => {
})}
defaultValue=""
/>
</BaseFormField>
{errors[name] && (
<p className="mb-3 flex items-center gap-1 text-sm text-red-700">
<CircleAlert size={16} />
{errors[name]?.message}
</p>
)}
</div>
)
}
Loading

0 comments on commit 25e86b1

Please sign in to comment.