[Form lib] Add validations prop to UseArray and expose "moveItem" handler

[sebelga]

This PR enhances the <UseArray /> component and add a validations prop that can be provided to validate the array.

This enhancement is required for the ingest node pipelines "Grok" processor (#76533).

const patternsLengthValidations = [{
  validator: ({ value }) => {
    // The value are the "items" passed down in the children func
    if (value.length === 0) {
      return {
        message: 'You need to add at least one item',
      };
    }
  }
}];

export const MyComponent = () => {
  return (
    <UseArray path="patterns" validations={patternsLengthValidations}>
      {({ error, items, addItem, removeItem, form }) => {
        // error (string | null) is any validation message that came back
        // The form object is also returned so the consumer can decided _when_
        // to display the error (e.g. form.isSubmitted)
      }}
    </UseArray>
  );
};

This PR also includes a moveItem handler to reorder the array items. This was originally added by @jloleysens, I opted to not create a dependency on the @elastic/eui for the reordering.

export const MyComponent = () => {
  return (
    <UseArray path="patterns" validations={patternsLengthValidations}>
      {({ items, addItem, removeItem, moveItem }) => {
        // To reorder the item we will probably use the <EuiDragDropContext /> and <EuiDroppable />
        const onDragEnd = ({ source, destination }) => {
          if (source && destination) {
            moveItem(source.index, destination.index);
          }
        };
		
        return (
          <EuiDragDropContext onDragEnd={onDragEnd}>
            <EuiDroppable droppableId="1">
              {items.map(item => (
                ...
              ))}
            </EuiDroppable>
		  </EuiDragDropContext>
        );
      }}
    </UseArray>
  );
};

[elasticmachine]

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

[jloleysens]

Great work @sebelga ! We spoke offline and I am happy with these changes, also tested locally with the changes I have over here #76533.

Happy for this to be merged.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: afef765

Build metrics

page load bundle size

id	value	diff	baseline
esUiShared	995.2KB	+985.0B	994.2KB

History

• 💔 Build #73133 failed daab129

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