[4376] Add support for URLs to specify a selection of elements in the workbench

[flatombe]

Can you please review this PR and let me know:

• If the implementation looks OK
• What kind of tests do you expect for this feature?

Note: there are 2 small remaining issues I found while testing:

1. Selecting a representation leads to an empty selection
   This is an existing issue which impacts us a bit. I believe it's out of the scope of this PR as it already existed and is not blocking, but it could be good to have a dedicated issue to track this.
   To reproduce:

   • Start from a diagram with a selection of elements which are displayed
     in the diagram (they can be selected either in the diagram or through
     the 'Explorer' tree)
   • Then select either the diagram representation in the 'Explorer' view, or the diagram background.
   • => The selection gets set to the diagram representation (briefly), but quickly evolves into an empty selection => KO
   • Notice how this does not occur when starting from a selection of elements that are not shown in the diagram, or from an empty selection.
   • I believe the issue is that currently selecting a representation when it is opened 'resets' the selection to an empty one. I think the correct behavior would be to keep the representation in the selection.

2. Graphical selection in diagram is not performed when resolving a URL with a selection.
   This one is a bit more annoying.
   To reproduce:

   • Open a diagram representation, select an element (from the 'Explorer' view or the diagram) that is represented in the diagram.
   • Observe that the corresponding graphical element (e.g. node) is selected graphically because its border is in purple.
   • Reload the URL
   • Observe that the workbench selection gets set appropriately (the selected element in the 'Explorer' has the pink background)
   • But the graphical selection is not performed. => KO.
   • Expectation: the graphical node must be selected as well.
   • I think the issue stems from the effect in useDiagramSelection that depends on selection. When it is executed for the first time, the diagram does not yet have its nodes and edges so nothing gets selected. Adding a dependency from this effect to the getNodes and getEdges leads to flickering between the current and previous selections.

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?

• Open a project
• Select element(s) like documents, semantic elements or representations from the workbench (e.g. in 'Explorer' view or in a representation).
• Observe that the URL changes as the workbench selection evolves.
• Observe that loading such a URL does set the workbench selection as specified.

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