From 55512443f03f165e38806b3d2986aec1c0e0c4bd Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Tue, 24 Sep 2024 04:14:40 +0200
Subject: [PATCH 1/2] Label: support restricting to an enum-like types

---
 frontend/src/components/InputFields/InputField.tsx |  2 +-
 frontend/src/components/InputFields/Label.tsx      |  2 +-
 frontend/src/components/InputFields/useLabel.ts    | 11 +++++++----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/InputFields/InputField.tsx b/frontend/src/components/InputFields/InputField.tsx
index 278a640..3305d47 100644
--- a/frontend/src/components/InputFields/InputField.tsx
+++ b/frontend/src/components/InputFields/InputField.tsx
@@ -24,7 +24,7 @@ export const InputField: FC<{ controls: InputFieldControls<any> }> = ({ controls
     case 'oneOf':
       return <SelectInput {...(controls as OneOfFieldControls<any>)} />
     case 'label':
-      return <Label {...(controls as unknown as LabelControls)} />
+      return <Label {...(controls as unknown as LabelControls<any>)} />
     case 'date':
       return <DateInput {...(controls as DateFieldControls)} />
     default:
diff --git a/frontend/src/components/InputFields/Label.tsx b/frontend/src/components/InputFields/Label.tsx
index fcd1691..b3979c5 100644
--- a/frontend/src/components/InputFields/Label.tsx
+++ b/frontend/src/components/InputFields/Label.tsx
@@ -6,7 +6,7 @@ import { WithVisibility } from './WithVisibility'
 import { WithLabelAndDescription } from './WithLabelAndDescription'
 import { WithValidation } from './WithValidation'
 
-export const Label: FC<LabelControls> = props => {
+export const Label: FC<LabelControls<any>> = props => {
   const { value, allProblems, formatter, renderer, classnames } = props
 
   const formattedValue = formatter ? formatter(value) : value
diff --git a/frontend/src/components/InputFields/useLabel.ts b/frontend/src/components/InputFields/useLabel.ts
index 24a0060..9d48a97 100644
--- a/frontend/src/components/InputFields/useLabel.ts
+++ b/frontend/src/components/InputFields/useLabel.ts
@@ -6,8 +6,8 @@ export type FormatterFunction<DataType> = (rawValue: DataType) => string
 
 export type RendererFunction<DataType> = (rawValue: DataType) => ReactNode
 
-export type LabelProps = Pick<
-  InputFieldProps<string>,
+export type LabelProps<DataType = string> = Pick<
+  InputFieldProps<DataType>,
   | 'name'
   | 'label'
   | 'description'
@@ -24,13 +24,16 @@ export type LabelProps = Pick<
   renderer?: RendererFunction<string>
 }
 
-export type LabelControls = Omit<InputFieldControls<string>, 'placeholder' | 'enabled' | 'whyDisabled'> & {
+export type LabelControls<DataType> = Omit<
+  InputFieldControls<DataType>,
+  'placeholder' | 'enabled' | 'whyDisabled'
+> & {
   classnames: string[]
   formatter: FormatterFunction<string> | undefined
   renderer: RendererFunction<string> | undefined
 }
 
-export const useLabel = (props: LabelProps): LabelControls => {
+export function useLabel<DataType = string>(props: LabelProps<DataType>): LabelControls<DataType> {
   const { classnames = [], formatter, renderer } = props
 
   const controls = useInputField(

From c7c82bf923384732acb641eb8b059733dd7a8e33 Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Tue, 24 Sep 2024 05:18:15 +0200
Subject: [PATCH 2/2] Form validation: properly pass down isStillFresh to
 validators

---
 frontend/src/components/InputFields/useInputField.ts | 4 ++--
 frontend/src/components/InputFields/util.ts          | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/InputFields/useInputField.ts b/frontend/src/components/InputFields/useInputField.ts
index 2b3e052..802a68a 100644
--- a/frontend/src/components/InputFields/useInputField.ts
+++ b/frontend/src/components/InputFields/useInputField.ts
@@ -267,7 +267,7 @@ export function useInputField<DataType>(
   const [validatorProgress, setValidatorProgress] = useState<number>()
   const [validationStatusMessage, setValidationStatusMessage] = useState<string | undefined>()
 
-  const validatorControls: ValidatorControls = {
+  const validatorControls: Pick<ValidatorControls, 'updateStatus'> = {
     updateStatus: ({ progress, message }) => {
       if (progress) setValidatorProgress(progress)
       if (message) setValidationStatusMessage(message)
@@ -314,7 +314,7 @@ export function useInputField<DataType>(
             : await validator(
                 cleanValue,
                 forceChange || !wasOK || lastValidatedData !== cleanValue,
-                validatorControls,
+                { ...validatorControls, isStillFresh },
                 params.reason,
               ) // Execute the current validators
 
diff --git a/frontend/src/components/InputFields/util.ts b/frontend/src/components/InputFields/util.ts
index 39bd692..40b7863 100644
--- a/frontend/src/components/InputFields/util.ts
+++ b/frontend/src/components/InputFields/util.ts
@@ -54,6 +54,7 @@ export function flatten<Data>(array: Data[][]): Data[] {
 export type AllProblems = Record<string, Problem[]>
 
 export type ValidatorControls = {
+  isStillFresh: () => boolean
   updateStatus: (status: { message?: string; progress?: number }) => void
 }