Form lib enhancements

[sebelga]

This PR adds several enhancements to the form lib that I have made while working on the docs. Mainly refactors, TS types, comments.

• Added Internal state interface to useForm

It is now possible to declare the internal state interface (I) when building the form.

interface MyForm {
  name: string;
};

interface MyFormInternal extends MyForm {
  showSettings: boolean;
}

const deserializer = (defaultValue: MyForm): MyFormInternal => {
  ...
};

const { form } = useForm<MyForm, MyFormInternal>({
  deserializer, // Typescript will fail if not returning the "MyFormInternal" interface
});

• Improve Typing for FormSchema

When providing a schema to a typed form, it validates that fields name are valid. None of the fields are required though.

interface MyForm {
  name: string;
  lastName: string;
}

// Can only contain "name" or "lastName" fields
const schema: FormSchema<MyForm> = {
  name: {}
};

• Refactor: renamed some vars
• Simplify bits of code
• Added field type to <UseMultiFields /> component

interface FieldsType {
  min: number;
  max: number;
}

// In JSX
<UseMultiFields<FieldsType> ... />

• Removed handler on the form public API (getFieldDefaultValue())

Fixes #60602

[elasticmachine]

Pinging @elastic/es-ui (Team:Elasticsearch UI)

[sebelga]

@patrykkopycinski Could you have a look at those 2 files. There are typings issue now that the FormSchema<T> is correctly typed. We can have a look together if you want. Cheers! 👍

• L78 x-pack/plugins/security_solution/public/cases/components/edit_connector/index.tsx
• L192 x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx

[patrykkopycinski]

@elasticmachine merge upstream

[jloleysens]

Tested ingest processors pipeline locally, and did not spot any regressions!

Great work @sebelga ! I left non-blocking comments in the code.

[jloleysens]

nit; I would phrase this as:

/** Flag that indicates if the form is valid. If `undefined` then form validation has not been checked yet. */

I think the TS boolean value is self-explanatory for the other states.

[jloleysens]

typo: handlers -> handler

[jloleysens]

I know we discussed some of this offline, but seeing it now I am wondering if FieldConfig could be typed as:

interface FieldConfig<ValueType = unknown, T extends FormData = any> {}

Then when it is used on individual fields we can write:

const ignoreFailureConfig: FieldConfig<boolean> = {
 ...
}

I'm not certain how often we will set a type for FieldData when using this type directly, I can see it provides types for the validator, but perhaps the helpers/validators we provide cover a large number of cases already?

[sebelga]

Yes it makes total sense, I will update it 👍

[sebelga]

Thanks for the review @jloleysens ! I made your suggested change to FieldConfig<T>, thanks for reminding me that 👍

[sebelga]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 9de195d

Metrics [docs]

async chunks size

id	before	after	diff
indexManagement	1.6MB	1.6MB	-15.0B
securitySolution	10.3MB	10.3MB	+20.0B
total			+5.0B

page load bundle size

id	before	after	diff
esUiShared	303.2KB	304.3KB	+1.1KB

History

• 💔 Build #79597 failed efaad11
• 💚 Build #79578 succeeded 7ce1049
• 💔 Build #79499 failed 859517f
• 💔 Build #79098 failed 5ef514c
• 💚 Build #78427 succeeded cfb1cf6

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream