[releng] Bump to @xyflow/react 12.10.1

[mcharfadi]

Pull request template

General purpose

What is the main goal of this pull request?

• Bug fixes
• New features
• Documentation
• Cleanup
• Tests
• Build / releng

Project management

• Has the pull request been added to the relevant project and milestone? (Only if you know that your work is part of a specific iteration such as the current one)
• Have the priority: and pr: labels been added to the pull request? (In case of doubt, start with the labels priority: low and pr: to review later)
• Have the relevant issues been added to the pull request?
• Have the relevant labels been added to the issues? (area:, difficulty:, type:)
• Have the relevant issues been added to the same project and milestone as the pull request?
• Has the CHANGELOG.adoc been updated to reference the relevant issues?
• Have the relevant API breaks been described in the CHANGELOG.adoc? (Including changes in the GraphQL API)
• In case of a change with a visual impact, are there any screenshots in the CHANGELOG.adoc? For example in doc/screenshots/2022.5.0-my-new-feature.png

Architectural decision records (ADR)

• Does the title of the commit contributing the ADR start with [doc]?
• Are the ADRs mentioned in the relevant section of the CHANGELOG.adoc?

Dependencies

• Are the new / upgraded dependencies mentioned in the relevant section of the CHANGELOG.adoc?
• Are the new dependencies justified in the CHANGELOG.adoc?

Frontend

This section is not relevant if your contribution does not come with changes to the frontend.

General purpose

• Is the code properly tested? (Plain old JavaScript tests for business code and tests based on React Testing Library for the components)

Typing

We need to improve the typing of our code, as such, we require every contribution to come with proper TypeScript typing for both changes contributing new files and those modifying existing files.
Please ensure that the following statements are true for each file created or modified (this may require you to improve code outside of your contribution).

• Variables have a proper type
• Functions’ arguments have a proper type
• Functions’ return type are specified
• Hooks are properly typed:
  • useMutation<DATA_TYPE, VARIABLE_TYPE>(…)
  • useQuery<DATA_TYPE, VARIABLE_TYPE>(…)
  • useSubscription<DATA_TYPE, VARIABLE_TYPE>(…)
  • useMachine<CONTEXT_TYPE, EVENTS_TYPE>(…)
  • useState<STATE_TYPE>(…)
• All components have a proper typing for their props
• No useless optional chaining with ?. (if the GraphQL API specifies that a field cannot be null, do not treat it has potentially null for example)
• Nullable values have a proper type (for example let diagram: Diagram | null = null;)

Backend

This section is not relevant if your contribution does not come with changes to the backend.

General purpose

• Are all the event handlers tested?
• Are the event processor tested?
• Is the business code (services) tested?
• Are diagram layout changes tested?

Architecture

• Are data structure classes properly separated from behavioral classes?
• Are all the relevant fields final?
• Is any data structure mutable? If so, please write a comment indicating why
• Are behavioral classes either stateless or side effect free?

Review

How to test this PR?

Please describe here the various use cases to test this pull request

• Has the Kiwi TCMS test suite been updated with tests for this contribution?

[mcharfadi]

This version of XYFlow brings a stronger typage of nodes so we can no longer use Node<NodeData, DiagramNodeType>

[sbegaudeau]

Why? I don't see any trace of such change on the changelog of ReactFlow. NodeProps seems to be still typed with both NodeData and NodeType.

[mcharfadi]

This is from 12.7.0 Improve typing for Nodes
We now have this error in some files :

Argument of type 'Node<NodeData>[]' is not assignable to parameter of type 'Node<NodeData, string>[]'.
  Type 'Node<NodeData>' is not assignable to type 'Node<NodeData, string>'.
    Type 'Node<NodeData>' is not assignable to type '{ type: string; }'.
      Types of property 'type' are incompatible.
        Type 'string | undefined' is not assignable to type 'string'.
          Type 'undefined' is not assignable to type 'string'.

This occurs when pushing a node typed as Node<NodeData> into an array typed as Node<NodeData, string>[] for example
I think that the easiest way to fix is to get rid of Node<NodeData, string> for typing nodes

[mcharfadi]

As a note not related to the bump.
The xyflow doc recommend to type the nodes like this :

export type FreeFormNodeType = Node<
  {
    imageURL: string | null;
    positionDependentRotation: boolean;
  } & NodeData,
  'freeFormNode'
>;

And to use a union type representing all types available

export type DiagramNodeType =
  | FreeFormNodeType
  | IconLabelNodeType
  | ListNodeType
  | EdgeAnchorNodeCreationHandlesType
  | EdgeAnchorNodeType;

Then use this union type when possible for example like this
const store = useStoreApi<DiagramNodeType, DiagramEdgeType>();
But this is a considerable change and I was not able to make it work

[sbegaudeau]

This occurs when pushing a node typed as Node<NodeData> into an array typed as Node<NodeData, string>[] for example
I think that the easiest way to fix is to get rid of Node<NodeData, string> for typing nodes

Why remove some typing information instead of fixing the code to ensure that we always have Node<NodeData, NodeType>?

[mcharfadi]

If we set the type of the node, this information should not be lost.

The issue is not there, the issue is that NodeType from xyflow is actually string | undefinied
See here

So with Node<NodeData> we are correctly typing like xyflow and with Node<NodeData, string> we are not

So an alternative fix would be to do :

export type DiagramNodeType = string | undefined;

export type DiagramNodeTypes = {
  [key in DiagramNodeType as string]: ComponentType<NodeProps>;
};

And to replace every Node<NodeData, string> with Node<NodeData, string | undefined>

Using Node<NodeData> seems easier

[sbegaudeau]

I understand that reactflow allows us to remove the type by making it optional with string | undefined, what I don't understand would be why we would like to do so since we have so much code with this type already.

In a similar fashion, React is fine with not having some type for useState and Apollo client is also fine with the lack of typing for useQuery and other hooks.

There are tons of example of TypeScript frameworks that are onboarding their consumers nicely without requiring everything to be strictly typed. In Sirius Web, we are constantly moving in a direction with additional safety checks so I don't see why, we should remove some existing typing.