Form lib enhancements by sebelga · Pull Request #78588 · elastic/kibana

sebelga · 2020-09-28T13:42:25Z

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

… (2)

The typings for the FromSchema was too permissive and did not limit the keys to the form interface provided. Fixes elastic#60602

elasticmachine · 2020-09-28T13:43:20Z

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

…ents

sebelga · 2020-09-29T18:07:13Z

@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 · 2020-09-30T17:58:39Z

@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 · 2020-10-01T11:24:23Z

src/plugins/es_ui_shared/static/forms/hook_form_lib/types.ts

  readonly isSubmitted: boolean;
+  /** Flag that indicates if the form is being submitted. */
  readonly isSubmitting: boolean;
+  /** Flag that indicates if the form is valid. It can have three values: `true | false | undefined`. */


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 · 2020-10-01T11:25:06Z

src/plugins/es_ui_shared/static/forms/hook_form_lib/types.ts

+  /** The form id. If none was provided, "default" will be returned. */
  readonly id: string;
+  /**
+   * This handlers submits the form and returns its data and validity. If the form is not valid, the data will be `null`


typo: handlers -> handler

jloleysens · 2020-10-01T11:38:52Z

...essors_editor/components/processor_form/processors/common_fields/common_processor_fields.tsx

 import { to, from, EDITOR_PX_HEIGHT } from '../shared';

-const ignoreFailureConfig: FieldConfig = {
+const ignoreFailureConfig: FieldConfig<any, any> = {


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?

Yes it makes total sense, I will update it 👍

…ents

…ore the Form

sebelga · 2020-10-02T10:33:33Z

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

…ents

sebelga · 2020-10-05T14:10:54Z

@elasticmachine merge upstream

kibanamachine · 2020-10-05T15:42:13Z

💚 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

Co-authored-by: Patryk Kopycinski <contact@patrykkopycinski.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

sebelga added 14 commits September 28, 2020 14:45

[Form lib] Refactor "errorDisplayDelay" --> "valueChangeDebounceTime"

bda8d89

[Form lib] Don't expose "getFieldDefaultValue" in the form API

07edeea

[Form lib] Add FormHook TS docs

04dbf89

[Form lib] Refactor "errorDisplayDelay" --> "valueChangeDebounceTime"…

6ddde67

… (2)

[Form lib] Improve TS typing for FormSchema

1c91998

The typings for the FromSchema was too permissive and did not limit the keys to the form interface provided. Fixes elastic#60602

[Form lib] Add TS interface for internal form state

5e1a926

[Form lib] Remove path parameter from the FieldConfig object

3335121

[Form lib]: Update.TS type for FieldConfig.type

d89179e

Cleanup UseField.tsx

007acc1

[Form lib] Don't set the validity to undefined before validating

8d6e8f1

[Form lib] Export FormArrayField interface from use_array.ts

933413f

[Form lib] Add typing to UseMultiField

f7686bf

[Form lib] Add JsonEditorField to the FIELD_TYPES

5a60a64

[Form lib] Don't force to declare all form fields in schema

2fcb769

sebelga requested review from a team as code owners September 28, 2020 13:42

sebelga requested a review from jloleysens September 28, 2020 13:42

sebelga added release_note:skip Skip the PR/issue when compiling release notes Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more t// v7.10.0 v8.0.0 labels Sep 28, 2020

sebelga mentioned this pull request Sep 28, 2020

[Form lib] Remove flat "raw" state #78589

Closed

3 tasks

sebelga added 2 commits September 29, 2020 19:47

Fix TS issues

e06198f

Merge remote-tracking branch 'upstream/master' into form-lib-enhancem…

49845b2

…ents

sebelga and others added 2 commits September 30, 2020 14:01

Fix TS issue

5ad3e39

fix types

324a3a6

Merge branch 'master' into form-lib-enhancements

cfb1cf6

rylnd mentioned this pull request Oct 1, 2020

[Security Solution][Detections] EQL Validation #77493

Merged

4 tasks

patrykkopycinski approved these changes Oct 1, 2020

View reviewed changes

jloleysens approved these changes Oct 1, 2020

View reviewed changes

sebelga added 3 commits October 2, 2020 12:08

Merge remote-tracking branch 'upstream/master' into form-lib-enhancem…

7def426

…ents

Update FieldConfig interface to accept first the field value type bef…

24e358d

…ore the Form

Update comment copy

5ef514c

sebelga added 4 commits October 5, 2020 09:25

Merge remote-tracking branch 'upstream/master' into form-lib-enhancem…

06836c2

…ents

Add internal field value type

859517f

Fix TS issues

7ce1049

Merge remote-tracking branch 'upstream/master' into form-lib-enhancem…

efaad11

…ents

Merge branch 'master' into form-lib-enhancements

9de195d

sebelga merged commit 0d378e4 into elastic:master Oct 5, 2020

sebelga deleted the form-lib-enhancements branch October 5, 2020 16:09

sebelga mentioned this pull request Oct 5, 2020

[7.x] Form lib enhancements (#78588) #79494

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Form lib enhancements#78588

Form lib enhancements#78588
sebelga merged 27 commits intoelastic:masterfrom
sebelga:form-lib-enhancements

sebelga commented Sep 28, 2020

Uh oh!

elasticmachine commented Sep 28, 2020

Uh oh!

sebelga commented Sep 29, 2020

Uh oh!

patrykkopycinski commented Sep 30, 2020

Uh oh!

jloleysens left a comment

Uh oh!

jloleysens Oct 1, 2020

Uh oh!

jloleysens Oct 1, 2020

Uh oh!

jloleysens Oct 1, 2020

Uh oh!

sebelga Oct 2, 2020

Uh oh!

sebelga commented Oct 2, 2020

Uh oh!

sebelga commented Oct 5, 2020

Uh oh!

kibanamachine commented Oct 5, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

sebelga commented Sep 28, 2020

Uh oh!

elasticmachine commented Sep 28, 2020

Uh oh!

sebelga commented Sep 29, 2020

Uh oh!

patrykkopycinski commented Sep 30, 2020

Uh oh!

jloleysens left a comment

Choose a reason for hiding this comment

Uh oh!

jloleysens Oct 1, 2020

Choose a reason for hiding this comment

Uh oh!

jloleysens Oct 1, 2020

Choose a reason for hiding this comment

Uh oh!

jloleysens Oct 1, 2020

Choose a reason for hiding this comment

Uh oh!

sebelga Oct 2, 2020

Choose a reason for hiding this comment

Uh oh!

sebelga commented Oct 2, 2020

Uh oh!

sebelga commented Oct 5, 2020

Uh oh!

kibanamachine commented Oct 5, 2020

💚 Build Succeeded

Metrics [docs]

async chunks size

page load bundle size

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants